우리는 고정적인 스크립트와 css 파일을 가져오고 싶다.
하지만 서버는 이러한 파일을 바로 읽어들일 수 있는 것은 아니기 때문에
정적인 url을 가져오기 위한 미들웨이를 설정해준다.
이때 모든 수신요청을 받아들일 수 있는데 이 과정이 일어나면 어떤 파일에 대한 수신요청인지 확인하는 절차가 일어난다.
const express=require('express');
const path=require('path');
const app=express();
// 경로 설정, 익스프레스 함수 호출
현재 내 폴더
'public' 폴더 안에 있는 정적인 스크립트를 호출할 생각이다.
app.use(express.static('public'));
이 매개변수에는 제공하려는 정적파일을 보관해야 하는 프로젝트의 폴더 이름이 들어간다.
사용자가 요구한 요청이 찾을 수 있는 파일에 대한 요청인지 확인하는 작업이 필요한데
만약 요구한 요청이 올바른 요청이라면 파일이 응답으로 반환되고 그렇지 않으면 다른 경로로 요청이 들어가게 된다.
자바스크립트는 이렇게 수정해주고
index 파일 또한 수정이 필요하다
<link rel="stylesheet" href="/styles/index.css">
<link rel="stylesheet" href="/styles/shared.css">
앞을 절대경로로 수정해주는 작업이 필요하다.
이러한 수정을 통해 서버가 경로를 제대로 이해할 수 있게 한다.
