🚨 오류 발생
배포한 웹 사이트의 CLS 개선을 위해 로컬 환경에서 작업 후 재배포하여 상태를 확인하던 중 발생한 오류입니다. 웹 사이트의 첫 페이지 즉, HomePage에서는 Lighthouse가 제대로 작동하였지만 다른 경로의 페이지로 이동하여 Lighthouse를 사용할 시 오류가 발생했습니다.
분명 로컬 환경에서는 제대로 작동하였고, 배포한 사이트에서도 다른 페이지로의 이동은 문제가 없었는데 Lighthouse를 동작시키면 404에러가 표출됩니다.
❓ 오류 이유
서버 라우팅
전통적인 웹 애플리케이션에서는 각 URL 요청에 대해 서버가 다른 HTML 파일을 제공합니다. 예를 들어, /about 페이지를 요청하면 서버는 about.html 파일을 반환합니다.
클라이언트 라우팅
SPA에서는 JavaScript 프레임워크가 클라이언트 측에서 라우팅을 처리합니다. 서버는 모든 요청에 대해 단일 HTML 파일(일반적으로 index.html)을 반환하고, 클라이언트 측 라우터가 URL을 해석하여 올바른 컴포넌트를 렌더링합니다.
제가 배포한 사이트의 경우 React로 만들어져 SPA 방식으로 라우팅을 하지만 배포하기 위해 사용한 netlify에서는 서버 라우팅을 사용하기 때문에 발생한 문제였습니다.
💡 해결 방안
Netlify와 같은 정적 사이트 호스팅 서비스는 기본적으로 요청된 경로에 해당하는 정적 파일을 제공하도록 설계되었습니다. 따라서 SPA의 라우팅을 지원하려면 추가 설정을 통해 모든 경로를 index.html로 리디렉션해야 합니다.
위의 문제를 해결하기 위해서는 프로젝트 폴더에 2가지 파일을 추가해주어야 합니다.
_redirects 파일
프로젝트 루트 디렉토리에 _redirects 파일을 생성합니다.
netlify.toml 파일
프로젝트 루트 디렉토리에 netlify.toml 파일을 생성합니다.
✏️ 마무리
오류 해결을 위해 여러가지 검색하며 다른 개발자 분들의 오류 상황을 볼 수 있었는데 새로고침 할 때 저와 같은 오류가 뜨는 경우가 많이 보였습니다. 제 사이트의 경우 새로고침을 했을 때 전혀 문제가 없었는데... 어떤 부분에서 이러한 차이가 나는지 조금 더 알아볼 필요성을 느꼈습니다.
🙏 글 작성에 도움받은 목록
