어드민 페이지 프로젝트 회고
2024-05-21 오후 12시 00분
2024-06-26 오후 12시 00분
Admin 페이지 구현 개인 프로젝트 04/28 ~ 05/13
기능별 구현 과정
프로젝트 목적
OAuth를 통해 일반적인 회원가입 / 로그인을 지원하는 간단한 태스크매니저 프로젝트입니다.
데이터베이스Mysql을 이용해 서버단과 직접 통신하고 CRUD을 구현했습니다.
Dark Theme, Modal등 간단한 사용자 친화적인 기능을 추가하였습니다.
기술스택 사용목적
TypeScript를 직접적으로 연습해보고자 도입 했습니다.mySql과 효율적인 통신을 위해 Docker를 활용하여 구현 하였습니다.Global State를 통한 상태관리에 익숙해지기위해 Zustand를 도입하여 사용 했습니다.- 간단한 테마 지원과 빠른 스타일링 작성을 위해
Tailwind CSS를 도입하여 사용 했습니다.
Token Verify등 간단한 사용자 정보 비동기관리를 위해 React-query를 도입하여 사용 했습니다.
디렉토리 구조
배우게 된 점
- Array method
(Filter, map, reduce)의 종합적인 활용
같은 구조더라도 상황에따라 filter, map, reduce를 다양하게 활용하여 배열메소드의 활용에대해 깊게 탐구하였다.
Token과 oAuth의 구현
사설회원가입과 로그인을 구현할 수 있고, 이에 따른 사용자 데이터를 관리하는 로직을 구현했다.
- 서버와 데이터베이스의 통신
Docker를 통해 mySql 데이터베이스와 통신해보면서 간단한 CRUD를 통해 데이터 로직을 구현해보며 백엔드 지식을 배웠다.
- 단일책임
(SR)
첫 설계당시 SR를 전혀 고려하지않아 문제요소가 다분한 1회성 컴포넌트를 리팩토링을 통해 약간은 지원하게 변경하였으며, 다음부터 가장 고려해야할 우선순위로 고려하게 되었다.
- 다양한 라이브러리
Zustand를 자유롭게 사용하게 되었고, React-query의 기본적인 작동을 이해하고 nivo, tailwindcss, react/oAuth등 다양한 라이브러리를 직접 Doc를 보며 사용해보며 라이브러리의 중요성에 대해 좀더 탐구해보게 되었다.
- UI 로직
상당히 간단한 구조를 가지고 있지만, 카테고리 분류 / 사용자 데이터 갱신 / 모달창 등 다뤄보지 않았던 다양한 UI로직을 직접 구현해보며 배울 수 있었다.
댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.
