정적 Assets 사용
정적(Static) 파일
정적 파일을 제공한다는 것은 대표적인 예로 클라이언트 요청에 따라 이미지나 CSS , JavaScript 같은 파일을 제공하는 것이다.
정적 Assets 사용하기
Express에서 정적 Assets 파일을 사용하려면 express 객체의 메서드를 사용해야 하는데,
express.static()은 미들웨어로 요청이 들어오면 응답을 내보내는 식으로 동작한다 그래서 모든 요청이 들어올 때마다 인자를 호출하는app.use()메서드와 같이 사용한다.
app.use(express.static(<dirName>))static()메서드에 우리가 제공하고 싶은 Assets 폴더를 인수로 전달한다.
아래의 코드는 app.css 파일이 있는 public 디렉토리의 콘텐츠 전체를 제공해서 접근할 수 있게 한다. / 같은 path는 붙일 필요가 없으며, 디렉토리의 이름만 입력하면 된다.
body {
background-color : red;
}app.use(express.join('public'))- 공식적으로 사용하는 것이 'public'일 뿐, 다른 언어로 대체해도 무방하다.
<!DOCTYPE html>
<html lang="en">
<link>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= name %></title>
<!-- public 디렉토리의 콘텐츠 전체를 static()의 인자로 제공했기 때문에 접근할 수 있다. -->
<!-- /를 넣고 사용해야한다. -->
<link rel="stylesheet" href="/app.css">
</head>
<body>
<h1>Browsing The <%= name %> subreddit</h1>
<h2><%= description %></h2>
<p><%= subscribers %> Total Subscribers</p>
<hr />
<% for(let post of posts) { %>
<article>
<p><%= post.title %> - <strong><%= post.author %></strong></p>
<% if(post.img){ %>
<img src="<%= post.img %>" alt="<%= post.title %>" />
<% } %>
</article>
<% } %>
</body>
</html>
static()에서 public 디렉토리의 콘텐츠를 모두 제공했기 때문에public/app.css의 파일에 접근이 가능해져 사용할 수 있는 것이다.
한 가지 문제점
이전의 views 디렉토리의 경로 문제처럼 지정 폴더에서 벗어나 외부에서 실행할 경우 역시 경로 문제가 발생한다. 따라서 마찬가지로 아래의 코드를 작성해주면 해당 문제가 해결된다.
app.use(express.static(path.join(__dirname, "public")));