설치 및 관련사이트
NodeJS
https://nodejs.org/en/
nodejs : v7.7.4, npm : v4.1.2
ExpressJS
https://expressjs.com/
v4.15.2
시작하기
링크
https://expressjs.com/en/starter/installing.html
작업
mkdir jwview
cd jwview
npm init
enter 눌러가면서 기본값으로 생성 package.json 생성
npm install express --save
express 설치 및 관련 의존성 정보를 package.json에 추가(--save 옵션)
HelloWorld
작업
npm init 할때 생성한 main에 일치하는 파일 생성
index.js 에 아래 소스를 입력
소스
var express = require('express')
var app = express()
app.get('/', function (req, res) {
res.send('Hello World!')
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
실행
node index.js
확인
http://localhost:3000
위 링크로 들어가면 Hello World! 라는 문구를 볼 수 있다.
Express Generator ( 익스프레스 생성기 )
설치
npm install express-generator -g
명령어 목록
express -h
-h, --help 도움말을 보여준다
--version 버전 정보를 보여준다
-e, --ejs ejs 뷰엔진 지원 추가
--hbs handlebars 뷰엔진 지원 추가
--pug pug 뷰엔진 지원 추가
-H, --hogan hogan.js 엔진 지원 추가
-v, --view <engine> 뷰엔진 지원을 추가한다(ejs|hbs|hjs|jade|pug|twig|vash) (기본은 jade)
-c, --css <engine> 스타일시트 지원을 추가한다 (less|stylus|compass|sass) (기본은 css )
--git .gitignore 에 추가
-f, --force 강제로 폴더 생성
예시
myapp 이라는 이름으로 웹 어플리케이션을 만드려면
express --view=pug myapp
실행
cd myapp
debug=myapp:* npm start
(myapp을 debugging 할것이며, 대상은 *전체, start 스크립트 수행=> package.json에 정의됨)
폴더구조
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
기본 라우팅
http 요청(get, post 등 및 주소 uri)에 따른 처리
app.get('/', function (req, res) {
res.send('Hello World!')
})
app.post('/', function (req, res) {
res.send('Got a POST request')
})
get 요청은 주소창을 통해 확인 가능하지만 post 같은 경우는 postman 같은 크롬 확장으로 확인 가능
고정(static) 자원 사용하기
app.use(express.static('public'))
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
이후 public 폴더 아래에 존재하는 파일을 위와 같이 사용 가능
app.use(express.static('public'))
app.use(express.static('files'))
위와 같이 하면 1개 이상의 폴더를 지정할 수 있다.
app.use('/static', express.static('public'))
위와 같이 하면 가상경로를 포함하여 지정할 수 있으며 아래와 같이 사용 가능하다.
http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
하지만 폴더가 기본적으로 상대적 경로에 존재하므로 아래와 같은 방식으로 보통 사용한다
app.use('/static', express.static(path.join(__dirname, 'public')))
__dirname (현재 경로)에 public 이라는 폴더 경로를 합쳐서 해당 경로를 static 이라는 가상경로에 매칭
