23.07.10
오늘 한 일
- CS 스터디 공부 - React 18의 변화
- Gloddy 개발
-
Dogsounds-TIL과TIL레포지토리 통합
하루 요약
- 14:00 ~ 18:00 카공
- 19:30 ~ 23:00 집공
TIL 통합
Dogsounds-TIL과 TIL 레포지토리를 통합했다.
이제 로컬에서 확인하면서 TIL을 작성할 수 있게 되었다..!
원래는 md 파일만 작성해서 올리면 다음날 깃헙 페이지가 잘 올라갔는지 확인해보고, 빌드 실패하면 다시 수정해서 올리고 이랬는데, 이제는 그런 수고를 조금 덜 수 있게 되었다.
통합하면서 조금의 변화가 있었다.
url
https://self-driven-development.github.io/Dogsounds-TIL/TIL/강주혁에서
https://self-driven-development.github.io/TIL/members/강주혁로 바뀌었다.
io 다음에 붙은 네이밍은 레포지토리 이름을 따라가기 때문에, 기존의 방식대로 해버리면 TIL/TIL/강주혁 이 되버린다. 그래서 TIL을 빼고 members를 추가했다.
pnpm -> yarn
pnpm을 사용하고 있었는데, zero install을 사용하기 위해 yarn으로 바꾸었다.
폴더 구조에 대해..
항상 프로젝트 할때마다 고민하는 것이 바로 폴더 구조이다.
프로젝트 크기가 점점 커지면 파일을 찾는데 시간을 많이 쓰는 경우가 많다.
파일 하나 찾기 위해 사이드바를 이리저리 움직이며 찾기 힘들기 때문에 효율적인 폴더 구조을 찾는 것이 중요하다.
폴더 구조 정하는 기준
일단 보통의 프론트엔드 프로젝트는 다음과 같이 구성되어 있다.
src
├── components
├── pages
├── styles
├── utils
├── hooks
├── contexts
├── constants
├── types
├── api
└── assets
components는 컴포넌트를 모아놓은 폴더이다. 이 폴더 안에 어떻게 구성하냐는 이제 프로젝트마다 다르다.
나는 이제까지 프로젝트들을 하면서 다양한 시도를 해보았다.
- 특정 페이지에서만 쓰이는 컴포넌트들은 해당 페이지 폴더 안에 넣고, 공통으로 쓰이는 컴포넌트들은
components폴더에 넣기 / Breaking 레포 - 도메인 별 폴더를 만들어서 컴포넌트를 구분 ex)
auth,post,user/ 카공실록 레포 uis,domains/ 가천 익스텐션 레포
당연히 정답은 없고, 프로젝트마다 컴포넌트 디자인 패턴을 정해서 맞춰야 한다.
내가 생각하기에 폴더 구조를 정하는 기준은 다음과 같다.
관심사가 비슷한 것들을 모아놓아 관리하기 쉽게, 찾기 쉽게 만들기
Gloddy api 폴더 구조 잡기
오늘 api 세팅을 하면서 폴더 구조를 어떻게 잡아야 할지 고민을 많이 했다.
이전의 프로젝트에서는 api 폴더에 커스텀 인스턴스 파일과 api 호출 함수들을 도메인 별로 묶어두어 관리했었다.
그리고 react-query의 query hook이나 mutation hook을 만들 때 hooks 폴더 안 queries, mutations 폴더를 만들어 도메인 별로 묶어두었다.
하지만 이번에는 조금 구조를 바꿔보았다.
다음 프로젝트의 구조를 참고했다.
이 프로젝트에서는 각 도메인 별로 api 호출 함수, query hook, mutation hook을 한 폴더에 모아두었다. 그리고 query key 또한 상수로 관리하였다.
그래서 나는 이 구조를 참고하여 다음과 같이 구성하였다.
이렇게 구성하면 도메인 별로 관심사를 모아놓아 관리하기 쉽고, 찾기도 쉬워진다.
내일 할 일
- Rust 스터디 진행
- Gloddy 개발
- CS 스터디 공부