ABOUT ME

Today
Yesterday
Total
  • 오늘의 집 클론 코딩 : 파일구조
    이노베이션캠프/웹프로젝트-3(클론코딩) 2023. 7. 27. 17:57

    파일 구조

    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

    - 폴더는 아니지만..

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

Designed by Tistory.