7/19 코드잇 중급 프로젝트 데일리 회고록

7/19

주요 활동

오전
공용 모달창 컴포넌트 테스트
빌드오류 경험 및 해결

You cannot have two parallel pages that resolve to the same path. Please check /(global)/page and /(modal-test)/page. Refer to the route group docs for more information: https://nextjs.org/docs/app/building-your-application/routing/route-groups

global)도 ()로 묶여 있고, (modal-test)도 ()로 묶여 있어서 둘 다 최종적으로 URL 경로상으로는 / 로 해석되어서 발생하는 문제 였음.
폴더명으로도 빌드 오류가 날 수 있다는 것을 배우고 폴더면 바꿔서 테스트

You're importing a component that needs useState. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the "use client" directive.

Next.js 13+ App Router에서는 파일 상단에 아래처럼 선언하지 않는 이상, page.tsx는 서버 컴포넌트로 간주하기 때문에 발생한 빌드오류.
서버 컴포넌트

• useState, useEffect, useContext 등 React Hooks 사용 불가
• 브라우저 전용 API 사용 불가

클라이언트 컴포넌트

• 훅 사용 가능
• 상태 관리, 이벤트 핸들링 가능

modal-test/page.tsx 맨 위에 "use client" 지시어를 추가해서 해결

 

오후

이슈에 작업내용 및 트러블 문서화
모달창 관련 추가 테스트, 코드 수정
eslint 의 import/order 관련 규칙에 대해 알아보기

 

느낀점

오류 코드의 내용을 잘 살펴 보는 것이 오류 해결에 중요하다는 것을 다시금 느꼈습니다.