WWW : World Wide Wonsama

설치 및 관련사이트

    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 이라는 가상경로에 매칭