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 + '/'));
위와 같은 코드를 적어주어 디렉토리에 있는 모든 파일들을 정적파일화 해주었다.
이후 코드를 실행한 결과 의도한대로 작동하는 것을 확인할 수 있었다.