관심사 분리란 무엇인가?
관심사 분리(Separation of Concerns)는 코드를 기능별로 분리하여 각 부분이 하나의 명확한 책임만을 가지도록 만드는 원칙이다. 이를 통해 각 부분이 독립적으로 동작하며, 수정이나 개선 작업을 진행할 때 다른 부분에 미치는 영향을 최소화할 수 있다. 이러한 분리는 코드의 확장성과 유지보수성을 높이는 데 큰 도움이 된다.
프론트엔드 폴더 구조 설계의 핵심 원칙
폴더 구조를 설계할 때 중요한 점은 프로젝트의 성장 가능성을 고려하고, 각 폴더가 명확한 책임을 가지도록 하는 것이다. 여기에서는 Layer, Slice, Segment라는 세 가지 주요 접근 방식에 대해 설명한다.
1. Layer (의존성과 책임 범위)
Layer는 애플리케이션을 계층적으로 나누어 의존성과 책임의 범위를 정의한다. 이를 통해 각 Layer는 고유한 역할을 가지며, 다른 Layer와는 명확한 인터페이스를 통해 소통하게 된다.
app: 애플리케이션 전체 설정과 초기화와 같은 전역적인 작업을 관리한다.
pages: 개별 화면을 정의하는 곳. 각각의 페이지는 독립적인 기능을 갖고 사용자가 방문할 수 있는 특정 화면을 의미한다.
widgets: 비교적 큰 UI 블록으로, 여러 개의 Molecules와 Organisms가 모여 기능적인 블록을 구성한다.
features: 특정 기능을 중심으로 모인 컴포넌트와 로직을 포함한다.
ex) 인증 기능이나 검색 기능 같은 것들이 이 폴더에 포함될 수 있다.
shared: 여러 곳에서 재사용 가능한 유틸리티 함수, 컴포넌트, 스타일 등을 모아놓은 폴더.
2. Slice (도메인 기반의 분리)
Slice는 데이터와 기능을 중심으로 관심사를 나누어 관리한다. 예를 들어, 사용자 관리(User Management)나 상품 관리(Product Management)와 같은 도메인 단위로 기능을 분리하면, 해당 도메인과 관련된 모든 UI, 상태 관리, 데이터 접근 코드를 같은 폴더 안에 두어 관리할 수 있다. 이를 통해 도메인별로 독립적이고 응집력 있는 구조를 유지할 수 있다.
3. Segment (역할 기반의 분리)
Segment는 프로젝트를 일반적인 역할과 책임에 따라 분리하는 방법. 예를 들어, ui, api, model과 같은 역할로 코드를 나누어, 각 역할이 명확한 경계를 가지고 관리되도록 하는 것, 이렇게 나누면 어떤 역할에서 문제가 생겼을 때 해당 영역만 집중해서 수정할 수 있다.
Atomic Design을 활용한 컴포넌트 계층화
컴포넌트 기반의 프론트엔드 개발에서 Atomic Design 패턴은 관심사를 분리하는 데 큰 도움이 된다. 이 패턴은 Atoms, Molecules, Organisms, Templates, Pages와 같이 컴포넌트를 계층적으로 나누어 재사용성을 높이고 관리를 쉽게 만든다.
Atoms: 비즈니스 로직이 없는, 가장 작은 단위의 UI 요소.
ex) 버튼, 입력 필드 등이 있습니다.
Molecules: 여러 Atoms가 결합된 작은 기능 단위의 컴포넌트.
비즈니스 로직이 포함될 수 있으며, 예를 들면 검색 입력(SearchInput) 같은 것이 있다.
Organisms: 여러 Molecules와 Atoms가 모인 더 큰 단위의 컴포넌트.
ex) 로그인 폼(LoginForm)
Templates: 페이지의 레이아웃을 정의하는 구조.
데이터 없이 컴포넌트들의 배치를 정의하는 역할.
프론트엔드 폴더 구조 설계의 예시
관심사 분리를 잘 반영한 예시 폴더 구조:
src/
app/
App.tsx
routes.ts
pages/
HomePage/
HomePage.tsx
HomePage.module.css
ProductPage/
ProductPage.tsx
ProductPage.module.css
widgets/
Header/
Header.tsx
Header.module.css
Footer/
Footer.tsx
features/
Authentication/
LoginForm.tsx
SignupForm.tsx
Search/
SearchInput.tsx
SearchResults.tsx
shared/
components/
Button.tsx
Input.tsx
utils/
formatDate.ts
calculateDiscount.ts이와 같은 구조를 통해 코드의 명확성을 높이고, 팀 내 개발자들 간의 협업을 원활하게 할 수 있다. 각각의 폴더가 명확한 역할을 가지고 있기 때문에 코드 탐색이 쉬워지고, 특정 기능을 수정하거나 개선할 때 해당 부분만 집중적으로 작업할 수 있다.
결론
프론트엔드 폴더 구조 설계와 관심사 분리는 프로젝트의 규모가 커질수록 그 중요성이 커진다. Layer, Slice, Segment를 통해 책임을 나누고, Atomic Design 패턴을 적용하여 컴포넌트를 체계적으로 관리하면 코드의 유지보수성과 확장성을 크게 높일 수 있다. 이를 통해 더 나은 품질의 소프트웨어를 제공할 수 있으며, 개발자들 간의 협업 효율성도 극대화할 수 있다.
