seopport.log

문제상황클래스 예약 시스템을 구축하면서 예상치 못한 문제에 직면했다. <span st..

SSG 빌드 타임에 페이지를 만들어놓고 요청이 들어오면 만들어 둔 페이지를 전송해줌 SSR 사용자가 페이지를 요청할 때마다 서버에서 페이지를 새로 만들어서 줌 ++ 여기서 서버는 Next.js 자체 웹 서버 ISR SSG의 단점을 보완한 렌더링 방식 revalidate 시간이 10초라고 가정! 10초 동안 호출되는 모든 요청은 캐시된 데이터를 반환한다. => 10초동안 백만명이 접속해도 새로운 요청 X 10초가 지난 후 Next가 데이터를 성공적으로 가져오면 데이터 캐시를 새로운 데이터로 업데이트하고, 데이터를 가져오지 못하면 기존 데이터로 유지된다. 10초가 지나도 새 요청이 없으면 서버는 페이지를 자동으로 재생성하지 않는다. 다음 페이지 요청이 발생할 때까지 기다리고 10초가 지난 이후에 요청이 발생..

현재 백엔드 데이터베이스가 필드 이름으로 snake_case를 사용하고 클라이언트 측 코드에서 camelCase를 사용하고 있기 때문에 DB에서 데이터를 받아와서 출력할 때 코드에서 스네이크 케이스 변수를 사용하게 되었다. 그런데 이 부분에서 클라이언트측 코드에서는 카멜케이스로 일관성이 지켜졌으면 좋겠어서 카멜케이스로 바꿔서 리턴하도록 했다. export const fetchReserveClassInfo = async (classId: string) => { const { data, error }: PostgrestSingleResponse = await supabase .from('class') .select('class_id, category, title, location, price, image, ..

1. 서버 통신 함수 작성 (mutateFn으로 들어갈 함수) export const addScrap = async ({ userId, recipeId }: { userId: string | undefined; recipeId: string; }) => { const { error } = await supabase .from("scrap") .insert([{ user_id: userId, recipe_id: recipeId }]); if (error) { console.error("스크랩 추가 에러 => ", error); return alert("스크랩을 추가하는 동안 오류가 발생했습니다."); } }; 2. mutate 생성 export const useAddScrapMutation = () => ..

구현 사항 사용자가 클래스를 예약하면 class 테이블에 있는 reserved_user_id 배열에 예약한 유저의 아이디를 추가해야함 배열에 값을 추가하기 위해서는 기존의 값을 불러와서 추가로 정보를 넣어서 업데이트 해야한다. 1. 클래스 테이블에서 현재 클래스 레코드의 reserved_user_id 값 조회하기 // class 테이블의 reserved_user_id 배열 조회 const { data: reservedUserList, error: fetchError } = await supabase .from('class') .select('reserved_user_id') .eq('class_id', classId) .single(); if (fetchError) { console.log('예약한 유저..

react-Daypicker에서는 비활성화할 날짜 배열을 넘겨주면 알아서 비활성화 시켜주는데, 문제는 DB에는 예약 가능한 날짜가 등록되어있기 때문에 이걸 반전(?)시켜야 했다. 알고리즘 지식이 부족해서 많이 헤맸다.. 만약 현재 달 말고 다른 달의 날짜도 검사 해서 disable시켜야 한다면....... 어떻게 해야할까...... // 1~31일 배열 생성 const dayList: number[] = Array.from({ length: 31 }, (_, index) => index + 1); // DB에 있는 날짜에서 일자만 따로 생성한 배열 [1, 3, 6].. const availableDays = classDateList.map((item) => new Date(item).getDate());..

예약 페이지에서의 예약 완료와 동시에 예약완료 페이지로 넘어가서 방금 예약한 정보를 띄워주어야 했다. 문제는 테이블에서 예약 정보의 아이디는 데이터베이스에서 자동으로 생성되는데, 방금 예약 정보의 아이디를 어떻게 알아낼 수 있는지에 대한 고민이 있었다. 해결 방법은 간단했다. 해결책은 Supabase가 insert 연산 후 생성된 row의 데이터를 응답으로 반환한다는 점을 활용하는 것이었다. API 호출 결과에서 예약 ID를 추출하여 URL에 포함시킨 후, 예약 완료 페이지에서는 이 ID를 사용해 DB에서 예약 정보를 가져와 출력하는 방식으로 문제를 해결했다. // result: supabase의 응답으로 받아온 제출한 예약 정보 const result = await submitReservation(re..

상태 관리 리팩토링: 효율적인 리듀서 구현 DB에 정보를 넣기 위해서는 각각의 컴포넌트에서 store로 값을 받아와야 했는데, 기존에는 setClassId, setDateAndTime, setPriceAndQuantity와 같이 각각의 컴포넌트에서 값을 따로 받아와야 했기 때문에 상태 업데이트를 위한 리듀서를 각각 만들었다. setClassId: (classId) => { set((state) => ({ reserveInfo: { ...state.reserveInfo, classId: classId } })); }, setDateAndTime: (date, time) => { set((state) => ({ reserveInfo: { ...state.reserveInfo, reserveDate: date..

문제 상황 웹 페이지를 클라이언트 컴포넌트로 구성하고, useSearchParams 훅을 사용해 쿼리스트링 값을 받아 서버 컴포넌트에 props로 내려주려 함. 서버 컴포넌트에서 이 props를 사용해 데이터를 fetch하려 했으나, 클라이언트 컴포넌트에 서버 컴포넌트를 임포트하면 서버 컴포넌트도 클라이언트 컴포넌트가 되버려서 서버 컴포넌트의 로직이 정상적으로 실행되지 않음. 페이지를 서버 컴포넌트로 설정하는 것이 맞다고 판단됨. 그럼 어떻게 서버 컴포넌트에서 쿼리스트링 값을 어떻게 가져오지? 해결 방법 useSearchParams 훅 등을 사용하지 않고, 페이지에서 쿼리스트링 값을 직접 함수의 props로 받는 방식으로 문제를 해결할 수 있었다. export default async function R..

기술적 의사결정 - DB 설계 만약에 지원이라는 유저가 댓글을 달았는데, 지원이라는 유저가 탈퇴했을때 그 댓글을 어떻게 할 것인가에 대해 의논이 필요했다. 원래 나왔던 의견은 1. 유저 정보 삭제시 댓글도 삭제하자. 2. 유저 정보 삭제시 댓글은 남겨두고 (알 수 없음) 이런식으로 표시하자 이건 정답은 없고 우리 팀이 설정을 하는 부분인것 같은데, 어떻게 하는게 UX적으로 맞을지 의견을 나누고 있었다. 튜터님이 조언을 주셨는데, 실무적인 상황에서는 회원이 만약 탈퇴를 했을 때 기록 보관을 3개월 정도하고, 그 기간 후에는 삭제가 되도록 한다고 한다. 그래서 회원정보가 삭제됐을 때 댓글 등 유저키가 참조되고 있는 행이 지워지진 않고, 유저 테이블에 isDeleted 컬럼을 추가해서 유저가 삭제됐을 때는 댓..