개발환경 : Windows10, VScode, Node.js(ver 15.12.0)
이번 포스팅은 구글링으로 node.js 공부를 하면서 HTTP 요청 메서드인 GET과 POST 요청을 처리해봤습니다. 흔히 클라이언트에서 웹서버로 리소스(데이터)를 요청하는 것을 GET이라 하고, 클라이언트에서 웹서버로 리소스(데이터)를 제출하여 웹서버가 리소스(데이터)에 대한 URL 주소 정보를 포함시켜 응답하는 것을 POST라고 합니다.
해당 기능을 구현하기 위해 HTML로 form을 만들었고 node.js로 서버를 열어 클라이언트의 요청에 따른 응답을 하도록 하였습니다.
<소스 코드>
<index.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GET POST exercise</title>
</head>
<body>
<form method="get" action="./login">
<h1>GET 요청</h1>
ID : <input type="text" name="id">
<br>
PW : <input type="password" name="pw">
<br><br>
<input type="submit" name="submit">
</form>
<form method="post" action="./login">
<h1>POST 요청</h1>
ID : <input type="text" name="id">
<br>
PW : <input type="password" name="pw">
<br><br>
<input type="submit" name="submit">
</form>
</body>
</html>
<server.js>
var http = require('http');
var fs = require('fs');
var querystring = require('querystring');
const port = 3000;
var server = http.createServer(function(req, res) {
if(req.method == 'GET'){
fs.readFile('./index.html' ,'utf8' ,function(error, data) {
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end(data);
});
}
else if(req.method == 'POST'){
req.on('data', function(chunk){
console.log(chunk.toString());
var data = querystring.parse(chunk.toString());
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end('ID : ' + data.id + 'PW : ' + data.pw);
});
}
}).listen(port, function() {
console.log('Server is running...');
});
<실행 결과>
<GET 요청 처리하기>
listen 함수를 통해 localhost 3000번 port로 웹서버를 생성하고 https://localhost:3000로 접속할 시 요청 방식이 GET이므로 readFile함수를 통해 페이지에 위와 같이 index.html을 보여주게 됩니다.
메서드가 GET인 form으로 ID : admin, PW : 1234를 제출합니다.
그렇다면 아래와 같이 URL이 바뀌게 됩니다.
http://localhost:3000/login?id=admin&pw=1234&submit=제출이 URL을 해석해보면
http://localhost:3000/login?id=admin&pw=1234&submit=제출
프로토콜://호스트(도메인):포트/경로?쿼리스트링 으로 해석되는데
form에서 받은 데이터를 쿼리 스트링으로 넘긴다는 것을 알 수 있습니다. GET으로 form 리소스를 제출하면 이렇게 URL로 파라미터 값을 넘기는데 이러면 보안에 문제가 생기겠죠..?
<POST 요청 처리하기>
POST 방식의 경우 GET 방식과는 다르게 URL에 파라미터 값을 넘기지 않습니다. GET방식보다는 안전하며 로그인 기능을 구현한다고 하면 POST 방식을 사용하는 것이 적합할 것입니다.
else if(req.method == 'POST'){
req.on('data', function(chunk){
console.log(chunk.toString());
var data = querystring.parse(chunk.toString());
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end('ID : ' + data.id + ' PW : ' + data.pw);
});
}
form에서 받은 데이터를 parsing 한 뒤 localhost:3000/login 페이지에는 data.id, data.pw를 출력을 하였습니다.
'🟩Node.js' 카테고리의 다른 글
| [Node.js] mongoose로 mongoDB 조작하기 (0) | 2021.11.04 |
|---|---|
| [Node.js] 공공데이터 포털 API 문서 Node.js로 크롤링 후 DynamoDB에 저장하기 (1) | 2021.10.31 |
| [Node.js] HTML을 Parse 하여 웹 정보 크롤링하기 (6) | 2021.04.24 |
| [Node.js] PM2로 Node.js 프로세스 편하게 관리하기 (2) | 2021.04.08 |
| [Node.js] Node.js로 웹서버 구축해보기 (0) | 2021.03.27 |