[JavaScript] 바닐라 자바스크립트로 SPA 만들 때 라우팅이 제대로 되지 않는 문제

문제 상황

 

바닐라 자바스크립트를 활용하여 쇼핑몰 SPA를 만들던 중,
직접 url을 수정해서 접근할 경우 계속 Error 404가 떴다. 분명 코드 상에 문제는 없어보이는데 뭐가 문제지? 미치는 줄 알았다.
구글에 vanilla js spa 404 error 이런 식으로 계속 쳐봤는데 발견한 블로그가 있었다!

 

과정

 

npx server의 경우 npx serve -s로 옵션을 주면 404가 났을 경우 서버가 루트 경로의 index.html을 찾아서 돌려주게 된다고 한다.

 

 

해결 방법

 

// 1. http-server 설치
// -g 전역 설치 때문에 에러 발생한 경우 sudo 명령어를 붙여 관리자 권한으로 설치.
npm install -g http-server
sudo npm install -g http-server

// 2. 서버 활성화
npx http-server ./

// 혹은 
npx serve -s

 

간단!

 

 

또다른 문제(...)

 

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

 

 

import 해올 때 리액트와 달리 바닐라 자바스크립트는 확장자명(.js)을 꼭 붙여줘야 한다.
붙여주지 않으면 위와 같은 오류 메세지를 만날 수 있다.
그런데 확장자명까지 붙였는데도 저런 메세지가 뜬다? 😩

 

 

이유는, ...

1. 서버 요청 시 해당 경로에서 html 파일을 찾게 되고
2. 찾지 못한다면 404 에러가 난다.
3. 이때 npx serve -s로 서버를 활성화했다면 프로젝트 루트의 index.html을 찾음.
4. 그런데 나는 js 파일의 경로를 상대 경로(./index.js) 로 입력한 상태!

 

결론은 : index.html에서 js의 파일 경로를 절대 경로로 수정해주면 된다.

 

 

또다른 해결방법

 

그렇다면 live server를 이용할 수는 없는걸까? 하고 또 구글링을 시작했다.

 

// settings.json에 한 줄 추가하기
"liveServer.settings.file": "index.html"

// index.html 에서 js 파일 경로 절대 경로로 수정하기
<script type="module" src="/index.js"></script>

 

 

굿! 👍

 

 

느낀 점

 

바닐라 자바스크립트로 라우팅 처리하는 것이 얼마나 수고스러운 일인지 알았다.
리액트의 react-router-dom에게 무한한 감사를 느낀다.