seopport.log

++ 이전글https://seopport-u.tistory.com/87<p style="background-color: #ffffff; color: #0d0d0d; text-ali..

여러번의 useEffect 사용으로 다양한 로직 처리하기 1. 문제 상황 초기 state 값을 설정하기 위해 useEffect에서 비동기 함수를 사용하여 데이터를 가져와서 setCurrentReservedCount로 state를 set해야 하는 상황 단순하게 기존에 사용하던 useEffect에 로직을 추가하였더니, 기존 의존성 배열에 있던 인자들에 인해 선택한 날짜나 시간이 변경될 때마다 state가 초기 값으로 재설정되는 문제가 발생했다. useEffect(() => { setReserveInfo({ reserveDate: selectedDate, reserveTime: selectedTime }); const setInitialReservedCount = async () => { const initi..

++ 이전글https://seopport-u.tistory.com/86 <p style="color: #222222; text-align: sta..

문제상황클래스 예약 시스템을 구축하면서 예상치 못한 문제에 직면했다. <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('예약한 유저..