B.TIL 01 : Vue-router, History모드 사용시 새로고침 오류 문제 해결법

History의 새로고침 오류

vue-router의 기본모드는 hash-bang 모드이다.
해쉬뱅 모드를 사용 후 프론트서버를 실행시키면 상단에 있는 주소바에 자동으로 #이 추가되게 된다. 그러므로 주소의 형태는 다음과 같이 http://localhost:8000/#/ 일반적으로 볼 수 없는 형태로 변하게 된다. 그러므로 가급적이면 히스토리 모드를 권장하고 있다.

히스토리 모드는 #이 추가되지않으며, 라우터를 통해 이동한 기록이 스택으로서 쌓여지기 때문에 라우터 메서드를 활용해서 뒤로가기, 앞으로가기, 홈버튼 등의 기능구현을 하는데 보다 쉬워지게 된다. 다만 히스토리 모드를 사용하게 되면 뷰의 특성과 관련해서 문제점이 생기게 된다.

뷰는 SPA(Single Page Application)를 기준으로 작성되는 프레임워크다.
라우터기능을 통해 링크의 주소는 바뀌지만 실제로 페이지가 바뀌는게 아닌 것 이다.
그러므로 직접적으로 주소를 쳐서 접근하거나 새로고침 등을 하게되면 페이지를 인식하지 못하게되며(404, not found) 빈페이지가 뜨는 오류가 발생하게 된다.

해결법

다행히도 vue-router는 자체 내장된 기능으로 이 문제를 간단하게 해결할 수 있게 조치를 취해놨다. 서버를 구동하는 로직이 담긴 config 파일에서 다음과 같은 코드를 추가하면 된다.
(나 같은 경우는 webpack.config.js 라는 파일명을 사용했다)

devServer: {
    historyApiFallback: true,
  }

한줄의 옵션 코드 추가로 직접 접근법 혹은 새로고침(리프레시)를 했을 때 링크에 맞는 적절한 라우터로 알아서 접근하도록 변경된다.