Visual Studio Code Live Server SPA url mapping 설정 하기

문제점

2021.09.05 - [Web] - Vanilla javascript URL Router 만들기 (web components)

위에 포스트를 보면 다음과 같은 말을 했었습니다.

url에 사용자가 직접 넣으면 오류가 날것이다. 해당 서비스 접근을 통해서 해당 url에 화면이 잘 나오는 것을 분명히 확인했는데 어떤 차이일까?

그것은 해당 url이 server에 request를 했느냐의 차이가 된다.

위에 언급했듯이 SPA는 기본적으로 여러개의 url page를 하나의 url로 call 하게 됩니다.

그러다 보니 request mapping을 browser url에 직접 넣게 되면 오류를 발생하게 됩니다.

그 이유는 해당 request를 받는 server쪽에서 url을 어떤 resource와 mapping해야하는지 알 수 없기 때문입니다.

 

해결방법

그래서 nodejs experss 같은 server를 직접 사용하는 경우에는 모든 request를 index.html로 return하도록 설정하고 개발을 하게 됩니다.

하지만 visual studio code의 live server를 이용해서 쉽게 해결할 방법은 없을까요?

 

Live server setting을 수정해 줍니다.

위와 같이 설치되어 있는 live Server페이지에서 설정 버튼을 click해 줍니다.

확장설정을 선택해 주세요.

settings.json에서 편집을 선택해 줍니다.

"liveServer.settings.file": "index.html"

작성해 줍니다.

그리고

우하단에 저곳을 눌러서 서버를 정지시켜 주세요.

다시 Go Live를 click해주세요.

그러면 이제부터 어떤 url을 browser에 넣어도 index.html을 Live Server가 불러주게 됩니다.

 

절대경로로 변경해 주세요

아참 하나더! 꼭 html에서 src link를 상대경로가 아닌 절대 경로로 변경해 주세요

예를 들어서 html에

<script src="./App.js" type="module"></script>

이렇게 설정이 되어있다면

<script src="/App.js" type="module"></script>

이렇게 절대 경로로 파일을 link하게 해주세요.

 

설정 Test 해보기

하기 github는 Router Component를 Test해보기 위한 Demo입니다.

https://github.com/theyoung/RouterComponent

clone 하시면 아래와 같이 6개의 파일을 보실 수 있습니다.

index.html을 live server에서 실행 시켜보세요.

http://127.0.0.1:5500/

를 browser에 직접 넣으셨을 때 위에처럼 나오면 정상입니다.

http://127.0.0.1:5500/superman

도 직접 넣어 보세요

위에 처럼 다른 화면이 나오는 것을 확인할 수 있습니다.

이제 마음편히 Visual Studio code에서 SPA를 개발할 수 있게 되었습니다.

참고로 위의 github코드가 어떻게 작동하는지는 맨처음 링크해둔 url을 참고하세요.