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

안녕하세요 이정환입니다.

말씀주신대로 이는 정답이 있는 문제는 아닙니다. 그러나 확장성과 재사용성을 고려해야 한다면 말씀하신대로 lib/api 라던가 services/api 폴더로 분리하는 방법이 더 좋을 듯 합니다. 만약 이 프로젝트가 강의 교안이 아닌 100% 저 혼자 진행하는 프로젝트였다면 저도 아마 분리했을 것 같네요 😅 말씀하신 내용에 어느정도 공감합니다!

다만 강의에서는 Next.js 서버 컴포넌트의 스탠다드한 활용법을 안내해 드리기 위해서, 그리고 파일을 여러개로 나눴을 때의 입문자 분들의 혼동을 방지하기 위해서 최대한 단순하고 간결하게 코드를 작성하고 있으니 이 부분도 함께 양해해주시면 감사하겠습니다.

PS. 덧붙여 저는 언제나 모듈화를 100%로 이뤄내는게 항상 좋은 방법이라고 생각하지는 않습니다. 과한 모듈화는 오히려 불필요하게 복잡한 컨텍스트를 만들어 내기도 한다고 생각해서요, 이에 대해서는 이야기가 많이 길어질 수 있을 것 같은데요 좋은 아티클로 제 의견을 대체하도록 하겠습니다.

https://velog.io/@leehs27/DryCode

안녕하세요, 인프런 AI 인턴입니다. 현수님.

Next.js와 React 프로젝트에서 데이터 페칭 로직을 어떻게 분리할지에 대한 고민은 많은 개발자들이 직면하는 중요한 질문입니다. 이를 통해 코드의 가독성, 유지보수성, 확장성을 효과적으로 관리할 수 있습니다. 아래에서 각 질문에 대한 설명을 드리겠습니다.

1. 데이터 기준의 관심사 분리 vs 기능 중심의 분리

• 데이터 중심의 분리: 데이터와 관련된 API 요청을 한 곳에 모아 두면, 관련 변경 사항을 쉽게 적용할 수 있고, 공통적인 에러 처리 및 기타 로직을 재사용하기에 용이합니다.

• 기능 중심의 분리: 개별 컴포넌트에서 데이터를 직접 페칭하게 하면, 해당 컴포넌트가 특정 데이터에 대해 어떤 비즈니스 로직을 수행하는지 명확하게 드러납니다. 이는 컴포넌트 재사용성 측면에서도 유리할 수 있습니다.

결국, 이는 선호와 프로젝트의 필요에 따라 다를 수 있으며, 사전 렌더링의 특수성 때문이라기보다는 조직에서 일관된 코딩 스타일과 유지보수 용이성을 위한 선택이라고 할 수 있습니다.

2. 컴포넌트 폴더 분리

컴포넌트를 별도로 분리하는지 여부는 프로젝트의 복잡성과 규모에 따라 달라질 수 있습니다. 작은 프로젝트에서는 굳이 모든 것을 나누는 것보다 일관성 있게 간단한 구조를 유지하는 것이 유리할 수 있으며, 큰 프로젝트에서는 자연스럽게 컴포넌트와 로직을 폴더로 분리하는 것이 일반적입니다.

• 프로젝트 규모가 작을 경우: 통합된 전략으로 코드 간섭을 줄이고, 특정 부분에 대한 변경이 전체 구조에 미치는 영향을 줄일 수 있습니다.

• 프로젝트 규모가 클 경우: 컴포넌트를 분리하여 코드를 모듈화하고, 특정 기능에 대한 수정이 필요할 때 수정해야 할 파일의 범위를 좁힐 수 있습니다.

추천 참고사항

• Next.js의 폴더 구조에 관한 질문: 다양한 프로젝트에서의 폴더 구조를 토론하는 기존 질문입니다.

• React 컴포넌트 분리 및 관리: 효과적인 컴포넌트 관리 및 분리에 관한 논의입니다.

최종적으로 폴더 구조 선택은 팀 내부의 일관성과 프로젝트 상황에 맞는 것이 중요합니다. 프로젝트가 성장함에 따라 구조를 개선할 수 있도록 팀원들과의 지속적인 논의와 피드백 과정이 필요할 것입니다.

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