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를 아래와 같이 수정해줍니다.

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<%= title %> 부트스트랩 101 템플릿</title>
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<hr>
<footer>
<p>&copy; Company 2014</p>
</footer>
</div>
<!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>



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


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

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

감사합니다