Express.js 튜토리얼 (GET, POST, PUT, DELETE)

Express?

웹 어플리케이션을 만드는 빠르고 가벼운 프레임워크

Client  : Front-end part

Server : Back-end part (데이터를 가져오거나 저장)

RESTful Services

REST: Representational State Transfer

---

CRUD Operations

HTTP Methods

• GET: getting data
• POST: creating data
• PUT: updating data
• DELETE: deleting data

API example

GET /api/customers
GET /api/customers/1
PUT /api/customers/1
DELETE /api/customers/1
POST /api/customers

• RESTful convention(협약) (customer -> 간단하고 의미있는 주소 사용)
• Create, update 하는데 표준 http 메소드를 사용함

---

Introducing Express

• 저번강의 코드(Before)

// app.js
const http = require('http');

const server = http.createServer(function(req, res){
    if(req.url === '/'){
        res.write('Hello World');
        res.end();
    }
    
    if(req.url === '/api/courses'){
        res.write(JSON.stringify([1,2,3]));  // convert this array->JSON syntex
        res.end();
    }
    
}); //create web server

server.listen(3000);

console.log('Listening on port 3000...');

하지만, 이렇게하면 여러 개의 라우터를 가졌을 때 if문이 많아지면서 코드가 복잡해짐
-> express를 사용하여 깔끔한 구조로 만들 수 있다.

---

Your First Web Server

Handling GET Requests

• 소스코드

// index.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World');
}) //arg: url(path), callback

app.get('/api/courses', (req, res)=>{
    res.send([1, 2, 3]);
});

app.listen(3000, () => console.log('Listening on port 3000'));

* express documentation (http://expressjs.com/en/4x/api.html#req)

• 실행결과

cmd

크롬에서 실행1

크롬에서 실행2

---

+ Tip

Nodemon

• 지금까지는 코드를 변경할때마다 서버를 종료(ctrl+c) 시켰다가 다시 실행했다.
• nodemon을 설치하면 서버를 껐다 켜지 않아도 저절로 변동된 파일이 적용된다.

설치

npm i -g nodemon

global로 nodemon설치

실행

nodemon index.js

 node로 실행하는 대신에 nodemon으로 실행

---

Environment Variables

• Before코드에서 개선할 점: 포트 넘버가 하드코딩 되어 있다.
• 포트넘버는 호스팅 환경에 따라 동적으로 할당되기 때문이다
• Environment Variables을 이용하여 이를 개선
• Port: 돌고 있는 프로세스의 환경

[코드]

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}`));

[실행결과]

environment port가 없으므로 포트가 디폴트로 설정된 3000번이다

그럼, environment port를 설정한 후 실행해 보자

mac인경우 export로, window인 경우 set으로 port 번호를 설정한다

---

Route Parameters

[코드]

app.get('/api/courses/:id', (req, res) => {
    res.send(req.params.id);
})

여기에서 :id는 parameter이다.

[실행결과]

:id에 해당하는 부분에 1이라는 값을 주었으므로 1을 출력한다.

• 두개의 파라미터도 가능하다.

[코드]

app.get('/api/posts/:year/:month', (req, res) => {
    res.send(req.params);
})

파라미터 year와 month

[실행결과]

Query string parameter

• 백앤드 서비스에 추가적인 데이터를 제공한다 (optional)
• 라우터 파라미터로는 기본적이고 필요한 값을 제공

URL: http://localhost:3000/api/post/2020/3?sortBy=name

[코드]

app.get('/api/posts/:year/:month', (req, res) => {
    res.send(req.query);
})

[실행결과]

---

GET url 추가 및 예외처리(404)

 [코드] : GET /api/courses/:id

// index.js
const express = require('express');
const app = express();

const courses = [
    { id: 1, name: 'course1'},
    { id: 2, name: 'course2'},
    { id: 3, name: 'course3'},
];

app.get('/', (req, res) => {
    res.send('Hello World');
})

app.get('/api/courses', (req, res)=>{
    res.send(courses);
});

app.get('/api/courses/:id', (req, res) => {
    const course = courses.find(c => c.id === parseInt(req.params.id))  
    if(!course) res.status(404).send('The course with the given ID was not found');
    res.send(course);
});

• find(): javascript에서 어떤 배열에서든 쓸 수 있는 함수
• object not found -> 404로 처리
• req.params.id: string을 리턴한다. -> parseInt(자바스크립트 함수) 사용

[실행결과]

• Course가 목록에 없으면 404오류, 목록에 있으면 강좌 정보 출력

없으면 404

있으면 강좌 정보 출력

---

Handling POST Requests

[코드]

// index.js
const express = require('express');
const app = express();

app.use(express.json());    //json parsing 하기 위해 사용

const courses = [
    { id: 1, name: 'course1'},
    { id: 2, name: 'course2'},
    { id: 3, name: 'course3'},
];

app.post('/api/courses/', (req, res) => {
    const course = {
        id: courses.length + 1,
        name: req.body.name
    };
    courses.push(course);
    res.send(course);
});
// 나중에는 id는 데이터베이스에 의해 자동으로 할당될 것임

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}`));

body에 데이터를 보내야한다

어떻게 테스트?

-> Postman 설치 https://www.postman.com/downloads/

Postman | The Collaboration Platform for API Development

[결과]

 json형식의 raw 데이터를 body로 넘겨준다

---

Input Validation

• 보안을 위해서는 절대 client가 보내는 데이터를 믿어서는 안된다.
• 따라서 예를들어 이와 같이 (1) 이름은 있어야하고, (2) 길이는 반드시 3이상이여야 한다. 라는 조건을 걸어 유효성을 검사한다.

app.post('/api/courses/', (req, res) => {
    if(!req.body.name || req.body.name.length < 3){
        // 400 Bad Request
        res.status(400).send('Name is required and should be minimum 3 characters.');
        return;
    }

    const course = {
        id: courses.length + 1,
        name: req.body.name
    };
    courses.push(course);
    res.send(course);
});

하지만 실제로는 input도 더 많을 것이고 더 복잡한 validation logic이 필요하다.

---

Joi 설치

• Joi는 이런 validation 검사를 간편하게 할수있도록 제공되는 라이브러리다.
• 설치(Termianl에서) : npm i joi
• 원하는 버전 설치 : npm i joi@13.1.0

[Joi를 이용한 input validation]

//맨윗줄에
const Joi = require('joi'); // 클래스를 반환하므로 변수를 대문자로 함

///////////////////////

app.post('/api/courses/', (req, res) => {
    const schema = {
        name: Joi.string().min(3).required()
    };

    const result = Joi.validate(req.body, schema);
    console.log(result);

    if(!req.body.name || req.body.name.length < 3){
        // 400 Bad Request
        res.status(400).send('Name is required and should be minimum 3 characters.');
        return;
    }

    const course = {
        id: courses.length + 1,
        name: req.body.name
    };
    courses.push(course);
    res.send(course);
});

 

[결과]

조건에 맞는 이름일 경우 (error: null)

이름을 제공하지 않으면 error: name is required라고 뜸

---

이렇게 코드를 바꿀 수 있다.

const schema = {
        name: Joi.string().min(3).required()
    };

    const result = Joi.validate(req.body, schema);
    if(result.error){
        res.status(400).send(result.error);
        return;
    }

 

[포스트맨 결과]

에러메세지만 출력하도록 코드 변경

if(result.error){
        res.status(400).send(result.error.details[0].message);
        return;
    }

 

[결과]

이름이 없는 경우

이름이 3글자 이하인 경우

• Joi는 input을 validate하고 클라이언트에 적절한 에러메세지를 return하는 것을 매우 쉽게할 수 있게 해줌

---

Handling PUT Requests

[PUT Logic]

app.put('/api/courses/:id', (req, res) => {
    // Look up the course
    // If not existing, return 404

    // Validate
    // If invalid, return 400 - Bad request

    // Update course
    // Return the updated course
});

 

[소스코드]

// PUT

app.put('/api/courses/:id', (req, res) => {
    const course = courses.find(c => c.id === parseInt(req.params.id))  
    if(!course) res.status(404).send('The course with the given ID was not found');

    const { error } = validateCourse(req.body); //result.error
    if(error){
        res.status(400).send(error.details[0].message);
        return;
    }

    course.name = req.body.name;
    res.send(course);
});

function validateCourse(course){
    const schema = {
        name: Joi.string().min(3).required()
    };
    
    return Joi.validate(course, schema);
}

 validate 부분을 재사용 가능하도록 validateCourse함수로 만듦

[결과]

name이 course1에서 new course로 변경됨(upate기능)

---

Handling DELTE Requests

[DELETE Logic]

// DELETE

app.delete('/api/courses/:is', (req, res) => {
    // Look up the course
    // Not existing, return 404

    // Delete

    // Return the same course
});

 

[코드]

// DELETE

app.delete('/api/courses/:id', (req, res) => {
    const course = courses.find(c => c.id === parseInt(req.params.id))  
    if(!course) return res.status(404).send('The course with the given ID was not found');

    const index = courses.indexOf(course);
    courses.splice(index, 1);

    res.send(course);
});

 

[결과]

get으로 모두 확인해보면 3번이 없어짐

---

Fixing a Bug 및 최종 코드

// index.js
const Joi = require('joi'); // 클래스를 반환하므로 변수를 대문자로 함
const express = require('express');
const app = express();

app.use(express.json());    //json parsing 하기 위해 사용?

const courses = [
    { id: 1, name: 'course1'},
    { id: 2, name: 'course2'},
    { id: 3, name: 'course3'},
];

// GET

app.get('/', (req, res) => {
    res.send('Hello World');
})

app.get('/api/courses', (req, res)=>{
    res.send(courses);
});

app.get('/api/courses/:id', (req, res) => {
    const course = courses.find(c => c.id === parseInt(req.params.id))  
    if(!course) return res.status(404).send('The course with the given ID was not found');
    res.send(course);
});

// POST

app.post('/api/courses/', (req, res) => {
    const { error } = validateCourse(req.body); //result.error
    if(error) return res.status(400).send(error.details[0].message);

    const course = {
        id: courses.length + 1,
        name: req.body.name
    };
    courses.push(course);
    res.send(course);
});

// PUT

app.put('/api/courses/:id', (req, res) => {
    const course = courses.find(c => c.id === parseInt(req.params.id))  
    if(!course) return res.status(404).send('The course with the given ID was not found');

    const { error } = validateCourse(req.body); //result.error
    if(error) return res.status(400).send(error.details[0].message);

    course.name = req.body.name;
    res.send(course);
});

function validateCourse(course){
    const schema = {
        name: Joi.string().min(3).required()
    };
    
    return Joi.validate(course, schema);
}

// DELETE

app.delete('/api/courses/:id', (req, res) => {
    const course = courses.find(c => c.id === parseInt(req.params.id))  
    if(!course) return res.status(404).send('The course with the given ID was not found');

    const index = courses.indexOf(course);
    courses.splice(index, 1);

    res.send(course);
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}`));