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

오 저랑 비슷한 고민을 하고 계시네요. 저희도 이번에 프론트엔드 쪽 개선하면서 컨벤션을 손보고 있거든요. 저희 같은 경우 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

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을 사용하여 구성되며, 필요한 데이터와 기능을 갖추고 있습니다. 위와 같은 구조를 사용하면, 각 컴포넌트가 담당하는 역할을 명확히 구분할 수 있으며, 코드의 유지보수가 쉬워질 수 있습니다.