간단한 코드 만들어서 github에 올려 놨습니다.
일단 저희가 저번 포스팅에서 form 태그에서 데이터를 보내는 것을 보았는데요
이 data를 받아 오는 것을 해보겠습니다.
일단 index.html의 파일 내용을 봅시다(github참고해주세요)
이런 식으로 action에 ./create를 주었고 method 를 post를 주었습니다.
저기서 중요한 것은 첫번째 input에 name을 주는 것인데 저 name이 나중에
node에서 data를 받아 올때 객체의 key값으로 들어오게 됩니다.
페이지를 켰을땐 이렇게 나옵니다.
일단 index html내용을 살펴보았구요
node의 내용을 보겠습니다.
전체 적인 내용은 이렇구요.
간단히 reafile 이런 내용은 다 이해하실거라 생각하고
req.on 부분을 보겠습니다 저 부분이 가장 중요한데
req는 request를 짧게 줄여서 적었고
createServer에서 첫번째 인자로 받아 온 것입니다.
req.on method를 사용하면 어떤 이벤트가 발생했을때를 listen할 수 있는 것입니다.
javaScript의 addEventListhener 랑 비슷하지요
거기서 첫번째 인자로 "data"를 주고 2번째 인자로 callback함수를 줍니다
callback함수는 저희가 받아올 data를 인자로 주면됩니다.
첫번째 인자는 "data"는 날아오는 data들이 들어 올때마다 listen 하겠다는 의미이고
여기 보면 body라는 것은 req.on 하기전에 만들어 주었습니다.
이제 data가 들어올때마다 body에 data를 + 해주도록 설정 하였습니다.
그리고 req.on("end" ..... 부분을 보겠습니다.
이 부분은 요청이 끝났을때 실행되는 eventlistner라고 생각하시면 되겠습니다.
그러면 우리는 body라는 것을 queryString으로 바꾸어 줄 필요가 있습니다.
일단 그냥 body를 한번 console에 찍어보겠습니다.
이런식으로 적어서 body를 qs라는 queryString 모듈을 사용했을때 와 사용하지 않았을때를
console에 찍어보겠습니다.
input에 1234를 적어보겠습니다.
제출에 성공하여 create가 떴습니다.
console에는 위와 같이 출력되었습니다.
첫번째 body는 그냥 string으로 나타났습니다
이 string을 object 객체로 바꾸어 사용하기 쉽게 만들려면 queryString 모듈을 사용해주어야 되는데 아주 간단합니다.
일단 querystring 모듈을 불러와주어서 qs에 저장해주고
object로 바꾸어줄 string을 넣어줍니다.
이런식으로 넣어줍니다
이제 post를 console에 찍어보면
이렇게 console에 나오고 아까 제가 말씀드렸던
input의 name에 name이라고 설정했는데
key값이 name이라고 저장이 되어서 node에 출력이 되었죠
이제 저 object를 이용해서 node에서 사용할 수 있게 된 것입니다.