node express에서 html, js, css파일 정상적으로 불러오기

express에서 html을 불러올 때는 주의해야 할 사항이 있다.

 

 

우리는 보통 다음과 같은 방식으로 html을 연결하곤 하는데,

이렇게 하면 해당 html에 script로 박아넣은 js파일이나 css파일 등을 바로 읽지 못하고

오류가 날 수 있다.

 

주의사항

 

이를테면 아래처럼 html 파일을 연결했을 때,

 

아래처럼 404에러가 줄줄이 뜨는 것을 확인할 수 있을 것이다.

 

 

 

해결방법

해당 오류에 대해서는 아래 페이지에서 해답을 찾을 수 있었다.

Serving static files in Express

 

 

 

 

이걸 더 쉽게 풀어써보면 이러하다.

 

 

 

1. file이라는 이름의 폴더를 만든다.

 

이 폴더명은 크게 상관 없어보이나 일단 공식문서에 나온대로 따라해본다.

 

 

 

 

2. html파일에 script로 집어넣은 모든 정적 파일들(js, css, 기타 라이브러리)을 한번에 모아 위에 만들어둔 폴더 안에 집어넣자.

 

 

 

 

3. app.use(express.static('file'))을 적어넣는다.

 

static이라는 메서드를 사용해서, 'file'이라는 폴더 안에 정적 파일이 있으니 얘네를 읽어드리겠다는 의미이다.

'file'부분에는 본인이 설정한 폴더명을 적어넣으면 된다.

 

const express = require('express');
const app = express();
const port = 3000;
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// 여기 아래에 적어넣음
app.use(express.static('file'));
app.use(express.json());

 

 

 

4. 기존에 연결하려고 했던 html을 다시 연결 시도한다.

 

단, 경로가 바뀌었으니 수정된 경로로 작성하자.

app.get('/', (req, res) => {
	res.sendFile(__dirname + '/file/html/blahblah.html');
});

 

 

 

 

이렇게 하고 다시 서버를 구동해보면 불러와지지 않아서 오류가 났던 것들이 잘 로드되는 것을 확인할 수 있을 것이다!