npm install
npm run lint:fix
를 입력하면 코드를 규칙에 맞게 수정할 수 있습니다.
main.tsx
route를 설정합니다. context provider도 설정합니다.
pages폴더
route에서 보여줄 페이지들을 관리합니다.
각 페이지 폴더들은 해당 페이지를 그릴 때 필요한 api, hook, model, store, component, css등을 포함합니다.
api는 axios로 요청을 하고 데이터를 받는 함수가 들어갑니다.
이 함수를 이용해서 hooks폴더에서 reactquery로 커스텀 훅을 만들어 데이터 요청을 관리합니다.
해당 요청으로 오는 데이터의 형식을 model폴더에서 정의합니다.
css폴더에 scss파일이 들어갑니다.
store파일에는 상태관리 함수가 들어갑니다.
auth폴더
유저 인증 관련 로직을 처리합니다.
context폴더
상태를 관리하기 위한 provider가 들어갑니다.
⇒ 차후 redux tool kit으로 바꿀 예정입니다.
feature
제가 redux tool kit이 익숙치 않아 예시 컴포넌트를 만들어놨습니다.
shared폴더
프로젝트의 여러 페이지에서 공통으로 쓰일 요소들을 모아두었습니다.
api폴더에는 공통으로 쓰일 데이터 요청 함수가 들어갑니다.
components 폴더에서 여러 페이지에서 공통으로 사용하는 컴포넌트를 보관합니다.
components는 다시 atom, molecules 폴더로 나뉘는데, atom에는 text, input, button등 최소한의 div 태그 단위의 컴포넌트가 들어갑니다.
icon들은 icons폴더에 모아둡니다.
molecules폴더에는 atom컴포넌트들이 모여 만든, 하나의 기능을 하는 컴포넌트들이 들어갑니다. select컴포넌트라던가 input form 컴포넌트라던가. 위젯같은겁니다.
store폴더에서 상태관리를 담당합니다.
utils에는 프로젝트의 모든 요청에 쓰일 axios인스턴스와, api 경로가 들어갑니다.
1. shared/utils/axiosClinet.ts 파일에서 원하는 axios클라이언트를 선택한다
2. 데이터를 사용할 페이지의 api폴더에서 ts파일을 생성하고, axios요청을 작성한다
3. hooks폴더에서 react query를 사용해서 커스텀 훅을 만든다
4. 사용하려는 컴포넌트에서 해당 훅을 사용해서 데이터를 사용한다.
페이지를 이루는 모든 것(컴포넌트, css, 훅, 모델 등)은 모두 해당 페이지에 있도록 한다. 공통적인것들은 shared에서 가져다 쓴다.
-
짧은 시간임에도 기본적인 프로젝트 요구사항을 모두 해낸 것
-
깃 사용에 좀 더 익숙해졌다!
-
궁금한 점이 생겼을 때 주저하지 않고 물어볼 수 있는 팀 분위기였다
-
다른 팀원들의 코드를 보고 많이 배울 수 있었다
-
프로젝트 일정 세분화
-
피그마 툴 사용 경험 부족(수진님 이외에…)
-
깃 PR 관리자 설정
-
추천게시물(좋아요 순서 정렬)을 일정 기간 동안 좋아요 증가 비율 혹은 상세페이지 접속 비율로 나타내면 어떨까 싶음..(할 수 있을까)
-
사용자 검색에 있어서 ‘나’의 정보도 검색되도록 하고싶음
-
최근 검색어 리스트가 나타나도록 하고싶음
-
API를 사용할 때 해당 페이지의 채널 id를 직접 적어줬는데 이걸 api를 통해서 유동적으로 바꿀 수 있다면 시도하고싶음
-
코드를 조금 더 매끄럽고 가시성 좋게 바꿔야 함
-
글목록을 처음부터 flat으로 넣지 않아서 내부적인 글에 대한 기능을 넣는데 어려움을 겪음으로인해 시간을 많이 뺏긴것 → 기존 채널 로직도 변경해서 author에 따른 수정버튼 보이기 수정할 수 있도록
-
시간이 많지 않은데 디테일에 고집부려서 상세페이지에서 기능구현하는 것을 못한 것 (우선순위)
-
상태관리에 대한 공부에 대해 부족한 이해도 증진하기
-
프젝하면서 애매하게 개념 업데이트한 것 예제랑 함께 정리하기
-
렌더링 타이밍에 대해서 좀더 찾아보기
-
https://developerhia.tistory.com/71 좀더 정리해서 우선순위 정리해보기
-
프로젝트 하기전에 프로덕트 예제 좀더 해보면서 데이터 이동에 대한 고민해볼 수 있는 경험을 쌓을 것
-
로그아웃 버튼 absolute로 박아놓은 거 → flex로 개선 or 상단으로 옮기기
-
팔로우/팔로잉 클릭하면 유저 목록 보여주기
-
정보 변경 시 비밀번호 변경까지 가능하도록
-
useQuery, useMutation 사용법, 개념 더 정확히 알고 코드짜기 + 비슷한 기능들은 코드가 겹치니까 더 줄일 수 없을지 고민해봐야됨
-
렌더링 줄이기
-
HTTP상태코드 더 활용해보기
-
GPT써서 해결했던 문제들 다시 보고 발전시키기 + 막혔던 부분, 해결했던 부분 블로그에 정리하기
-
코드 짜보기 전에 postman, 개발자도구 좀 더 활용해보기
-
api, 배포 혼자 힘으로 해보기
- ec2 로컬이 아닌 aws에서 실행하게 만들기
- https로 바꾸기
- 폴더구조 fsd로 바꾸기
- 실험적인 작업은 미리 테스트하기
- 컴포넌트 단일책임원칙 적용하기 (잘 나누기)
- contextapi 스터디
- 이전 버전과의 성능비교를 어떻게 하면 쉽게 할 수 있을까 ⇒ 소요시간, 점수 이런걸 콘솔로 출력할 수 없나.? ⇒ web-vitals 라이브러리 이용
- 낙관적 업데이트 적용하기
- 배포 ec2에서 해보기
- api요청 최대한 줄이는 방법 고민하기
- 캐싱 시간 어떻게 설정해야 적절한지?
- 개발하면서 새로 알게된 개념 그때그때 정리하기
