KEYNUT 프로젝트 회고록 ☁️

프로젝트 개요

 

기간은 2024.5.29 ~  2024.8.14로 약 2개월 반에 걸쳐 프로젝트를 진행했다.
keynut은 팀원의 키보드애 대한 애정으로부터 시작된 전자기기 중고거래 사이트이다.
키보드만을 대상으로한 중고거래 사이트를 만들 생각으로 시작해 이름은 keyboard + nut으로
키보드에 열정적인 사람들의 모임으로 지었다.  주요 기능은 상품 등록, 상품 관리, 상품 조회 ,인기 상품 조회, 찜 등이다. 

프론트엔드 두명이서 진행하여 역할을 따로 분담하지 않았지만 진행하다 보니 내가 프론트를 많이 맡아서 하게 됐고 서버쪽을
팀원이 대부분 맡았다. 

기술적 배움

이번 프로젝트에서는 React Query, Tailwind, MongoDB 등 처음 사용하는 기술이 많았다. 소셜 로그인도 처음 경험해 보았다.

React Query는 서버의 데이터를 효율적으로 가져오고 캐싱해주기 때문에, 같은 정보를 서버에서 다시 받아올 필요가 없었다. 또한 로딩, 성공, 실패 상태를 표준 API로 쉽게 관리할 수 있었다. React Query의 다양한 Hook 덕분에 인피니트 스크롤과 optimistic update를 편리하게 구현할 수 있었으며, DevTools를 사용해 데이터의 상태를 쉽게 확인할 수 있어 매우 유용했다.

Tailwind는 정말 편리하다고 느꼈다. 설정 파일에 추가해야 하는 경우가 많고 처음에는 검색할 일이 많았지만, 익숙해질수록 너무 편했다. 개인적으로는 Tailwind >> CSS파일 >>>>Styled Component순으로 편한 것 같다.

MongoDB 초기 설정은 팀원이 모두 담당했고, 나는 내가 사용하는 API를 작성하는 정도였지만 SQL 쿼리 없이 간단한 메서드를 사용해 조건에 맞는 데이터를 쉽게 찾을 수 있어서 편리했다. 또한 동일한 컬렉션 내에서 문서들이 서로 다른 스키마를 가질 수 있어 중간에 데이터를 추가하거나 수정하는 경우에 정말 편리하다고 느꼈다.

담당 기능

 

팀원은 상품 상세 페이지, 상품 판매 페이지, admin 페이지를 맡았고, 

내가 담당한 페이지는 상품 조회 페이지, my페이지, home페이지, bookmark페이지, 프로필 페이지다.

 

Shop 페이지 구현에서는 처음으로 쿼리스트링을 다루면서 필터링과 검색에 따라 이를 생성하는 로직을 만드는 데 어려움이 있었다. 또한 검색이 포함될 경우 디바운스를 적용하지 않거나, 최근 검색어 모달이 스크롤 시 자동으로 닫히도록 하는 등 세부적인 부분에 신경을 많이 써야 했다.

 

Bookmark 페이지나 My 페이지(프로필 관리, 상품 관리)에서 사용하는 기능은 팀원이 재사용 가능하게 구현을 해놔서 큰 어려움 없이 완료할 수 있었다.

배포와 사용자 경험

 

배포를 고려해 프로젝트를 진행하면서 사용자 경험에 대해 많은 고민을 하게 되었다. 실제 사용자가 있을 것을 기대하며 작업했기 때문에 로딩이 필요한 UI에는 모두 스켈레톤을 추가했고, 사용자 환경에 맞게 구현을 하려고 노력했다. 팀원이 이미지 업로드와 캐시 사용에서 최적화를 열심히 해준 덕분에 성능이 크게 향상되었다.

아쉬운 점

 

디자이너가 없다보니 디자인의 한계가 좀 있었던 것 같다. 피그마를 사용해 초기에 디자인을 하고 시작을 했지만 최종까지 수정을 많이 거쳤다. 디자이너가 따로 있었다면 진행이 훨씬 빨랐을 것 같긴 하다. 기간은 좀 걸렸지만 내가 해서 애정이 있어서 그런지 개인적으로는 정말 만족한다

기록을 많이 하려고 했으나, 블로그에 정리하는 것이 생각보다 어려워 메모장에만 남긴 경우가 많았다. 기록을 잘하는 사람들을 보면 존경심이 생기며, 앞으로는 더 잘 기록하는 사람이 되고 싶다

 

실사용자를 기대하며 프로젝트를 진행했지만 사용자 유치가 쉽지 않다는 것도 깨달았다. 배포 후 실제로 사용해주는 사람이 거의 없어 조금 속상했지만, 특별한 기능이 있는 것도 아니었기 때문에 그 기대는 다소 헛된 것이었다. 유지, 보수, 업데이트를 하고 싶었지만, 사용자가 없어어려움이 있을 것 같다..ㅜㅡㅜ 하지만 생각나는대로 최적화도 해줄 것이고, 타입스크립트로 마이그레이션 할 계획도 있다!

 

성장과 배움

 

이번 프로젝트를 통해 많은 새로운 기술을 습득할 수 있었다. Next.js로 프로젝트를 처음 진행해 보았고, 상태 관리 라이브러리로 React Query를 사용해보았다. 반응형 웹 구현도 계속해서 발전하고 있으며, 이전 프로젝트보다 완성도가 높아졌다고 생각한다. 또한, 배포를 경험하면서 사용자 경험을 더욱 고려하게 되었다.

마무리하며

처음 2개월은 어려움도 있었지만 빨리 구현해내고 싶은 마음에 매일 열심히 재밌게 임했다.
마지막 2주 정도 배포를 위해 코드를 다시 한번 훑고 성능과 유지 보수 가능한 코드를 위해 갈아엎고 
테스트를 계속 진행하며 버그를 수정하는 과정은 솔직히 힘들고 많이 지쳤다. 이제 끝났다고 생각하면 계속해서 
버그가 생기고 디자인을 갈아엎고...그때는 하면서도 더 나아지고 있다는 확신이 없었는데 많이 성장하는 시간이였던 것 같다.
무엇보다 포트폴리오나 이런 회고록에 캡쳐 이미지가 아닌 실제 링크를 첨부할 수 있다는게 정말 뿌듯하고 좋다🥹
끝내려니 좀 섭섭하지만..정말 아꼈던 키넛 이제 진짜 끝!

https://www.keynut.co.kr/

KEYNUT - 키넛