VanillaJS로 history api를 이용하여 SPA를 만드는 강의를 듣는 중이었다.
이전 강의에서 Todo List App을 만들어보고나니 이번 게시판 App에서는 나도모르게 무지성으로 코드를 따라 치고 있었나보다....
하지만 코드를 똑같이 따라쳤는데도 에러가난다?
이제 멘붕의 시작이다.
몇시간 동안 코드를 다시 뜯어보면서 해결하기 까지의 기록을 남긴다.
삽질한 부분 ⇒ 라우팅 시 404 에러
문제상황
- live-server를 실행시켜서
/에서는 데이터가 잘 불러와지고 fetch도 성공하였다. localhost:5500/posts/:postId를 url에서 직접 접근하자 404 error가 나고 fetch가 받아와지지 않았다.
(해당 url로 GET 요청을 보내도록 코드를 짜둔 상태)- 데이터 요청을 fetch api 서버로 해야하는데 자꾸
localhost:5500/posts/:postId로 요청 하면서Not found를 뱉어냈다.
해결 방법
- 코드상의 문제는 없었다.
- npx http-server 를 설치했다.
npx serve -s로 실행하니 5000 포트에서localhost:5000/posts/:postId에 접근이 되었다..- 요청을 보냈을 때 해당 경로에서 html파일을 찾았는데 없다면 404에러를 내고 이 때
npx serve -s로 옵션을 주면 서버쪽에서 루트에 있는index.html을 찾아주는데live-server는 그런 옵션이 없다는 결론이다.
강의에서 듣고 기록도 해두었었는데 실제로 에러가 발생하니까 '코드는 똑같은데 왜 안되지?' 에 집중해서 엉뚱한 곳을 삽질하고 있었다.
네트워크 탭만 죽어라 새로고침해봐도,, 데이터는 받아와지지 않았더란다.
전에 프로젝트를 하면서 백엔드를 맡아 api 응답을 처리하던 때가 있는데 이걸 요청하는 경험은 처음이라 데이터가 안 받아와지니 눈에서 땀이 났다;; (그 당시 프론트엔드 팀원들의 고통과 번뇌를 이제야 깨달았다)
결국 내 무지성이 버그였던 걸로...
강의 중 정리해둔 내용
- 사용자는 반드시
/에서부터 사이트를 사용하는게 아니라 원하는 페이지의 url로 직접 접근을 시도할 수도 있기 때문에 배포했을 때 모든 url에서 사이트 접속이 되는지 확인하는 것은 매우 중요하다. - npx server의 경우
npx serve -s로 옵션을 주면 404가 났을 경우 서버가 루트 경로의 index.html을 찾아서 돌려주게된다. - AWS 클라우드 프론트도 앞단에서 요청을 받았을 때 요청받은 경로에 해당하는 index.html파일이 없으면 무조건
/에 있는 index.html로 경로를 돌려주는 옵션이 있다.
✅ SPA에서 라우팅하는 근간이 되는 history의 동작원리를 알아야 배포까지 할 경우의 예외상황에 대처할 수 있다!
history 와 라우팅에 대해 다시 정리해보는 시간을 가지는 것으로 이번 사건은 마무리가 될 것 같다!
내용 추가
live-server에서도 spa 옵션을 줄 수 있다고 한다!
live-server의 settings > file -> index.html을 넣어주자.
기록을 취미로