💵 티끌모아 태산! tickle + 💵

✨ 배포사이트

• 🔗 tickle plus

• 테스트 계정

  • Id : admin@naver.com
  • Password : admin123!

🌱 프로젝트 소개

[개요]

• 예/적금 상품을 소개하고 개별상품에 대해 검색 · 신청 · 관심상품등록을 할 수 있습니다.
• 회원가입을 진행한 유저를 대상으로 선호상품(예/적금), 주거래은행, 직업에 대한 설문조사를 권유하고 응답한 유저에게는 설문응답을 기반으로 예적금상품을 추천합니다.

[개발 기간]

• 2023. 2. 13 ~ 2022. 2. 24.

[링크]

• 레포
• 팀 노션
• 피그마 (디자인 레퍼런스 : 피클플러스)

👩‍💻 팀원 소개(프론트엔드)

강해경	김혜인	최지환	김지영

⚙ 기술 스택

📌 작업영역 및 구현 기능 설명

강해경

• 홈
  • 일부 상품에 대한 자동 슬라이드 구현
  • 전체 상품에 대한 무한스크롤 기능(더보기 버튼) 구현, 키워드별 상품 출력, 상품데이터 캐싱
• 추천상품 페이지
  • 로그인된 유저에 대한 추천상품 출력
  • 추천상품이 없거나 다른 상품을 추천받고 싶은 경우 설문 재참여 유도
• 검색 페이지
  • 백엔드에서 검색어, 정렬에 따른 검색결과 출력(은행, 상품종류로 필터링 가능), 검색어별 상품 데이터 캐싱
  • 추천검색어를 활용한 검색기능 활용 유도
• 헤더, 네브바
  • 모든 화면에서 메인 기능을 수행하는 페이지로 이동할 수 있도록 헤더와 네브바 구성

김혜인

• 로그인
  • 유효성 검사
  • 로그인 상태, 유저 정보 전역 상태 관리
  • ProtectedRoute 로 경로 보호
  • accessToken, refreshToken 관리
• 회원가입
  • 유효성 검사
  • 회원가입 후 즉시 로그인(로직 동일)
• 설문조사
  • 회원가입 후 선택
  • 각 항목을 고르고 회원 가입 완료 페이지에서 설문 조사 결과도 전달

최지환

• 상세 페이지
  • 상품 클릭 시 해당 상품의 상세 페이지로 이동
  • 관심 상품 등록 / 해제 (로그인 시 가능)
  • 상품 신청(로그인 시 가능) / 이미 신청한 상품 예외처리
• 관심 상품 페이지
  • 신청한 관심 상품 리스트업
  • 삭제 / 전체삭제 기능

김지영

• 마이페이지
  • 내 정보 보기
    • 내 정보 확인
    • 내 정보 수정 (수정 시 비밀번호 필요/ 비밀번호와 전화번호를 잘못입력할 시 경고창 발생)
  • 신청한 상품 보기
    • 신청한 상품 획인(필터링 가능(은행별, 예적금별))
    • 신청한 상품 취소 가능

💦 어려웠던 점 & 아쉬운 점

• 백엔드 측 서버가 준비되는데 생각보다 시간이 많이 소요되어 프론트엔드 기능 구현을 하는 시간이 촉박했습니다.
• 백엔드에 대한 이해가 부족하다보니 소통을 하는 데에 어려움이 있었습니다.
• 서버측 에러에 대한 이해도가 부족하고 try&catch문 활용이 제대로 이루어지지 않아 아쉽습니다.
• 정기적인 진행상황 회의나 규칙적인 pr이 이루어지지 않아 소통과 통일성있는 코드작성에 어려움이 있었습니다.
• 타입스크립트로 진행하면서 타입에러를 해결하고, 함께 사용하는 데이터 타입에 대해 예외가 생기는 경우를 처리하는 것이 어려웠습니다.

💡 질문사항 및 미해결 에러

ERR_CONNECTION_REFUSED 에러

• 갑자기 다른 프론트엔드 팀원들과는 달리 혼자만 콘솔에 해당 에러가 뜨면서 모든 api 호출을 되지 않습니다. 프록시 설정도 해주고, 브라우저 캐시도 삭제해주고, 재부팅도 해주고, 방화벽도 꺼보는 등 방법을 써봤지만 되지 않았습니다. 간간히 다시 api 호출이 정상적으로 되어서 작업을 하다보면 금방 해당 오류를 띄웁니다.

타입스크립트 관련

• 타입스크립트로 협업을 진행해보니 각자 유사하면서도 조금씩 다른 데이터의 타입을 선언하면서 코드를 작성하게 되던데, 타입에 대한 선언이 중복없이 깔끔하게 작성되면서도 모두 활용하기 좋게하는 방법이 있을까요 ?