한 달 계획 짜기
어제 프로젝트 세팅을 끝냈으니
오늘은 계획표를 짜보쟈
지금 막 사이트를 이용해보며
유저 입장에서 추가/수정되면 좋겠다고 느낀 기능은 다음과 같다.
- 댓글 지우기 전에 alert
- 태그에 공백만 넣을 수 없도록 alert
- 아티클 마크다운 문법으로 입력하게 하지말고, WYSIWYG 에디터로 변경
- user settings 부분에서 고쳐지면 좋을 것 같다고 느낀 부분은 아래 사진과 같음
- global feed가 home이라는게 직관적으로 잘 안 느껴짐.
home에 있을 땐 home nav에 cursor를 비활성화 하는게 좋을 것 같음.
아니면 로고를 눌러도 home으로 이동되니, home nav 자체를 삭제하는 것도 괜찮을 듯. - 기존에 있는 중복된 태그는 못 들어가도록.
코드보니까 엔터랑 탭 콤마 했을 때만 태그가 처리 되던데,
시각적으로도 처리하는게 좋을 것 같음.
예를 들면 태그창에 어떤 값을 입력하면 동적으로 옆에 + 버튼도 뜨도록 한다든가.. - 없는 페이지에 접근했을 때 404 에러 다른거 뜨게
그리고 api와 통신 쪽에서는
- usertoken에 문제가 있는건지, 상태관리에 문제가 있는건지,
CRUD가 다 정상적으로 안됨.
그리고 network를 3G 상태에서 돌려봤을 때 로딩 스피너가 뜨던데,
스켈레톤 ui가 뜨도록 하는게 좋지 않을까?
그리고 SEO 처리..?
이 쪽은 시간이 남으면 좀 더 고민해봐야겠다.
리팩토링은 사실 잠깐 코드를 봤을 때도 변수명이나 단락이 너무
보기 좋게 짜여져있어서 리팩토링 할 부분이 있을까 싶은데...
내가 리팩토링을 한다기 보단,
토스의 frontend-fundamentals 문서를 보며 코드를 톺아보는게 좋을 것 같다.
왜 이렇게 짰는지.
결론적으로 짜여진 계획은 다음과 같다
최종 계획표
1단계: 프로젝트 구조 분석 및 API 이해
- 아키텍처 구조 분석
- 상태 관리 방식 이해 및 API 통신 디버깅
2단계: 코드 분석
- 토스의 frontend-fundamentals문서를 보며 코드 톺아보기
3단계: UI/UX 개선
- 댓글 삭제시 경고
window.confirm()또는 커스텀 모달
- 태그 입력
- 공백만 입력 시 알림
- 중복 태그 방지
- 키보드 처리 뿐만 아니라 시각적으로도 입력 보조
- 마크다운 에디터
- WYSIWYG 에디터 (
React Quill,TipTap등) 도입
- WYSIWYG 에디터 (
- 프로필 화면
- 각 Form별로 label 추가
- Bio 입력창: 크기 고정 +
overflow: auto - Reset 버튼 추가
- 홈/피드
- Global Feed가 홈임을 명확히 표현하거나,
- Home navigation 자체를 삭제
- 404 페이지 커스터마이징
4단계: 심화학습 및 마이그레이션
- Form 관리 개선
- 현재: 수동으로 폼 상태를 관리
- 학습 대상: TanStack Form 및 React Hook Form 비교 분석
- 서버 상태 관리 개선
- 현재: SWR 사용 중
- 학습 대상: TanStack Query와 비교 분석
- 클라이언트 상태 관리 개선
- 현재: 컴포넌트별 로컬 상태 관리 (useState/useReducer)
- 학습 대상: Zustand, Jotai 등 상태 관리 라이브러리 비교 분석
- 공통 학습 사항
- 각 라이브러리별 장단점 비교
- 마이그레이션 과정에서 겪은 문제점과 해결책
- 최종 선택 근거 및 적용 결과 정리