Express] POST 방식을 이용한 정보의 전달 / nodejs 자동재시작 팁!

서버와 웹 브라우저가 상호작용하는 방법

1. GET 방식

2. POST 방식

GET VS POST

• GET

- 웹브라우저에서 웹서버로 어떤 정보를 요청할 때, 이전글까지는 get 방식을 사용했다. 그리고 기본이 GET.

- 웹애플리케이션에서 어떠한 정보를 얻어내기 위해서 웹애플리케이션에 주소를 통해 접속하고, 접속한 사용자의 요청에 따른 정보를 응답해준다.

- 경우에 따라 쿼리스트링을 통해 어떤 정보를 웹애플리케이션의 요청에 의해서 가져왔다.

- 서버에 있는 정보를 가져오는 것

< GET 방식을 통해, form 태그 이해하기 >

1. form

- html에서 form을 보면 url을 생성해주는 작은 프로그램이라고 생각하면 쉽다.

- 사용자가 작성해주면, form 태그를 통해서 적당한 URL을 자동으로 생성해서 서버로 보내주는 역할

1-1. 사용자가 /form에 접근했을 때를 설정.

1-2. Line 8에 의해 랜더링될 form.jade 파일을 views 폴더 안에 만들기

  

Line 4 : 인코딩 설정 (우리가 작성하는 html 파일이 어떤 방식으로 저장되었는가를 웹브라우저에게 명시적으로 알려주는 코드.)

jade의 새로운 문법 : 태그의 속성을 설정하고 싶을 때 () 괄호 안에 기입. (태그명과 괄호 붙여서 작성)

Line 7 : 전송하고자 하는 데이터를 form이라는 태그로 묶습니다.

- action : 어느 서버로 전송할 건지 설정, 이코드를 작성하고 URL을 확인해보면 action에 기입한 주소로 전송됨을 확인할 수 있다.

- method : 기본이 get이기 때문에, 지정하지 않으면 사용자가 작성한 정보가 URL에 노출됨을 확인할 수 있다.

(post 일 경우 URL 쿼리스트링을 남기지 않음.)

Line 10,12 : name : 사용자가 입력한 정보의 '이름'을 지정해주기 위한 속성

2. /form_reciever 라우터

 만들기

Line 11,12 : 사용자가 전송한 Title과 Description을 변수에 저장.

• POST

사용자의 정보를 서버로 전송할 때 ex) 로그인 : 사용자의 id와 password를 서버로 전송, 글작성하기 : 글 내용을 서버로 전송하기

사용자가 전송한 데이터를 서버쪽에서 수신하는 방법

위 코드를 post로 바꾸면 다음과 같은 에러가 뜬다 : 어떠한 라우터에도 걸리지 않았다라는 뜻

Line 10 : 다시 app.js의 코드를 살펴보면 app.get() ~ 으로 나와있는데 추론했을 때, 혹시 app.post()가 아닐까 추론해 볼수 있다.

Line 15-17 : 사용자가 포스트 방식으로 전달하면, post() 라는 메소드를 컨트롤러로 연결해서 실행해볼 수 있다.

  

post 방식으로 전송한 데이터를 웹애플리케이션에서 어떻게 받을까?

(GET 방식에서는 어떻게 받았었지? 라우터의 익명함수가 실행될때, 첫번째 인자로 전달되는 요청객체의.쿼리라는객체의.name으로 받았었다.)

위처럼 코드를 작성하면 아래와 같은 에러 메세지 확인

req가 body라는 객체를 가지고 있지 않아서 생긴 에러.

문서를 확인해보면. 기본적으로 POST 방식으로 전달된 데이터는 undefined! (정의되어있지 않다.)

이걸 사용하고 싶다면 body-parser, multer라는 미들웨어를 사용하라고 되어 있다.

body-parser : POST 방식으로 전송한 데이터를 웹애플리케이션에서 사용할 수 있도록 해주는 일종의 플러그인, 확장기능. (정확한 명칭 : 미들웨어)

문서에 의해 설치, 및 프로젝트에 코드 추가

Line 6-8 :  body-parser라는 모듈을 가져온 뒤, 이 모듈을 애플리케이션에 use했다면 붙인다고 생각해보자.

이 애플리케이션으로 들어오는 모든 요청들은 이 body-parser라고 하는 이 확장기능(미들웨어)를 먼저 통과한 다음에 POST 방식을 사용하기 위한 라우터가 동작하게 된다고 생각하자. (이제 body 객체가 에러 없이 통과됨을 확인했다. 원래 가지고 있지 않았던 body라는 객체를 body-parser라는 미들웨어가 추가시킨 것.)

그럼 언제 get을 쓰고 언제 post 쓸까?

GET

- 링크를 클릭했을 때, 일반적으로 원하는 것은 대부분 주소가 바뀌는 것이다.

- 링크를 보냈을 때, 내가 보낸 화면과 동일한 것을 보여주기 위해서는 URL에 정보를 표시하기 위해서 GET 방식을 사용한다.

- URL, 쿼리스트링을 통해서 어떤 '대규모'의 정보를 전달할 때.

굉장히 긴 글을 전송할 때, 쿼리스트링을 통해 get 방식으로 전달하려고 할때 URL의 규격상 일정 데이터 이상이 넘어가면 그 이상을 버림. 전달 데이터의 한계가 있다. 데이터가 중간에 끊김.

POST

- 사용자가 제출하는 내용이 노출이 되지 않아야 하는 경우

본질적으로 get이던 post 방식이던, 사실 어떤 데이터가 전송되는가를 얻어내는 난이도가 조금 다를 뿐이지, 본질적으로 얻어낼 수 있다면 얻을 수 있기 때문에 누가 더 안전하다고 말할 수 없다. 중간에 누군가가 정보를 가로채지 못하게 하는 것은 다른 차원의 접근이 필요하다. 이를테면 HTTPS(=SSL), 더 보안성이 높다고는 할 수 없지만...

supervisor (nodejs 자동재시작 팁!)

- 자바스크립트 코드를 바꾸면, node가 알아서 바뀐 부분을 감지 하지 못하기 때문에 node를 재시작해야한다.

- 변경된 사항을 보고 있다가 변경이 일어났을 때, 자동으로 재시작하는 기능을 'watch'라고 한다.

supervisor 설치 방법

1. npm홈페이지 > supervisor 검색

npm install supervisor -g

supervisor라고 하는 패키지(소프트웨어)가  컴퓨터 전역(-g;글로벌)에서 사용할 수 있도록 설치한다.

2. 설치후

supervisor ____.js

의 명령어로 자동으로 nodejs를 재시작하기 때문에, 일일이 재시작해야하는 번거로움을 줄일 수 있다.