오늘의 집 클론 코딩 : 파일구조

파일 구조

clone-front-team4 ├── node_modules ├── public ├── src ├── .env ├── .gitignore ├── package.json ├── README.md └── yarn.lock

📁 src

└─ src  ├─ api  ├─ assets   ├─ component  ├─ pages  ├─ App.js  └─ index.js

📁 api

└─ api  ├─ auth.js  ├─ index.js  ├─ posts.js  └─ user.js

- 서버 연결 url에 따라 구분했다

- 각 파일별로 /api/파일이름/... 인 url 들의 axios 요청들이 모아져 있음

- index.js 안에는 axios.create 를 통한 interceptos를 사용함 이걸 통해 요청할 때마다 헤더에 토큰이 들어감

- 공부해서 다음에 꼭 사용해보기

 

📁 assets

- 이미지와 폰트를 넣음

- 이미지와 같은 파일들을 public에 직접 넣는 경우도 있는데 둘의 차이는 컴파일시에 필요한지 여부

index.html내부에서 직접 사용하여 컴파일 단계에서 필요하지 않은 파일들은 public에
반면, 컴포넌트 내부에서 사용하는 이미지 파일인 경우 이 assets 폴더에 위치

(참고 자료 내용 확인)

 

📁 component

- 각 페이지에서 사용되는 컴포넌트를 모아둠

- 그래서 각 페이지별로 폴더가 있음

 

📁 page

- router를 통해 직접 연결될 페이지들 모음

 

📁 .env

- 폴더는 아니지만..

- 우리는 백엔드 서버만 넣어놓음