효율적인 프론트엔드 폴더 구조 설계하기: 토스 모닥불 EP.10 리뷰"

이번 토스의 모닥불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

- YouTube

www.youtube.com

 - YouTube

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2025년 1월 31일 오전 2:26

 • 

저장 60조회 2,947

댓글 0