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