야놀자X패스트캠퍼스 토이프로젝트 1 복습
9월에 진행했던 첫 번째 토이프로젝트로 직원들을 위한 위키 사이트를 만들었는데 두 번째 토이프로젝트를 하기 앞서 이 때 부족했던 점을 살펴보고 복습하고자 한다.
내가 맡은 부분 : 로그인 / 회원가입 / 유저 정보 입력 페이지
1. 구현사항
1) 회원 가입 / 로그인 페이지 - 구글 아이디 및 이메일로 회원 가입 구현
2) 유저 정보 입력 페이지 - firebase와 연동해서 정보 입력하기 , 로그인 후 내 정보 수정을 눌렀을 때 로컬 스토리지에 데이터가 있으면 그 데이터 유지해주고 거기서 갱신시키도록 함
2. 막혔던 부분
- firebase의 DB 컬렉션을 구성할 때 user 컬렉션과 팀 컬렉션을 직접 짰는데 초반에 어떻게 해야 하는 지 감이 안와서 많이 헤맸던 것같다.
- firebase의 유저 정보를 계속 유지되게 해야했는데 이 점이 해결이 안됐다. 새로고침 하면 바로 로그아웃됐다가 다시 로그인 되는데 난 이걸 계속 유지하고 싶었는데 너무 어려웠다. = recoilPersist와 localStorage를 활용해서 유저 정보를 저장했다. recoil이 계속 재렌더링이 되는 문제가 있었다. 그래서 persist로 변하지 않을 땐 유지시켜주고 이를 localStorage에 저장해줬다.
- 디자인을 하기 너무 어려웠다. 디자이너가 없는 상황에서 내가 원하는 화면을 구현해야 하는데 감각이 부족한것인지 경험이 부족했던 것인지 화면을 구성하는게 너무 어려웠다 = 팀원 중 한 분이 퍼블리셔 출신으로 너무 디자인을 잘 수정해주셔서 많이 배웠다. 다양한 레퍼런스를 많이 보면서 많은 경험을 해야 할 것 같다.
3. 배운 점
- 사실 프로젝트에서 recoil을 써본 건 처음인데 전역 상태 관리에 대해서도 배웠고 또 커스텀 훅으로 빼보는 점도 배웠다.
- 로컬 스토리지와 같은 웹 스토리지도 처음 써봤는데 좋은 경험이 된 것 같았다.
4. 보완해야 할 점
- eslint 및 prettier 설정도 직접 해보면 좋을 것 같았다.
=> https://november-itstime.tistory.com/22
프로젝트 셋팅 : ESLint & Prettier
이번 토이프로젝트를 진행하면서 eslint와 prettier를 규칙을 정해서 협업을 했는데 내 개인프로젝트에 적용시켜보려고 천천히 정리해보고자 한다. 1. ESLint & Prettier 보통 하나만 사용하지 않고 두
november-itstime.tistory.com
- 디자인 측면에서 좀 더 고민해봐야 할 것 같다.
- 코드를 더 이쁘게 쓰는 법을 배워야겠다
첫 번째 과제 때도 들었지만 멘토님께서 코드 가독성이 많이 떨어진다 하셨다. 나름 잘 지키고 있다고 생각했는데 코드를 이쁘게 작성하는 법을 함수형 프로그래밍을 배워서 깔끔하게 해야겠단 생각이 들었다. 나중에 프로젝트를 진행 할 때 코드의 가독성에 대해 좀 더 신경써야 할 것 같다.