Node.js + Express.js + Bootstrap(부트스트랩) 시작하기

부트스트랩을 Node.js 서버랑 사용해보기!
튜토리얼 시작해보겠습니다.

우선 이 튜토리얼은 Node.js가 설치되어있다는 가정하에 시작하겠습니다.

그리고 Express를 사용하기 위해서 설치해야 하는 것,
express-generator입니다. (꼭 설치해야한다는 것 보다, 프로젝트 만들기 편합니다.)

express-generator 설치해줍니다.
$npm install express-generator -g

다 설치가 되었다면,
express 명령어로 프로젝트를 생성해줍니다.
$express -e myproject

여기서, express -h로 express 명령어의 help를 보겠습니다.


Usage: express [options] [dir]

Options:
    -h, --help          output usage information
    -V, --version       output the version number
    -e, --ejs           add ejs engine support (defaults to jade)
        --hbs           add handlebars engine support
    -H, --hogan         add hogan.js engine support
    -c, --css  add stylesheet support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

-e 의 의미는 ejs 엔진을 사용하겠다는 옵션입니다.
ejs는 Embeddedjs로 http://www.embeddedjs.com/
위의 링크에서 자세한 내용을 보실수 있을겁니다.

자, 다시 프로젝트를 만든 시점에서
아래와 같은 출력을 볼 수 있을겁니다.

   create : myproject
   create : myproject/package.json
   create : myproject/app.js
   create : myproject/public/javascripts
   create : myproject/routes
   create : myproject/routes/index.js
   create : myproject/routes/users.js
   create : myproject/public
   create : myproject/public/images
   create : myproject/views
   create : myproject/views/index.ejs
   create : myproject/views/error.ejs
   create : myproject/public/stylesheets
   create : myproject/public/stylesheets/style.css
   create : myproject/bin
   create : myproject/bin/www

   install dependencies:
     > cd myproject && npm install

   run the app:
     > SET DEBUG=myproject:* & npm start

위에 나온 install dependencies를 따라해봅시다.

$cd myproject && npm install

출력>
+-- body-parser@1.13.3
| +-- bytes@2.1.0
| +-- content-type@1.0.1
| +-- depd@1.0.1
| +-- http-errors@1.3.1
| | +-- inherits@2.0.1
...

다 설치됬습니다.
실행해볼까요?

$npm start

결과 페이지는 다음과 같습니다.

텅 비어있는 기본페이지 입니다.
저희는 여기에 부트스트랩을 끼얹어볼거에요.

부트스트랩 받아봅니다.
http://bootstrapk.com/getting-started/#download

npm, bower 사용해서 다운받을 수 있지만 저희는
CDN(Content Delivery Network)에 있는 부트스트랩을 사용해보겠습니다.

myproject/views/index.ejs를 아래와 같이 수정해줍니다.




수정된 화면은 아래와 같습니다.

부트스트랩 기본 예제에서 가져온 코드입니다.
http://bootstrapk.com/examples/jumbotron/

부트스트랩을 다운받아서 사용하지 않고 인터넷에서 받아서 사용했는데
다음 포스팅에서는 다운받아서 사용하는 방법을 소개해보겠습니다.

감사합니다