개발자

next.js 폴더나 컴포넌트 구조를 어떻게 짜시나요?

2022년 09월 15일조회 2,381

회사에서 next.js 폴더 구조랑 컴포넌트를 한 번 리팩토링하려고 하는데, 어떤 구조로 접근하는게 좋은지 의견을 좀 구하려고합니다 ㅎㅎ 현재는: pages, templates, components, elements 형태로 폴더가 나뉘어져있고, pages → templates → components → elements 형태로 의존하도록 설계가 되었다고 하더라구요. 그치만 설계와는 달리 여러 훅 (비즈니스, UI 모두)들이 혼용되어서 pages, templates, components에 범벅이 되어 있는 상태입니다. 제가 생각한건: pages → templates → components → elements 형태는 유지하고, pages는 최소한의 로직만 있고 templates 에서 비즈니스 로직을 아래로 넘겨주는 형태를 생각하고 있어요. 어떤 방식일지는 케바케일 것 같은데, 가장 단순한 방법은 prop으로 넘겨주는 형태를 생각하고 있습니다. 컴포넌트 간 상태가 공유되어야한다면 카카오 형님들 블로그 (https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/) 를 좀 참고해서 compound pattern으로 만들어볼까 생각중이구요. 막상 고민하다보니 다른 분들은 어떻게 작업하시는지 궁금해서요. 혹시 여러분들은 next.js 쓰시면서 구조 같은거는 어떻게 잡으셨나요??

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

인기 답변

손정현님의 프로필 사진

오 저랑 비슷한 고민을 하고 계시네요. 저희도 이번에 프론트엔드 쪽 개선하면서 컨벤션을 손보고 있거든요. 저희 같은 경우 pages - prototypes - modules - foundations - elements의 형태로 살짝 변형된 아토믹 디자인 패턴이 적용된 상태인데요. 님과 비슷하게 비즈니스 로직이 섞여있고, 네이밍도 제각각이어서 이번에 리팩토링을 진행하고 있습니다. 저흰 prototypes를 도메인 기준으로 나눈 상태고, 비즈니스 로직을 modules로 전달해주는 방식으로 작업하고 있습니다. 말씀하신것처럼 상태 공유가 필요하거나 리렌더링 등을 고려해서 compound pattern이나 recoil 등을 사용할 계획 중이구요. 하지만, 명확한 답이 없는 문제여서 개발 팀의 규모와 역량 그리고 사용할 수 있는 리소스에 따라서 달라질 것 같고 어떤 방식이 더 좋다 나쁘다는 없는 것 같아요. (사실 아토믹 디자인 패턴도 좋은지 잘 모르겠..) 참고하면 좋을 것 같은 링크들 몇개 첨부할게요. 화이팅입니다 :) https://kciter.so/posts/effective-atomic-design https://jbee.io/react/stop-using-atomic-design https://atomicdesign.bradfrost.com/chapter-2 https://dennisreimann.de/articles/atomic-design-is-messy.html

profile picture

익명

작성자

2022년 09월 16일

오호~ 감사합니다!

커리어리 AI 봇님의 프로필 사진

next.js를 사용하면서 폴더 구조를 잡는 방법은 여러 가지가 있지만, 일반적으로는 프로젝트의 크기와 구조에 따라 달라질 수 있습니다. 그러나 일반적인 구조는 다음과 같습니다. 1. pages 폴더 - 각각의 URL 경로에 해당하는 React 컴포넌트가 들어있습니다. 예를 들어, 'pages/index.js'는 홈페이지를 구성하는 컴포넌트를 포함합니다. 2. components 폴더 - 공통적으로 사용되는 UI 컴포넌트가 들어있습니다. 예를 들어, 'components/Button.js'는 여러 페이지에서 사용되는 버튼 컴포넌트를 포함합니다. 3. lib 폴더 - 다양한 유틸리티 함수, 상수, API 호출 등과 같은 것들이 들어있습니다. 예를 들어, 'lib/api.js'는 서버에서 데이터를 가져오는 API 호출을 담당하는 함수를 포함합니다. 4. styles 폴더 - 전역적으로 적용되는 스타일 파일이 들어있습니다. 예를 들어, 'styles/global.css'는 전체 웹 사이트에서 적용되는 CSS 스타일을 포함합니다. 5. public 폴더 - 정적 파일 (이미지, favicon 등)이 들어있습니다. 또한, 컴포넌트의 구조는 다음과 같은 Atomic Design 방식을 사용할 수 있습니다. 1. Atoms - UI의 기본적인 블록으로서, 버튼, 텍스트, 아이콘 등과 같은 작은 컴포넌트를 의미합니다. 2. Molecules - Atom들을 결합한 것으로서, 검색창이나 로그인 폼 등과 같은 상대적으로 복잡한 컴포넌트를 의미합니다. 3. Organisms - Molecule들과 Atom들을 결합한 것으로서, 헤더나 푸터 등과 같은 전체 페이지의 레이아웃을 의미합니다. 4. Templates - 페이지 레이아웃을 정의하는데 사용되는, 여러 개의 Organisms와 Molecules를 결합한 것을 의미합니다. 5. Pages - 실제로 사용자가 볼 수 있는 웹 페이지를 의미합니다. Template을 사용하여 구성되며, 필요한 데이터와 기능을 갖추고 있습니다. 위와 같은 구조를 사용하면, 각 컴포넌트가 담당하는 역할을 명확히 구분할 수 있으며, 코드의 유지보수가 쉬워질 수 있습니다.

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!