공부하는 블로그

Node.js | GET & POST 요청에 응답하기 본문

Node.js

Node.js | GET & POST 요청에 응답하기

치킨닮은닭 2019. 12. 17. 23:53

 GET과 POST는 http 프로토콜을 이용해서 서버에 무언가를 전달할 때 사용하는 방식이다. Node.js에서 GET과 POST 방식 요청에 응답하는 방법을 알아보자.

 

GET

 GET 방식은 서버로부터 정보를 조회하기 위해 설계된 메소드이다. GET은 요청을 전송할 때 필요한 데이터를 Body에 담지 않고 URL의 Query String을 통해 전송된다. 따라서 URL에 데이터에 대한 정보가 그대로 노출되므로 데이터를 숨겨서 전달해야 될 경우(ex. 로그인 시 회원의 아이디와 비밀번호 등)에는 부적합하다고 할 수 있다.  

 

 GET 요청은 URL의 Query String을 통해 전송되기 때문에 URL 모듈을 이용하여 URL을 파싱하면 손쉽게 전송된 데이터을 얻을 수 있다. 아래는 URL parsing에 관한 이전 포스팅이다.

 

 

Node.js | URL parsing - 요청에 응답하기

URL URL은 Uniform Resource Locator의 약자로 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 웹 사이트 주소뿐만 아니라 컴퓨터 네트워크상의 자원을 모두 나타낼 수 있다. URL의 시작은 컴퓨..

gongbu-ing.tistory.com

 

POST

 POST 방식은 리소스를 생성/변경하기 위해 설계된 메소드이다. GET과는 달리 전송해야 할 데이터를 HTTP 메세지의 Body에 담아서 전송할 수 있다. 따라서 POST 방식은 전송되는 데이터가 눈에 보이지 않아 GET보다 보안적인 면에서 안전하다. 그러나 POST 요청도 크롬 개발자도구나 Fiddler와 같은 툴로 요청 내용을 확인할 수 있기 때문에 민감한 데이터의 경우에는 반드시 암호화해서 전송해야한다. 또한 길이의 제한 없이 데이터를 전송할 수 있어 대용량 데이터를 전송할 수 있다.

 

 클라이언트로부터의 POST 요청을 서버에서 처리하여 요청에 알맞은 파일을 생성해보자. 아래의 html 코드는 클라이언트가 작성한 내용을 받기 위한 form이다. POST 요청에 대해 알아볼 것이므로 method='post'를 추가해주었다.

 

<!-- write.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>글쓰기</title>
    </head>
    <body>
        <h1>글쓰기</h1>
        <form action='/writeAf' method='post' accept-charset='utf-8'>
            <table>
                <tr>
                    <td>제목</td>
                    <td><input type='text' name='title'></td>
                </tr>
                <tr>
                    <td>내용</td>
                    <td><textarea name='content'></textarea></td>
                </tr>
                <tr>
                    <td><input type='submit' value='제출'></td>
                </tr>
            </table>
        </form>
    </body>
</html>

 

// server.js
// 모듈 import
var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');

// 서버 생성
var app = http.createServer(function (req, res) {
    var reqUrl = req.url;   // 클라이언트로부터 요청이 온 urlStr
    var parsedUrl = url.parse(reqUrl, true);  // 요청받은 urlStr -> urlObj로 변환
    
    var pathname = parsedUrl.pathname;
    console.log(pathname);

    if(pathname == '/') {
        fs.readFile(__dirname + '/main.html', function (err, result) {
            if(err) {
                console.log('file read fail.. : ' + err.message);
                res.writeHead(404, {'Content-Type' : 'text/html'});
                res.end('404 : NOT FOUND');
            }else {
                res.writeHead(200, {'Content-Type' : 'text/html'});
                res.end(result);
            }
        });
    }else if(pathname == '/write') {
        fs.readFile(__dirname + '/board/write.html', function (err, result) {
            if(err) {
                console.log('file read fail.. : ' + err.message);
                res.writeHead(404, {'Content-Type' : 'text/html'});
                res.end('404 : NOT FOUND');
            }else {
                res.writeHead(200, {'Content-Type' : 'text/html'});
                res.end(result);
            }
        });
    }else if(pathname == '/writeAf') {
        var body = '';
        req.setEncoding('utf-8');
        req.on('data', function (data) {
            body += data;   // post 방식으로 받은 데이터들이 query string 형식의 문자열 형태로 출력이 된다.
            dataObj = qs.parse(body);   // 문자열을 JSON Obj형식으로 변환
        });
        req.on('end', function () {
            var title = dataObj.title;
            var content = dataObj.content;

            // 요청받은 데이터를 이용하여 파일생성
            fs.writeFile(__dirname + '/data/' + title, content, function (err) {
                if(err) {
                    console.log('file write fail... : ' + err.message);
                    res.end('file write fail.....');
                }else {	// 파일작성이 에러없이 완료됬을 경우에는
                    res.writeHead(301, {'Location': '/'});	// 상태코드 301을 응답하여 redirection
                    res.end();
                }
            });
        });
    }else {
        res.writeHead(404, {'Content-Type' : 'text/html'});
        res.end('404 : NOT FOUND');
    }
});

// 포트번호 3000에서 서버 실행
app.listen(3000, function () {
    console.log('Server listens on port 3000...');
});

 

 클라이언트의 요청에 따라 알맞게 응답해주기 위한 서버코드를 간단히 작성해보았다. pathname이 '/writeAf'인 경우가 POST 요청을 처리하는 코드이다. body로부터 전송된 데이터를 받기 위해 'req.on()'을 사용했다. 전송된 데이터는 문자열 형태의 QueryString이므로 querystring 모듈의 'parse()' 함수를 사용하여 문자열 형태로 전송된 데이터들을 객체로 변환하여 각각의 정보를 가져왔다. 

 

· req.on() : EventEmitter로 이벤트이름과 이벤트 핸들러(Event Handler) 함수를 파라미터로 받아 클라이언트 요청에 따른 이벤트 발생 시 핸들러 함수를 콜백한다.
· qs.parse() :  문자열 형태의 QueryString을 JSON 타입의 객체로 변환하여 각각의 데이터 접근에 용이하게 해준다.

 

 전송받은 데이터들은 fs(File System) 모듈을 이용하여 텍스트파일로 저장('writeFile()')하였다. 성공적으로 저장된 경우에는 응답 헤더에 상태코드를 301로 설정하여 메인 페이지로 redirection 해주었다.

 

 

 

 

 

 

Comments