[생활코딩|Express #10] 정적인 파일의 서비스

---

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

생활코딩

생활코딩 사이트

생활코딩

"프레임워크는 현실의 복잡함으로 부터 우리를 구원해 줄

우리의 구원자가 될 것입니다."

(생활코딩 : Web3 - express 수업소개. 중)

---

#0.

이미지, js, css와 같은 파일을 서비스하는 방법을 살펴보자.

 

#1.

NODEJS-MASTER / public / imgs 폴더를 생성한 후 임의의 이미지를 넣어보자. (필자의 경우 이미지 이름은 main.jpg)

이후 해당 이미지를 글 내용에 표시하고자 하는데,

그러기 위해서는 우리가 정적인 파일을 사용하는 것을 허용해주어야 한다.

역시 가이드에 잘 나와있다.

Serving static files in Express

가이드를 확인해보면 express 기본 내장 미들웨어를 사용하면 되는 것을 알 수 있다.

express.static(root, [options])

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

우리의 상황에 맞게 코드를 변경하여 사용하자.

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

http://localhost:3000/imgs/main.png

#2. 

이제 우리가 사용하고자 하는 이미지를 우리가 원하는 부분에 태그의 방식으로 삽입함으로써 사용할 수 있게 되었다.

다시 말하여, 정적인 파일을 url을 통해서 접근할 수 있게 되었다.

또한 우리가 지정해준 폴더 이외의 부분은 접근할 수 있기에 훨씬 안전하게 코딩을 진행할 수 있다.