[2024.06.13] React 심화 프로젝트_가계부(95% 완성)

어느 정도 완성해서야 생각하지만, 아예 심화과제를 받았을 때부터라도 tailwind css로 리팩토링을 하고 진행했으면 어떨까 하는 아쉬움이 조금 남지만 이미 돌아가기에 너무 멀리 와버렸다. 이번 프로젝트는 styled-components로 마무리하고 다음 프로젝트 때부터 tailwind를 더 많이 써보기로!

 

※ 추가된 프로젝트 기능

1. Header Nav 바 구현

헤더는 글래스 모피즘으로 구성하였고, 홈으로 이동할 수 있는 로고, 마이페이지 이동 이미지, 로그인/로그아웃 버튼이 위치해 있다. 마이페이지 이미지는 로그인했을 때만 노출된다.

글래스 모피즘으로 만든 헤더

메인 페이지

2. jwt 인증 서버를 통한 로그인/회원가입 기능

로그인을 하지 않으면 메인 페이지로 이동이 불가능하게 하였으며, 로그아웃 시에도 로그인 화면으로 되돌아온다.

로그인 화면

3. 마이 페이지

간단하게 프로필 사진 변경과 닉네임 변경 기능이 있는 마이 페이지! 

마이페이지

 

4. 본인이 작성한 지출 목록에만 접근 가능

 

 

※ 기술적인 노력

1. Restful API

json-server를 통해 목업 데이터를 세팅해 두었고, axios와 tanstack-query를 통해 restful하게 로직을 구현할 수 있게 신경 썼다. 글을 작성할 때야 보이는데, error 처리까지 작성했다면 좀 더 세밀하게 했으면 어떨까 하는 아쉬움이 남는다.

src/api/spending.api.js 중 일부

src/hooks/useSpending.js

특히 useSpending.js라는 훅을 만들 때 아래 사진과 같이 mutationFn을 생략하고 바로 썼던 적이 있는데, 아래와 같이 오류가 많이 생겨서 놀랐다. 어떤 오류인지 찾기 위해 한참 헤매어 위와 같이 멀쩡한 로직으로 바꾸었으나 아직 저 오류가 어떤 걸 의미하고, 어떤 조건에 생기는지 명확하게 찾지 못해 조금 더 알아보아야 할 것 같다.

수없이 많은 오류의 악수가..

 

2. 전역 상태관리_Zustand 사용

앞서 사용하였던 redux와 비교하면 더할나위 없이 사용하기 간편했던 zustand. 리렌더링시 값이 초기화하는 것을 막기 위해 persist를 사용했는데, 뭔가 사용법이 제대로 된 것 같지 않아 좀 더 공부해야 할 부분이다. 

src/stires/userInfoStore.js

전역 상태관리에다가 서버 상태관리까지 함께 하니 더욱 에러 처리에 대한 중요성이 높아진 것 같고, 지금 구성한 프로젝트에 모달이나 토스트를 추가하면 조금 더 깔끔한 UI가 만들어지지 않을까 한다. 아직 제출일이 하루 남았으니 하루 동안 조금 더 다듬어 봐야겠다.