[Node.js 5강] express 서버 설정 및 기본 구조 설계

이번엔 express 설정 및 웹서비스의 기본구조 설계에 대해서 알아보겠습니다. 

 

Express 정의 및 주요기능

express 는 node.js를 위한 빠르고 개방적이며 간결한 웹 애플리케이션 프레임워크 입니다. 

아래 주요기능을 보면 아시겠지만 웹서비스를 만드는데 필요한 기능을 제공하는 프레임워크로 보시면 되겠습니다. 

 

주요기능

• HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.
• 템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다. 
• 접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다. 
• 핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다.

 

express 참고 사이트

https://expressjs.com/ko/

Express - Node.js 웹 애플리케이션 프레임워크

 

Express 설치

npm을 이용해서 express를 설치합니다. 

$ npm install express --save

 

express 모듈 설치한 후의 프로젝트 모습

node_modules 폴더가 생성되어 있음(글로벌로 설치하지 않고 로컬로 설치한 상태)

 

 

package.json에 dependencies가 추가됨

 

express 기본 폴더 구조

express 기본 폴더 구조는 아래와 같습니다.

/public

/routes

/views

web.js

전 아래 화면처럼 폴더를 생성했습니다.

(자동생성기능 사용하지 않고 하나하나 폴더 및 소스를 생성해가면서 진행하도록 하겠습니다.)

 

• conf : DB 연결정보, API 키값 등 환경변수 정보 저장
• public :  정적 파일을 위한 폴더로서 자바스크립트 파일, 이미지 파일, CSS 등을 포함합니다. 웹URL의 루트폴더로 생각하시면 됩니다. 관리를 쉽게하기 위해 js와 css로 폴더를 구분했습니다. 
• routes :  라우팅을 위한 폴더입니다. 라우팅 리소스 별로 모듈을 만들어 라우팅 로직을 구현합니다. 클라이언트에서 요청 별로 어떤 로직을 수행할지 정해놓은 파일이라고 생각하시면 됩니다. (java에서는 Controller 역할)
• views : request 요청에 대한 로직을 처리한 후 클라이언트에 응답을 보낼 때 html 코드로 변환해서 반환하는 파일을 정의한 폴더입니다.  여기선 ejs 템플릿을 사용합니다. 
• web.js : express  설정파일이 담겨있는 파일입니다.(보통 파일 자동생성시 app.js 로 되어 있는데 cafe24를 호스팅으로 사용할 경우 파일이름이 web.js로 되어 있어야 합니다.)
• package.json :  프로그램 이름, 버전, 필요한 모듈 등 노드 프로그램의 정보를 기술합니다. (NPM은 이 정보를 참고하여 필요한 모듈을 관리)

routes, views폴더의 하위폴더는 관리를 쉽게하기 위해 업무별 폴더를 동일한 이름과 구조로 생성했습니다. 

 

 

Express를 이용해서 화면 띄워보기

web.js 파일 작성

(보통 app.js 라는 이름으로 파일이 생성되는데 cafe24 호스팅을 사용하는 경우는 파일명을 web.js로 해야 합니다.)

//필요한 모듈 선언
var express = require('express');
var http = require('http');
var app = express();

//express 서버 포트 설정(cafe24 호스팅 서버는 8001 포트 사용)
app.set('port', process.env.PORT || 8001);

//서버 생성
http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port ' + app.get('port'));
});

//라우팅 모듈 선언
var indexRouter = require('./routes/index');

//request 요청 URL과 처리 로직을 선언한 라우팅 모듈 매핑
app.use('/', indexRouter);

 

/routes/index.js 라우팅 파일 작성

var express = require('express');
var router = express.Router();

//라우터의 get()함수를 이용해 request URL('/')에 대한 업무처리 로직 정의
router.get('/', function(req, res, next) {
    res.send('index page');
});

//모듈에 등록해야 web.js에서 app.use 함수를 통해서 사용 가능
module.exports = router;

 

프로토콜의 메소드에 따라 여러 함수를 사용할 수 있습니다.

이부분은 나중에 REST방식으로 URL을 설계하는 부분에서 다시 다루도록 하겠습니다.

2019/04/02 - [Node.js] - [Node.js] rest방식 url 설계

 

요점은 라우팅 매핑시 클라이언트 요청의 URL + 프로토콜 메소드 를 사용한다는 겁니다.

• GET(조회): router.get()
• POST(저장): router.post()
• PUT(수정): router.put()
• DELETE(삭제): router.delete()

 

res 파라미터는 클라이언트로 응답을 하는 객체입니다. 응답을 위한 함수는 여러개가 있습니다.

• res.send(): 문자열로 응답
• res.json(): 제이슨(Json) 객체로 응답
• res.render():  html 변환 템플릿을 렌더링(ejs)
• res.sendfile(): 파일 다운로드

 

web.js와 index.js 파일 작성 후 이클립스에서 express 서버를 start합니다. 

web.js파일에서 오른쪽 클릭 후 Run As - Node.js Application 실행

 

 

 

최초 실행한 이후는 이클립스 상단에서 바로 Server를 기동할 수 있습니다. 

 

그리고 서버를 재기동하기 위해 서버를 Stop할 경우는 Console 창에서 정지 버튼을 클릭하면 됩니다. 

 

 

Express 서버 Start 후 브라우저에서 127.0.0.1:8001을 입력하면 아래와 같이 표시됩니다. 

 

웹서비스 개발을 원활하게 하기 위한 폴더 구조 개선

일단 여러명이 개발할 수도 있으므로 소스형상관리시 충동방지를 위해 view 파일과 route 파일을 적절하게 쪼개는게 필요합니다. 그리고 유지보수 등을 편하게 하기 위해 view파일과 route 파일을 1대1로 생성하고, 파일이름도 동일하게 명명하는게 좋습니다. 

라우트 파일 하나에 여러 view를 연결할 수 있지만 이 경우 여러 개발자가 라우트 파일 하나를 접근해서 수정하면서 소스형상관리에 문제가 발생할 수 있습니다. 

그래서 라우트 파일 및 view 파일을 아래와 같이 쪼갭니다. 

 

 

클럽목록(clubList), 클럽상세(clubDetail) 두 개의 화면을 개발한다고 했을 때 폴더 및 파일 구조입니다. 

유심히 봐야할 부분은 routes/club/club.js 파일과 clubDetail.js, clubList.js 파일간 관계입니다. 

 

club.js는 request URL에 대한 업무처리 로직을 매핑하는 역할입니다. 

이 파일은 어쩔 수 없이 업무와 관련된 모든 사람이 접근해서 수정을 하게 됩니다. 

소스충돌을 피하기 위해, 개발해야할 화면과 각 화면별 개발 담당자 지정, URL 정의 등을 업무PL이 정의해서 작성하는게 좋습니다. 

 

club.js 파일 구조

var express = require('express');
var router = express.Router();

/**
* BaseUrl : web.js router에 선언한 BaseUrl을 표시. request url을 쉽게 파악하기 위함
*  : /club
*/

/**
* 실제 업무처리 로직이 명시된 router import
*/
var clubList = require('./clubList');    //클럽목록
var clubDetail = require('./clubDetail');    //클럽상세

/* clubList 출력. 담당개발자 A */
router.get('/list', function (req, res) {
    clubList.list(req, res);
});

/* 클럽상세. 담당개발자 B */
router.get('/detail/:clubSn', function (req, res) {
    clubDetail.detail(req, res);
});

module.exports = router;

URL 호출 구조에 'detail/:clubSn' 은 URI 형태로 파라미터를 받을 경우 사용하는 형태입니다. 

(나중에 자세히 다루도록 하겠습니다.)

 

clubList.js

var clubList = {
    //클럽목록
    list : function(req, res){
        res.send('club list');
    }
};

module.exports = clubList;

 

clubDetai.js

var clubDetail = {
    //클럽상세
    detail : function(req, res){
        res.send('club detail');
    }
};

module.exports = clubDetail;

 

web.js 에도 club.js 라우터를 명시해줘야 합니다. 

var clubRouter = require('./routes/club/club');

app.use('/club', clubRouter);    //클럽

 

서버를 재기동 후 URL 호출을 통해 결과를 확인합니다.

 

 

이상으로 express 서버 설정 및 개발시 관리를 편하게 하기 위한 기본폴더 구조를 알아봤습니다.

 

다음강좌

2019/04/02 - [Node.js] - [Node.js 6강] html 템플릿 엔진 ejs 연동해서 서버에서 넘어온 데이터 사용하기