본문 바로가기

반응형

Loading

(2)
Next.js 알아보기 5 (Suspense, Loading, Error, Streaming SSR) Loading UI 📖✨ Next.js 14의 App router에서 비동기 컴포넌트가 로드되는 동안 사용자에게 로딩 상태를 표시하는 기능입니다. 왜 중요할까?`사용자 경험 개선`: 로딩 중인 상태를 명확히 표시해 사용자의 불안감을 줄이고, 시스템이 응답하고 있음을 알립니다.`사용자의 불필요한 행동 문제 해결`: 현재 상태를 제공해 불필요한 클릭이나 페이지 이탈을 방지할 수 있습니다.`향상된 SEO 및 접근성`: 로딩 UI는 페이지의 일부분이 빠르게 렌더링 되어 SEO 성능을 향상하고, 사용자가 페이지를 더 빠르게 접근할 수 있도록 합니다. 사용방법로딩 컴포넌트 작성// app > loading.tsxexport default function Loading() { return Loading...;} ..
[트러블 슈팅] MBTI 테스트 (Glitch에서 JSON-server의 응답 속도 차이) Glitch에서 JSON-server의 응답 속도 차이발생한 오류 🔥MBTI 테스트 앱을 개발하며 Glitch 플랫폼에서 JSON-server를 배포하여 사용했습니다. 하지만 로컬 환경에서의 실행 속도와 비교했을 때 상당한 지연이 발생하는 문제를 경험했습니다. 해결 과정 🔎로컬에서 `json-server --watch db.json --port 5000`으로 서버를 구동했을 때와`Glitch`에서 서버를 구동했을 때와 응답 시간이 거의 10배 이상 차이 나는 현상을 `console.time`을 통해 확인했습니다. 로컬서버 `네트워크 지연` : Glitch 서버가 해외에 위치하고 있기 때문에, 데이터 요청과 응답에 상당한 네트워크 지연이 발생했습니다.`리소스 제한` : Glitch는 무료 플랜에서 제한..