vanillaJS로 SPA router 구현하기 2. 새로고침 대응하기

자세한 코드는 github를 확인해 주세요

• 이전 포스팅 vanillaJS로 SPA router 구현하기를 통해 라우터를 구현할 경우 아래 이미지 와 같이 URL 경로가 홈이 아닐 경우 새로고침 시에 Error 페이지가 나타납니다.
  

• 이번 포스팅에서는 Express.js를 사용해 새로고침 시 URL에 해당하는 화면을 렌더 하는 방법을 알아보겠습니다.

1. Express.js 설치

npm i express

2. index.js 생성
루트 폴더에 js 파일을 하나 생성한후 (파일명은 자유입니다 저는 index.js로 생성했습니다)
아래와 같이 코드를 작성합니다.

const express = require('express');
// 다운로드한 express를 가져옵니다.
const app = express();


const path = require('path');
// Node.js에서 파일이나 디렉토리의 경로를 다룰 때 사용하는 내장 모듈
const port = 8800;
// 사용할 서버 포트 값은 8800 이 아니어도 괜찮습니다.

app.use(express.static(path.join(__dirname, '/')));
// 기준이 될 경로를 지정해 줍니다.

app.get('*', (req, res) => res.sendFile(path.join(__dirname, '/index.html')));
// *은 모든 경로입니다. 즉 모든 경로로 get 요청 시 index.html을 전달해 줍니다.

app.listen(port);

• 위와 같이 코드를 작성할 경우 새로고침 시 서버를 통해 index.html 가 다운로드 되고 1. 라우터 구현하기에서 작성한 코드인 window.addEventListener('DOMContentLoaded', () => render());로 인해 새로고침한 URL에 해당하는 화면을 렌더 하게 됩니다.
  
  

3. 새로고침 확인
Express.js로 만든 서버를 실행하고 지정해 준 port 값에 해당하는 주소로 들어가면 아래 이미지와 같이 새로고침 시에도 Error 페이지가 아닌 원하는 페이지가 렌더 됩니다.