GET & POST + JSON 주고 받기

참고

• https://eastflag.co.kr/fullstack/rest-with-nodejs/node-rest_get-post/

angular, react, vue 등의 최신프런트엔드로 풀스택 개발

---

HTTP method

• https://duckgugong.tistory.com/156

HTTP

 

---

우선..

• https://duckgugong.tistory.com/222

NodeJS 프로젝트 만들기

• 위 링크를 참고햐여 NodeJS 프로젝트를 만들고 아래처럼 index.ts 파일을 만들자.

import express from 'express';

let app = express();

app.listen(8080, () => {
    console.log('server is listening 8080');
});

• 위 index.ts 파일에 HTTP 메서드를 하나씩 추가해보자.

모든 Http 메서드 허용

• express의 use 메서드는 모든 HTTP 메서드를 허용해준다.

// 모든 http method 허용
app.use('/allMethod', (req, res) => {
    res.send('allMethod');
})

• postman에서 확인하면 아래와 같은 결과가 나온다.

GET 메서드

• express get 메서드는 HTTP GET 메서드만 허용해준다.

// GET만 허용
app.get('/get', (req, res) => {
    res.send('get');
})

GET + query parameter

• express에서는 req 변수에 request의 모든 변수가 담겨져있다.
• 그 중에 query parameter는 req.query라는 객체에 담겨진다.
• 아래에서는 객체 destruct assignment 를 사용해서 name이라는 속성을 가져왔다.

// GET + query parameter
app.get('/get2', (req, res) => {
    const {name} = req.query;
    res.send(`get ${name}`);
})

• query parameter를 name="duck"으로 해서 postman에서 확인을 해보면 결과는 아래와 같다!

GET + uri parameter

• query parmeter가 name이라는 키에 duck이라는 value를 보내려면 name=duck 이라고 보내지만 uri parameter 에서는 /duck으로 보낸다. key는 서버에서 /:name으로 받는다!
• uri 파라미터는 req 객체의 params에 담겨져서 나온다.
• 아래에서는 객체 destruct assignment 를 사용해서 name이라는 속성을 가져왔다.

// GET + uri parameter
app.get('/get3/:name', (req, res) => {
    const {name} = req.params;
    res.send(`get ${name}`);
})

POST

• 회원가입이나 로그인 창에서 input box에 데이터를 넣고 submit 버튼을 누르면 POST 방식으로 전송되고 input에 담긴 데이터들은 x-www-form-urlencoded 방식으로 body에 담겨서 전송된다.
• 하지만 express에는 JSON 데이터를 파싱하는 모듈만 내장되어 있고 x-www-form-urlencoded 를 파싱하기 위해서는 확장하는 코드를 추가해야 한다.
• POST로 JSON을 보내는 방법은 아래 설명되어 있다!

...

// x-www-form-urlencoded를 파싱
app.use(express.urlencoded({
    extended: true
}))

...

// POST만 허용
app.post('/post', (req, res) => {
    const {name} = req.body;
    res.send(`post ${name}`);
})

...

• URL 뒤에 파라미터를 붙여서 key, value를 보내는 것과 다르게 name=duck을 넣으려면 postman에서 body를 선택하고 x-www-form-urlencoded를 선택하고 key와 value에 각각 name, gildong을 넣는다.
• x-www-form-urlencoded라는 것은 내가 body에 보내는 데이터 타입이 form 방식이라는것을 명시하는것이다.

Response - JSON 리턴

• Node는 javascript 언어를 사용하기 때문에 json을 리턴하기 위해 별도의 라이브러리가 필요하지 않다.
• 그냥 json 데이터를 만들어서 리턴하면 된다.

// POST - JSON 리턴
app.post('/post2', (req, res) => {
    const result = {
        code: 0,
        message: 'duck'
    };
    res.send(result);
})

 

Request - JSON 보내기

• express 버전 4에는 body-parser가 내장되어 있지만 json을 파싱하겠다는 설정을 하지 않았기 때문에 설정을 추가하지 않으면 파싱이 되지 않는다.
• 따라서 json을 파싱하기 위한 설정을 추가해야 한다!

// body-parser는 내장되어있음.  json 파싱하기 위해서 설정만 추가
app.use(express.json());

// POST - JSON 보내기
app.post('/post3', (req, res) => {
    console.log(req.body);
    const result = req.body;
    res.send(result);
})

• postman에서 Body를 선택한 후, raw를 선택하고 JSON을 선택해서 JSON 데이터를 보내서 확인해보자!

 

전체 코드 요약

index.ts

import express from 'express';

let app = express();

// body-parser는 내장되어있음.  json 파싱하기 위해서 설정만 추가
app.use(express.json());

// x-www-form-urlencoded를 파싱
app.use(express.urlencoded({
    extended: true
}))

// 모든 http method 허용
app.use('/allMethod', (req, res) => {
    res.send('allMethod');
})

// GET만 허용
app.get('/get', (req, res) => {
    res.send('get');
})

// GET + query parameter
app.get('/get2', (req, res) => {
    const {name} = req.query;
    res.send(`get ${name}`);
})

// GET + uri parameter
app.get('/get3/:name', (req, res) => {
    const {name} = req.params;
    res.send(`get ${name}`);
})

// POST만 허용
app.post('/post', (req, res) => {
    const {name} = req.body;
    res.send(`post ${name}`);
})

// POST - JSON 리턴
app.post('/post2', (req, res) => {
    const result = {
        code: 0,
        message: 'duck'
    };
    res.send(result);
})

// POST - JSON 보내기
app.post('/post3', (req, res) => {
    console.log(req.body);
    const result = req.body;
    res.send(result);
})



app.listen(8080, () => {
    console.log('server is listening 8080');
});