3장 - express 를 활용한 Node.js 시작하기

* Express 를 활용하여 Node 서버 만들기

Node.js 에서 Web Application 을 만들 때 가장 많이 쓰는 모듈이 Express 모듈이다 .

Express 는 일반적인 Web Application 기능을 포함한 모듈로서, node.js 의 커넥트 모듈위에 만들어져있으며 

미들웨어 아키텍처를 활용하며 다양한 데이터 출력지원 , 라우팅 시스템등이 좋은 예다. 

실제로 express 에 포함된 모듈을 보고 싶으면 express 를 설치한 폴더로 가서 express의 package.json 파일을 

보면 된다. 

                                   (수많은 모듈이 express dependencies 에 정의되어 있다.)           

스샷 처럼 express 는 WebApp 을 개발하는데 필요한 수많은 모듈을 집합하여 사용자가 쓰기 쉽도록

만들어 둔 모듈이다.  그럼 이제 express 를 설치해서 사용해보자. 

WebApp을 만들 폴더를 먼저 생성하자. 본인은 c 드라이브에 FirstApp 이라는 폴더를 만들었다.

2장 글을 참고해서 npm init 로 package.json 을 생성하고 dependencies 에 express 를 입력하여 

npm install 로 설치를 하자.

성공적으로 설치 되었다면 express 를 활용한 첫 node.js 서버를 만들어 보자.

먼저 해당 폴더에 StartApp.js 파일을 만들고 코드를 적자.

그 전에 express 를 사용하지 않았을 때 와 사용했을 때의 서버 구동 코드를 살펴보자.

   

var http = require('http');
http.createServer(function(req,res) {
  res.writeHead(200, {
   'Content-Type' : 'text/plain'
   });
   res.end('Hello World');
}).listen(3000);

console.log('Server running at http://localhost:3000/');

위 코드는 express 를 사용하지 않았을 때의 서버 구동 코드이다. 

작동하는 원리를 알아보자. 먼저 http 모듈을 require 로 불러 온 다음 http 객체에 대입한다. 

그런 뒤 http 모듈에 createServer() 메소드를 사용하여 서버 객체를 하나 반환 받은 뒤 3000번 포트를 듣도록

listen() 메소드를 사용하였다.

대충 감이 오는가?  createServer 의 콜백함수에는 request 라는 넘어온 정보가 저장되는 인수와 , response 라는

해당 요청에 응답하는 response 인자를 활용하여 요청에 응답을 하게 된다. 

writeHead() 메소드는 응답 시 Http 헤더를 설정하기 위해 사용하게 된다. 응답 코드를 200 (성공) 으로 설정하고

Content-type 는 응답시 헤더 값을 설정하는데 여기서는 text/plain 즉, 일반 text 응답으로 설정하였다. 

만약 여기서 html로 응답하고 싶다면 html/plain 으로 바꾸면 된다. 

다음 res.end() 메소드는 응답을 마무리 하기 위해 사용되는 메소드 로서 단일 문자열을 인수로 받는다. 

해당 인수로 받은 문자열은 응답시 내용으로 사용된다. 

이제 cmd 창을 켜서 해당 폴더로 간 뒤 node StartApp.js 라고 적고 실행을 하자. 

그럼 console.log 에 설정한 문구 Server running at http://localhost:3000/ 이 나타나며 서버가 실행 될 것이다.

이제 브라우저를 켜고 http://localhost:3000 으로 접속을 해 보면 res.end() 메소드에 설정 했던 Hello World 문구가

나타 날 것이다. 

외부 모듈 없이 기본적인 node의 서버 구동을 살펴 보았으니 이번엔 express 를 사용하여 구동해보자 .

StartApp.js 의 코드를 바꿔보자. 

var express = require('express');
var app = express();

app.use('/', function(req,res){
  res.send('Hello World');
});

app.listen(3000);
console.log('Server running at http://localhost:3000');

코드를 바꾼 뒤 다시 실행해서 브라우저로 접속 해보자. 똑같이 Hello World 를 응답 받을 것 이다.

작동원리를 알아보자. 

먼저 express 모듈을 require 로 올리고 난 뒤 app.use 메소드를 사용하여 미들웨어 함수를 특정경로에 마운트 

하였다.  그리고 app.listen(3000) 으로 3000번 포트를 듣게 하였다. 

express 는 connect 라는 미들웨어를 포함하고 있기 때문에 특정 경로로 들어오는 요청을 손쉽게 처리 할 수 있다.

기본적으로 res.send() 메소드에 버퍼를 전달 할 때, Content-type 헤더는 application/octet-stream 으로 설정되고 ,

문자열 일때는 text/html , 객체나 배열일 때는 application/json 으로 설정 된다.

Express 모듈을 사용하여 WebApp 을 만들 때 사용하는 메소드에 대해서는 많은 종류가 있기 때문에 필요한 건 

그때 그때 설명을 하고, 기본적으로 공부 하기전에  http://expressjs.com/  공식 홈페이지 의 API 를 살펴보자. 

* MVC 패턴 구조

Model - View - Controller 패턴은 Web에 대해 공부한다면 모를 수가 없다.  굳이 따로 설명은 하지 않고 

바로 Node에서 MVC 패턴을 구현하기 위한 구조에 대해서 설명한다. 기본적으로 express 모듈은 어떤 패턴을

사용해야 한다는 건 없이, 중립적인 모듈이다. 그렇기 때문에 사용자가 직접 MVC 구조를 만들고 설계 해야 한다.

기본적으로 앞에서 설명한 CommonJS 모듈 구조를 사용해서 만들 것 이다. 

MeanStack 을 만들 때 가장 많이 쓰는 폴더 구조는 수평폴더 구조와 수직폴더 구조가 있다. 

(생각해보니 수평,수직 말고는 없네....) 

수평폴더 구조는 구현할려는 기능보다는 역활에 충실하여 만들고 , 수직폴더 구조는 구현할 기능에 

맞춰서 만들게 된다. 

예를 들면 수평폴더 구조에 Models, Controllers, Views 폴더가 있다면 모든 애플리케이션에서 사용하는

각 폴더에 Client ,Server 의 모든 Model , Controller , View 를 넣게 된다. 

(수평 폴더 구조의 예)

수직 폴더 구조는 수평폴더 구조보다 조금 더 복잡한 프로젝트에 어울린다. 

수직폴더 구조는 구현할 기능에 맞춰서 폴더를 구성한다. 예를 들면 core 기능에 관하여 core 폴더를

만들고 그안에 다시 client 와 server 폴더를 만들고 또 다시 그안에 각 폴더를 만들어서 관리한다.

(수직 폴더 구조의 예)

지금 만들고자 하는 WebApp에서는 간단하게 수평폴더 구조를 이용해서 만들 것 이다.

먼저 app 폴더를 만들고 그 안에  models , views , controllers 폴더와 express의 라우팅 미들웨어를 위한 

routes 폴더를 만들자. 

그런 뒤 정적 파일 즉, 이미지 파일이나 html 파일, 외부 js 라이브러리를 넣기위해  static 폴더를 만들고

그 안에 html , image , js 폴더를 만들자. 

최종 적인 폴더 구조이다. 

더 필요한 폴더는 현재 목표인 다기능(?) SNS WebApp 을 만들며 필요할 때 추가 할 것 이다.

이제 기본적인 폴더구조와 WebApp을 만들 준비가 되었다. 다음 장 부터는 요청루트에 따른 라우팅과 환경구성에 

대해서 알아본다. 

(끝)