[패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프] 미니 프로젝트

✨ 미니 프로젝트

 

📌 개요

숙박 예약 서비스

숙박을 예약 및 결제할 수 있는 서비스를 만들고, 코드 리뷰 후 리팩토링을 진행한다.

 

 

🏠 구현

회원가입 / 로그인

 

메인

 

검색 결과

 

숙소 상세

 

장바구니

 

 

결제

 

예약 조회 / 위시 리스트

 

 

☄️ 트러블 슈팅

배포 시 CSS 적용 안 되는 오류

개발 환경에서는 문제없이 잘 적용되었던 css가 배포를 했더니 깨지는 현상이 발생했다. css가 제대로 적용되지 않았던 컴포넌트는 모두 react-slick 캐러셀 라이브러리를 사용한 컴포넌트였다. 캐러셀의 크기가 비정상적으로 크게 나타나 이미지가 제대로 나타나지 않았고, 버튼으로 넘어가는 방식이 아닌 세로로 모든 이미지가 펼쳐지는 오류가 나타났다. 구글링을 통해 여러 조사를 해보았고, 배포 시 일부 css가 제대로 나타나지 않는 오류가 발생한다는 레퍼런스를 찾아 여러 방법을 시도했다.

Try 1 - 브라우저 캐시 삭제
브라우저의 캐시가 남아있게 되면 css 파일의 변경을 추적하지 못해 이전 css를 적용한다는 레퍼런스를 참고하여 크롬 브라우저의 캐시를 삭제해 보았지만, 변화가 없었다. 크롬 브라우저가 아닌 이전에 접속한 적 없던 safari 브라우저에서도 동일하게 캐러셀이 깨져보였다.

Try 2 - CSS 파일명 수정
스타일 파일을 불러올 때 최신 버전에 맞는 파일을 불러올 수 있도록 버전 정보를 추가해 주는 방식을 적용해 보았지만, 변화가 없었다. 추후 더 레퍼런스를 찾아봤을 때, CRA 환경에서는 캐시 쿼리 스트링이 적용이 되지 않아 수동적으로 적용해 줘야 하지만, Vite 환경에서는 파일에 해싱이 자동 적용된다는 사실을 알게 되었다. 따라서 파일 캐시 문제 또한 아니었다.

<link rel="styleshhet" href="/css/reset.css?v=1120" />

Try 3 - Nginx 캐시 무효화
배포 환경이 nginx였고, css 적용이 제대로 안 되는 문제는 대부분 캐시 문제라는 이야기가 많아 nginx의 캐시를 무효화하는 방법을 고려해 보았다. 백엔드 분과 cloudfront를 통해 캐시 설정을 변경해 보고, 논의한 결과 nginx 상의 문제는 아니었다.

Try 4 - Vercel 배포
Nginx로 배포하는 과정에서 css가 적용이 안 되는 것인지를 정확하게 확인하기 위해 nginx가 아닌 vercel로 배포를 해보았다. vercel로 배포했을 때도 이전과 동일하게 캐러셀 이미지가 제대로 나타나지 않았고, 세로로 모든 이미지가 펼쳐져 나타났다. nginx의 문제가 아닌 것을 깨닫고 처음으로 돌아가, 스타일 적용이 안 되는 시점부터 다시 고민해 보았다. 문제의 시발점은 react-slick 라이브러리였기에 캐러셀 요소를 천천히 들여다보았다.

Try 5 - 절댓값으로 고정
캐러셀의 크기가 비정상적으로 크게 나타나는 것을 보아 혹시 크기가 고정되지 않아 그런 것인가 싶어 캐러셀과 내부 요소들의 크기를 절댓값으로 고정해 보았다. 크기는 고정되어 비정상적으로 크게 나타나는 상황은 벗어났지만, 여전히 캐러셀이 정상 작동하지 않았다.

Try 6 - slick CSS 비교 → 해결 ✅
css가 어디서 적용이 안 되는 것이 찾기 위해 개발 환경과 배포 사이트의 캐러셀 css를 하나씩 비교해 보았다. 가장 상위 요소인 slick-slider부터 css를 비교해 보았고, 그 결과 slick-slide 요소에서 일부 css가 다르다는 것을 발견했다. 개발 환경에서는 잘 적용되어 있던 float: left가 배포 사이트에서는 적용되지 않은 상태였고, 해당 css를 적용해 주니 캐러셀이 정상 작동했다.

.slick-slide {
  float: left;
}

캐러셀 이미지가 화면에 정상적으로 나타나지 않았던 것에 초점을 맞추고 float 속성에 대해 더 고민해 보았다면 초기에 발견할 수 있었던 문제였을 텐데 생각보다 오랜 시간 헤맸던 것이 아쉬웠다. 문제가 발생했을 때 문제의 원인, 근본에 대해 더 탐구해야 한다는 것을 배울 수 있었고, 이후 react-slick 라이브러리를 조사하며 배포 환경에서만 float 속성이 적용되지 않았던 정확한 이유를 알아보려 했으나 알아내지 못했다. 이후에도 다른 문서 및 탐구를 통해 정확한 원인을 알기 위해 공부할 것이고, 같은 문제를 겪지 않기 위해 트러블 슈팅 통해 기록을 상세하게 남긴다.

 

 

🛠️ 추가 및 보완 기능

• 숙소 주변 맛집 추천 : GPT API를 적용해 숙소 상세 페이지에서 자동으로 숙소 주변 맛집을 추천해주는 기능을 추가했습니다.
• Optimistic UI : 특정 요청이 성공 할 것이라 가정을 하고 요청의 결과를 먼저 보여주는 Optimistic UI를 적용하여 UX를 개선했습니다.
• Skeleton UI : 데이터가 렌더링 되기 전에 페이지 레이아웃을 대략적으로 보여주는 Skeleton UI 로딩 애니메이션을 적용하여 UX를 개선했습니다.
  
• Drag & Drop : 장바구니 페이지에서 개별 숙소를 장바구니에서 삭제할 때 Drag and Drop 방식을 적용하여 UX를 개선했습니다.
• 예약 내역 취소 : 예약내역 페이지에서 해당 객실을 취소할 수 있는 기능을 추가했습니다.

 

 

🎀 회고

KEEP 🎯
- react query, ErrorBoundary, Suspense, Skeleton UI 등 새로운 라이브러리 및 기능 시도
- 컴포넌트 및 함수의 적절한 분리 통한 클린 코드에 대한 고민

 

PROBLEM 🥊
- 모바일 반응형 고려
- 효율적인 코드 리뷰

 

TRY 🚀
- css 속성 및 활용에 대한 학습
  → Chakra UI를 얼마나 더 효율적으로 사용할 수 있는지,

  → 반응형을 구현할 때 어떤 상대 단위를 사용하면 좋은지,
- 좋은 코드 리뷰를 할 수 있는 방법 고민

  → 멘토님이 제공해주신 코드 리뷰 가이드 숙지