[JavaScript] Express.js

아래 강의를 수강하며 배운 내용을 정리한 글입니다

[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY

 

 

SPA에 라우팅을 적용했을때 루트 외의 경로에서는 새로고침시 에러가 발생했습니다

서버에서 해당 파일을 찾지 못하기 때문에 발생하는 에러를 막기 위해 서버에서는 모든 요청에 대해 index.html 파일을 보내주도록

node와 express를 사용해서 구현해 보겠습니다

 

1. node.js 설치

2. 프로젝트 터미널에서 node -v 명령어로 설치 확인

3. npm init -y 명령어로 package.json 파일 생성

4. npm install express 명령어로 express 설치 및 node_modules 폴더 생성

5. /server/server.js 경로에 파일 생성 후 서버 환경 설정 코드 작성

const express = require("express");
const path = require("path");
const app = express();
const PORT = 3000;

app.use(express.static(path.join(__dirname, "..")));

app.get("/*name", (req, res) => {
  res.sendFile(path.join(__dirname, "..", "index.html"));
});

app.listen(PORT, () => {
  console.log("START SERVER");
});

 

 

위 코드 작성 후 터미널에 다음 명령어를 입력하여 서버를 실행합니다

localhost:3000 실행 → 새로고침시에도 정상동작 확인

node server/server.js