이번 토스의 모닥불10화 "무엇이든 물어보세요"를 재미있게 보았습니다. 이번 에피소드에서는 프론트엔드 폴더 구조를 어떻게 효율적으로 설계할 수 있는지에 대한 이야기가 나왔는데요.
폴더 구조는 프로젝트의 유지보수성과 확장성에 큰 영향을 미치는 요소이기 때문에, 관심을 갖고 영상을 시청하였고, 내용을 정리해 보았습니다.

1. 근접성 기반 구성: 사용되는 곳과 가까운 위치에 선언

   컴포넌트는 사용되는 페이지 또는 기능과 최대한 가까운 위치에 배치하는 것이 좋습니다.
   예를 들어, 로그인 페이지에서만 사용되는 컴포넌트라면 /pages/login/ 내부에 해당 컴포넌트를 배치하는 것이 적절합니다.

   이유

   • 코드의 탐색이 쉬워지고 유지보수가 용이함

   • 특정 페이지와 관련된 코드만 삭제하면 사이드이펙트 없이 제거 가능

   • 연관된 컴포넌트와 유틸리티를 한곳에 배치하여 코드 가독성 향상
     

2. 페이지 중심 아키텍처: 기능 단위로 코드 구성

   폴더 구조를 설계할 때는 페이지(Page) 중심으로 코드를 구성하는 것이 좋습니다. 각 페이지의 디렉토리는 컴포넌트, 훅, 유틸리티 등의 관련 코드를 포함하도록 설계할 수 있습니다.

   ✅ 예시 폴더 구조

   src/
     pages/
       login/
         components/
         hooks/
         utils/
         index.tsx
       dashboard/
         components/
         hooks/
         utils/
         index.tsx
   

3. 프로젝트 규모에 따른 유연한 적용

   그렇지만 이러한 구조는 주로 대규모 프로젝트에 적합합니다. 소규모 프로젝트의 경우, 개별 페이지 내에 훅과 유틸리티를 분산시키는 것보다 전역에서 관리하는 것이 더 효율적일 수 있습니다.

   하지만 프로젝트 규모가 커질수록:

   • 사용되는 곳과 가까운 위치에 코드를 배치하여 결합도를 높이고

   • 응집도를 낮춤으로써 코드의 가시성을 확보하며

   • 수정과 삭제가 용이한 구조를 만드는 것이 중요해집니다.

프로젝트의 규모와 복잡도에 따라 위에서 소개한 원칙들을 유연하게 적용하면, 보다 효율적인 폴더 구조를 설계할 수 있을것 같습니다.

https://www.youtube.com/watch?v=Ddy29yiC19A