공부합시다.: [node 웹페이지 만들기] 2.node+express+ejs -1

nodejs에 대한 설명은 길기도 하고 여러가지가 있지만 위키백과_nodejs 로 대체하겠습니다. 아주 간략히 설명하자면, 자바스크립트로 작성하는 서버사이드 플랫폼입니다.
기본적으로 설치에 대해서는 http://nodejs.org/에서 각자에게 맞는 운영체제에 따라 설치만 해주면됩니다. 이 외의 모든 라이브러리들은 npm을 통하여 설치,사용 할수 있습니다.

npm(Node Packaged Modules)은 Node.js로 만들어진 모듈(라이브러리)을 인터넷을 통하여 쉽게 설치해주는 패키지 모듈입니다.
npm install [모듈] 이라는 명령어로 손쉽게 설치 가능합니다.

Nodejs에는 수많은 모듈들이 있으며 https://www.npmjs.com/ 에서 확인할 수 있습니다.
수많은 모듈중에 Express는 웹 프레임워크로서 가장 사랑받는 모듈이라고 합니다. 그래서 저 또한 Express를 통하여 웹서버를 구축해보려고 합니다.

Express 설치

끝

원하는 디렉터리에서

1	npm install express

명령어 하나면 끝납니다.

Express 예제

https://www.npmjs.com/package/express 에 나와 있는 예제입니다.

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

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

app.listen(3000)

위의 내용을 js파일로 Express 설치한 디렉터리에 만들어 줍니다.(저의경우 sample.js)
'/'의 주소+3000포트로 Hello World로 뿌려주게 됩니다.
그리고 cmd에서 node 명령어를 이용하여 실행시켜줍니다.

1	node sample.js

실행하면 아무런것도 보이지 않는게 정상이고 실행중입니다. Ctrl+C를 눌러 정지시킬수 있습니다.
실행을 확인하기 위해서 127.0.0.1:3000/ 으로 접속하게 되면

의 화면을 볼수 있습니다.
이로서 Expreess의 설치 및 실행을 해 보았습니다.

Express template

위에서 이미 'Hello World'를 띄우는데성공을 하였더라도 위와같은 방법으로 웹을 구축하려면은 엄청난 작업이 될것입니다.
템플릿을 이용하면 손쉽게 html 등을 동적으로 만들어 줄수 있습니다.
html을 손쉽게 만들어주는 템플릿 엔진으로 대표적인 jade와 ejs 두 가지가 있습니다. 저는 ejs를 이용하여 만들어보겠습니다.
express-generator를 설치해 줍니다. -g는 전역모듈로서 사용하겠다는 명령어입니다. 역시 cmd에서 작성합니다.

1	npm install express-generator -g

이번에도 한줄만

C:\Users\[계정명]\AppData\Roaming\npm\node_modules\express-generator 에서 expreess-generator가 설치됬음을 볼 수 있습니다.
expreess-generator를 설치 해 줬으므로 이제 EJS 뼈대를 생성해 줄 차례입니다.

EJS 설치

이제 cmd에서 작업중이던 EJS를 다룰 폴더를 생성하고 뼈대를 생성해 줍니다.

아래 부분에 install dependencdies 라고 출력된 부분을 볼수 있습니다.
의존성 설치를 해야 한다는 것인데 자동으로 생성된 create 두번째 줄의 package.json을 통하여 의존 모듈을 정의하고 있습니다. ejs를 사용하는데 필요한 모듈과 버전을 json표기법으로 명시한것입니다. 이것들을 npm install 이란 명령어를 통하여 자동으로 설치, 관리합니다.
아래는 package.json의 내용입니다.

{
  "name": "EJS",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.9.0",
    "body-parser": "~1.8.1",
    "cookie-parser": "~1.3.3",
    "morgan": "~1.3.0",
    "serve-favicon": "~2.1.3",
    "debug": "~2.0.0",
    "ejs": "~0.8.5"
  }
}

ejs 시작은 node bin/www로 한다는 것을 알수 있고 private를 보아 독립?되어 있다는 것을 알수 있습니다.
dependencies 의 내용을 보아 필요한 모듈과 호환되는 버전을 알 수 있습니다.
위에 설명한거와 같이 npm install로 의존성을 설정합시다.

C:\web\EJS>npm install
ejs@0.8.8 node_modules\ejs

cookie-parser@1.3.3 node_modules\cookie-parser
├── cookie-signature@1.0.5
└── cookie@0.1.2

debug@2.0.0 node_modules\debug
└── ms@0.6.2

morgan@1.3.2 node_modules\morgan
├── basic-auth@1.0.0
├── depd@0.4.5
└── on-finished@2.1.0 (ee-first@1.0.5)

serve-favicon@2.1.7 node_modules\serve-favicon
├── fresh@0.2.4
├── ms@0.6.2
└── etag@1.5.1 (crc@3.2.1)

express@4.9.8 node_modules\express
├── fresh@0.2.4
├── cookie@0.1.2
├── merge-descriptors@0.0.2
├── cookie-signature@1.0.5
├── utils-merge@1.0.0
├── escape-html@1.0.1
├── range-parser@1.0.2
├── vary@1.0.0
├── methods@1.1.0
├── serve-static@1.6.4
├── finalhandler@0.2.0
├── parseurl@1.3.0
├── media-typer@0.3.0
├── path-to-regexp@0.1.3
├── depd@0.4.5
├── on-finished@2.1.1 (ee-first@1.1.0)
├── etag@1.4.0 (crc@3.0.0)
├── qs@2.2.4
├── type-is@1.5.5 (mime-types@2.0.7)
├── send@0.9.3 (ms@0.6.2, destroy@1.0.3, mime@1.2.11, on-finished@2.1.0)
├── proxy-addr@1.0.4 (forwarded@0.1.0, ipaddr.js@0.1.5)
└── accepts@1.1.4 (negotiator@0.4.9, mime-types@2.0.7)

body-parser@1.8.4 node_modules\body-parser
├── media-typer@0.3.0
├── bytes@1.0.0
├── raw-body@1.3.0
├── depd@0.4.5
├── on-finished@2.1.0 (ee-first@1.0.5)
├── qs@2.2.4
├── iconv-lite@0.4.4
└── type-is@1.5.5 (mime-types@2.0.7)

C:\web\EJS>

자동으로 package.json에 명시되어 있던 모든 모듈을 자동으로 설치 하였습니다. 참 편리하네요
이로서 EJS 설치가 완료되었습니다.

EJS 뜯어보기

는 다음에..

공부합시다.

2015년 1월 3일 토요일

[node 웹페이지 만들기] 2.node+express+ejs -1

Express 설치

Express 예제

Express template

EJS 설치

EJS 뜯어보기

댓글 없음:

댓글 쓰기