부트스트랩을 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/#downloadnpm, 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 »</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 »</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 »</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 »</a></p> |
| </div> |
| </div> |
|
|
| <hr> |
|
|
| <footer> |
| <p>© 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/부트스트랩을 다운받아서 사용하지 않고 인터넷에서 받아서 사용했는데
다음 포스팅에서는 다운받아서 사용하는 방법을 소개해보겠습니다.
감사합니다
