project | 금융상품 추천 프로젝트 회고

💸사이트

배포 사이트 현재는 서버가 내려간 상태

깃허브 레포지토리

팀노션 링크

💸작업기간

2023.02.13~02.24(12일)

💸팀원구성

프론트엔드 4명, 백엔드 4명

💸기술스택

💸레이아웃

나는 검색 페이지를 맡게 되어 레이아웃 구성을 위해 열심히 레퍼런스를 찾아봤다. 굿닥, 오늘의 집, 토스, 지그재그, 멜론, 카카오 맵, 네이버 등...!!! 마음에 드는 UI를 가진 앱을 위주로 찾아봤다.

검색 페이지	검색결과 페이지

• 검색을 담당하게 됐을 때, 간단하게 검색바만 있는 것을 생각했다. 레퍼런스들을 보고 레이아웃을 구성하다 보니까, '검색바'만 있는 검색 페이지는 단 한곳도 없었다. 검색 페이지는 사용자들이 주로 검색을 하지만, 검색을 하러 들어갔다가 인기 있는 검색어가 궁금해서 눌러볼 수도 있고, 서비스가 최근 밀고 있는 이벤트를 홍보하는 것을 보고 들어가 볼 수도 있는...! 다른 어느 페이지보다도 유저의 관심이 어디로 쏠릴지 모르는 곳이라서, 떡밥(?!)이 여기저기 많이 뿌려져야 하는 페이지였던 것이다!!
• 검색 페이지에 적용해 볼 수 있는 재밌는 기능들이 많이 보였고, 우리 기획에 맞는 현실적인 것들로 기능들을 추렸다.

💸구현 기능

주체적으로 개발한 부분만 가져왔다.

최근 본 상품, 최근 검색어	자동저장

검색결과	검색결과 없음

📍 검색바

• 상품명으로 검색이 가능한 입력 폼
• 입력된 글자가 있을 시 우측 삭제(❌) 버튼 등장
• 검색어 없으면, confirm('검색어를 입력해주세요')
• Submit 시에 검색결과 페이지로 이동

개발 전에 로직을 생각해둘 땐 고려해 볼 수 없었던 분기 처리가 많아서 어려웠던 기억이 난다. 특히 자동 저장 기능 on/off + 검색바에 검색어 입력 여부가 합쳐져 분기처리해 줘야 했을 때가 제일 어려웠다. 자동 저장 여부를 prop으로 처리하려고 했다. 이렇게 하다 보니 자동저장 기능이 포함 안되는 컴포넌트가 거의 없었는데, 컴포넌트 관계가 부모-자식이 아닌 경우도 있어서 코드가 굉장히 복잡해졌다. 결국 험난한 과정을 거친 후 redux store로 자동 저장 여부의 상태 값을 관리하니, 속이 아주 편안... 해졌다..ㅎㅎㅎ

📍 최근 본 상품

• 상세정보 눌러봤던 상품 중 최근 것 1개 조회 가능
• 클릭 시 해당 상품의 상세페이지로 이동
• 최근 본 상품이 없을시 해당 섹션 전체 숨김

최근 본 상품은 멜론의 '최근 본 콘텐츠'에서 아이디어를 얻어 가져왔다. 레이아웃 짤 때는 너무 재밌겠다! 두근두근...! 그런데 구현하는 게 어려우면 어떡하지?하며 안 해본 것이기에 약간 걱정했다. 그런데 웬걸 백엔드와 협업하니 데이터가 어떻게 되어 있는지와 무관하게, 구현하는 입맛에 맞춰 데이터를 요청해올 수 있는 것 아닌가...? 그래서 내가 처리할게 별로 없었다. 가장 최근에 본 콘텐츠 1개만 보여주면 되는데 이걸 api로 조회했을 때 데이터를 달라고 했으니, 그냥 조회해서 출력만 했다. 허헣.. 걱정이 무색하게도 쉽게 끝났던 구현! 예상과 달랐던 이 과정도 재밌었다ㅋㅋㅋㅋ

📍 최근 검색어

• 최대 10개까지 제공
• 검색 최신순으로 정렬
• 개별 삭제 가능
• 전체 삭제 클릭시, confirm 메시지(최근검색어를 모두 삭제하시겠습니까?) 띄우기
• 전체 삭제 완료시, 삭제 개수 메시지(ex. 00개가 삭제됐어요)
• 최근 검색어 없을 시, 메시지 제공(최근 찾아봤던 내역이 없습니다.)

검색어 전체 삭제 시에 사용자에게 토스트 메시지를 보여주는 것은 원래 계획하지 않았다. 관련 api 담당 백엔드 분께서 프로젝트 기간 중간쯤 의견을 제안해 주셔서 추가하게 된 것이다! 00가 삭제됐어요 식의 메시지를 띄워주면 어떻겠냐고! 파트 간 소통이 활발하지 않은 분위기였는데, 이렇게 의견을 제시해주셔서 너무 감사했다. 생각지도 못했던 부분을 다른 팀원분이 시원하게 긁어주신 것 같은 느낌이어서 프로젝트에 재밌게 참여했다ㅎㅎㅎ

📍 검색결과 페이지

• 카테고리 탭
  • 카드, 대출, 예적금, 청약 탭을 클릭하여 해당 카테고리의 검색결과만 볼 수 있음
• 통합 탭
  • 카테고리별로 최대 3개까지 결과 제공
  • 모두보기 버튼 클릭 시, 해당 카테고리 탭 검색결과로 이동하여 결과 전체를 제공
• 카드, 대출, 예적금, 청약
  • 정렬에 따라 상품 목록 순서 변경
  • 검색결과 없을 시 메시지(ex. '00'의 검색결과가 없어요 등등), 최근 검색어 목록 제공
  • 목록에 있는 상품 클릭시 해당상품 상세페이지로 이동

API 명세로 확인하는 작업이 얼마나 중요한지 깨달았던 페이지였다. 검색 API는 각각의 카테고리로만 결과를 가져올 수 있도록 협의했다. 카드 탭에서는 카드 검색 결과만 가져올 수 있어 문제가 없었다. 하지만 통합 탭에서는 모든 카테고리의 결과를 가져와야 했기에, 같은 검색어에 대해 API를 4번 호출하여 결과를 보여줘야 했다. API 논의가 부족하면 코드 양도 증가하고 API 호출 횟수도 배로 증가할 수 있다는 것을 알게 됐다.

📍 구현방법 포스팅

앞서 말한 기능들의 코드가 포함된 구현방법은 포스팅으로 따로 남겼다.
👉 [React] 최근본상품, 최근검색어, 자동저장 기능 구현하기

💸에러 핸들링

프로젝트 참여할 때마다 많은 에러들을 마주했지만, typescript를 적용한 프로젝트가 처음이라 그랬는지 더 많은 에러들을 마주했다. 사진에서 볼 수 있듯이 에러 80% 이상이 typescript.. 이번 기회를 통해 typescript에 대해 전반적으로 친해질 수 있었다. 하지만 아직도 두루뭉술한 것이 많아서 더 많이 공부해 보고 싶다는 생각이 들었다.

기억이 나서 정리해 볼 수 있는 것은 포스팅으로 기록해 봤다.
👉 [Git] 브라우저 새로고침 자동으로 안됨
👉 [React] 레이아웃 설정 중 App.tsx routes 에러

💸알게된 것

• CSS는 border의 두께를 1px 이하로 하려면 opacity나 scale 이용하기, styled-components 글로벌 변수는 :root{}로 지정하기에 대해 알게 됐다.
• JS는 findindex 메서드, 로컬 스토리지에 boolean 값 저장하는 법에 대해 알게 됐다.
• React는 useNavigate로 뒤로 가기 구현하는 법, react-hook-form 라이브러리가 있다는 것, prop으로 배열을 넘길 때 type을 지정하는 법 등에 대해 알게 됐다.
• API에 관하여는 토큰 기반 인증에서의 bearer이 무엇인지, 엔드포인트가 무엇인지, 파라미터의 종류는 무엇이 있는지 알게 됐다.
• UXUI에 관하여는 개발자들에게는 Rest API, SEMVER 등의 규칙이 있는 것처럼 UXUI에도 애플 Human Interface Guidelines, 구글 Material Design 등의 주로 널리 쓰이는 기준이 있다는 것을 알게 됐다.
• 협업에 관하여는 이론적으로는 화면설계서와 기능명세서라는 문서화 작업이 있다는 것을 알게 됐다.

💸마무리

이 프로젝트를 통해 50%는 협업, 50%는 개발의 비중으로 많은 것들을 배웠다. 각각 상세하게 담은 내용이 현재 포스팅을 포함한 아래의 내용이다.

💸금융상품 추천 사이트 : 프론트엔드가 백엔드와 협업하는 협업과정
💸금융상품 추천 사이트 : 전체회고

100을 기대했는데 300을 얻게 된 프로젝트였다. 이 전엔 코드나 언어 등의 개발에 치중된 고민을 많이 했다면, 프로젝트를 통해 개발 외의 훨씬 많은 부분도 고려해야하는 것이 개발자라는 것을 조금이나마 알게됐다. 현업에서 해야하는 업무량보다는 작았겠지만, 중요도는 결코 작지 않았다고 생각한다. 이렇게 차근차근 부딪히고 깨달으며, 더 많은 걸 해결할 수 있는 개발자가 되고 싶다. 내가 하는 일로 누군가의 삶이 편안해졌으면! 그러기 위해서는 열심히 공부하고 부딪혀야겠다.