[Node.JS] 강좌 10-1편: Express 프레임워크 응용하기 – EJS


list

강좌 09편에 이어 Express를 응용하는 방법에 대해 알아보겠습니다.
전 강좌와 같은 프로젝트를 사용하니, 강좌 09편을 읽지 않으신분은 전 강좌부터 읽어주세요.

강좌를 작성하다가 글이 너무 길어져서 3편으로 나누어 작성한 점 유의해주세요 🙂

10-1. EJS
10-2. Restful API
10-3. Session


0. 디렉토리 구조

이번 강좌에선 data/user.json 이 추가되었고 views/ 내부 파일들이 변경되었습니다.

1. 의존 모듈 추가

저번 강좌에선 그저 페이지 라우팅만 다뤘지만,
강좌 10편에서는 EJS엔진과 추가적으로 RESTful API,  그리고 세션을 다룰 것이므로 넣어줘야 할 의존 모듈들이 있습니다.
강좌를 작성하다가 길이 너무 길어져서 3편으로 나누어 작성한 점 유의해주세요 🙂

  • body-parser – POST 데이터 처리
  • express-session – 세션 관리

우선 전 강좌에서 작성했었던 package.json 을 업데이트 하세요.

그 후 다음 명령어를 입력해 모듈을 설치합니다.

추가한 모듈들을 server.js 에서 불러오겠습니다.

Express 의 이전 버전에서는 cookie-parser 모듈도 불러와야했지만, 이젠 express-session 모듈이 직접 쿠키에 접근하므로 cookie-parser 를 더이상 사용 할 필요가 없습니다.

추가적으로, Node.js 에 내장되어있는 fs 모듈도 불러왔는데요, 이는 나중에 파일을 열기 위함이랍니다. 그리고 원래 상단에 있던 router 코드를 아래로 내려주세요 (Line 27) 이 코드가 bodyParser  설정 아래부분에 있다면 제대로 작동하지 않는답니다. 그리고 router 에서 fs 모듈을 사용 할 수 있도록 인자로 추가해 줍니다.

router/main.js 에서 첫번째 줄도 업데이트해주세요.

 

session 부분에서의  값에 대해서 알아보겠습니다:

  • secret – 쿠키를 임의로 변조하는것을 방지하기 위한 sign 값 입니다. 원하는 값을 넣으면 됩니다.
  • resave – 세션을 언제나 저장할 지 (변경되지 않아도) 정하는 값입니다. express-session documentation에서는 이 값을 false 로 하는것을 권장하고 필요에 따라 true로 설정합니다.
  • saveUninitialized – uninitialized 세션이란 새로 생겼지만 변경되지 않은 세션을 의미합니다. Documentation에서 이 값을 true로 설정하는것을 권장합니다.

 

2. EJS 템플릿 엔진

템플릿 엔진이란, 템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈입니다. Express 에서 사용하는 인기있는 Jade 템플릿 엔진은 기존의 HTML에 비해 작성법이 완전 다른데,  그에 비해 EJS는 똑같은 HTML에서 <% %> 를 사용하여 서버의 데이터를 사용하거나 코드를 실행 할 수 있습니다.

EJS에서는 두가지만 알면 됩니다.

  1. <% 자바스크립트 코드 %>
  2. <% 출력 할 자바스크립트 객체 %>

2번에서는 자바스크립트 객체를 router 에서 받아 올 수도 있습니다.

 

VIEW로 데이터 넘기기

우선, 전 강좌에서 작성하였던 views/index.html과 views/about.html 을 삭제하시고,
router/main.js 를 다음과 같이 수정하세요.

JSON 데이터를 render 메소드의 두번째 인자로 전달함으로서 페이지에서 데이터를 사용가능하게됩니다.

 

VIEW 에서 데이터 접근 및 루프코드 실행

이제 views/index.ejs 를 다음과 같이 만들어 주세요.

Line 3 : 라우터에서 title 받아와서 출력합니다.
Line 9~13: 루프문입니다.

출력

서버를 실행하고 http:/localhost:3000/ 에 접속해보세요.

이미지 37

성공하셨나요? 자, 이제 view 코드를 여러 파일로 분리해봅시다.

EJS 분할하기

PHP나 Rails에서 처럼, EJS에서도 코드를 여러 파일로 분리하고 불러와서 사용 할 수 있답니다.
파일을 불러올땐 다음 코드를 사용합니다.

 

index.ejs 파일의 head 와 body 를 따로 파일로 저장해서 불러와보겠습니다.

header.ejs 파일과 body.ejs 파일:

이렇게 파일이 준비됐다면, index.ejs 를 다음과 같이 수정하면 됩니다.

 


이번 강좌에서는 EJS 의 기본적인 사용법에 대해 배웠습니다.
다음 강좌에서는 RESTful API 를 구현해보도록 하겠습니다.

list

  • Pyunghwa Seo

    winodws8.1 환경 cmd에서 node server.js 실행시키면
    body-parser deprecated undefined extended: provide extended option server.js:51 : 20이라는 메시지가 뜨길래
    검색해서
    app.use(bodyParser.urlencoded());
    을 다음처럼 수정하니
    app.use(bodyParser.urlencoded({
    extended: true
    }));
    메시지가 없어졌네요.
    (http://blog.yjhoon.com/104 <– 이 분 블로그 내용 참고했습니다)

  • Pyunghwa Seo

    그리고 소소하지만.. 중간에 “VIEW 에서 데이터 접근 및 루프코드 실행”에서 views 폴더에 만드는건데 view라고 소소한 오타 하나 있네요 ㅎㅎ

  • DongWoo Lee

    ejs, bodyparser, session 설치하고 loop 돌리는데
    Error: Cannot find module ‘ejs’ 에러가 뜨더라구요..
    해결했는데 글로벌로 설치가 되서 ejs가 링크가 안걸렸던것 같습니다. 5장 한번 다녀왔네요
    package.json으로 설치를 하는데도 글로벌로 설치가 되는건가요? package.json 파일이 있는 자리에 설치가 되는줄 알았네요..
    이제 막 시작하다보니 어려움이 많네요 ㅋㅋㅋ

  • GT M

    bodyParser 오류뜨는데 뭐죠?

  • wodimi

    끝에 .ejs를 붙이는걸몰라서 헤맸네요~ 감사~

  • HyunwooKim

    아직 의미를 잘 모르겠지만 찬찬히 따라해보고 있습니다! 감사합니다ㅎㅎ 그런데 제 생각엔 header.ejs 보다는 head.ejs가 더 알맞을 것 같습니다!

  • peter

    강의 코드를 동일하게 사용했는데요. index.ejs가 아닌 index.html을 찾는 이유는 뭘까요? -.-
    Error: Failed to lookup view “index.html” in views directory “/home/ubuntu/workspace/views”

    • peter

      소스 수정 부분이 제대로 반영되지 않았던 것 같습니다. 됩니다.^^