TodoList 프로젝트 구조 정리하기

현재 TodoList 프로젝트의 폴더 구조는 다음과 같다.
server는 제공된 서버를 사용했고, todo폴더 안의 내용들을 내가 작업했다.

🐣 변경 전 🐣
my-todolist
├─ .DS_Store
└─ myTodolist
   ├─ README.md
   ├─ server
   │  ├─ README.md
   │  ├─ ... 생략
   └─ todo
      ├─ package-lock.json
      ├─ package.json
      ├─ public
      │  └─ index.html
      └─ src
         ├─ App.js
         ├─ auth
         │  ├─ useJoin.jsx
         │  └─ useLogin.jsx
         ├─ components
         │  └─ Nav.jsx
         ├─ hooks
         │  └─ useCreateTodo.jsx
         │  └─ useDeleteTodo.jsx
	     │  └─ useEditTodo.jsx
         │  └─ useGetTodoDetail.jsx
         │  └─ useGetTodoTitle.jsx
         │  └─ useGlobalContext.jsx
         ├─ context
         │  └─ globalContext.jsx
         ├─ index.js
         └─ pages
            ├─ Home
            │  ├─ Home.jsx
            │  ├─ TodoDetail.jsx
            │  ├─ TodoForm.jsx
            │  ├─ TodoSection.jsx
            │  └─ TodoTitle.jsx
            ├─ Join
            │  └─ Join.jsx
            └─ Login
               └─ Login.jsx

💡 폴더 이름을 좀 더 직관적인 이름으로 변경

1. context -> store
   프로젝트 전역에서 사용할 context를 가지고 있는 폴더를 처음에는 context라고 했는데 관례를 따라 store로 변경했다.
2. hooks -> todos
   커스텀 훅들을 모아둔 폴더라 hooks라고 했는데 todo에 관련한 axios요청 커스텀 훅들이 들어있는 폴더라서 todos로 변경했다. 나중에 api폴더 안으로 넣었다.

💡 관련 있는 폴더 합치기

백엔드 서버와 REST API 연동을 위해 만든 폴더는 auth폴더와 todos폴더이다. 현재는 폴더가 따로 존재하는데 관련 있는 폴더끼리 묶어놓기 위해 큰 api폴더를 만들고 안에 넣어주었다.

아래는 폴더 구조를 정리한 후 다시 딴 폴더 트리다.

🐥 변경 후 🐥
my-todolist
├─ .DS_Store
└─ myTodolist
   ├─ README.md
   ├─ server
   │  ├─ README.md
   │  ├─ ... 생략
   └─ todo
      ├─ package-lock.json
      ├─ package.json
      ├─ public
      │  └─ index.html
      └─ src
         ├─ App.js
         ├─ api
         │  ├─ auth
         │  │  ├─ useJoin.jsx
         │  │  └─ useLogin.jsx
         │  └─ todos
         │     ├─ useCreateTodo.jsx
         │     ├─ useDeleteTodo.jsx
         │     ├─ useEditTodo.jsx
         │     ├─ useGetTodoDetail.jsx
         │     ├─ useGetTodoTitle.jsx
         │     └─ useGlobalContext.jsx
         ├─ components
         │  └─ Nav.jsx
         ├─ index.js
         ├─ pages
         │  ├─ Home
         │  │  ├─ Home.jsx
         │  │  ├─ TodoDetail.jsx
         │  │  ├─ TodoForm.jsx
         │  │  ├─ TodoSection.jsx
         │  │  └─ TodoTitle.jsx
         │  ├─ Join
         │  │  └─ Join.jsx
         │  └─ Login
         │     └─ Login.jsx
         └─ store
            └─ globalContext.jsx