[Mungae] 프로젝트 구조 best practices 조사

0. 프로젝트 시작 전, 폴더 구조를 잘 짜야 하는 이유 

 

폴더 구조는 코드의 가독성과 유지보수성을 높이는 데 중요한 역할을 한다. 

나중에 파일을 어디에 저장해야 할지 어려워진다. 

 

폴더 구조의 기본 원칙  

• 폴더 구조 설계 시에는 기능별로 폴더를 나누는 것이 좋다.
• 폴더 이름은 기능을 명확히 나타내야한다. 
• 폴더 구조를 설계할 때는 다른 개발자들과의 협업을 고려해야 한다. 
• 확장성을 고려해야 한다.  

 

 

1. 흔하게 볼 수 있는 폴더 아키텍쳐 

src/
├── assets/       
├── components/   
├── hooks/        
├── pages/        
├── router/       
├── services/

 

hooks

• 프로젝트에서 사용하는 커스텀 hook을 저장한다. 
• 커스텀 hook을 컴포넌트 안에 다 적기보다는, hooks 파일로 빼서 결과적으로 컴포넌트의 코드는 목적만 나타낼 뿐 실행 방법은 나타내지 않는다. 

커스텀 훅이란 React에서 내제된 hook (useState, useEffect, useMemo ...) 이외에 구체적인 목적을 가진 hook이다. 

 

components

전체적으로 재사용되는 컴포넌트

 

pages 

어플리케이션의 각 페이지는 이 위치에 해당 페이지의 폴더가 있어야 한다. 

라우팅을 적용할 때 필요한 페이지 컴포넌트를 위치시킨다. 

ex) 로그인 페이지: Login 관련 컴포넌트, 로그인 페이지에서만 사용되는 커스텀 hook

로그인 페이지에서만 사용되는 것들은 hook이나 component 폴더가 아닌 pages의 로그인에 저장한다. 

-> 어플리케이션이 수향하는 작업을 더 쉽게 이해할 수 있다. 

 

router

react-router 관련된 코드 관리

 

services/ api

api 관리

 

assets 

이미지, 폰트 등 데이터 저장

 

2. DDD ( Domain-Driven Design, 도메인 주도 설계)

높은 응집력과 낮은 결합도로 변경과 확장에 용이한 설계 

DDD의 계층 구조

 

 

단점: 서비스가 커질수록 복잡도가 증가하여 확장성이 떨어진다. 

 

3. FSD (Feature-Sliced Design) 기능 분할 설계  

https://emewjin.github.io/feature-sliced-design/

(번역) 기능 분할 설계 - 최고의 프런트엔드 아키텍처

 

 

최대 3개의 단계로 구성되어 있다. 

Slices가 도메인과 같은 개념이다. 

 

 

 

• processes는 과거에 여러 페이지가 연달아서 나와야 할 경우 사용했지만, 최근들어 widgets에 포함되었다. 
• shared에는 재사용 가능한 컴포넌트와 유틸리티, hooks(커스텀 hook), utils(함수들) 처럼 공유되는 것들이 있다. 
• 기존 components 폴더 -> entities 이다.
• 안에 내용은 바뀌지만 전체적인 틀이 비슷한 것(layouts) 폴더 -> widgets 이다. 

 

장점:

FSD 는 OOP 원칙(객체지향)을 적용하는데에 도움을 준다. 

확장성이 높다.

 

단점:

난이도가 있고, 팀 내에서 모두가 FSD에 대해 잘 숙지가 되어있어야 한다. 

 

 

4. Atom Design Pattern 

https://yozm.wishket.com/magazine/detail/1531/

 

 

디자인 부품을 만들어 조립한다는 개념이 적용되었다. 

 

 

유기체들이 모여 Template이 되었을 때, 데이터가 결합되면 최종적인 결과물이 된다. 

 

organisms는 molecules와 atoms 를 모아서 만들며, 사용자에게 의미와 역할이 존재하는 단위이다. 

 

단점:

• 이 구조를 사용하다보면, 사람마다 molecules와 organisms을 나누는 기준이 모호해진다고 한다. 
• 컴포넌트를 계층이 아닌, 헤더나 푸터 등으로 분리해서 독립적인 영역으로 구분하고 싶어질 때도 있기에 항상 5단계의 구조로만 가져가기가 어렵다. 

 

 

https://velog.io/@teo/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-MV-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

프론트엔드에서 MV* 아키텍쳐란 무엇인가요?

 

몰랐던 웹개발 지식들을 채워보자! 

API (Application Programming Interface) 

메뉴판 개념이라고 생각하면 된다! 

사용자가 원하는 걸 주문할 때, 메뉴판에 있는 것 안에서 주문할 수 있는 것 처럼

API는 사용자가 원하는 걸 요청하기 위한 인터페이스이다. (틀? 요구사항?)

다른 소프트웨어 시스템과 통신하기 위한 규칙이다. 

 

REST API (Representational State Transfer)

 

REST 아키텍쳐 스타일을 사용하는 API 

웹페이지에서는 REST API를 사용한다. (http 환경에서)  

자원을 나타내어 전달하는 것.

-> 자원의 이름으로 구분하여 자원의 상태를 주고 받는 것.  

데이터를 주고 받는 자원의 형식은 주로 JSON 형식이다. 

 

1. HTTP URL

자원에 대한 설명이 있는 곳, 자원을 명시하는 것

https://www.youtube.com/watch?v=ckSdPNKM2pY

verb로 작성한다.

 

 

2. HTTP Method  

해당 자원에 CRUD를 수행 할 수 있다. 

GET:: 조회

POST: 생성

PUT: 수정

DELETE : 삭제

 

 

 

4.14 회의

폴더의 이름은 다른 사람이 봤을 때 명확하게 랑 수 있도록 잘, 신중하게 지어야 한다. 

1. 폴더의 이름들을 고민해보면서 확정해보기. 
근거를 정리해보자 

2. FSD 의 layers 7개가 각각 무슨 역할이고 무슨 뜻인지 깊게 찾아보기.

 

3. 디렉토리 구조 직접 만들어보기