프로그래머스 데브코스 16일차 with. TS 웹 풀스택

📚요약

지난 시간에 Map의 활용과 express의 공식 홈페이지 실습을 진행해 봤습니다. 이번 시간에는 express.js를 통해 post 요청을 보내 JS의 Map을 통해 임시로 만든 데이터베이스에 데이터를 추가해보겠습니다.

 

📖Express post 요청

📄POST

http method 중 post는 새로운 데이터를 생성(등록)하는 방법입니다. 새로운 데이터를 등록하기 위해서는 요청을 할 때 등록할 데이터를 같이 보내야 합니다. 지금까지는 url에서 req.query 또는 req.params을 통해 데이터를 전달받았습니다. 하지만 url의 경우 주민등록번호, 또는 집 주소와 같은 개인 정보가 url에 보이기 때문에 보안에 위험이 있습니다.

따라서 post 요청의 경우 http의 body에 데이터를 담아서 보내야 합니다.

 

📄Postman

포스트맨은 개발자들이 API를 디자인하고 빌드하고 테스트하고 반복하기 위한 API 플랫폼

△포스트맨-위키백과

http의 body에 데이터를 담는 것은 url을 통해서 할 수 없습니다. 그렇기 때문에 포스트맨이라는 API 플랫폼을 사용하겠습니다. 공식 홈페이지를 통해 다운로드할 수 있습니다. 웹에서도 사용가능하지만 제약이 있다는 단점이 있습니다.

 

이번 시간 사용하는 기능

• http method 선택 : get, post, put, delete 등 다양한 http method를 선택하거나 만들 수 있는 기능
• collection : 여러 요청을 반복적으로 보내야 하는 경우 폴더와 파일처럼 요청하는 url과 헤더의 정보 등을 저장하고 분류할 수 있다.
• http body 입력 : post와 같이 데이터를 body에 같이 보내려고 할 때 사용하는 기능

collection 기능 화면(좌) http method 기능 화면(가운데) post 요청 시 http body 기능 화면

 

📄post 요청 실습

포스트맨 설명을 위해 http body를 작성하는 부분에 대한 스포가 있었지만 코드도 중요하니 보겠습니다.

// Express.js에서 get뿐만 아니라 post, delete 등 다른 http method도 함수로 제공하고 있다.
app.post("/test", (req, res) => {
  console.log(req.body);

  res.json({
    title: "post test",
  });
});

이대로 작성한다면 요청을 보내도 아무런 변화가 없습니다. Express.js에서 제공해 주는 express.json()이라는 함수가 있는데 '내장 미들웨어 함수로 body-parser를 기반으로 하고, JSON payload로 들어오는 요청을 구문 분석해 준다'라고 합니다. 사용해야 body로 들어오는 json 데이터를 읽을 수 있습니다.

app.use(express.json());

사용하려면 위의 코드를 post 함수 이전에 작성하면 됩니다.

 

임시 데이터베이스를 JS의 Map 활용해 만들어보고 post 요청을 통해 데이터를 추가하는 코드를 작성해 보겠습니다.

const db = new Map();

// POST body를 통해 전달한 데이터를 데이터베이스에 등록한다
app.post("/book", (req, res) => {
  const id = db.size + 1;
  db.set(id, req.body);

  res.json({
    message: `add new creater ${db.get(id).name}`,
    ...req.body,
  });
});

실제로 id 부여를 이런 방식으로 진행하지 않지만 임시로 진행시켰습니다. 추가된 데이터는 get 요청을 통해 쉽게 확인할 수 있습니다.

// GET id를 통해 등록된 책 정보를 가져온다
app.get("/books/:id", function (req, res) {
  let { id } = req.params;
  id = parseInt(id);

  const book = db.get(id);
  if (db.has(id)) {
    res.json({
      id: id,
      ...book,
    });
  } else {
    res.json({
      message: `there is no ${id} data`,
    });
  }
});

 

post 요청 및 결과 화면 & 새로 등록한 책 id로 get 요청 및 결과 화면

 

다음 시간에 계속...

 

출처 & 참고

김송아 강사님의 강의

express.json(), Express 공홈, 2024.04.29