Form으로 데이터를 통신하는 방법에는 GET방식, POST방식이 있다.
GET : 기본값이며, query string이 url에 표시된다.
POST : query string이 url에 표시되지 않는다.
감춰야 하는 정보를 전송할 때에 POST방식을 권장한다.
GET방식으로 전송받은 query string을 추출하는 방법에 대해 이전에 올렸던 포스팅이다.
[Node.js] URL의 query string 추출 (GET방식)
Nodejs은 서버 환경에서 자바스크립트로 애플리케이션을 만들 수 있게 해주는 프레임워크이다. 아래 사진을 보면 URL은 http://localhost:3000/?name=kimcoder&age=23 인 것을 볼 수 있다. 클라이언트 쪽에서는
kimcoder.tistory.com
포스팅 맨 밑에 있는 소스 코드를 웹에서 동작했을 때의 실행결과는 이렇다.
여기에서 제출을 누르면 title, content 이름을 가진 텍스트공간에 입력된 정보들이 query string에 담긴다.
title, content에 각각 I am, kimcoder을 입력하고 제출을 눌렀다.
POST방식으로 데이터를 전송했기 때문에 /post_test뒤에 query string이 붙지 않는 것을 볼 수 있다.
I am Kimcoder이 어떻게 출력되었는지 지금 자세히 설명할 것이다.
var http = require('http');
var fs = require('fs');
var url = require('url')
var qs = require('querystring'); //설명1
var app = http.createServer(function(request,response){
var _url = request.url;
console.log(url);
console.log(_url);
var queryData = url.parse(_url,true).query;
console.log(queryData); //설명2
console.log(queryData.name); //설명3
if(_url == '/'){
//설명4
var template=`
<html>
<form action="http://localhost:3000/post_test" method="post">
<p><input type="text" name="title" placeholder="title"></p>
<p>
<textarea name="content" placeholder="content"></textarea>
</p>
<p><input type="submit"></p>
</form>
</html>
`;
response.writeHead(200);
response.end(template);
}
else if(_url=='/favicon.ico') console.log(' ');
else if(_url=='/post_test'){ //설명5
var strings = '';
request.on('data',function(data){ //설명6
strings+=data;
});
request.on('end',function(){ //설명7
console.log(strings); //설명8
var a = qs.parse(strings); //설명9
console.log(a); //설명10
var title = a.title;
var content = a.content;
//설명11
var template=`
<html>
<p>${title} ${content}</p>
</html>
`;
response.writeHead(200);
response.end(template);
});
}
});
app.listen(3000);
- 설명1 : POST방식으로 query string으로 추출하기 위해 모듈을 불러온다.
- 설명2 : POST방식은 url에 query string이 표시되지 않으므로, queryData에는 아무 정보도 담기지 않는다.
- 설명3 : 물론 여기에도 아무런 정보도 담기지 않는다.
- 설명4 : 변수로 html문을 저장할 경우 역슬래쉬로 감싼다.
- 설명5 : 이동한 주소에서의 처리(서버 시점)
- 설명6 : data에는 POST방식에 의해 url에 표시되지 않고 숨겨졌던 query string버퍼가 담겨있는데, 이를 문자열 형태로 바꾸면 query string을 프로그래밍적으로 처리할 수 있게 된다.
- 설명7 : 더 이상 받을 데이터가 없을 때 호출되는 콜백 함수
- 설명8 : 문자열화된 query string을 콘솔창에 띄운다.(아래 콘솔 이미지 참고)
- 설명9 : 문자열화된 query string을 객체화 한다.
- 설명10 : 객체화된 것을 콘솔창에 띄운다.(아래 콘솔 이미지 참고)
- 설명11 : 변수를 ${ }에 담아 웹 사이트에 표시한다.
<콘솔창>
1~13줄 : url 모듈 객체
14줄 : _url 출력
15줄 : 핵심2 출력(빈 객체)
16줄 : 핵심3 출력(빈 변수)
17줄 : 핵심8 출력
18줄 : 핵심10 출력
'Node.js > Node.js Basic' 카테고리의 다른 글
| [Node.js] 객체를 파일 단위로 관리하기 (0) | 2020.10.19 |
|---|---|
| [Node.js] 파일 삭제 (0) | 2020.10.15 |
| [Node.js] 파일생성/파일명변경, redirection (0) | 2020.10.14 |
| [Node.js] 파일 조회/읽기/parse (File path 간단 설명) (0) | 2020.10.06 |
| [Node.js] URL의 query string 추출 (GET방식) (0) | 2020.10.05 |
댓글