seopport.log

페이지 컴포넌트에서 HTML태그와 컴포넌트를 분리해서 깔끔하게 만들고 싶었다. export default async function ReservePage({ searchParams }: { searchParams: { classId: string } }) { const classId = searchParams.classId; const classInfo = await fetchReserveClassInfo(classId); return ( {classInfo ? ( 수강일 선택하기 ) : ( 클래스 정보를 불러오지 못했어요. 🥲 )} ); } 그래서 일단 컴포넌트들을 분리하고, 프롭 드릴링으로 내려주는데 드릴링이 최대 2번이긴 하지만 프롭스를 사용하지 않고 자식에게 전달만 하는 컴포넌트 생겨 비효율적이라..

process.env.로 환경변수를 불러올 때 undefined가 뜨는 문제 기본적으로 Next의 환경변수는 node 환경의 서버사이드에서만 불러올 수 있다고 한다. 해결법으로는 환경변수 이름 앞에 NEXT_PUBLIC_을 붙여주면 브라우저 환경에서도 환경변수를 읽을 수 있다 env.local과 env.production build 명령어를 사용하면 env.production 파일이 우선적으로 적용된다. 따라서 env.local에는 NEXT_PUBLIC_BASE_URL에 로컬호스트 주소를 넣어주고, env.production에는 배포 주소를 넣어주면 빌드, 배포시 env.production의 NEXT_PUBLIC_BASE_URL을 읽어 배포주소를 베이스 주소로 사용하게 된다.

라우트 핸들러를 활용한 서버 사이드에서의 결제 승인 처리🤔 문제 상황<ul style="list-style-type: disc; background-color: #ffffff; color: #0d0d0d; text-align: start;" data-ke-list-type="disc"..

++ 이전글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 자체 웹 서버ISRSSG의 단점을 보완한 렌더링 방식revalidate 시간이 10초라고 가정!10초 동안 호출되는 모든 요청은 캐시된 데이터를 반환한다. => 10초동안 백만명이 접속해도  새로운 요청 X10초가 지난 후 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 = () => ..