dev-hpk 님의 블로그

🚨 문제 상황프로젝트를 진행하면서 Youtube 채널을 추가하면서 점점 불편함을 느끼게 되었어요. 위의 이미지처럼 채널이 추가될 때마다 /app 폴더 하위에 폴더가 점점 늘어나 구조가 너무 복잡해지게 되더라고요😭 왜 채널(라우트 페이지)마다 폴더를 만드는지 궁금하실 수 있겠네요🤔Next.js가 파일 시스템 기반의 라우터를 사용하여 폴더를 경로 정의에 사용하기 때문이에요. 위 예시를 보시면 /app 폴더 하위의 폴더 이름이 경로로 사용되고 있어요. /{channel}/page.tsximport axios from '@/app/lib/instance';import ListContainer from '@/app/components/lists/ListContainer';async function page(..

오전 스크럼 회의에서 할 일 리스트 페이지를 작업하시는 팀원분께서 어떻게 구현해야 할지 모르겠다고 도움을 요청하셨어요. 팀 회의 때 밤을 새고 작업을 하셔도 해결을 못하셨다고 하시는데 안 도와드릴 수 없죠🔥 제 작업은 거의 마무리 단계라 잠시 뒤로 미뤄두고 도움을 드리기로 했어요. 일단 문제 상황을 먼저 확인해 봐야겠죠👀🚨 문제 상황 Swagger의 API 문서가 너무 복잡해서 어떤 API를 사용해야 할지 모르겠다고 하시네요. 다시 보니 정말 헷갈릴만 하네요. 다른 API 문서들을 찾아보니 아래처럼 설명을 잘 작성해두기도 했네요🤔 아쉽지만 언제 어떤 환경에서 개발할지 알 수 없으니, 주어진 환경에 맞게 개발할 줄 알아야 개발자로 성장할 수 있겠죠!🌈 문제 해결1️⃣ 폴더 구조 수정 우선 폴더 구..

🚫 문제 상황 : 동적 라우팅 ([id].tsx) 페이지에서 새로고침 하면 404 page로 이동한다. 문제 원인을 찾지 못해서 vercel 배포 환경 설정이 잘 못 되었는지 확인하기 위해 로컬에서도 빌드를 진행했습니다. 빌드 후 next/static 폴더의 리소스를 비교했지만 로컬과 vercel 모두 [id]로 동적 파일을 생성했습니다.어디서부터 잘못된 걸까요.💡 해결 방법팀 회의와 검색을 통해 문제 원인과 해결 방법 여러 개 찾아보았는데, 프로젝트에 바로 적용하기에는 어려운 부분들도 있어서 멘토님께 해당 이슈를 공유했습니다. 멘토님의 조언을 통해 해결 방법을 간추려 봤습니다.getServerSideProps 선언해 SSR(Server Side Rendering)로 동작하도록 수정실제로 SSR로 수..