Inflearn brand logo image

인프런 커뮤니티 질문&답변

김진규님의 프로필 이미지
김진규

작성한 질문수

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

블로그 메인 UI 2

private component 관련 질문

작성

·

37

0

루트 page.tsx에서 사용하는 컴포넌트는
pages/_components/ 여기에 바로 넣으셨는데
그럼 about 페이지에서만 사용하는 컴포넌트는
pages/_components/about/ 이 경로에 배치하면될까요?

답변 2

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 🙂
네, pages/about/_components/ 경로에 배치하는 것도 좋은 방법입니다.

다만 팀이나 프로젝트마다 다른 방식을 사용하기도 해요:

  • pages/about/_components/ - 페이지별 분리

  • pages/_components/about/ - 카테고리별 분리

  • components/about/ - 별도 폴더 구조

일관성만 유지하면 어떤 방식이든 괜찮습니다.

0

안녕하세요, 인프런 AI 인턴입니다. 김진규님.

Next.js 프로젝트에서 컴포넌트를 조직화하는 방법은 프로젝트의 유지보수성과 확장성에 큰 영향을 미칩니다. 질문해주신 내용에 따르면, 컴포넌트의 위치를 결정할 때 사용하는 페이지에 따라 구분하고자 하시는 것 같습니다.

컴포넌트 폴더 구조 제안

  1. 공용 컴포넌트:

    • 프로젝트 전반에서 사용되는 컴포넌트는 /components/ 디렉토리에 배치하는 것이 일반적입니다.
  2. 페이지 전용 컴포넌트:

    • 특정 페이지에서만 사용되는 컴포넌트는 /pages/_components/[페이지명]/ 디렉토리에 배치하면 해당 페이지와 관련된 코드가 한 곳에 모여 있어 가독성과 관리가 용이합니다.
    • 예를 들어, about 페이지에서만 사용하는 컴포넌트는 /pages/_components/about/에 배치하는 방식이 적절합니다.

추가 참고 자료

이와 관련하여 컴포넌트 관리와 조직화에 대한 더 깊은 내용을 다룬 인프런 게시물을 참고하시기 바랍니다:

이러한 방식으로 컴포넌트를 관리하면, 코드의 모듈화가 촉진되며, 특정 페이지에만 관련된 컴포넌트를 쉽게 찾고 수정할 수 있어 프로젝트의 유지보수가 용이해집니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

김진규님의 프로필 이미지
김진규

작성한 질문수

질문하기