Practical Node.js_Chapter2 Express.js 4를 이용한 Node.js 웹 애플리케이션 생성

https://github.com/azat-co/practicalnode

GitHub - azat-co/practicalnode: Practical Node.js, 1st and 2nd Editions [Apress] 📓

 

 

 

 

 

 

Express.js란?

Express.js는 Node.js 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크다.

컴포넌트들을 미들웨어라고 하며, "규약보다는 설정"이라는 철학을 가진다.

 

 

 

(REST) API 서버 == 엔드 포인트(end point) == 라우터(route)

 

 

 

아무튼 간에, 그냥 생으로 Node.js를 쓰면 직접 구현해야 하는 코드가 많고... 중복도 되기 때문에

이를 프레임워크로 해결한다는 것!...

 

그런 Node.js 프레임워크 중 하나가 Express.js이다.

그외에 다양하게 있다.

책에서는 프레임워크를 잘 고르는 방법도 소개하고 있다...

 

 

 

 

 

 

Express.js 동작 방식

 

Express.js 의 main 파일의 진입점에서는,

1. 컨트롤러, 유틸리티, 헬퍼, 모델 같은 자체 모듈 + 서드파티 의존 모듈 포함

2. 템플릿 엔진과 파일 확장명과 같은  Express.js 애플리케이션 설정

3. DB 연결

4. 에러 핸들러, 정적 파일 폴더, 쿠키 같은 미들웨어 정의 (선택)

5. 라우트 정의

6. 애플리케이션 구동 시작

7. 애플리케이션을 모듈로 내보냄. (선택)

 

 

 

Express.js 애플리케이션이 실행되고 있을 때, 요청을 기다린다.

수신된 각 요청들은 미들웨어와 라우트들이 정의된 순서대로 처리된다.

(파일에서 위쪽에 위치한 라우트나 미들웨어는 아래쪽에 위치한 라우트나 미들웨어보다 우선순위가 높다.)

 

 

 

 

미들웨어는 HTTP 요청을 처리하는데, 중간에 위치하기 때문에 미들웨어...라고 한다.

 

뭘 하냐면...

1. 쿠키 정보를 파싱해서 req 객체에 저장함.

2. URL로부터 파라미터를 파싱해서 req 객체에 저장함.

3. 사용자가 인증되면(쿠키 또는 세션) 파라미터 값을 기반으로 DB의 정보를 가져와서 req 객체에 저장함.

4. 사용자 또는 요청을 인증한다.

5. 데이터를 출력하고 응답을 마친다.

 

 

 

 

 

 

Express.js 설치

설치 과정은 생략...

 

나는 4.18.2 버전인데 책에서는 4.1.2 버전이라고 한다.

 

 

 

 

 

 

 

Express.js의 라우트

app.use('/', routes);
app.use('/users', users);

URL을 처리할 때 대소문자를 구분하지 않으며, 맨 끝에 위치한 슬래시(/)가 존재한다고 여긴다.

 

 

Express.js는 기본적으로 쿼리 문자열을 포함한 라우팅을 개발자들이 허용하지 않는다.

 

하지만 자체 미들웨어를 작성하는 것은 필수라고 한다.

app.use(function(req, res, next){
    if(req.query.id && req.query.ref)
    {
        // id && ref querystring
        next(); 
    }
    else if(req.query.author)
    {
        // author querystring
        next();
    }
    else if(req.query.id)
    {
        // id querystring
        next();
    }
})

 

HTTP 요청의 모든 내용은 req에 있고, 응답 결과를 res에 작성한다.

 

 

 

 

 

 

Express.js의 중추인 미들웨어

var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
//...
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());

 

미들웨어에는 유용한 동작을 하거나 요청이 실행되는 데 도움이 되는 무언가를 추가하는 패스스루(pass-through) 함수가 있다.

 

예를 들면, bodyParser()와 cookieParser()는 각각 HTTP 요청 페이로드(req.body)와 파싱된 쿠키 데이터(req.cookie)를 추가한다.

 

 

 

 

 

 

Express.js 애플리케이션 설정

app.js

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

 

bin/www

app.set('port', process.env.PORT || 3000);

 

 

 

 

 

 

 

블로그 프로젝트 개요

유저 관점

- 글 목록이 있는 홈페이지

- 글 전문이 있는 개별 페이지

- 내용을 싣고 삭제하는 관리자 페이지

- 앞서 언급한 관리자 페이지에 접근 가능한 로그인 페이지

- 새로운 내용을 추가할 수 있는 글 페이지

 

개발자 관점

- 메인 파일 app.js

- 라우트

- Node.js 프로젝트 파일 package.json

- node_modules 내 의존 모듈

- DB

- 템플릿

- 정적 파일

-설정 파일

 

 

 

 

 

 

 

Express.js 4 Hello World 예제

 

폴더 셋업하기

views: Jade(또는 다른 템플릿 엔진) 파일

public: HTML, CSS, 자바스크립트(브라우저), Stylus(또는 그 외 모든 CSS 프레임워크 파일)를 포함한 모든 정적(프론트엔드) 파일

 

 

 

NPM init과 package.json

- Express

- Jade

- Mongoskin

- Stylus

 

 

 

의존 모듈 선언: npm install

 

 

 

App.js 파일

 

메인 Express.js 파일의 전형적인 구조는 다음 부분을 포함한다.

 

1. 의존 모듈 필요

2. 설정

3. 데이터베이스에 연결 (선택)

4. 미들웨어 정의

5. 라우트 정의

6. 서버 시작

7. 클러스터를 이용하여 작업 스레드 시작 (선택)

 

여기서 순서가 매우 중요하다.

요청은 일련의 미들웨어를 따라 위에서부터 순서대로 실행된다.

 

 

 

app.js의 몇 가지 설정

-  port: 요청을 기다릴 서버의 번호

- views: 템플릿이 있는 폴더의 절대 경로

- view engine: 템플릿 파일의 파일 확장자(예. jade, html)

 

 

 

미들웨어의 두 가지 형태

1. 외부(서드파티) 모듈에서 정의

2. 애플리케이션 또는 애플리케이션의 모듈에서 정의 (예. app.use(function(req, res, next)){...};)

 

 

 

라우트

라우트는 정해진 순서대로 처리된다. 보통 라우트는 미들웨어 뒤에서 위치하지만, 일부 미들웨어는 라우터 뒤에 위치하기도 한다. 라우트 뒤에 위치한 미들웨어의 대표적인 예는 에러 핸들러다.

 

 

// 의존 모듈 포함
var express = require('express');

var http = require('http');
var path = require('path');


var app = express(); // express 객체 초기화

// 설정
app.set('appName', 'hello-world');
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// 미들웨어

// 라우터
app.all('*', (req, res) => {
    res.render('index', {msg: 'Welcome to Practical Node.js!'})
})

http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port' + app.get('port'));
})

 

 

 

Jade 소개

1. 첫 번째 단어는 HTML 태그(HTML 요소)로 사용되고,

2. 그 뒤에 따라오는 텍스트(내부 텍스트)는 이 요소 안에 위치한다.

 

views/index.jade

h1 hello
p= msg

 

 

 

Hello World App 실행하기