리팩토링 하는 이유
지금까지 만든 프로젝트 중 가장 만족스럽지 못한 프로젝트였고, 지금의 나는 더 많은 것을 배웠다.
새로운 기술을 배울 때마다 "이 개념을 저기에 썻으면 더 좋았을 걸" 이라 생각하며 둥지 프로젝트를 떠올랐다.
그때 당시에는 단순한 UI가 보기 싫어서 새로운 것을 도전했다. 하지만 지금와서 생각해보니 아쉬운 부분이 많았다.
쇼핑몰 페이지 성격상 단순한 UI가 많아서 나는 여러 애니메이션을 집어넣어 "특별함"을 추가했다. 하지만 애니메이션을 적용 할 수록 코드는 더 복잡해지고 원하는 동작대로 작동을 안했다. 오히려 더 난잡해지는 느낌이었다.
그래서 UI는 단순하고 깔끔하게 다시 만들고 코드 설계를 다시 짜서 성능이 더 좋아지게 만들어 봤다.
이 외에도 상세 페이지, 장바구니 페이지 등등 여러가지를 수정 했다. 자세한 설명은 아래 링크를 통해서 확인 할 수 있다.
새로 구현한 기능
1. React-query를 이용해서 실시간 장바구니 수량 업데이트
React-query 사용해서 장바구니 상태 실시간 업데이트 하기
🤔 React-query 사용 이유 오늘 내가 해볼 것은 DB에 있는 장바구니 수량을 실시간으로 반영해주는 아이콘을 만들 것이다. 원래 같았으면 장바구니 버튼 클릭 시 axios 요청을 통해 수량을 setState 함
jin99.tistory.com
2. Intersection-observer 와 useInfiniteQuery를 이용해서 무한 스크롤 만들기
useInfiniteQuery를 활용한 무한 스크롤 구현하기
🤔 useInfiniteQuery를 사용한 이유 무한 스크롤을 적용시키는 방법은 여러가지가 있다. 하지만 구조는 비슷할 것이다. Intersection-observer를 이용해 특정 영역을 감시하고, 감시된 영역이 보이면 데이
jin99.tistory.com
3. Custom Hook 사용해서 카카오 맵 API 관리하기
카카오 맵 API를 활용한 강력한 커스텀 훅 만들기
🤔 커스텀 훅을 사용한 이유? 사실 처음부터 커스텀 훅을 사용해 만들 생각은 없었다. 처음 프로젝트를 만들 당시 카카오 맵 API를 활용한 중복된 코드가 많았고, 이를 불편하게 생각한 나는 리
jin99.tistory.com
'프로젝트' 카테고리의 다른 글
| [C# / Winform] FTP 통신 프로그램 만들기 (0) | 2024.08.16 |
|---|---|
| C#, WPF로 개인 프로젝트 만들어 보기(1) (0) | 2024.07.04 |
| [개인 프로젝트] - 포트폴리오 웹 사이트만들기 (1) | 2024.02.09 |
| [리팩토링] - JinCha 프로젝트 뜯어 고치기 (2) | 2024.01.28 |
| [포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 자취방 리뷰 페이지(1) (1) | 2023.12.12 |