Node.js - express (1) 웹서버 만들기

 

 

앞으로 Node.js의 express 모듈을 이용해 웹서버를 제작하는 과정을 포스팅해 보고자 한다. 이번 포스팅에서는 express 모듈을 사용해 포트를 연결하고 접속하는 것만 구현해 보도록 하자.

 

 

< 목차 >

1. npm install express (express 패키지 설치)
2. 웹서버 만들기

 

 

 

< npm install express >

Node.js에는 웹서버가 내장되어 있기 때문에 이를 활용하면 웹서버를 구축할 수 있다. 우리가 사용할 것은 express로 이는 Node.js에서 실행할 수 있는 웹서버를 구축하기 위한 패키지이다. 우선 npm을 사용하기 위한 준비 작업으로  vsCode(Visual Studio Code) 에디터의 터미널 창에 "npm init"을 입력해 package.json 파일을 생성하자. 

 

작업하고자 하는 디렉토리 내에 package.json 파일이 설치되었으면 이제 npm install express --save를 입력해 express 패키지를 설치해주면 된다.

 

설치가 끝났다면 위에 보이는 것과 같이 node_modules 디렉토리가 생성되었을 것이고 해당 디렉토리 안에 express 패키지와 관련된 모듈과 패키지들이 생성된 것을 확인할 수 있다. 또한 package.json 파일의 "dependencies" 항목에 "express"가 추가된 것을 통해 제대로 설치가 되었는지 확인해 볼 수 있다.

 

express 패키지의 설치가 끝났다면 이제 express 모듈을 사용해 웹서버를 만들어 보도록 하자.

 

 

 

 

< 웹서버 만들기 >

express 패키지를 이용해서 서버를 만들기 위해서는 우선 require 함수를 통해 "express" 모듈을 불러오는 작업이 선행되어야 한다. 다음의 코드를 작성해 express 모듈을 불러오도록 하자.

const express = require("express");
const app = express();

npm install express 을 통해 생성된 node_modules 디렉토리 안에 있는 express 폴더의 코드들을 사용하기 위해 작성하는 구문으로 express 모듈을 가져와서 사용하기 위해 필수적으로 작성해야 하는 구문이다. const app = express() 를 추가로 작성하여 express 모듈과 관련된 코드들을 담아놓고 사용할 객체를 생성해준다. app 객체를 이용해 express와 관련된 함수들을 app.method() 형식으로 사용하면 된다.

 

이제 클라이언트가 url을 통해 서버에 접속했을 때 사용자의 요청을 받을 수 있는 포트를 설정해 줘야한다. 이 때 사용하는 메소드가 바로 listen( ) 이다.

app.listen(3000, ()=>{
    console.log("sever onload")
})

// 첫번째 인자값으로 port 번호를 작성해준다.
// 두번째 인자값으로 CB(콜백함수)를 작성해준다.

위의 코드를 작성해주면 우리의 서버는 localhost의 3000번 포트를 통해 사용자의 요청을 받는 작업을 수행하게 된다. 좀 더 직관적으로 이야기해 보면 3000번 포트 앞에서 우리의 서버가 대기하고 있다고 생각하면 된다. 3000번 포트 앞에서 요청이 들어오길 기다리고 있다가 해당 포트로 클라이언트의 요청이 들어오면 해당 요청을 받아서 응답을 할 수 있도록 해준다. 콜백함수를 인자값으로 넣어줌으로써 서버가 제대로 실행되고 있다면 콘솔창에 "server onload"가 출력되게끔 하였다.

 

listen() 메소드를 사용하여 서버 접속에 사용할 포트를 설정해주었다면 이제 웹브라우저에서 웹서버로 사용자의 요청이 들어왔을 때 어떠한 응답을 해줄 것인지 설정해 주어야 한다. 웹브라우저를 통해 서버쪽에 요청을 보내는 방식은 크게 get 방식과 post 방식이 있다. get 방식은 URL에 queryString(데이터)을 붙여서 웹서버에 요청을 보내는 방식이고 post 방식은 HTTP 패킷의 body영역에 데이터를 실어 요청을 보내는 방식이다. get() 메소드를 사용해서 get 방식의 요청이 들어왔을 때 어떻게 처리하는지 알아보자. 

 

app.get() 메소드는 get 방식의 요청을 받아주는 메소드로 기본적으로 두 개의 인자값을 받는다. 첫번째 인자값으로는 path(경로)를 작성해주고 두번째 인자값으로는 요청(request)과 응답(response)를 파라미터로 갖는 콜백함수를 작성해준다.

app.get("/express", (req, res) => {
    res.send(`<h1>Hello express</h1>`)
})

// 첫번째 인자값 : path  (path값이 "/"일 경우 host를 뜻한다.)
// localhost:3000 == /
// localhost:3000/express == /express
// 두번째 인자값 : cb(콜백함수)

app.get() 메소드의 두번째 인자값인 콜백함수는 다시 req(요청)과 res(응답)을 인자값으로 받는다. 클라이언트에서 서버쪽으로 요청을 했을 때 해당 요청과 관련된 데이터는 req 인자값을 통해 받고 웹서버에서 응답을 해줄 때는 res 인자값을 통해 응답과 관련된 데이터를 웹브라우저에게 보내준다.

 

위의 코드를 해석해보면 다음과 같은 의미를 갖는다. 사용자의 웹브라우저가 "/express" 경로(path)로 get 방식의 요청을 보냈을 때 우리의 웹서버는 해당 요청을 받아서 res.send() 메소드의 인자값인 "<h1>Hello express</h1>"를 웹브라우저에게 보내준다. 웹브라우저는 이 응답을 받아서 사용자의 화면에 해당 내용을 랜더해준다.

 

지금까지 작성해본 코드를 전부 모아보면 다음과 같다.

const express = require("express")
const app = express()

app.get("/express", (req, res)=>{
    res.send("<h1>Hello express</h1>")
})

app.listen(3000, ()=>{
    console.log("server onload")
})

해당 내용을 express.js 파일 안에 작성한 후 vsCode 터미널 창에 node express.js를 입력하고 실행해보면 콘솔창에 "server onload"라는 글자가 출력되면서 우리의 웹서버가 제대로 작동하기 시작했다는 것을 확인할 수 있다.

 

이제 웹브라우저의 주소창에 localhost:3000/express URL을 입력해서 우리가 만든 웹서버에 접속해보자.

 

 

웹서버 제작을 향한 머나먼 여정의 첫발을 내딛는데 성공한 것을 확인할 수 있다.