1. https://nodejs.org 에서 설치 프로그램 다운로드해서 설치하기
2. cmd창에서 node --version 으로 잘 설치되었는지 확인
3. express : npm install express
express generator : npm install express-generator
- express 모듈을 통해 웹의 기본 골격 생성
Bower : npm install -g bower
- 클라이언트 패키지 관리도구(bootstrap, jqurey...)
Gulp : npm install -g gulp
- 빌드 자동화 도구(메크로 모듈)
Nodemon : npm install -g nodemon
- 서버 자동 재시작
4. cmd창에 express 프로젝트이름 --git (--git : .gitignore파일 자동 생성)
: 프로젝트이름으로 웹서버 골격을 생성한다.
- 주요 생성 파일
* app.js : 앱 설정 및 기본 route 파일
* routes : route파일을 저장하는 디렉토리
* public : 고정적으로 서비스할 파일을 저장하는 디렉토리
* views : 화면에 보여줄 파일을 저장하는 디렉토리
* bin/www : 앱을 실행할 서버 관리 파일
* package.json : npm에 의하여 관리되는 설정파일(모듈들을 다룸)
4-1. 만약 git을 사용하는 경우
ex) 1) express blogger --git
2) cd test
3) git init
4) git add -A (전체 등록)
5) git commit -m "first commit"
6) git remote add origin https://github.com/jowoojun/blogger(본인의git주소)
7) git push -u origin master
5. 기본 모듈 설치
1) npm install : express generator(package.json에 적혀져 있는)가 만들어둔 패키지 셋팅
2) npm install --save-dev gulp : gulp로컬 인스톨
3) npm install --save-dev gulp-jshint gulp-sass gulp-nodemon gulp-concat : gulp 관련 패키지 인스톨
4) npm install --save express-session method-override moment connect-flash : session이 사용하는 모듈 인스톨
 |
| 기본 모듈 설치 전(package.json) |
 |
| 기본 모듈 설치 후(package.json) |
6. 클라이언트용 패키지 설치
1) bower init : bower.json파일을 생성(생성할 때 나오는 질문은 전부 enter눌러주면 됨)
2) bower install --save bootstrap jquery fontawesome bourbon : bower_components폴더를 생성
 |
| bower.json |
 |
| bower_components폴더 구성 |
7. gulpfile.js작성
: gulp명령을 통해 해당 작업을 수행할 수 있도록 gulpfile.js를 작성한다.
gulpfile.js 파일을 만든 후 아래의 내용을 붙여넣기 해준다.
gulpfile.js 파일을 만든 후 아래의 내용을 붙여넣기 해준다.
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var nodemon = require('gulp-nodemon');
var concat = require('gulp-concat');
// Lint Task
gulp.task('lint', function() {
return gulp.src(['app.js', 'routes/**/*.js', 'models/**/*.js', 'config/**/*.js', 'public/javascripts/**/*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src(['scss/*.scss'])
.pipe(sass())
.pipe(concat('style.css'))
.pipe(gulp.dest('public/stylesheets'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('scss/**/*.scss', ['sass']);
});
gulp.task('nodemon', function (cb) {
var started = false;
return nodemon({
script: 'bin/www'
}).on('start', function () {
// to avoid nodemon being started multiple times
// thanks @matthisk
if (!started) {
cb();
started = true;
}
});
});
// Default Task
gulp.task('default', ['lint', 'sass', 'watch', 'nodemon']);
 |
| 기본 웹페이지 골격 완성시의 디렉토리 |
여기까지 기본적인 nodejs로 웹페이지 골격 만들기 끝
모든 과정이 정상적으로 이뤄지면 cmd창에서 gulp를 입력한 뒤 웹페이지 주소창에 localhost:3000을 입력하면 다음과 같은 글자가 나오는 것을 확인할 수 있다.
