[JS]form -get, post
1.body-parser
body-parser는 node.js의 미들웨어 모듈이다.
요청의 본문을 지정한 형태로 파싱해주는 역할을 한다. 미들웨어를 이용하면 request의 body부분을 자신이 원하는 형태로 파싱한다.
body-parser 미들웨어는 Express4.16.0버전 이상부터 내장묘듈로 포함되어 있기 때문에 별도의 설치 없이 사용이 가능하다.
body-parser모듈을 사용하여 express 애플리케이션에서 body 데이터를 파싱하였지만, Express4.16.0이후 버전에서 부터는 express.json()과 express.urlencoded()과 같은 내장 미들웨어를 사용하여 요청 데이터를 파싱할 수 있다.
1.1 body-parser설정
app.use(express.urlencoded({extended: true}));
app.use(express.json());1.true: URL-encoded 데이터를 파싱할 때 qs모듈을 사용해서 querystring을 해석한다.
2.false: URL-encoded 데이터를 파싱할 때 node.js의 내장 querystring 모듈을 사용한다.
+쿼리스트링(Query string): URL뒤의 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법
2.form
form태그는 사용자로부터 입력을 받을 수 있는 HTML입력 폼을 정의할때 사용한다.
form요소들은 button,fieldset,input,label,select,textarea 등 있다. 코드로 예시를 보여 주겠다.
<form action="/get" method="get" name="login">
<fieldset>
<legend>로그인 정보</legend>
<input type="text" name="id"/>
<input type="password" name="pw" />
</fieldset>
<input type="radio" name="gender" value="male" id="man"><label for="man">남자 </label>
<input type="radio" name="gender" value="female" id="woman"><label for="woman" >여자</label>
<!-- button 타입이 submit일 경우 form 태그의 정보에 맞게 form을 제출 -->
<button type="submit">제출</button>
</form> form을 통해서 데이터를 서버로 제출하기 위해 action, method속성을 사용하였다.
이중 method속성은 get과 post 두가지 중 하나를 선택할 수 있다.
2.1 GET과POST
Http메서드 중 가장 일반적으로 사용되는 메서드는 get과 post이다. 이 두 메서드는 각각 다른 목적과 사용 사례를 가졌지만 어떤 메서드를 선택할지 결정하는 요인은 다음과 같다.
1.데이터 노출여부: URL 내 데이터 노출 여부, 노출이 없어야하는 경우 POST를 사용한다.
2.안정성: GET은 서버에 영향을 미치지 않는 안전한 요청으로 데이터를 변경하거나 부작용이 있는 작업은 POST를 사용한다.
3.캐싱: GET은 캐싱이 가능하므로 자주 바뀌지 않는 정보를 요청할때 유용하다.
4.히스토리: GET은 브라우저 히스토리에 기록되므로 사용자의 브라우저 이력이 남을 수 있다.
[캐싱에 대하여](https://developer.mozilla.org/ko/docs/Web/HTTP/Caching)2.1.1 GET
get 방식은 URL에 폼 데이터를 추가하여 서버로 전달하는 방식이다.
get방식의 HTTP요청은 브라우저에 의해 캐시되어 저장되고 쿼리 스트링에 포함되어 전송되므로 길이의 제한이 있다. BUT, 보안상 취약점이 존재하기 때문에 정말로 중요한 데이터를 POST방식으로 사용하는것을 권장한다.
app.get("/get", function(req,res) {
console.log(req.query);
res.send("연결 성공아요");
)};그러면 브라우저에 get요청 성공이라고 뜰것이다.
GET은 불필요한 요청을 제한하기 위해 사용될 수 있다.
JS,CSS,이미지와 같은 정적 컨텐츠는 데이터 양이 크고 변경될 소지가 적기 때문에 동일한 요청을 보낼 필요가 없다. 따라서, 정적 컨텐츠를 요청하고 브라우저에서는 요청을 캐시하고 동일 요청이 발생하면 서버로 요청을 보내지 않고 캐시된 데이터를 사용한다.
2.1.2 POST
post 방식은 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식이다.
리소스를 생성/변경하기 위해 설계되었기 때문에 데이터를 HTTP메시지의 body에 담아 전송한다.
post방식의 HTTP요청은 브라우저에 의해 캐시되지 않으므로 브라우저 히스토리에 남지 않는다.
또한 데이터는 쿼리 문자열과 별도로 전송되기 때문에 GET방식보다는 보안성이 높다.
post 요청 및 응답 시 'Content-type'에 요청 헤더의 데이터 타입을 표시하는데 http요청과 응답의 헤더에 포함된 정보로 본문의 형식을 나타낸다. 이 헤더 필드는 데이터의 유형을 정의하고 수신측은 어떻게 데이터를 처리해야 하는지 결정하기 때문에 데이터 교환의 정확성과 보안을 보장하는데 중요하다.
content-type의 종류는 application/x-www-form-urlencode, text/plain, multipart.form-date, applcation/json, application/xml 등이 있다.
이 중 가장 첫번째로 언급한 것이 실습중 html폼을 요청하는데 사용되는 형식으로 URL-encoded문자열로 전송되는 경우이다.
res.render는 웹 애플리케이션에서 사용되는 웹 프레임워크에서 html템플릿을 클라이언트에 랜더링하는데 사용되는 메서드이다. 서버측 랜더링을 수행하며 html페이지를 보내기 전에 뷰 템플릿과 데이터를 결합해서 html에 보여준다.
POST의 예시는 다음과 같다..
index.js파일
app.post("/post", function(req, res){
res.render("result", {
year: req.body.year,
month: req.body.month,
day: req.body.day,
});
});result.ejs파일
<body>
내 생일은 <%=year%>년, <%=month%>월,<%=day%>입니다..
</body>"result"는 "result.ejs라는 뷰 템플릿을 사용하여 html페이지를 렌더링하고 year,month,day와 같은 데이터를 전달하여 해당 데이터를 템플릿에서 사용할 수 있게 한다.
3.회고
get,post는 비슷하면서 큰차이점을 지니고 있다. 보안상 넘어갈때 보여도 되는 데이터와 보이면 안되는 데이터를 받을때 중요하다고 깨달았다. 브라우저에 캐시가 된다는 점을 활용한다면 불필요한 요청과 응답을 줄일 수 있을테니 이런 차이점을 잘 활용을 해야좋을것 같다.
4.참고자료
