프론트엔드 개발을 위한 서비스 구조 (Typescript, React, Styled-components, React-query, MobX, React-intl)

공부한 내용을 정리한 글입니다 
내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요.
배움에 큰 도움이 됩니다. 🖋

 

 

프론트엔드 개발을 위한 서비스 구조

---

회사에서 서비스 리뉴얼에 들어가며 레거시 리팩토링도 함께 진행한다고 해서 서비스 구조를 어떻게 가져가면 좋을지 생각해 보았다. 결국 리뉴얼만 하고 리팩토링은 무기한으로 미루어졌지만, 생각한 내용을 한 번 정리해두는 게 좋을 것 같아 글을 남기게 되었다.

 

 

📦src
 ┣ 📂assets
 ┃ ┣ 📂fonts
 ┃ ┗ 📂images
 ┣ 📂domain
 ┃ ┣ 📂dashboard
 ┃ ┗ 📂user
 ┣ 📂infrastructure
 ┃  ┣ 📜http.ts
 ┃  ┗ 📜storage.ts
 ┣ 📂repositories
 ┃  ┣ 📜DashboardRepository.ts
 ┃  ┗ 📜UserRepository.ts
 ┣ 📂presenters
 ┃  ┣ 📜DashboardPresenter.ts
 ┃  ┗ 📜UserPresenter.ts
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┣ 📂dashboard
 ┃ ┣ ┗ 📜index.tsx
 ┃ ┃ ┗ 📜utils.ts
 ┃ ┃ ┗ 📜styles.tsx
 ┃ ┃ ┗ 📜type.ts
 ┃ ┃ ┗ 📂summary
 ┃ ┗ 📂layout
 ┣ 📂pages
 ┃ ┗ 📂dashboard
 ┃   ┗ 📜index.tsx
 ┣ 📂stores
 ┃	┗ 📜toastStore.ts
 ┣ 📂hooks
 ┃ ┣ 📂common
 ┃ ┗ 📂dashboard
 ┃   ┗ 📜useInput.tsx
 ┣ 📂constants
 ┣ 📂utils
 ┣ 📂languages
 ┃ ┣ 📜en.json
 ┃ ┗ 📜ko.json
 ┣ 📜App.css
 ┣ 📜App.tsx
 ┣ 📜index.css
 ┗ 📜index.tsx​

 

 

 

기존에 사용중이던 기술 스택 중 서비스 구조와 관련된 것을 적어보면 아래와 같다. 

 

 

Typescript
React
Styled-components
React-query
MobX
React-intl

 

 

역할

---

Assets

• fonts, images 등 주로 프로젝트에서 사용되는 정적 리소스들을 담는 곳

Domain

• 각 데이터 모델에 대한 타입을 정의하는 레이어
  Domain과 Type 중 어떤 명칭을 사용할지 고민 했는데, Domain이 좀 더 다른 레이어(Infrastructure, Presenters, Repositories)와 맥락을 같이 한다고 느껴졌다.

Infrastructure

• 외부와의 연결 로직을 처리하는 레이어
  • http : http 통신 관련 구현부
  • storage : local, session storage 관련 구현부

Presenters

• 데이터를 가공하여 컴포넌트에 전달하는 레이어
• 우리는 react-query를 사용하므로 usQuery, useMutation 관련 함수를 이곳에 정의하는 것으로 생각했다.

Repositories

• 데이터 액세스 로직을 담당하는 레이어. 서버와의 통신 및 데이터 가져오기 등의 역할을 처리한다.
  (각 도메인 별 api 통신부)

Components

• 리액트 컴포넌트들을 저장하는 곳
• common : 공통으로 사용되는 컴포넌트를 정의하는 곳
• layout : 레이아웃과 관련된 컴포넌트를 정의하는 곳
• dashboard(각 페이지명) : 각 페이지와 관련된 컴포넌트를 정의하는 곳
  • index.tsx : 컴포넌트 정의하는 곳
  • utils.ts : 함수 정의가 많아져 컴포넌트를 한 눈에 파악하기 어려울 경우 분리한 함수들을 정의하는 곳
  • style.tsx : style을 정의하는 곳
  • type.ts : 특정 컴포넌트 내에서만 사용되는 타입을 정의하는 곳
  • summary : 만약 대시보드에 대한 컴포넌트 정의가 복잡할 경우 다시 세부 폴더로 분리 관리한다.

Pages

• 각 url에 보여줄 페이지를 저장하는 곳
• components에서 각 페이지별로 만들어진 컴포넌트를 이곳에서 조립한다.

Stores

• 전역 상태 관리를 위한 스토어 관련 파일들을 저장하는 곳

Constants

• 상수 값들을 저장하는 곳
  ex) 애플리케이션에서 사용되는 문자열, 숫자 등의 상수 값

Utils

• 재사용 가능한 함수들을 모아두는 곳

languages

• 다국어 지원을 위한 언어 파일들을 저장하는 곳

Hooks

• 커스텀 훅 함수들을 저장하는 곳
• 재사용 가능한 로직을 훅으로 추출하여 관리한다.
• 공통 hooks는 /hooks/common, 특정 페이지에서만 사용될 경우 /hooks/페이지로 분리해 관리한다.

 

 

 

참고

---

이전 회사에서 함께 일한 선배와 사수의 영향을 많이 받았다. 감사의 말씀을 전합니다.