공부/트러블 슈팅 (16) 썸네일형 리스트형 [트러블 슈팅] 스와이퍼가 메인 -> 지도 -> 메인 이동 시 사라지는 이슈 해결 발생한 오류 🔥메인 -> 지도 -> 메인 화면으로 이동했을 때 메인 화면에 있는 `Swiper` 컴포넌트가 사라지는 현상을 겪었습니다. 해결 과정 🔎스와이퍼가 정상적으로 렌더링 되지 않아 매우 당황했지만 그 이유에 대해서 분석을 해봤습니다. 기존 스타일 mapSwiper.css@tailwind base;@tailwind components;@tailwind utilities;.swiperWrapper { @apply fixed bottom-16 left-2/4 z-[99] flex h-[140px] w-[100vw] -translate-x-1/2 transform flex-col items-center justify-end bg-scrollButtonGradient leading-[27px] lg.. [트러블 슈팅] Next.js에서 이미지 최적화로 FCP 및 LCP 성능 개선하기: 이미지 압축을 통한 로딩 속도 향상 lighthouse를 통해 성능을 측정했을 때 이미지 파일이 커서 초기 로딩 성능이 저하되는 문제가 있어서 이미지 파일을 압축해 로딩 속도를 개선한 내용을 공유하려고 합니다. 발생한 오류 🔥성능 측정 이미지 사이즈가 큰 콘텐츠를 렌더링 할 때 `Lighthouse`를 통해 성능을 측정해 보니 `FCP`와 `LCP`가 지연돼 페이지의 초기 렌더링이 느리다는 문제를 확인했습니다. 성능 지표 `FCP (First Contentful Paint)`: 사용자가 처음 콘텐츠를 확인할 수 있는 시점`LCP (Largest Contentful Paint)`: 페이지에서 가장 큰 요소가 표시되는 시점 ❗이 두 지표는 사용자가 페이지를 빠르게 인식할 수 있도록 하는 중요한 요소입니다. 해결 과정 🔎Next.js의 ``.. [트러블 슈팅] SVG 속성 오류 해결하기 - <svg> Height 속성에서 Expected length, "auto" 오류를 수정하는 방법 발생한 오류 🔥 SVG의 `height` 속성을 `auto`로 설정했을 때 발생한 오류였습니다. 해결 과정 🔎HTML, CSS에선 `height`에 `auto`를 사용해 콘텐츠의 높이를 유동적으로 설정할 수 있지만, SVG의 `height` 속성은 `length`값 (예시: `px`,`%`)으로 지정해야 합니다. 따라서 `auto`는 SVG 표준에서 요구하는 유효한 `length`값이 아니어서 오류가 발생했습니다. 해결 방법 ✨수정 후 이 문제를 해결하기 위해 `height`속성을 `auto`에서 `100%`로 변경했습니다. 회고 🧐SVG 속성값을 지정할 때 표준을 준수하고 HTML과 CSS의 차이를 고려해 적절한 속성값을 사용하는 것이 좋을 것 같습니다!출처 🏷️https://github... [트러블 슈팅] Next Vercel 배포 환경 개선 - Dev 환경 최신화 문제 해결 dev 브랜치 최신화 이슈 📖발생한 오류 🔥Next.js 프로젝트를 배포하던 중 `dev`브랜치에서 배포 최신화 문제가 발생했습니다. `dev`브랜치에서 새로운 코드를 푸시해도 배포 환경에서 반영되지 않는 상황이 발생해서 팀 내 검토 과정에서 일관된 최신 버전을 확인하기 어려운 문제가 있었습니다. Vercel 배포 구조와 dev 환경의 충돌 📖문제 원인 🔎Vercel의 기본 배포 구조에서는 한 개의 URL을 기준으로 메인 브랜치만 관리하다 보니, `dev` 브랜치가 배포될 때 자동으로 최신화가 안 되는 문제가 있었습니다. 그래서 `dev` 환경과 `production`환경의 변경 사항을 독립적으로 관리할 필요가 있었습니다. 해결 방법 : dev 전용 Preview 배포 환경 추가 ✨Verce.. [트러블 슈팅] issue daily - 로그인 상태 새로고침 시 유지하기 로그인 상태 새로고침 시 유지하기를 `Supabase Auth`와 `Zustand`로 해결한 트러블 슈팅에 대해서 정리해 봤습니다.발생한 오류 🔥사용자가 로그인 후 마이페이지와 로그아웃 버튼이 정상적으로 보이지만, 페이지를 새로고침 하면 다시 로그인 버튼이 나타나는 문제가 있었습니다. 즉, 사용자의 로그인 상태가 새로고침 후에도 유지되지 않는 문제가 생겼습니다. 해결 과정 🔎문제 분석 새로고침 시 클라이언트 측에서 전역 상태가 초기화 돼 상태가 유지되지 않는 것을 발견했습니다. Supabase의 `auth.getUser()`를 사용해 서버 측에서 유저 정보를 가져올 수 있다는 점을 고려해 이 정보를 전역 상태로 관리해 새로고침 후에도 상태가 유지되도록 해야 했습니다. Supabase와 Zustand.. [트러블 슈팅] supabase에서 Google, Kakao 로그인 시 신규 사용자 저장 오류 소셜 로그인을 구현하는 과정에서 발생한 트러블 슈팅에 대해 정리해 보려고 합니다.http://auth/auth-code-error#error=server_error&error_code=500&error_description=Database+error+saving+new+user 발생한 오류 🔥Google과 Kakao로 로그인을 시도할 때 신규 사용자를 데이터베이스에 저장하는 과정에서 다음과 같은 오류가 발생했습니다. 해결 과정 🔎기존 트리거 함수는 다음과 같습니다.create function public.add_new_user()returns trigger as $$beginif new.raw_app_meta_data ->> 'provider' = 'email' theninsert into publ.. [트러블 슈팅] Next.js generateStaticParams 정적 경로 생성의 오해와 해결 과정 라이엇 도감 만들기 프로젝트에서 발생한 트러블 슈팅입니다.발생한 오류 🔥Next.js에서 `/champions/[id]`와 같은 동적 경로 페이지를 빌드할 때, 정적 경로가 아닌 동적 경로로 처리되며 `dynamic`으로 표시되는 문제가 발생했습니다.// app > champions > page.tsxexport const generateStaticParams = async () => { const { data: allChampions }: { data: ChampionsList } = await fetchAllChampions(); return Object.keys(allChampions).map((champion) => ({ id: champion, }));}; `generateSt.. [트러블 슈팅] 카카오맵 API를 활용한 캠핑장 데이터 렌더링 최적화 카카오맵 API를 활용한 캠핑장 데이터를 처리하는 과정에서 발생했던 렌더링 이슈에 대해 작성해보려고 합니다. 발생한 오류 🔥캠핑장 공공데이터 활용한 지도 서비스를 개발 중, 데이터 필터링 및 마커 클러스터링 렌더링 과정에서 심각한 성능 이슈가 발생했습니다. 전체 캠핑장 데이터는 `4000개`가 넘었고, 데이터를 필터링해 마커로 지도에 표시하는 과정에서 지도를 드래그하거나 확대/축소할 때 프레임이 10~40FPS로 급격히 떨어지는 문제가 있었습니다. 특히 확대 시에는 정상적으로 동작하는 것처럼 보였지만, 축소 시 여전히 프레임 저하가 발생했습니다. 해결 과정 🔎성능 문제를 정확하게 파악하기 위해 먼저 데이터 필터링 과정의 속도를 측정했습니다. `console.time`을 사용해 데이터 필터링 과정이 느.. 이전 1 2 다음
