4.06 [Express ]

오배이안 🪙

---

Node.js ?

Node.js 란 자바스크립트가 브라우저에서 작동되는게 아닌 서버에서 작동되도록 해주는 런타임 환경을 말한다.
이것이 가능한 이유는 Chrome(크롬) 의 V8 엔진을 이용하기 때문이다!

Express?

Express 란 Node.js 환경에서 서버를 제작을 보다 쉽게 하기 위한 프레임워크라고 생각하면 된다!
기존의 HTTP 내장 모듈로 만든 서버보다 서버를 만들기 편리하고 간편한 기능들이 내장되어 있어 가장 많은 곳에서 보편적으로 사용하는 프레임워크이다. (물론 Express 말고도 여러 서버를 구축하는 프레임워크가 있다.)

---

Express 설치

사전에 Node.js 가 설치 되어 있어야 합니당 😄

서버를 보관할 디렉토리를 작성!

$ mkdir myapp
$ cd myapp

npm init 명령을 이용하여 애플리케이션에 대한 package.json 파일을 작성!
추가로 js 파일도 생성하기!

$ npm init

이후 Express 설치

$ npm install express  --save 

만약 임시로 설치할려면 --save 를 빼주면 된다!

설치가 다끝나면 package.json 에 express 가 보일 것!

---

Http 내장모듈로 웹 서버 띄워보기 VS Express로 웹 서버 띄워보기

• Http 내장모듈로 웹 서버 만들기

터미널에 node 파일명 을 입력해보면 서버주소가 뜬다.
브라우저에 입력해보자! 'hello http server!' 가 보일 것!

const http = require('http');

http.createServer((request,response)=>{
    response.writeHead(200, {'Content-Type' : 'text/html'})
    response.write('hello http server!')
    response.end()
}).listen(3000, ()=>{
    console.log("http server runing http://127.0.0.1:3000/")
})

• Express로 웹 서버 만들기

Http 내장 모듈로 서버를 구축하는 것 보다 훨씬 코드가 줄었다!

const express = require('express')
const app =express();
const port =3000;

app.get('/',(request,response)=>{
        response.send('hellow Express server!')
})

app.listen(port,()=>{
    console.log("Express server runing http://127.0.0.1:3000/")
})

---

Express 라우팅

공식 문서의 라우팅 정의
라우팅이란 URI 및 특정한 HTTP 요청 메소드인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다.

요야쿠 쿠다사이

라우팅이란 클라이언트의 특정 요청 메소드와 엔드포인트에 따라 다른 응답 처리 하는 것을 말한다.
즉, 분기점을 만드는 것이 라우팅팅탱탱

이건 봐야해

클라이언트는 특정한 HTTP 요청 메서드(GET, POST 등)와 함께 서버의 특정 URI(또는 경로)로 HTTP 요청을 보냅니다. 라우팅은 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것입니다.

• Http 내장모듈로 라우팅을 구현해보입시더

'/lower'엔드포인트로 분기점을 잡고 그 안에서도 http요청 메서드에 따라 다른 응답을 내보내도록 라우팅 구현

const requestHandler = (req, res) => {
    if(req.url === '/lower') {
      if (req.method === 'GET') {
        res.end(data)
      } else if (req.method === 'POST') {
        req.on('data', (req, res) => {
          // do something ...
        })}}}

• Express 에서 라우팅 해보입시더
  이미 위에서 작성한 Express 로 웹 서버 만들기에 작성한 app.get 이 부분은 라우터!

http 메소드 안에 인자로 엔드포인트를 넣어주고 이 경우 어떤 응답을 내보낼건지 함수로 구현

const router= express.Router()

router.get('/lower',(request,response)=>{
response.send(data);
})

router.post('/lower',(request,response)=>{
    ///
})

---

이건 뭐져 ?

const router= express.Router()

express.Router()

위에서도 말했지만 Express 를 사용하는 이유 중 하나가 라우팅을 깔끔하게 관리 할 수 있다는 점이다.!

웹이 커지면 서버에는 app.get 과 같은 메서드가 열라 많이 생겨 코드가 매우 길어진다.

그래서 Express 에서는 라우터를 분리할 수 있는 방법을 제공함!

그것이 바로 express.Router( ) 를 이용하는 것!

• 가정

메인파일 : app.js
라우터를 저장할 파일 : index.js , user.js

index.js , user.js 파일들을 routes 폴더에 저장 시킨다고 가졍

// routes/index.js 파일
const express = require('express');

const router= express.Router()

router.get('/',(request,response)=>{
response.send('hello');
})

module.exports = router;

// routes/user.js 파일 -----------------------

const express = require('express');

const router = express.Router();

router.get('/iam', (req, res) => {
    res.send('Hello, User');
});

module.exports = router;

app.js 파일

const express = require('express');

const app = express();

const indexRouter = require('./routes'); // router.get('/', (req, res) => { ... 을 불러옴
const userRouter = require('./routes/user'); // router.get('/iam', (req, res) => { ... 을 불러옴

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

app.use('/', indexRouter); // 각기 다른 경로에 미들웨어 장착
app.use('/user', userRouter); // 각기 다른 경로에 미들웨어 장착

app.use((req, res, next) => { // 기본경로나 /user말고 다른곳 진입했을경우 실행
    res.status(404).send('Not Found');
});

app.listen(app.get('port'), () => {
   console.log(app.get('port'), '번 포트에서 대기 중');
});

index.js , user.js 가 생긴건 비슷해도 서로 다른 주소의 라우터 역할을 하고 있다.

app.use로 연결할 때의 차이 때문!

indexRouter는 app.use('/')에 연결했고 (index)

userRouter는 app.use('/user')에 연결했다.(user)

서버로 실행한 뒤 localhost:3000/과 localhost:3000/user/iam로 접속하면 각각에 해당하는 응답을 받을 수 있다.

---

next( ) ?

Express.Router( ) 에는 next 함수가 존재한다. next 함수는 다음 라우터로 넘어가는 기능을 구현할 수 있다.

next('route')

const express = require('express');

const router = express.Router();

router.get('/', (req, res, next) => {
    next('route'); // 다음 라우터 미들웨어로 점프한다.
}, (req, res, next) => {
    console.log('실행되지 않습니다.');
    next();
});

router.get('/', (req, res) => {
    console.log('실행됩니다.');
    res.send('Hello, Express.');
});

next('route') 함수 사용으로 해당 get 메소드의 세번째 함수가 실행되지 않고 다음 get 메소드의 라우터가 실행된다!

---

라우터 그룹화?

엔드포인트는 같은데 Http 메소드만 다른 경우?
그럴 땐 이를 하나의 그룹으로 묶어 줄 수 있다!

const express = require('express');
  
const router = express.Router();

router.get('/abc', (req, res) => {  
    res.send('GET /abc');
});
router.post('/abc', (req, res) => {
    res.send('POST /abc');
});

같은 엔드포인트인 /abc 로 get 요청과 post 요청을 보내고 있다.
이런경우에 router.route 또는 app.route 로 묶을 수 있다.

const express = require('express');
  
const router = express.Router();
  
router.route('/abc')
    .get((req,res) => {
        res.send('GET /abc');
    })
    .post((req, res) => {
        res.send('POST /abc');
    });

---

query parameter & path variable

헷갈리면서도 아닌 두녀석

• query parameter

경로 뒤에 입력 데이터를 함께 제공하는 식으로 사용한다.

/user?id=10

위의 코드에서 물음표( ? ) 뒤에 나오는 id=10 이 부분을 query string 이라고 하며
key 와 value 의 쌍으로 이루어져있다. & 엔드 표시를 사용해 데이터를 추가로 붙일 수도 있다.

- `path variable`

경로를 변수로 사용하는 것

/user/{:id}

{:id} 이 부분이 path 부분이고 해당 id 값이나 필요한 값이 들어간다.

---

Middleware 란?

미들웨어는 Express 를 사용하는 이유 중 하나이다! 가장 큰 이유라고 해도 무방하다.
미들웨어는 HTTP 요청과 응답 사이에서 단계별 동작을 수행하는 함수이다.

미들웨어 동작원리

미들웨어는 HTTP Request(요청)이 들어온 순간부터 순차적으로 시작된다.
HTTP 요청과 응답 객체를 처리하거나, 다음 미들웨어를 실행할 수 있다.
HTTP 응답이 마무리될 때까지 미들웨어 동작 사이클이 실행된다. 위의 사진 처럼!

---

그래서 express 에서 뭐가 미들웨어인건데?

그렇다 미들웨어는 우리가 라우터를 작성할때 엔드포인트 다음 인자로 받는 함수를 미들웨어라고 한다!

정확히 말하자면 인자로 req,res,next 를 갖는 함수는 미들웨어로 동작 할 수 있다.

next() 함수가 호출되지 않으면 미들웨어 사이클이 멈추기 때문에 주의해야 된다.

app.use( ) 와 app.Http메서드

app.use() 는 모든 요청에 대해 미들웨어를 실행시키고 싶을 때 사용한다.
app.http메서드 는 해당 메서드 요청에 대해 미들웨어를 실행시킬 때 사용한다.

---

공식 문서
라우팅 참고
참고 블로그
미들웨어 참고