Travel Point - 기획부터 개발까지 2

개발 단계의 회고록

어려웠던 점

• React-query 도입 및 환경 세팅

백엔드와 소통하며, API를 연결하고 환경 세팅하는 과정에서 어려움이 있었습니다.

특히, 폴더 구조를 일관되게 변경하고 데이터 fetch 및 caching 관리를 설정하는 데 시간이 걸렸습니다.

• 다양한 UI 구현

동일한 디자인의 UI만 보여주면 사용자의 집중도가 떨어질 수 있어서 다양한 UI를 구현하려고 했습니다.

이를 위해 여러 사이트를 참고하며 다른 색상, 다른 위치, 캐로셀 방식 등을 다양하게 적용하는 과정에서 많은 시도와 실패를 겪었습니다.

• TailwindCSS 설정 및 반응형 디자인

디자인의 일관성과 반응형을 유지하기 위해 TailwindCSS 설정을 많이 변경해야 했습니다.

공식 문서를 참고하여 다양한 pseudo class를 적용하는 데 어려움이 있었습니다.

• 이미지 최적화

프로젝트에서 이미지가 중요한 요소이기 때문에 이미지 최적화에 많은 시간을 투자해야 했습니다.

다양한 디바이스 크기와 사이즈, priority, quality 설정을 통해 네트워크 레이턴시를 최적화하는 과정에서 많은 시행착오가 있었습니다.

• 페이지네이션 구현

스크롤의 피로감을 줄이기 위해 infinite scroll 대신 페이지네이션을 직접 구현하였습니다.

필터와 개수(파라미터)에 맞춘 페이지네이션 구현이 까다로웠습니다.

• 3D UI 구현

여행지 부루마블 게임을 제작하기 위해 주사위 UI를 3D처럼 구현하는 데 어려움이 있었습니다.

먼저 three.js로 주사위를 구현해 보았지만, 로딩 문제와 주사위만 3D로 구현하면 어색해지기 때문에 css를 사용하여 preserve-3d와 keyframe-spin 등을 이용하여 3D 효과를 구현하는 과정에서 많은 실험이 필요하였지만 구현에 성공했습니다.

• 로딩 및 에러 처리

데이터 fetch의 로딩과 이미지 렌더링 UI의 로딩을 2단계에 걸쳐서 구현하는 데 어려움이 있었습니다.

또한, 에러 이미지를 따로 구현하는 과정도 까다로웠습니다.

• 회원가입/ 로그인 기능 구현

Oauth(네이버, 구글)와 이메일 회원가입 및 로그인 기능을 병렬 라우팅과 인터셉팅 라우트를 활용하여 모달 창으로 구현하는 과정에서 인터셉팅 라우팅은 캐시를 지우지 않으면 인터셉팅이 안되는 버그가 있었습니다.

• Lighthouse 최적화

성능, 접근성, 권장사항 및 SEO 최적화를 진행하는 데 있어 세부적인 최적화 작업이 필요했습니다.

• 외부 API 활용

KakaoMap API와 Naver Search API를 활용하여 여행지 지도와 블로그 결과 UI를 구현하는 과정에서 API 사용법을 익히고 적용하는 데 어려움이 있었습니다.

• LocalStorage 기능 구현

최근 본 여행지 목록을 저장하고 표시하기 위해 localStorage를 활용하는 과정에서 데이터 관리와 최적화 문제를 해결해야 했습니다.

• 마이페이지 기능 구현

프로필 사진 및 캐릭터 변경, 내가 "찜"한 여행지, 내가 쓴 리뷰, 최근 본 여행지 확인, 회원 탈퇴 및 로그아웃 기능을 구현하는 과정에서 사용자 데이터 관리와 UI/UX 최적화를 동시에 고려해야 했습니다.

---

배운 점

• 문서 활용의 중요성

React-query와 TailwindCSS 등 새로운 도구를 도입하는 과정에서 공식 문서를 참조하는 것이 매우 중요하다는 것을 배웠습니다. 이를 통해 폴더 구조와 데이터 관리 방식을 효율적으로 개선할 수 있었습니다.

• 다양한 UI 구현

다양한 디자인 시도를 통해 사용자의 집중도를 높이는 방법을 배웠습니다. 색상, 위치, 애니메이션 등 UI 요소를 다양하게 활용하는 것이 중요하다는 것을 깨달았습니다.

• 반응형 디자인의 중요성

TailwindCSS 설정을 통해 반응형 디자인을 구현하는 과정에서 일관성과 유연성의 중요성을 배웠습니다. 이를 통해 다양한 디바이스에서 최적의 사용자 경험을 제공할 수 있었습니다.

• 이미지 최적화

이미지 최적화를 통해 성능 향상의 중요성을 배웠습니다. 다양한 설정을 통해 네트워크 레이턴시를 줄이고 사용자 경험을 개선할 수 있었습니다.

• 효율적인 데이터 로딩

페이지네이션을 통해 스크롤 피로감을 줄이는 방법을 배웠습니다. 이를 통해 사용자 경험을 개선하고 효율적인 데이터 로딩 방식을 구현할 수 있었습니다.

• 3D UI 구현의 가능성

three.js 없이도 CSS만으로 3D 효과를 구현할 수 있다는 것을 배웠습니다. 이를 통해 더 다양한 UI 요소를 구현할 수 있는 가능성을 깨달았습니다.

• 로딩 및 에러 처리

로딩과 에러 처리를 단계적으로 구현함으로써 사용자에게 더 나은 경험을 제공할 수 있다는 것을 배웠습니다.

• 회원가입/ 로그인 기능 구현

다양한 회원가입 및 로그인 방식을 구현함으로써 사용자의 편의성을 높일 수 있음을 배웠습니다.

• 성능 최적화

Lighthouse를 통해 성능, 접근성, 권장사항 및 SEO를 최적화하는 방법을 배웠습니다. 이를 통해 웹사이트의 전반적인 품질을 향상시킬 수 있었습니다.

• 외부 API 활용

KakaoMap API와 Naver Search API를 통해 외부 데이터를 효과적으로 활용하는 방법을 배웠습니다.

• LocalStorage 활용

최근 본 여행지 목록을 저장하고 표시하는 과정에서 localStorage를 효율적으로 활용하는 방법을 배웠습니다.

• 사용자 데이터 관리

마이페이지 기능을 구현하면서 사용자 데이터를 관리하고 UI/UX를 최적화하는 방법을 배웠습니다. 이를 통해 더 나은 사용자 경험을 제공할 수 있었습니다.