express에서 ejs에 css, js 파일 불러오기

백엔드를 공부하는 입장에서 프로젝트에서 프론트 작업을 하는 비중이 낮은데, 그렇다 보니 기초적인 부분에 대한 기억을 다시 끌어올려야 할 때가 많다. 오늘과 같은 예시도 그러한 부분 중 하나이다.

ejs 파일에서 우리가 일반적으로 생각하는 경로 설정 방법으로 css나 js파일을 불러오도록 아래와 같이 작성할 경우 오류를 만날 수 있다.

<link href="static/css/index.css" rel="stylesheet">
<script src="static/js/index.js"></script>

나의 경우 static 폴더 내 css와 js폴더를 생성 후 각각 파일을 넣어뒀는데 아래와 같은 오류를 만날 수 있었다.

'Refused to execute script from 'http://localhost:3000/static/js/index.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

이 문제의 경우 일반적으로 html에 js와 css를 연결하는 것에는 문제가 없을지 모르나 express나 장고와 같은 프레임워크에서 동작하도록 하기 위해서는 static 폴더 내 들어있는 파일은 (정적)static 파일임을 명시해줘야 한다.

// app.js
app.use(express.static(path.join(__dirname, 'static')));

위 static 폴더 내 파일은 정적 파일로 인식하도록 하는 미들웨어로, 이를 추가해주면 정적파일을 적용할 수 있게 된다. 하지만 이제 정적 파일의 경로 지정을 조금 달리 해야한다.

<link href="/css/index.css" rel="stylesheet">
<script src="/js/index.js"></script>

처음 작성했던 것에서 경로에 static이 빠져있는 것을 볼 수 있다. 이처럼 미들웨어로 static 폴더 지정을 했다면 생략 후 지정해줘야 제대로 작동한다. 특히 시작 부분에 슬래시('/')가 빠지지 않도록 주의해야한다. 참고로 static 폴더가 아니라 public이나 assets 와 같은 다른 폴더명을 지정하려면 express.static 메서드의 'static' 자리에 다른 이름을 넣어줘도 좋다.

만약 앞에 슬래시를 넣는 부분이 어색하다면 아래와 같은 방법으로도 설정이 가능하다.

app.use('/static', express.static(path.join(__dirname, 'assets')));

이 경우는 위 예시와 달리 가장 앞에 '/static'이란 경로가 붙어 있는 것을 알 수 있다. 이 경우는 assets 폴더를 static 폴더로 지정하고, ejs에서 static 파일 지정 시 아래와 같이 static/js/index.js와 같은 형태로 지정해야 올바로 작동한다.

<link href="static/css/index.css" rel="stylesheet">
<script src="static/js/index.js"></script>

 

프로젝트를 진행하다보면 은근히 헷깔리는 부분이 이 경로 지정인 것 같은데 이참에 확실히 알아두고 이제 더이상 이 부분에서 막히지 않도록 기억하자!