POST 써보기

목적:

나중에 쿼리 파라미터로 sidoName을 조건별로 보낼거라서 어떤식으로 작동하나 확인하려고 했다.

서버쪽 코드:

app.post("/city", (req, res) => {
  console.log(req.body);
});

클라이언트쪽 코드:

const body = {
  sidoName: "서울",
};

fetch("http://localhost:3000/city", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(body),
})

결과:

body-parser을 쓰지 않으면 undefined라고 뜬다.

클라이언트 측에서 API post와 put 메소드로 요청시 body를 포함하여 보낼수있다(위의 코드처럼). 이 값을 서버 측에서 받는다고 그대로 사용할 수 있는 것이 아니고 서버 내에서 해석 가능한 형태로 변형해야 사용할 수 있게 된다. API요청에서 받은 body 값을 파싱하는 역할을 수행하는 것이 bodyParser이라고 하는 미들웨어이다.

body-parser을 사용하려고 하면서 알게 된 소소한 내용:

항상 파싱? parser은 대체 무엇을 의미하나에 대한 자세한 내용은 알고있지 않았다. 그저 데이터를 다른 형태로 바꿔주는? 해석해주는? 이라는 뜻을 갖고있지않을까? 라고 생각하고 넘겼었다.

parsing은 가지고있는 데이터를 내가 원하는 형태의 데이터로 '가공'하는 과정이고, 그 과정을 수행하는 모듈 혹은 메소드를 parser이라고 일컫는다.

즉, 내가 모르는 언어를 내가 원하는 언어의 구조로 바꿔주는 일종의 구문 해석기다. 하지만 번역의 역할은 compiler에서 담당한다.

내가 원하는 형식에 맞춰 해석하는 용도이므로 bodyparser말고도 cookieparser 등등 파서의 종류는 엄청 많다.

npm install body-parser

참고한 자료대로 body parser을 사용하려고 했다.

하지만 bodyparser에 밑줄이 그어지면서 deprecated(비추천) 라고 한다..

왤까? 싶어서 stackoverflow에 검색해봤다.

보니까 express.js에는 이미 빌트인 body parser을 넣었다.

그래서 딱히 body-parser을 import하지 않아도 된다!

코드:

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

이렇게 쓰면 된다!!!

---

이제 공공데이터를 불러와보자.

https://data.go.kr/index.do

이 사이트에 들어가서 원하는 공공데이터 발급신청을 누르면 된다.

승인은 우려했던것과 달리 그냥 바로 됐다.

이런식으로 개개인마다 인코딩된 서비스키를 발급해준다.

발급받은 서비스키는 아래와 같이 데이터를 요청할때 사용된다.

const requestUrl =
    "http://openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";
  let queryParams = "?" + encodeURIComponent("ServiceKey") + "=" + serviceKey; //서비스키
  queryParams +=
    "&" + encodeURIComponent("numOfRows") + "=" + encodeURIComponent("1");
  queryParams +=
    "&" + encodeURIComponent("pageNo") + "=" + encodeURIComponent("1");
  queryParams +=
    "&" + encodeURIComponent("dataTerm") + "=" + encodeURIComponent("DAILY"); //데이터측정시간
  queryParams +=
    "&" + encodeURIComponent("sidoName") + "=" + encodeURIComponent(sidoName); //시도 이름
  queryParams +=
    "&" + encodeURIComponent("ver") + "=" + encodeURIComponent("1.3");
  queryParams +=
    "&" + encodeURIComponent("_returnType") + "=" + encodeURIComponent("json");

좀 지저분하다...ㅠ

원래 xml 형식으로 response가 오는데, 아래 마지막줄처럼 _returnType=json 을 추가해주면 json 형태로 결과를 내준다.

request 모듈을 사용했다.

request(
    {
      url: requestUrl + queryParams,
      method: "GET",
    },
    function (error, response, body) {
      callback(body);
    }

requestUrl+queryParams를 하면 대충

http://openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty?ServiceKey=서비스키&numOfRows=1&pageNo=1&dataTerm=DAILY&sidoName=%EC%84%9C%EC%9A%B8&ver=1.3&_returnType=json

요론 모양의 Path로 요청이 간다.

---

이번 프로젝트에서는 인터넷을 참고하여 따로 대기오염데이터를 request해오는 파일을 만들었다

시도별 공공데이터를 응답받기 위해 아래처럼 코드를 짰다

dustData.js 코드:

const dustData = (sidoName, callback) => {
  const serviceKey =내 서비스키;
  
  const requestUrl =  "http://openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";
  let queryParams = "?" + encodeURIComponent("ServiceKey") + "=" + serviceKey; //서비스키
  queryParams +=
    "&" + encodeURIComponent("numOfRows") + "=" + encodeURIComponent("1");
  queryParams +=
    "&" + encodeURIComponent("pageNo") + "=" + encodeURIComponent("1");
  queryParams +=
    "&" + encodeURIComponent("dataTerm") + "=" + encodeURIComponent("DAILY"); //데이터측정시간

  queryParams +=
    "&" + encodeURIComponent("sidoName") + "=" + encodeURIComponent(sidoName); //시도 이름
  queryParams +=
    "&" + encodeURIComponent("ver") + "=" + encodeURIComponent("1.3");
  queryParams +=
    "&" + encodeURIComponent("_returnType") + "=" + encodeURIComponent("json");
  request(
    {
      url: requestUrl + queryParams,
      method: "GET",
    },
    function (error, response, body) {
      callback(body);
    }
  );
};

app.js 코드:

app.post("/city", (req, res) => {
  dustData(req.body.sidoName, (body) => {
    return res.send(body);
  });
});

바로 클라이언트측에서 데이터를 받아와 콘솔창에 찍어보았다.

정상적으로 찍혔다 ㅠ

낮에 본 console.table()이 궁금해서 한번 찍어봤다...!!

깔끔해서 보기 좋았다 ㅎㅎ

---

참고:
https://stackoverflow.com/questions/24330014/bodyparser-is-deprecated-express-4

https://medium.com/@chullino/1%EB%B6%84-%ED%8C%A8%ED%82%A4%EC%A7%80-%EC%86%8C%EA%B0%9C-body-parser%EB%A5%BC-%EC%86%8C%EA%B0%9C%ED%95%A9%EB%8B%88%EB%8B%A4-%ED%95%98%EC%A7%80%EB%A7%8C-body-parser%EB%A5%BC-%EC%93%B0%EC%A7%80-%EB%A7%88%EC%84%B8%EC%9A%94-bc3cbe0b2fd

https://coding-hwije.tistory.com/42