12. express

express

• express도 크게 보면 모듈(기능 단위가 커서 프레임워크라고 부르는 것)

• 서버를 개발하기 위한 종합선물세트

• middleware의 연결로 이뤄짐(내부 미들웨어, 외부 미들웨어(써드파티 미들웨어라고도 부릅니다. npm 설치해서 연결해요.), 사용자 정의 미들웨어)

• 모듈도 내부, 외부, 사용자 정의가 있는데 여기서 확실하게 구분해 주세요.

• request -> middleware <-> middleware <-> middleware <-> middleware -> response

• 모든 미들웨어를 다 거치는 것이 아니라 중간에서 응답이 보내지면 그 이후 미들웨어는 작동하지 않음

• 보통 앞에 json이나 headers, security 관련된 세팅을 해놓고, 중간에 미들웨어의 연속, 뒷부분에는 error처리

• (중요) request → middleware(세팅) <-> middleware(/, get) <-> middleware(/blog, get) <-> middleware(/blog/:id, get) <-> middleware(error)

* response는 중간에 미들웨어에서 처리
request → 
middleware(세팅) <-> 
middleware(/, get) <-> 
middleware(/blog, get) <-> 
middleware(/blog/:id, get) <-> 
middleware(error)

- 어디 미들웨어에서 처리할까요? -
www.licat.com/
www.licat.com/blog
www.licat.com/blog/12
www.licat.com/blog/hello

• 미들웨어끼리 다음으로 넘어가기 위해 next를 호출해야 함! 필수!

(req, res, next) => {}

• 미들웨어 양식

app.get('/', (req, res, next) => {
    console.log('get으로 요청이 들어왔습니다!');
    res.send('hello world!!');
});

// 여기서 (req, res, next) => {}가 미들웨어! 자주사용하니 code 스니펫 등록해주세요!*

• 스니펫 등록(톱니바퀴 → 사용자코드조각 → javascript.json에 모두 지우고 아래 내용을 입력하시면 됩니다.)

{
	"node express callback":{
		"prefix" : "r",
		"body": [
			"(req, res, next) => {$1}"
		],
		"description": "노드 익스프레스 콜백함수입니다."
	}
}

 

// 파일이름 : 008_express\app1.js

// npm init --yes
// npm install express 또는 npm i express
// npm i nodemon --save-dev 또는 npm install -D nodemon
// -> nodemon app1 으로 실행 가능
const express = require('express');
// https://expressjs.com/ko/

const app = express();
// app.METHOD(PATH, HANDLER(req, res, next)) 구조를 가지고 있음
//  - HANDLER를 미들웨어라고 함(기존에 작성되어 있는 미들웨어도 있음)
//  - express는 미들웨어의 연결입니다!
//  - req(get: '/') -> app.use(미들웨어) -> app.use(미들웨어) ... -> app.get('/') -> app.post('/writenotice') -> ...
//  - 위 구조라고 한다면  app.get('/')까지만 실행되고 사용자에게 응답하는 방식
// app.get, app.post, app.put, app.delete
// app.all : 위 모든 것을 처리
// app.use(미들웨어) : 모든 곳에서 미들웨어 사용하겠다!
//  - app.use('/hello', 미들웨어) : '/hello'에서만 미들웨어 사용하겠다!
//  - app.get('/hello', 미들웨어) : '/hello'에서 get 요청일때만 미들웨어 사용하겠다!
// app.set을 통해 데이터 저장 가능
// app.route(체인 가능한 라우트 핸들러 작성 가능, 여러 메서드 연결 가능하다는 얘기)
// express.Router : Router 클래스를 사용하면 모듈식 마운팅이 가능, Router 인스턴스는 완전한 미들웨어, 하나로서 라우팅 시스템, 미니 앱이라 불림 -> 그림으로 표현해드림, 실습은 009에서
app.get('/', (req, res, next) => {
    console.log('get으로 요청이 들어왔습니다!');
    res.send('hello world!!');
    // 다음 메소드 중 하나라도 호출되지 않는다면 브라우저가 계속 뺑글뺑글 돕니다.(공식문서 표현 : 요청이 정지된 상태로 방치된다고 하죠.) 2개를 사용하셔도 애러가 납니다.
    // res.download()	파일이 다운로드되도록 프롬프트합니다.
    // res.end()	응답 프로세스를 종료합니다.
    // res.json()	JSON 응답을 전송합니다.
    // res.jsonp()	JSONP 지원을 통해 JSON 응답을 전송합니다.
    // res.redirect()	요청의 경로를 재지정합니다.
    // res.render()	보기 템플리트를 렌더링합니다.
    // res.send()	다양한 유형의 응답을 전송합니다.
    // res.sendFile()	파일을 옥텟 스트림의 형태로 전송합니다.
    // res.sendStatus()	응답 상태 코드를 설정한 후 해당 코드를 문자열로 표현한 내용을 응답 본문으로서 전송합니다.
});
app.listen(8080);

// 파일이름 : 008_express\app2.js

const express = require('express');

const app = express();

app.get('/', (req, res, next) => {
    console.log('get으로 요청이 들어왔습니다!');
    console.log(`req.baseUrl : ${req.baseUrl}`);
    console.log(`req.body : ${req.body}`);
    console.log(`req.cookies : ${req.cookies }`);
    console.log(`req.ip : ${req.ip}`);
    console.log(`req.method : ${req.method}`);
    console.log(`req.params : ${req.params}`);
    console.log(`req.path : ${req.path}`);
    console.log(`req.query : ${req.query}`);
    console.log(req.params); 
    // http://localhost:8080/1234/?id=hojun&pw=1234
    // 와 같은 형식으로 들어오면 params는 1234 뒤 파일에서 테스트
    console.table(req.query);
    console.log(req.headers);
    res.send('hello world!!');
});
app.listen(8080);

// 파일이름 : 008_express\app3.js

const express = require('express');

const app = express();

//와일드카드
app.get('/:blog/:id', (req, res, next) => {
    console.log('get으로 요청이 들어왔습니다!');
    console.log(req.params);
    // http://localhost:8080/여행/123
    console.log(req.params.blog);
    console.log(req.params.id);
    res.send('hello world!!');
});
app.listen(8080);

// 파일이름 : 008_express\app4.js

//http://expressjs.com/ko/4x/api.html#res
const express = require('express');

const app = express();

app.get('/', (req, res, next) => {
    console.log('get으로 요청이 들어왔습니다!');
    // res.render() -> 다음 강의에서 설명
    // res.send('hello world!!');
    // res.sendStatus(200);
    // res.status(200).send('요청 성공');
    // res.json({"이름":"호준", "나이":10});
});
app.listen(8080);

// 파일이름 : 008_express\app5.js

//http://expressjs.com/ko/4x/api.html#res
const express = require('express');

const app = express();
app.use(express.json());
// https://www.postman.com/
// 노션 교안을 참고해주세요.

app.get('/', (req, res, next) => {
    console.log('get으로 요청이 들어왔습니다!');
    console.log(req.body);
    res.send('get!!');
});

app.post('/', (req, res, next) => {
    console.log('post으로 요청이 들어왔습니다!');
    console.log(req.body);
    res.send('post!!');
});

app.listen(8080);

구조

const express = require('express');

const app = express();

app.get('/', (req, res, next) => {
    console.log('get으로 /페이지에 요청이 들어왔습니다.');
    res.send('<h1>hello world</h1><p>hello</p>');
});

app.get('/blog', (req, res, next) => {
    console.log('get으로 /blog페이지에 요청이 들어왔습니다.');
    res.send('<h1>hello blog</h1><p>hello</p>');
});

app.get('/about', (req, res, next) => {
    console.log('get으로 /about페이지에 요청이 들어왔습니다.');
    res.send('<h1>hello about</h1><p>hello</p>');
});

app.get('/product', (req, res, next) => {
    console.log('get으로 /product페이지에 요청이 들어왔습니다.');
    res.send('<h1>hello product</h1><p>hello</p>');
});

app.listen(8080);