14. Express-POST 방식을 이용한 정보의 전달

1. POST 방식을 이용한 정보의 전달

• GET method - GET is used to request data from a specified resource.

GET method는 HTTP method이다.  GET라는 단어 뜻처럼, 클라이언트의 요청에 따라 어플리케이션의 응답의 정보를 얻는 것이다. 클라이언트가 url을 통해, 정보를 얻는 것도 GET method 이다.

• POST method - POST is used to send data to a server to create/update a resource.

POST method도 HTTP method이다.  POST라는 단어 뜻처럼, 서버에 데이터를 http body에 담아서 전송하는 것이다. 예를들어, 로그인이나 게시판글들을 전송하는 것이다.

2. 제출양식(form)

먼저 post.js 파일을 만들어서 위와 같이 코드를 입력한다. 또한 views폴더를 생성후 form.pug 템플릿 파일을 생성후 위와 같이 코드를 입력한다.

서버를 키고, 라우터로 설정해준 http://localhost:3000/form으로 접속하면, 우리가 작성한 html 코드가 화면에 렌더된다. 두개의 입력창에 각각 hello와 world를 입력하면, 우리가 템플릿에서 작성해준 /form_receiver로 이동하지만, 라우터가 작성되있지 않기 때문에 정보를 가져올 수 없다. 하지만 URL을 보면, 우리가 입력한 값들을 query string으로 알 수 있다. 만약 로그인을 작성하면 

아이디와 비밀번호를 노출되게 된다.

post.js파일에 form_receiver 라우터를 작성후, 서버를 껐다가 킨 다음, /form으로 접속 후, hello와 GET metho를 입력해보자. 그러면 /form_receiver로 이동하고, 우리가 작성한대로, query string을 저장한 변수들이 화면에 출력된다.

form tag에서 method를 입력하지않으면, default로 GET method를 사용한다.

3. POST 방식 소개

아까 작성한 form.pug 템플릿파일에서 method를 post로 바꾸고, 서버를 껏다 킨후 http://localhost:3000/form으로 접속하자. 접속 후에, 입력창에 각각 hello,와 world를 입력후 제출을 누르면, POST가 되지 않는다. 우리는 여태껏 get에대한 라우터만 작성했기 때문이다.

공식문서를 보면, post에 대한 라우터 작성법도 있다. app.get이 app.post로 바뀌었을 뿐이다. 다만 POST method는 데이터를 http

body에 담아 보내기 때문에 req.body를 이용해서 위와같이 코드를 입력해보자. 그리고 다시 서버를 껐다가 다시 키고, ./form으로 접속 후, 입력창에 입력을 반복해서 제출버튼을 누르자.

확인해보니 오류가 난다. 왜그럴까?

공식문서를 보니, req.body는 body-parser 나 multer 같은 미들웨어를 사용해서 데이터를 파싱(해석)해야한다.

npm으로 body-parser를 설치 한 후, 위와같이 빨간줄 그은 것을 우리 서버 코드에 추가해준다. 자세한 사용법은 body-parser공식문서에 나와있다.

서버를 껐다 킨 후, /form에 접속하고, 사진과 같이 입력 후, 제출을 누르면, 정상 작동하는 것을 확인할 수 있다.

body-parser : 미들웨어이고, post method로 전송된 데이터를 애플리케이션에서 사용할 수 있도록 도와주는 플러그인이다.

4. GET과 POST

GET 방식으로 정보를 전송하면 정보가 URL에 표시되기 때문에 보안상 문제가 있다. 그렇다고해서 POST가 보안상 완전한것도 아니다. 둘다 보안상 불안전한 기술이다.

언제 GET을 쓰고, 언제 POST를 써야할까?

•  패스워드나 보안적인 데이터를 전송 할 때, URL에 데이터를 표시하는 GET을 사용해서는 안된다.

•  거대한 데이터를 보내는 경우 POST 방식이 선호 된다. 몇몇 브라우저는 URL들의 크기를 제한하고, 많은 서버들이 URL들의 길이를 제한하기 때문이다.

5. 정리

• GET은 서버에서 데이터를 가져오는 것이고, POST는 서버로 데이터를 전송하는 방식이다.

• 서버에서 POST 데이터를 받을 때, req.body를 사용해야 하고, 이것을 해석하기 위한 미들웨어 body-parser나 multer를 사용해야한다.

• 거대한 데이터나 URL에 노출되지말아야할 데이터를 보낼 때, POST를 사용한다.

출처 - 생활코딩, Express공식문서, MDN공식문서