하루 메이트

📢 프로젝트 개요

📎 배포 및 회고 링크

🧐 맡은 역할

📦 기술 스택

📌 구현한 부분

📄 일정 등록 페이지

카테고리 검색 / 직접 검색

구현 기능

• 카카오 맵 API를 활용하여 카테고리 검색 및 직접 검색

• geolocation API를 활용한 현재 위치 적용

 

장소 마커 및 동선 확인

 

추가된 장소 순서 변경 및 삭제

구현 기능

• 추가한 장소 위치에 마커 추가

• 장소가 여러 곳일 경우 마커들을 선으로 연결해서 동선 생성

 

 

구현 기능

• 드래그 앤 드롭을 활용한 순서 변경

• 추가된 장소 삭제

 

⚙️ 일정 저장 기능

 

구현 기능

• 썸네일 선택

• 달력을 활용한 날짜 선택

• 유효성 검사를 적용한 제목과 내용 작성

• 일정 저장

 

⚙️ 일정 수정 기능

구현 기능

• 일정 등록 페이지를 재사용

• 일정 수정

🦋 반응형 디자인 (모바일 환경)

구현 기능

• 하단 바를 터치하면 열리고 닫히는 UI 구현

• 모바일 환경에 맞게 재배치

🔍 개발 내용

전체

• props가 여러 번 전달될 것 같은 경우, RTK를 사용하여 전역으로 상태를 관리하여 props-drilling을 예방했습니다.

• TypeScript를 적용하여 코드 작성 단계에서 발생할 수 있는 에러를 방지했고, 코드 자동 완성 기능을 활용하여 개발 생산성을 증가시켰습니다.

• 복잡한 서버 관련 코드를 명확한 React Query 로직으로 대체하여 코드의 가독성을 증가시키고 예측하기 힘든 사이드 이펙트를 예방했습니다.

최적의 사용자 경험 제공

• React.lazy, Dynamic Import, Suspense를 활용해 코드 분할을 했고, 이로 인해 초기 로딩 속도를 최대 50% 감소시켰습니다.

• Suspense의 fallback 기능을 활용하여 로딩할 때마다 흰 화면 대신 로딩 페이지를 표시하여 사용자의 이탈률을 감소시켰습니다.

• media query를 활용하여 웹, 태블릿, 모바일 환경에 맞는 반응형 웹을 제공했습니다.

• React Profiler를 사용하여 렌더링 횟수가 많은 컴포넌트들 찾아서, state를 ref로 전환, useMemo 또는 useCallback hook을 활용하여 렌더링 횟수를 감소시켰습니다.

일정 등록

일정 수정

트러블 슈팅