[MEMO] [NodeJS] 정적 파일화

HDuckkk·2023년 3월 10일
0

문제 상황 🧐

Web 관련 공부 중 너무 많은 라우트 사용을 줄이기 위해 새로운 라우트 사용법을 익히다가 다음과 같은 문제가 발생했다.

라우트를 통해 html파일을 클라이언트에게 보냈으나 html에 링크되어 있는 css파일이 적용되지 않았다.

문제가 발생한 코드는 다음과 같다.

// -> /app.js
const express = require("express");
const app = express();
const port = 8080;

app.listen(port, () => {
    console.log(`listen to ${port}`);
});

app.use('/', require('./routes/page'));
// -> /routes/page.js
const express = require('express');
const router = express.Router();
const path = require('path');

router.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../views/home.html'));    
});

module.exports = router;
// -> /views/home.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel = "stylesheet" type="text/css" href='/stylesheet/style1.css'>
    <title>Document</title> 
</head>
<body>
    <h1><a id = 'main' href="/">BUSKERBUSKER</a></h1>
</body>
</html>

문제 이유 🤯

약간의 검색을 통해 알아낸 바로는 정적파일화가 되어있지 않았기 때문에 생긴 문제였다.

즉, 서버에서 클라이언트에게 파일을 넘길 때 정적파일화를 해주지 않아서 엉뚱한 주소로부터 css 파일을 찾고있었다는 것이다.

문제 해결 📝

express에서 제공하고 있는 static 을 이용했다.

app.use(express.static(__dirname + '/'));

위와 같은 코드를 적어주어 디렉토리에 있는 모든 파일들을 정적파일화 해주었다.

이후 코드를 실행한 결과 의도한대로 작동하는 것을 확인할 수 있었다.

배운점 ✏️

  • StaticFile에 대한 개념
  • express에서 제공하는 StaticFile 다루는 방법

0개의 댓글