/Must_Eat_2

맛집 공유 서비스

Primary LanguageTypeScript

📜 서비스 내용

이 프로젝트는 그룹 단위로 맛집을 관리 및 공유하기 위한 맵 서비스입니다.

왜 카카오맵에서는 동료, 연인과 맛집을 공유할 수 없을까? 하는 고민에서 시작했습니다.

⚙️ 핵심 기능

  • 인증
    • 회원가입
    • 로그인
  • 검색
    • 모든 식당 검색
    • 검색된 식당은 맵에 출력
  • 그룹
    • 그룹 단위로 맛집을 관리
    • 맛집의 위치를 지도에 출력
    • 구성원 모두 추가, 삭제 가능
  • 초대
    • 가입된 계정을 초대
    • 수락, 거절 가능

🛠 기술 스택

  • react
  • typecript
  • react-query
  • redux-toolkit
  • styled-components

💡 성장 경험

캐싱, 메모라이징을 통한 사용자 경험 증가

  • 서버와 클라이언트의 데이터를 나눠서 관리했습니다. (redux/react-query)
  • react-query 를 사용하여 반복되는 데이터를 캐싱했습니다.
  • react 메모라이징을 사용하여 불필요한 리렌더링이 되지 않도록 했습니다.

큰 규모 프로젝트 협업 시 설계 구조, 통일성의 고민

  • 큰 규모의 프로젝트라면 어떻게 구조를 나눌지 고민을 했습니다. 고민 끝에 container, presentational component 디자인 패턴을 사용했습니다.
  • 컴포넌트 트리구조를 page > container > component 로 구성하여 유지보수가 쉽게 분리 하였습니다.
  • 현 직장에서 협업을 할 때 코드의 통일성이 없고, 가독성이 좋지 않았습니다. 그래서 본 프로젝트에 airbnb convention 을 적용한 후 업무에도 활용하여 통일성 있는 코드를 사용했습니다.

반복되는 코드 제거

  • 데이터 조회 함수 등을 커스텀 훅으로 만들어서 반복되는 코드를 줄였습니다.
  • 반복되는 컴포넌트(ex. input)를 공통 컴포넌트로 만들어서 반복되는 코드를 줄였습니다.