Expess Post(Postman, app.use()함수)

이전에 get메소드만만 사용했었는데 이번에 post메소드를 사용 해보겠습니다.

 

이전포스팅에서 사용했던 get코드에 post를 사용해보겠습니다.

const express = require('express')
const app = express()
const port = 1017

//get메소드
app.get('/', (req, res) => {
  res.send('Hello World!')
})

//post메소드
app.post('/test', (req,res)=>{
  res.send('Hello Post!!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

그러고나서 /test로 접속해보면 아무런 일이 일어나지 않습니다. 

우리가 post를 사용하려는 목적을 알야아합니다. 일단 post는 생성(등록)을 하기 위한 메서드입니다. 

예를들어 회원가입을 하려고하는데 id,password,name,email 등을 등록해줘야합니다. 그런데 이러한 값들을 url에 넣어주면 안됩니다. 즉, 이러한값들은 숨겨서 보내야합니다. 바로 Body에 숨겨야 합니다. 

 

PostMan

그럼 post는 어떻게 테스트해야할까요? postman을 통해 해결할 수 있습니다. 

https://www.postman.com/

Postman API Platform | Sign Up for Free

 

 

이전에 만든 get을 postman으로 get해보겠습니다. 내가 접속하는 get url주소를 넣어주고 send 버튼을 눌러러보면

Hello World가 잘 출력됩니다. 

 

 

이번에는 post메소드를 사용해보겠습니다. post메소드에 해당하는 url을 입력하고 Send버튼을 눌러보면

결과가 잘 출력됩니다. 앞에 http://은 빼줘도 잘 작동합니다. localhost부터 작성하면 됩니다. 

 

req,res구현

이제 post의 req, res를 구현해보겠습니다. 

body에 숨겨져서 들어온 데이터를 화면에 뿌려주겠습니다. 그전에 postman을 다시 보면 아래 Body탭에서 출력되는 곳은 Response Body이고 위에 부분의 Body탭이 Request Body입니다. 

 

app.use()

먼저 request로 받아온 body값을 json으로 읽을 수 있게해줘야합니다. post함수위에 app.use()를 작성해줍니다. app.use()함수는 express모듈에서 항상 실행되는 미들웨어의 역할을 합니다. 

• 미들웨어 : 미들웨어는 요청과 응답 중간에 위치합니다. 미들웨어는 함수이며 Express에서는 사실상 거의 모든것들이 미들웨어 입니다. 요청과 응답을 조작하여 기능을 추가하거나 나쁜요청을 거르기도 합니다. 

즉, use함수는 들어오는 req 데이터를 받아 가공하는 첫번째 매개체가 됩니다. 클라이언트로부터 요청을 받게 되면 use의 내부 로직에 맞게 데이터가 처리가 되고, 가공된 데이터를 response 할 것인지, 아니면 다음 미들웨어로 넘길 것인지 선택을 하게 됩니다. 

app.use(express.json())
app.post('/test', (req,res)=>{
  console.log(req.body);
})

 

그리고 postman에서 body탭에서 raw를 탭하고 json형태로 변경후 아래처럼 입력후 send를 해주면 

 

vsCode에서 콘솔확인해보면 잘 출력됩니다. 

 

Hello Body만 출력하게 할 수 있을까요? 해당키값만 출력하게 하면 됩니다. 

console.log(req.body.message);

 

그 다음 이제 원래 목적인 body에 숨겨져서 들어온 데이터를 화면에 뿌려주기위해 res.send에 위의 값을 넣고 postman에서 send를 해보면 

res.send(req.body.message);

Response Body에도 잘 출력됩니다.

 

json 형태로 출력해주고 싶으면 res.json을 사용해주면 됩니다.

app.use(express.json())
app.post('/test', (req,res)=>{
  consonle.log(req.body.message);
  res.json(req.body);
})

 

 

실습(Post활용)

이전에 해봤던 실습(youtuber-demo)는 사용자가 얻고싶은 유튜버의 정보를 URL을 통해 GET해오기만 했습니다. 즉, 유튜버 3명에 대해서 만들어놨던 정보만 반환할 수 있었습니다. 이번에는 새로운 유튜버를 등록,추가(Post)해보겠습니다. 

https://myeongsu0257.tistory.com/219

req.params연습(쿼리스트링, 객체, Map객체)

 

API 설계(URL,method)

1. GET,  /youtuber/:id : id로 map에서 객체를 찾아서, 그 객체의 정보를 뿌려줌 
   • req : params.id -> map에 저장된 key값을 전달
   • res : map에서 id로 객체를 조회해서 전달 
2.  POST,  /youtuber
   • req : body -> 채널제목, 구독자수=0, 영상개수=0 
   • res : "채널제목님, 유투버 생활을 응원합니다!"

get은 이미 등록이 되어 있기 때문에 post메서드를 한번 작성해보겠습니다.

app.use(express.json()) //미들웨어 :json 설정 
app.post('/youtuber', (req,res)=>{
    console.log(req.body);
    res.json(req.body);
})

 

그리고 postman에서 아래처럼 Body를 작성해서 전송해보면  잘 출력됩니다. 

 

이제 저 데이터를 등록해줘야합니다. 그러기 위해서는 db에 저장해줘야 합니다. 현재 db는 map자료형이기 때문에 map에 put해줘야합니다. 그러기 위해서는 키값과 객체를 set해줘야합니다.

app.post('/youtuber', (req,res)=>{
    console.log(req.body);
    //Map 등록
    db.set(4,req.body);
    res.json(req.body);
})

 

Body에 작성한 후 send를 하고 

 

url로 확인을 해보면 잘 출력됩니다. 

 

이제 "채널제목님, 유튜버 생활을 응원합니다!"라는 문장을 뿌려주겠습니다.

app.use(express.json()) //미들웨어 :json 설정 
app.post('/youtuber', (req,res)=>{
    console.log(req.body);
    //Map 등록
    db.set(4,req.body);
    res.json({
        message : `${db.get(4).channelTitle}  님, 유튜버 생활을 응원합니다!`
    });
})

 

 

지금 까지 상황을 보면  map의 db에 4번에만 데이터가 저장됩니다. 4번째유튜버를 등록하고 새로운 유튜버를 등록하면 4번 유튜버의 데이터에 덮어쓰기가 됩니다. 따라서 db.set() 함수를 수정해줍니다.

 

이전에 set을 할때 키값으로 1,2,3,4 이렇게 직접 키값을 적어줬는데 아래처럼 id라는 변수를 선언해줘서 id++해주며 등록해줍니다.  

let db = new Map();
let id = 1
db.set(id++,youtuber1);
db.set(id++,youtuber2);
db.set(id++,youtuber3);

...

app.use(express.json()) //미들웨어 :json 설정 
app.post('/youtuber', (req,res)=>{
    console.log(req.body);
    //Map 등록
    db.set(id++,req.body);
    res.json({
        message : `${db.get(4).channelTitle}  님, 유튜버 생활을 응원합니다!`
    });
})

 

 

4번째 유튜버등록

5번째 유튜버를 등록하였을때

 

잘 등록됩니다. 근데 현재 post로 send를하고 post의 res값을 보면 4번째 유튜버만 나옵니다.

 

당연합니다. 위의 코드에서 res.json의 값을 보면 db.get(4)를 하여 4번째 유투버의 정보를 뿌려주기 때문입니다.

그래서 저부분을 id-1로 이전에 바로 생성된 값을 response로 뿌려주면  

 res.json({
        message : `${db.get(id-1).channelTitle}  님, 유튜버 생활을 응원합니다!`
    });

 

잘 출력됩니다. 

 

 

전체조회

이제 개별조회가 아닌 전체조회를 해보겠습니다. 

1. 전체 유튜버 "조회" GET, /youtubers
   • req : X
   • res : map을 전체 조회 

즉 map에 담겨있는 값들을 뿌려주면됩니다. db를 forEach문으로 돌면서 jsonObject라는 객체에 값을 넣어주고 보내줍니다. 그냥 db자체를 res.json(db)로 보내주면 {} 빈 객체가 뿌려집니다. 

• forEach : 향샹된/개선된 for문, 객체(또는 배열)에서 요소를 하나 꺼낸 다음 콜백함수가 실행된다, 3개의 매개변수가 함수에 있는데 첫번째매개변수는 값, 두번째매개변수는 인덱스, 세번째매개변수는 전체 값이다.  
  • map vs forEach : 리턴에서차이가 난다. forEach는 값의 리턴을 통해 새로운배열을 만들 수 없지만 map은 새로운 배열을 만들 수 있다. 

app.get('/youtubers',(req,res)=>{
    var youtubuers = {}
    db.forEach((value,key)=>{
        console.log(value);
        youtubuers[key] = value
    })
    res.json(youtubuers);
})

 

 

 

그럼 post로 youtuber4를 생성하고 다시 전체 조회를 해보면 

 

잘 생성되고 전체조회도에서도 방금 생성한 값들이 잘 나옵니다.