Node.js에 입문해보자(2): HTML파일 전송하기

ButterFlakes·2021년 12월 24일

Node.js 입문하기

목록 보기

3/7

시작전에

이 포스팅은 자바스크립트 문법을 어느정도 알고 있다는 가정하에 쓰여진 포스팅입니다
만일 자바스크립트 문법을 모르시면 자바스크립트에 대한 공부를 한 후 오시는 것을 추천드립니다
추천) 생활코딩 - Javascript : https://www.opentutorials.org/course/3085

이 시리즈는 가능하면 ES6의 문법을 사용하려고 노력합니다

텍스트말고 HTML파일을 보여주진 못하나?

지난번에 작성했던 코드를 보자

import express from 'express'

const app = express()

app.get('/', (request, response) => {
  response.send('Hello, World!')
})

app.listen(3000)

우리가 작성한 코드는 서버가 Hello, World! 라는 텍스트밖에 보내주지 않는다.
하지만 슬슬 단순한 텍스트가 아니라 HTML 파일을 작성해서 사용자가 요청하면 HTML 파일을 한 번 보내주고 싶은데 어떻게 하면 좋을까?

파일을 불러오는 fs 모듈

파일 입출력을 위해서는 fs라는 모듈을 불러와 사용하면 된다. 대충 file stream의 약자이다.

이름답게 파일을 입출력하는 각종 기능들을 포함하고 있으며, 우리가 필요한 것은 파일을 불러오는 함수이니 한번 불러와보자

import { readFile } from 'fs'

이 임포트문을 추가해주면 된다. 그럼 이제 아래와 같이 코드를 수정하고 다시 한번 localhost:3000으로 들어가보자

import express from 'express'
import { readFile } from 'fs'

const app = express()

app.get('/', (request, response) => {
  readFile('a.html', 'utf-8', (err, data) => {
    if(err) { response.send('No Such File of Directory') }
    response.send(data)
  })
})

app.listen(3000)

readFile 역시 비동기 처리 메서드이기 때문에 콜백을 선언해주어야 한다.
첫번째 인자로는 파일의 경로, 두번째 인자로는 인코딩 방식, 세번째 인자로는 에러객체와 읽어들인 파일의 데이터를 인자로 받는 콜백이 온다.

비동기처리인 만큼 당연히 콜백 내부에다 에러처리와 응답전송과 관련된 코드를 작성해주어야 한다. 한번 적어보자

a.html 파일을 안만들어 줬으니 서버가 404 not found라는 메시지를 송신했다.

이제 a.html을 main.js와 같은 위치에 만들고 다시 localhost:3000으로 들어가보자.

<html>
  <head>
    <title>Hello :D</title>
  </head>
  <body>
    <h1>Hello, HTML!</h1>
  </body>
</html>

이걸로 html파일도 불러와서 출력하는 예제도 해보았다

그럼 이미지는 어떻게 할 수 있을까?

이미지를 불러와보자

일단 넣을 이미지를 한 번 찾아보자

https://unsplash.com/
위 사이트는 무료로 자유롭게 사용할 수 있는 이미지를 구할 수 있는 사이트다.
접속해서 원하는 이미지를 다운받아보자

블로그 주인장은 개 두마리가 있는 사진을 다운받았다. 그리고 HTML 코드를 아래와 같이 바꿔주었다.

<html>
  <head>
    <title>Hello :D</title>
  </head>
  <body>
    <h1>Dog</h1>
    <img src="Dog.jpg">
  </body>
</html>

그리고 이 HTML 파일을 노드에서 말고 그냥 브라우저를 통해 바로 봐보자
크롬이나 엣지의 경우엔 주소창에 해당 html 파일의 경로를 복사해서 붙여넣으면 열린다. 사파리는 이런 기능이 없는 것 같으니 그냥 얌전히 크롬이나 엣지를 깔자.

우리 귀여운 댕댕이들의 사진이 잘 나온다.
그럼 이제 노드를 통해 localhost로 들어가 귀여운 댕댕이들 사진이 잘 나오는지 보도록 하자

???
뜨라는 댕댕이들 사진은 안뜨고 웬 물음표 박스만 커다랗게 떠 있다.
이게 어떻게 된 일 일까?