[WEB] Express- client 에서 REST API로 Server에 Data 전송(POST method)

POST방식으로 출력시에 req.body에 {}가 나오는 사람들이 확인하면 좋을것이다.

 

오늘은 실수한 내용에 대해서 정리하려고 한다.

​

팀 프로젝트인데 괜히 Express를 쓰겠다고 한 것 같다. 시간이 너무 촉박하다..

선 실행 후 이해로 하고있다.

​

======= Client side==============

​

signup.ejs에서 onclick 이벤트를 등록한다.

​

​

javascript의 function checkValid(){} 를 보자

JSON.stringfy를 이용하여 object 를 JSON형태로 바꾸어서 뿌려준다.

그냥 req와 stringfy를 거친 req의 차이는 무엇인가..

json을 거치고 나면 key값이 " "로 감싸져서 key : value의 형태로 매핑된다.

​

fetch는 js에서 지원하는 함수이다.

REST API는 자세한 내용은 구글링을 해보면 된다.

html 전체를 전송하지 않고 State만 Transfer한다는 것이다.

​

POST method를 이용할 것이고

header를 통해서 내가 어떤 형식의 데이터를 보낼것인지 명시한다.

그리고 body에 Json.stringfy를 통해 JSON 형식으로 데이터를 보낸다.

​

======= Server side==============

/signup으로 시작하는걸 post로 받았을때 console.log를 통해서 req.body를 찍어보면 된다.

​

클라이언트에서 보낸 정보를 서버에서 제대로 받았음을 알 수 있다.

​

​

Undefined가 나오는 사람이 있을것이다.

그건 POST로 보낸 값들을 추출해주는 파서가 없기 때문이다.

​

버전이 4.16.0 이상이면

​

이렇게 그냥 자동으로 express 내부에서 사용이 가능하다.

​

참고로 4.16.0 이하 버전에서는

body-parser를 따로 npm install body-parser -s 이런식으로 해서

설치를 하고 require로 불러서 사용해야 했다고 한다.

​

하지만 이제는 deprecated니까 express를 사용하면 된다.

​

내가 4.16.0 이하이다. 하면 body-parser를 검색해보면 될 것이다.

​

​

​

====================

내 실수 :

인터넷에서 찾아보는데 rest api의 headers를 header로 쓰고 못찾고 있었다.

​

계속 req.body의 값이 {} 로 나오는것이 이상해서 몇시간을 헤맸는데, 코드를 하나하나 다 비교해봤는데도 못 찾았다.

뭐가 씌였나보다. "header"(x) 가 아니고 "headers"(o) 이다.

​

실행이 안되면 무조건 내가 틀렸지 라는 마음으로 찾는데, 오늘도 역시 바로 찾는데 실패했다.

​

앞으로는 그러지 말아야지..