RESTful 라우트 정의하기

1. Get & Post

• Get : 클라이언트에서 서버로부터 정보를 받아올 때 사용. Body가 없으며, 사용자가 입력한 데이터는 ‘쿼리 문자열’로 들어간다. → 결론적으로 Get 은 서버에 영향을 주지 않는다.
• Post : 클라이언트에서 서버로 파일을 전송할 때 사용. Body가 있어 다양한 형태의 파일을 서버로 전송할 수 있고, ‘쿼리 문자열’도 가진다. → 결론적으로 Get 은 서버에 영향을 준다.

2. 리액트와 Express Get, Post 경로 정의하기

• [ client.js ]

import axios from "axios";

const URL = "http://localhost:3000";

const Client = () => {
    const onClickGet = () => {
        axios.get(URL+'/user')
        .then((res)=>
        {
            console.log(res.data);
        }).catch((err)=>{
            console.log(err);
        })
    }

    const onClickPost = () => {
        axios.post(URL+'/user')
        .then((res)=>
        {
            console.log(res.data);
        }).catch((err)=>{
            console.log(err);
        })
    }

    return (
        <>
            <input type="text" name="ID"></input>
            <input type="text" name="PW"></input>
            <button onClick={onClickGet}>Get</button>
            <button onClick={onClickPost}>Post</button>
        </>
    );  
}

export default Client;

• [server.js]

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

// 서버는 같은 경로라도 get과 post를 구분하여 응답
app.get('/user', (req, res) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.send("GET /user response")
})

app.post('/user', (req, res) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.send("POST /user response")
})

app.listen(port, () => {
    console.log("Listening...")
})

3. 클라이언트(리액트 앱)에서 서버로 FormData 전송하기

• post 는 서버에 데이터를 보내기 위해, Body가 필요하다. 하지만, 아래와 같이 post 요청하면, 서버 콘솔에서 req.body가 undefined로 에러가 발생한다.
• Express 공식 웹에서 req.body 에 대해 조사하면, 아래와 같이 설명이 나와 있는데 정리해보자면, “req.body는 기본적으로 제공되지(undefiend) 않으며, key-value로 구성해야하는 데이터 구조이다. 그리고 이 req.body를 사용하기 위해서는 express.json() 이나 exporess.urlencoded()가 필요하다는 말이다”

[ 원문 ]

Contains key-value pairs of data submitted in the request body. By default, it is undefined, and is populated when you use body-parsing middleware such as express.json() or express.urlencoded().

[ req.body 파싱을 위한 코드 ]

app.use(express.json()) // req.body를 생성하고, json 파싱
app.use(express.urlencoded({ extended: true })) // req.body를 생성하고, formData 파싱

• 아래 순서에 따라 클라이언트에서 서버로 데이터를 전송해보겠다.
• 순서 1) 클라이언트에서 Post 버튼을 클릭했을 때, 전송할 데이터를 formData(key-value)로 생성한다

[ Client.js ]

import axios from "axios";

const URL = "http://localhost:3000";

const Client = () => {
    const onClickPost = () => {
        // 키와 값을 갖는 formData 생성
        const formData = new FormData();
        // 여러 값을 보내려면, append()를 사용하여 결합
        formData.append("ID", "DK");
        formData.append("PW", "3663");

        // API URL로 formData 전송
        axios.post(URL+'/user', formData)
        .then((res)=>
        {
            console.log(res.data);
        }).catch((err)=>{
            console.log(err);
        })
    }

    return (
        <>
            <input type="text" name="ID"></input>
            <input type="text" name="PW"></input
            <button onClick={onClickPost}>Post</button>
        </>
    );  
}

export default Client;

• 순서 2) 서버에서 body 객체를 req에 추가하기 위해, ‘multer’ 모듈을 설치하고 아래와 같이 코드를 작성해준다.
• Express req.body 문서 링크: https://expressjs.com/ko/4x/api.html#req.body
• multer 문서 링크: https://github.com/expressjs/multer/blob/master/doc/README-ko.md

[ Server.js ]

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

// multer: body 객체와 한 개의 file 혹은 여러개의 files 객체를 request 객체에 추가
const multer = require('multer');
// 업로드 위치 지정(파일을 저장하는 경우)
const upload = multer({ dest: 'uploads/' })

app.use(express.json()) // req.body를 생성하고, json 파싱
app.use(express.urlencoded({ extended: true })) // req.body formData 파싱

// 클라이언트에게 req.body 응답  
app.post('/user', upload.array(), (req, res) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.send(req.body)
})

app.listen(port, () => {
    console.log("Listening...")
})

4. REST 와 RESTful API

• REST 란? Representational State Transfer 약자로 어떻게 클라이언트와 서버가 소통해야하고, 어떻게 CRUD를 수행해야하는지의 가이드라인을 말한다.
• RESTful API 란? REST하게 잘 작성된 API를 말하며, 이렇게 잘 작성된 API는 유지보수하고 다른 사람이 업데이트하기에 좋다.
• 모범 사례 링크 : https://api.ncloud-docs.com/docs/ai-naver-clovafacerecognition

[ RESTful 주석 index 예시]

// 구조(이름, path, verb, purpose)