[Project_02] 기존 프로젝트 문제점 파악 및 개선 방향

하나의 프로젝트를 만들어 놓고 어느정도 완성되면, 방치하는 문제를 개선하기 위해서 시작했습니다.

 

[수정사항]

2023.05.10

- 반응형으로 수정

 

2023.05.12

- 문제점 및 개선점 분석

 

2023.05.14

- 필터 추가

 

[프로젝트 정보]

- 깃허브: https://github.com/joseph0926/project_02-MoneyNote
- 배포링크: https://project02expensenote-deploy-production.up.railway.app/

 

1. 이 프로젝트를 시작한 이유

프론트에 대한 공부는 어느정도 일단락되었기때문에, 개인 프로젝트를 진행하고 싶었습니다.

그래서 프로젝트에 활용할 API를 찾아보던중, 이왕 백엔드 공부 했던것도 있고 해서 직접 REST-API를 구축해보기로 결정하였습니다.

 

또한,

프로젝트 주제를 비용추적기로 잡은것은

실제로 부모님께서 가계부를 작성하시는데, 엑셀에 직접 하나하나 작성하는 방식으로 하셨습니다.

이에 혹시 조금이라도 도움이 될만한 웹 애플리케이션을 만들수 있지 않을까? 해서 시작했습니다.

 

2. 프로젝트 진행시 어려웠던 점

기세좋게 시작하였지만,

아무래도 처음 구축해보는 풀스택 웹 애플리케이션이였고, 아직 숙력도가 부족해 많이 막히고 시간도 오래걸렸습니다.

 

상황 배경	문제점	문제 해결을 위한 노력	결과적으로 해결한 방법
백엔드에서 로그인 방식으로 쿠키를 채택하였고, 프론트에서는 http-only 쿠키를 직접 다룰 수 없기 때문에, 최상위 루트에서 useEffect로 백엔드에게 get 요청을 계속 보내였습니다.	http 요청을 createAsyncThunc를 이용하였는데, 이때 builder를 통해 redux state에 user가 저장되는 것 보다 useEffect에서 redux state를 확인하는 것이 빨리 이루어져, null이 반환되었습니다.	1. 처음 생각한 방법은 useSelector 자체를 딜레이 시키면 해결되지 않을까? 였습니다,, 따라서 setTimeout 안에 useSeletor를 넣는 방식을 생각해봤지만, react hook 규칙에 어긋나는 방법이였습니다. 2. router v6.4 부터 도입된 loader 함수를 이용해보는 것 이였습니다. defer, Await를 이용하여 로딩을 활용하는 방법이였습니다. 이는 지금 생각해보면 충분히 가능한 방법이지만, 리액트 훅을 loader에 활용하는 방법을 몰라서 실패하였습니다.	redux에서 isLoading을 통해 http 통신 로딩을 컨트롤 하고있었는데, 추가적으로 userLoading state를 추가하여 초기값을 true로 설정한 후, 앞서 언급한 get 요청을 통해 user에 값이 들어갔을 때만 false로 바꾸고, 이를 사용해야하는 곳에서는 userLoading이 false 일때만 user를 사용할 수 있도록 코드를 작성하였습니다.
이슈: https://github.com/joseph0926/project_02-MoneyNote/issues/5 기존에 프론트엔드로만 작업할때는 search 필터를 입력값 하나마다 필터링이 되도록 설정하였었고, 이번 프로젝트에도 처음에는 똑같이 적용하였습니다.	이런 방식으로 진행되다보니, 하나 입력될때마다 백엔드로 요청을 보내게 되었고, 성능적으로도 실사용적으로도(하나 입력시 약간의 딜레이 발생) 매우 떨어졌습니다.		여러 웹 사이트(구글, reddit, github issues, statck overflow,,,)에서 검색을 하였고, 결과적으로 debouce로 처리하는 방법을 알게되었습니다. (참고 링크: https://stackoverflow.com/questions/69727243/react-search-using-debounce) 따라서 로컬 입력으로 처리후 debounce하여 백엔드에 요청을 보내는 방식으로 처리하게 되었습니다.

 

3. 프로젝트 문제점

1.  반응형이 아니다
2. 프로젝트에 대한 설명이 부족하다 (저희 부모님이나 친구들에게 아무런 정보 없이 보여줬을때, 어떻게 사용하는지 저한테 다시 물어봤습니다..이에 크게 부족함을 느꼈습니다)
3. 코드의 일관성, 깔끔함이 부족하다

이러한 문제점들을 해결해보려 합니다.

 

// 2023.05.12 추가

 

2번에 대해서 가족과 친구들에게 많은 피드백을 받았고,

이를 하나씩 수정해보려합니다.

 

문제점

1. 지출예정에서 지출로 변경하는 방법이 없다
2. 마이페이지에서 개인정보 변경이나 비밀번호 변경의 UX적 측면이 부족하다
3. All Expense와 Add Expense의 기능이 겹친다 -> All Expense의 존재 의미가 현재로는 없음
4. 지출 금액에 지출예정과 지출 금액이 모두 합쳐져있다

개선방향

1. 온-오프 버튼을 추가후 border 색으로 차별점을 두기
2. 기존 유명 사이트들이 어떻게 정보 수정 페이지를 만들었는지 확인하고, 비슷하게 구현하기
3. All Expense 사이트에 필터 기능 추가 또는 Add Expense 페이지와 합쳐서 한페이지로 구성
4. 지출금액 + 지출예정금액 합쳐진 금액과, 지출 금액으로 분리하여 좀더 의미있는 상태로 구성하기

 

4. 프로젝트 개선 방향

1. 위의 문제점들 해결
   • 반응형으로 수정: https://github.com/joseph0926/project_02-MoneyNote/commit/34ed95fc9a15b1ee275026f20ec36064ec506780 (2023.05.10)
   • 필터 추가: https://github.com/joseph0926/project_02-MoneyNote/commit/8c762e8319059ec2d94999e77ef997adbe2ffb26 (2023.05.14)
   • 전체적인 프로젝트 개선 방향 설정
     • https://joseph0926.tistory.com/67 (2023.05.16)

1. 타입스크립트로 마이그레이션 해보기
2. 테스트 코드 추가하기

 

처음 진행한 풀스택 프로젝트라 많은 부족함을 느꼈지만,

그래도 얻어간것도 많기때문에 애착이 가는 프로젝트입니다.

따라서 최대한 유지보수를 통해 더욱 괜찮은 프로젝트로 발전시켜보려합니다.