Node.js - express

안녕하세요 :)

 

이번 포스팅에서 다루어볼 내용은 Express 모듈입니다.

지난 포스팅을 통해 우리는 http 모듈을 사용한 간단한 웹서버를 만들어 보았습니다. 하지만 실무에서는 express모듈이 많이 사용된다 하기에 이번엔 express모듈을 이용해 웹서버를 만들어 볼것입니다.

 

왜 Express를 많이 사용할까?

간단한 코드로 웹서버의 기능을 구현할수 있으며, 미들웨어와 라우터를 사용하여 편리하게 각 기능들을 구성할수 있다.

 

먼저 npm 패키지 매니저의 init 명령어를 통해 타겟 디렉터리를 초기화 해줍니다. 명령어는 npm init 이며 수행후엔 아래와 같이 package.json 파일이 생성됩니다.

 

 

이후에는 위의 사진처럼 app.js 라는 새로운 파일을 생성하여 아래와 같이 간단한 웹서버를 시작하는 코드를 실행해보았습니다.

 

 

 

1번 라인에서 express라는 변수로 express모듈을 초기화 해주었습니다. 그후 app 이라는 변수로 express객체를 생성해 주었습니다.

7번 라인에서 기본 포트를 app 객체의 속성으로 설정해주었으며 9번 라인에서 http모듈의 createServer()메소드를 사용해 서버를 가동해 주었습니다.

 

http 모듈에서도 서버객체를 만들어 그안의 listen 메소드를 호출하여 웹서버를 시작했습니다. express 모듈도 마찬가지 입니다. 다만, 포트를 set 메소드를 통해 app객체내에 초기화 되어있는 값으로 해주어야하기 때문에 가져올때는 get 메소드를 사용합니다.

 

위처럼 express 객체가 가지고 있는 주요 메소드는 set, get, use 등이 있습니다.

set의 경우 서버의 속성을 지정하기 위한 메소드로 set(name,value)의 매개변수값을 갖습니다. get은 지정된 속성을 가져올 때 사용하는 메소드 입니다. use의 경우 미들웨어 함수를 사용하는 메소드인데 앞으로 천천히 알아보겠습니다.

 

그런데, set 메소드를 통해 지정해주는 속성값으로는 port 이외에 어떠한 것들이 있을까요?

주요 속성으로 env,views, view engine 등이 있습니다.

 

port 는 보통 디폴트값으로 3000이 주어지기때문에, 초기화 하지 않아준다면 기본적으로 3000으로 초기화 됩니다.

해당 포트 속성을 설정할때는 process.env 객체에 있는 PORT 속성을 관리합니다.

view engine의 경우 ejs 나 pug를 많이 사용합니다. 뷰엔진은 클라이언트에 보낼 응답 웹문서를 만들 때 사용되며 미리 템플릿을 만들어두고 그 템플릿을 사용해 응답 웹문서를 만들어냅니다.

 

이후 app.js 파일을 실행하기 위해서는 express 모듈을 설치해야 하는데 명령어는 다음과 같습니다.

 

npm install express --save

 

 

하지만 웹브라우져를 통해 localhost:3000에 접속해도 아무런 응답이 없습니다. 당연히 어떠한 응답을 할것인지 지정하지 않았기때문입니다.

 

그럼 지금부터 미들웨어로 클라이언트에 응답을 보내보겠습니다.

지금까지 우리는 set()메소드를 사용해 속성을 설정하는 방법을 알아봤습니다. 이제부터는 use()메소드를 사용하여 미들웨어를 설정하는 방법을 알아보겠습니다. Node.js는 미들웨어를 사용하여 필요한 기능을 순차적으로 실행할수 있습니다. 각각의 미들웨어에는 순차적인 번호가 있으며 use()메소드를 사용하여 app객체에서 부터 매핑해줍니다. 다음 번호의 미들웨어로 이동할때는 next()메소드를 사용하며 마지막엔 최종적으로 라우터를 거치게 됩니다. 라우터는 get()메소드를 사용하여 app객체에서 부터 매핑해줍니다.

 

기본적인 로직은 위와 같지만 근본적으로 미들웨어가 무엇이냐면!

웹 요청과 응답에 관한 정보를 사용해 필요한 처리를 진행할수 있도록 독립된 함수로 분리된 express모듈의 속성입니다.

클라이언트에서 요청을 했을때 수행되는 함수를 만들어 use() 메소드로 미들웨어로 등록한다면 모든 클라이언트 요청이 이 미들웨어를 거치며 만들어둔 함수를 수행되는것입니다. 바로 이러한 클라이언트의 요청과 미들웨어 사이에서 서로를 연결해주는 길잡이역할을 하는것이 라우팅입니다.

 

 

 

위의 예제의 경우 로컬호스트의 3000번 port로 들어오는 클라이언트의 요청으로 하나의 미들웨어를 엮어 주었지만 만약 여러개의 미들웨어에 대한 처리는 어떻게 하는것일까요?

 

이번에는 두개의 미들웨어를 사용하는 예제를 다루어 보겠습니다.

 

 

 

위와 같이 첫번째 미들웨어에서 요청에 해당하는 작업을 끝낸후 두번째 미들웨어로 넘어가고 싶다면 next()메소드를 사용합니다. path는 별도로 지정하지 않았기 때문에 '/' 로 두번째 미들웨어에서 받았습니다.

 

 

Express의 요청객체와 응답객체

익스프레스에서 사용하는 요청,응답 객체는 http모듈에서 사용하는 객체와 동일하다, 하지만 몇가지 메소드를 더 추가할수 있습니다. 그예로는 send, status, sendStatus, redirect, render등이 있습니다.

 

 

1. send는 응답 데이터를 좀더 간단하게 전송하기위해 express에서 추가된 것입니다. (html문자열, 버퍼객체, Json객체 등 전송가능) 앞서 다루었던 예제의 두번째 미들웨어에서 send를 적용한다면 아래와 같습니다.

 

 

 

2. status, sendStatus 두가지 메소드는 상태코드를 전송할수 있습니다. status는 상태 코드를 작성하는 기능만 있음으로 전송을 위해서는 send메소드와 같이 호출해주어야 합니다.

res.status(403).send('Forbidden');

만약 sendStatus 메소드를 사용한다면 코드만 파라미터로 전달합니다.

res,sendStatus(403);

 

 

 

3. redirect() 메소드를 사용하면 다른 페이지로 이동할수 있습니다. 이를 이용해 구글웹페이지로 이동하는 미들웨어를 작성한다면 다음과 같습니다.

 

 

4. render()메소드는 뷰엔진을 사용해 템플릿파일에 있는 HTML 페이지를 조작하는것인데, 뷰와 템플릿은 시각적으로 웹페이지를 보여주는데 아주아주 큰 역할을 수행하기 때문에 나중에 이부분만 따로 많이 자세히 다루어 보겠습니다. 

 

 

 

 

 

요청 객체에 추가한 헤더와 파라미터

 

이전 포스팅에서 우리는 url객체를 다룰때 파라미터 와 ip주소값을 ?기호를 통해 나눈다고 언급한적이 있습니다. 그렇다면 이를 이용해서 name이라는 파라미터값을 생성하여 값을 mike로 주었을때 이 결과를 화면에 출력해보는 예제를 수행해보겠습니다. 아래와 같습니다.

 

<코드>

 

<결과>