출처 - 【한글자막】 100일 코딩 챌린지 - 2022 Web Development 부트캠프
특정 주소를 입력 받았을 때 Express를 사용하여 이러한 HTML 파일을 제공하려면 어떻게 해야 할까?
Express를 사용하면 매우 간단한데, 단순히 sendFile메서드를 사용하면 된다. 이 메서드는 파라미터로 파일의 절대 경로를 받는다.
즉 HTML파일의 절대경로를 구하여 sendFile에만 넣어주면 끝이다.
app.get('/', function(req, res){
const filePath = path.join(__dirname, 'views', 'index.html')
res.sendFile(filePath);
});
app.get('/restaurants', function(req, res){
const filePath = path.join(__dirname, 'views', 'restaurants.html')
res.sendFile(filePath);
})
app.get('/recommend', function(req, res){
const filePath = path.join(__dirname, 'views', 'recommend.html')
res.sendFile(filePath);
})파일의 경로는 path패키지를 사용하면 쉽게 구할 수 있다.
이제 서버를 열어서 페이지에 들어가보면
두 가지 문제가 생기는데,
- 페이지의 링크를 클릭해도 다른 페이지로 이동할 수가 없다.
- 지정해놓은 css스타일이 적용되지 않는 것을 볼 수 있다.
먼저 1번 문제를 해결하려면 html파일에서 링크를 전부 절대경로로 바꿔주어야 한다.
<ul>
<li class="nav-item">
<a href="restaurants.html">Browse Restaurants</a>
</li>
<li class="nav-item">
<a href="recommend.html">Share a Restaurant</a>
</li>
<li class="nav-item"><a href="about.html">About Eatwell</a></li>
</ul>이는 제공하려는 html파일의 일부인데, 앵커 태그에 존재하는 href의 속성값을 파일명이 아니라 위에서 지정해놓은 /restaurants나 /recommend 등의 절대경로로 바꿔줘야 한다.
<ul>
<li class="nav-item">
<a href="/restaurants">Browse Restaurants</a>
</li>
<li class="nav-item">
<a href="/recommend">Share a Restaurant</a>
</li>
<li class="nav-item"><a href="/about">About Eatwell</a></li>
</ul>이제 링크를 클릭해서 들어가면
이런 식으로 도메인 뒤에 경로가 추가된다.
2번 문제의 해결:
개발자 도구의 network탭을 보면
css파일과 js파일이 전송되지 못하는 것을 볼 수 있다. 즉 html파일에서 css파일에 대한 경로를 지정하는 것과 서버 측에서 이러한 파일을 제공하는 것은 다르다. 즉 브라우저는 각각의 파일에 독립된 HTTP요청을 보내는 것이다. 그러므로 명시적으로 이러한 요청을 전부 지정해주어야 한다. 이때 서버측 코드로는 css나 js를 변경시키지 못하므로 이 파일들은 정적이라고 볼 수 있다.
const app = express();
app.use(express.static());express객체에 use메서드를 사용하여 미들웨어 express.static을 불러온다. 이는 css와 js파일 같은 정적 파일을 폴더에서 전달할 수 있는지 확인하는 모든 수신 요청을 받아들인다. 파라미터로는 정적 파일에 대한 폴더 이름을 받는다.
일반적으로는 public이라는 이름을 사용하여 이 폴더 내의 파일이 공개되어 있음을 알려준다고 한다. (기본적으로 내 서버의 파일이나 폴더는 어떤 방식으로든 접근할 수 없다. 단순히 들어온 경로에 대한 응답을 보낼 뿐이다. 즉 사용자는 다른 데이터에는 접근 불가!)
이제 서버를 열고 봐보면
성공적으로 스타일이 응답으로 반환되었다.
