[Express] 정적인 파일 서비스

0. 참고자료

 

정적인 파일의 서비스 - 생활코딩

 

Express에서 정적 파일 제공

 

---

1. 정적인 파일 서비스

 

express를 사용하기 이전에는 정적인 파일을 서비스하기 어려웠다.

 

url을 하나하나 파싱해서 style.css, 각종 javascript를 서비스했었다.

 

express에서는 어떻게 처리하는지 살펴보았다.

 

이미지, CSS 파일 및 JavaScript 파일과 같은 정적 파일을 제공하려면 Express의 기본 제공 미들웨어 함수인 express.static을 사용하십시오.

 

공홈에서는 첫 줄부터 express.static을 사용하고 강력하게 말하고 있다.

 

가. 예시

정적 자산이 포함된 디렉토리의 이름을 express.static 미들웨어 함수에 전달하면 된다.

 

public이라는 이름의 디렉토리를 만든다.

 

여기에 필요한 이미지, CSS 파일 및 JavaScript 파일을 넣는다.

 

app.use(express.static('public'));

이제 다음과 같이 public 디렉토리에 포함된 파일을 로드할 수 있습니다.

 

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

실제 서비스에서는 url을 아름답게 정리할 것이기 때문에 다음과 같이 사용할 것 같다.

 

app.use('/static', express.static('public'));

/static 경로 접두부를 통해 public 디렉토리에 포함된 파일을 로드할 수 있다.

 

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

 

나. 주의사항

express.static 함수에 제공되는 경로는 node 프로세스가 실행되는 디렉터리에 대해 상대적이다.

 

정적 디렉토리의 이름은 URL의 일부가 아니다.

 

Express는 정적 디렉터리를 node 프로세스가 실행되는 디렉토리에 대해 상대 주소로 표시하거나 아예 절대 경로를 사용해야 한다.

 

Express 절대 경로를 사용하는 것이 더 안전하기 때문에 권장한다.

 

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

 

---

2. 실습

 

방법을 모르기 전까지는 궁여지책으로 etc라는 라우터를 만들어서 정적인 파일을 서비스하고 있었다.

 

주로 style.css, crudBtn.js, template.js, color.js를 전달하기 위해서였다.

 

라우터가 아닌 express.static을 사용하도록 수정해 보자.

 

파일의 위치를 조정한다.

 

public이라는 디렉터리를 생성한다.

 

main.js의 이름을 app.js로 수정한다.

 

 

정적인 파일 서비스 수정 : express.static · ramen4598/Study_nodeJS@3534d70

 

---