프론트엔드 설계 및 디자인 패턴

프론트엔드를 혼자 공부하고 개발하면서 개인적으로 효율적이라고 생각하고 만든 구조중 하나입니다.
CSR 기준으로 되어 있습니다.

# 리액트 & 웹팩 설정

### 루트

1. root - 패키지 매니저, 깃, 웹팩, 기타 플러그인 설정이 위치한다.
2. build - 웹팩 세부 설정 & 플로그인등 셋팅이 존재한다.
3. public - 정적파일 보통 index.html이 존재한다.
4. src - 개발한 모든 소스가 존재한다.
5. dist - 웹팩을 통해서 빌드된 프로덕트 소스가 존재한다.
6. etc - types, .storybook 등 폴더가 선택적으로 존재한다.

### SRC

1. assets - 정적 리소스, img나 웹폰트등이 존재한다. 경우에 따라서 css나 js 파일도 있을 수 있다.
2. components - 컴포넌트들이 위치한다.
3. lib - 유틸, 커스텀 훅, api등이 위치한다.
4. store - 상태관리 관련 코드들이 존재한다.
5. view - 라우팅 & 페이지가 존재한다.
6. app - 어플리케이션 entry로 라우팅이나 기타 리소스들을 관리한다.
7. index - 프로그램 entry로 리액트 시작점.
8. etc.

### LIB

1. api - API와의 통신 관련 AJAX 로직들이 있는 위치.
2. custom - 리액트 커스텀 HOOK (기본적으로 redux 관련 및 기타등등) 로직들이 있는 위치.
3. util - 특정 도메인에 종속적이지 않은 유틸 로직들이 있는 위치.
4. etc.

### STORE
> 리덕스 기준의 폴더 구조 리덕스-툴킷, 몹엑스, 리코일에 적합한 구조는 변형이 필요하다.

1. configureStore - 루트 리덕스가 위치한다.
2. actions - 리덕스 타입과 액션들이 위치한다.(타입의 경우 상수로 설정해서 스토어 내부에서 공유한다.)
3. reducers - 리듀서들이 위치한다.
4. etc - sagas, thunks등의 폴더가 선택적으로 존재한다.

### COMPONENTS

1. layout - 레이아웃 코드들이 존재한다.
2. ui - 아토믹 패턴에 따른 atoms, molecules, organisms이 존재한다.
3. view[] - 각 View(카테고리 라우트)에 따른 폴더가 존재하고 해당 라우트에 적합한 템플릿 코드들이 존재한다.
4. etc.

 

## 컨벤션

 

1. 모듈화 단계 추상화: 파일 => 폴더 => 폴더 index 결합 하는 방향으로 진행한다.

2. 복수를 지칭 할 경우 자료구조 또는 s를 꼬리말로 한다.

3. VIEW는 view, components이며 프레젠테이션 레이어로 렌더링 로직 또는 바인딩 된 컨트롤러 메서드 이외에는 존재해서는 안된다.

4. MODEL은 store, assets(옵션)으로 모델은 순수하게 데이터 모델링 역할만 한다.

5. VIEW MODEL은 lib 으로 lib의 유틸이나 custom(커스텀훅)을 통해서 데이터에 관한 CRUD나, GET, SET를 담당한다.

6. CONTOLLER은 controller로 기존 프레젠테이션 - 컨테이너 고전 아키텍쳐에서 컨테이너를 담당한다.

7. VIEW 계층에서는 lib의 util이나 custom을 제외한 방식으로 다른 계층에 접근해서는 안된다.

8. CONTOLLER의 경우 개인이 편한대로 짜면된다. 데이터 플로우 시작점에 따라서 controller를 커스텀 훅으로 만들고

불러오면 된다.