트러블 슈팅: 폴더 구조화 - minumsa/daily-practice GitHub Wiki

문제 상황

일상연습의 컴포넌트 파일은 22개입니다. CSS 파일까지 포함하면 파일 개수가 40개가 넘는 셈입니다. 프로젝트 중반부까지는 기능 구현에 집중하느라 잘 몰랐는데, 후반에 들어서니 폴더 구조에 문제가 있음이 보였습니다. 단편적인 예로 모든 컴포넌트가 components 폴더 하나에 전부 들어가 있었습니다.

폴더 구조화에 대한 고민은 예전부터 가지고 있었기에 관련해서 구글링을 해볼 때마다 실로 다양한 폴더 구조화 방식을 살펴볼 수 있었는데, 그때마다 이거다 싶을 만큼 와닿는 방법론은 찾지 못하고 있었습니다.

해결 과정

구글링을 통해 당근의 FE 팀에서 작성한 블로그 글을 발견했습니다. 해당 글에서는 당근의 FE 팀이 4개의 프로젝트를 하나로 합치면서 겪은 폴더 구조화에 대한 고민과 과정, 그리고 결과를 다뤘습니다. 이 글을 통해 제가 적용해본 폴더 구조화 원칙은 다음과 같습니다.

• 폴더명은 소문자 단수형으로 작성한다.
• 파일명은 카멜 케이스로 작성한다.
• 폴더는 기능별로 세분화한다.
• 여러 컴포넌트에서 재사용되는 컴포넌트(주로 레이아웃 요소)는 @common 폴더에 넣는다.
• 기타 요소들도 기능별(modules, images, fonts 등)로 폴더화한다.

이 원칙을 바탕으로 지금까지 작업한 다른 프로젝트들의 폴더 구조를 모두 변경했습니다. 그 결과, 코드의 가독성이 크게 향상되었습니다. 또한, 폴더 구조화 작업을 진행하면서 각 파일이 수행하는 역할을 면밀히 검토하고, 기능에 맞는 정확한 파일명으로 수정하는 작업도 함께 진행했습니다.

위 원칙에 입각해 지금까지 만든 다른 프로젝트의 폴더 구조를 모두 변경했습니다. 이로 인해 이전보다 코드의 가독성이 대폭 향상되었습니다. 한편 폴더 구조화 작업을 거치면서 각각의 파일이 수행하고 있는 역할을 면밀히 살펴보았고, 기능에 따라 정확한 파일명으로 수정하는 작업을 동시에 진행했습니다.

배운 점

• 기능별로 폴더를 구조화해 코드의 가독성을 향상시키는 법을 배웠습니다.