Nodejs 프로젝트에 Express Framework 템플릿 만들기

Nodejs하면 빼놓을 수 없는 프래임워크가 있다.

마치 JAVA 하면 Spring Frame Work가 있듯이

Nodejs 에는 Express Frame Work가 있다.

nodejs에는 express라는 외장 모듈이 있다.

http모듈을 업그레이드? 한 느낌의 모듈인데,

이 모듈을 기반으로 각종 여러 모듈을 섞어 프래임워크를 만드는 것이다.

프래임워크라 하면 말그대로 틀이다.

프로젝트의 능률을 올리기 위한 일종의 뼈대라고 볼 수 있다.

저번 포스팅에서 간단하게 

http.createServer를 이용한 서버를 생성하였다면,

이번 포스팅에는 Express 모듈을 이용한 Express Frame Work를

사용하여 서버를 생성해 보겠다.

일단 저번에도 사용햇던 c9를 이용하여 프로젝트를 생성하였다.

(저번 포스팅에서도 사용한 cloud9)

프로젝트를 생성한 후 아무런 폴더도 생성되어있지 않은 상태다.

(터미널에 express framework 템플릿을 사용하기 위한 타이핑!)

일단 express framework 템플릿을 이용하려면 터미널에 명령어를 쳐야한다.

npm install -g express-generator

이 명령어를 치면 당장은 아무런 폴더도 생성되지 않는다.

명령어 그대로 익스프레스 제너레이터를 인스톨했을 뿐이다.

다음으로 어느 경로에 프래임워크를 셋팅하겠냐는 명령어를 쳐야한다.

express -f .

잘 알지는 못하지만 -f는 폴더를 뜻하는 것 같고 .은 현재 경로라는 것 같다.

이렇게 명령어를 쳐주면!

(프래임워크 기준으로 폴더가 생긴걸 볼 수 있다.)

그림과 같이 폴더와 각종 기본 템플릿이 쫘르륵 생긴다.

폴더 별로 살펴보면

 

bin폴더 - www.js(서버실행 js)

public폴더 - 각종 Static으로 사용할 resource

routes폴더 - view와 연결 시킬 각 종 js(Mvc 패턴 중 Controller라고 생각하면 될듯)

views폴더 - 말그대로 view(기본으로 jade로 생성되어 있다.)

app.js(서버와 routes연결 및 서버 셋팅을 하기위한 미들웨어)

package.json(서버의 npm module 관리 및 서버 정보)

정도로 보면 되겠다.

(프래임워크 생성후 package.json)

package.json에 들어가보면 express framework는 어떤 모듈을 사용하는지 알 수 있다.

dependencies 안을 살펴보면

body-parser, cookie-parser 등 파서들을 사용하고,

당연히 express 모듈도 사용되며, view를 jade를 기본적으로 사용한다.

각 종 모듈에 대해서는 따로 공부를 해야할 듯 하다.

프래임워크 탬플릿을 생성하면

아직 각종 모듈이 설치되어 있지 않은 상태이므로

npm install;

을 타이핑하여 각 종 모듈을 설치한다.

(view로 ejs를 사용하기 위해 추가!)

기본적으로 jade로 view가 설정되어 있지만

필자는 jade를 잘 모른다.

따라서 view로 jade를 사용하지 않고, 

jsp와 거의 같은 모양으로 사용되는 ejs모듈을 따로 정의하여 설치 하였다.

(www.js의 내부 모습)

www.js를 열어보면 친절하게도

일반적으로 express모듈을 이용하여 서버를 생성할때의 코드가 적혀있다.

epress모듈을 이용하여 서버를 생성하는 법은

22번째 줄을보면 저번 포스팅과의 차이를 알 수 있다.

(app.js의 내부 모습)

nodejs의 장점 중 하나인 미들웨어를 담당하는 app.js의 코드를 보면,

일단 15번째 줄에서 view engine을 jade로 사용됨을 알 수 있다.

하지만 필자는 ejs를 사용하기 때문에 ejs로 수정했다.

또한 25,26번째 줄을 보면 접속 url이 어떻게 되냐에 따라

어떤 route와 연결 하여 사용할지 정의한다.

나머지 줄 역시 천천히 살펴보면 어렵지 않게 사용되는 원리를 파악 할 수 있다.

(index.js 내부 모습)

routes폴더 내에는

기본적으로 index.js, users.js가 생성 되어 있는데

그 중 http://주소/ 로 접속 하였을때 보여질 index.js를 살펴보면

get방식으로 ('/') 접속이 될 시 

app.js에서 정의한 views 폴더 내의 index라는 이름을 가진

파일로 title이라는 변수 내에 값을 렌더 한다는 것을 알 수 있다.

변수 전달은 json 형식을 기본으로 한다.

따라서 view에서 ejs든 jade든 상관없이 title이라는 변수를 사용하면,

'익스프레스프램웤으로 서버열기!' 라는 글이 전달될 것이다. 

(어디서 많이보던 모습?)

마지막으로 index.ejs를 만들어 기본 구성을 html 구성으로 작성한뒤

<%=%> 사이에 routes에서 보낸 변수를 사용하면 끝이다.

마치 모양이 jsp와 거의 흡사하다.

다만 다른점은 jsp같은 경우는 request.getParameter를 이용하여 변수에 담아서

그 변수를 사용 하였지만,

ejs에서는 라우터에서 보내준 변수를 바로 사용 가능하다.

정말 편하다.

(최종 적으로 서버에 접속)

결국 서버에 접속하면 title에 담아진 변수 값이 보여진다.

기본적인 express framework에 대해 살펴 보았는데,

현재 포스팅 정도만 대충 이해를 해도 왠만한 프로젝트는 사용 가능 할 것이라 보인다.

마치며..

이전까지 필자는 jsp/servlet을 이용한 Spring FrameWork를 사용해왔다.

하지만 너무 복잡한 설정과 유기적인 연결이 너무 어려웠다.

하지만 nodejs를 공부하며 Express FrameWork을 사용해보니

빠른 접근성과 쉽게 파악할 수 있는 장점이 있었다.

물론 대형 프로젝트에서는 스프링이 안정성과 강세를 보일지 모르지만

현재 nodejs의 성장세와 코드의 생산성면에서 보았을때는 express framework는

정말 대단한 생산성을 보여진다고 생각한다.

좋은 정보가 되었다면 공감버튼을!

(비회원도 가능해요>_<)