기본 콘텐츠로 건너뛰기

[NodeJS] 파라미터 전달 - GET, POST

[NodeJS] 파라미터 전달 - GET, POST

들어가며

node.js에서 http모듈을 사용하여 데이터를 주고 받는 방식인 GET과 POST 방식에 대해서 포스팅을 하려고 합니다. 우리가 흔히 웹페이지를 요청하는 작업은 GET방식이고, id, pwd을 입력한 뒤에 결과를 받는 요청은 POST 방식이라고 할 수 있습니다. 하지만 요즘에는 GET방식 말고 POST방식만을 사용해서 구현한다고도 하더라구요. 이건 개발자가 어느 상황에 어떤 요청방식을 쓰느냐에 따라 결정되는 문제인것 같습니다.

GET 방식

http를 사용하기 위해서 require('http')를 사용하고, 최초 서버를 만드때 callback 함수를 구현했습니다. 아래 예제는 url로 parameter값을 넘기는 예제로 단점은 보안에 문제가 있겠죠. 그냥 password가 url로 함께 넘어가면 보안상 문제가 발생할 수 있습니다.

localhost:8888/?id=banana&pwd;=hong이라는 url을 해석을 할 줄 알아야 합니다. [HTTP] URL 구성과 의미를 참고하시면 됩니다. 일단 간단하게 설명해드리면 ?는 query를 의미하고 id=banana는 name=value를 의미합니다. 말로 해석을하면 localhost:8888로 요청을 보내는데 그때 id를 name으로 banana를 value로 해서 쿼리를 보내겠다는 의미입니다.

우리가 실제로 URL로 요청하게 되면 서버에서는 GET이라는 요청 메소드를 받아, 요청에 맞는 페이지를 우리에게 전송을 합니다. 네이버에서도 www.naver.com이라는 URL을 요청하면 그에 대한 페이지로 응답을 보내주는 것입니다.

아래 코드에서도 url이 요청이 오면 해당 url의 query를 parsing을 합니다. 이때 parsing을 하기 위해서는 url이라는 모듈을 사용하시면 쉽게 할 수 있습니다.

그럼 query에는 id와 pwd의 값이 담깁니다.

이렇게 담긴 내용을 Head와 함께 페이지를 클라이언트(브라우저)로 전송해주면 아래와 같은 실행결과 화면이 나옵니다.

소스코드

getParam.js

var http = require('http'); var url = require('url'); http.createServer(function(req, res){ var uri = req.url; var query = url.parse(uri, true).query; if(req.method == 'GET') { res.writeHead(200, {"Content-type": "text/html"}); res.end(" ID: " + query.id + ' pwd: ' + query.pwd ); } else if(req.method =='POST') { req.on('data', function(chunck) { console.log(chunk.toString()); var data = querystring.parse(chunk.toString()); res.writeHead(200, {'Content-Type':'text/html'}); res.end(' id : ' + data.id + ' pwd : ' + data.pwd ); }); } }).listen(8888, function(){ console.log('server running on 8888.'); });

실행결과

POST 방식

POST 방식은 GET방식과는 다르게 URL에 우리가 전달하고자 하는 값을 포함해서 요청하지 않습니다. 이 방법이 보안상으로는 GET방식보다 더 안전하겠죠. POST는 데이터 형태로 전달하기 때문에, 이미지, 파일 등을 전달할 수 있습니다. POST예제를 살펴보기 위해서는 아래 두개의 파일이 필요합니다. 데이터를 입력받고 전송하는 버튼이 있는 .html 파일과 POST요청을 받을 수 있는 postParam.js입니다.

아래 코드는 [오른쪽마우스] -> [소스보기]로 확인하실 수 있습니다. 일단 두개의 input을 받고 submit을 하면 POST로 요청하도록 만들어놓은 html 파일입니다.

./docRoot/form.html

ID: PWD:

postParam.js에서는 GET으로 위에 설명한 form.html의 페이지를 제공할 수 있는 코드와, form.html에서 submit을 클릭 했을때, post요청을 받아주는 코드가 필요합니다. req.method의 방식에 따라 두개의 분기문을 두었고, 하나는 GET, 또 다른 하나는 POST요청을 처리하도록 만들었습니다. GET요청을 먼저 보면 위에 form.html의 파일을 읽어서 데이터 형태로 전달하기 위해서 'fs'라는 모듈을 사용했습니다. POST요청은 chunk라는 데이터 형태로 전달이 되고, 'querystring'의 모듈을 사용해 데이터를 parsing하면, 전달한 id와 pwd를 얻어낼 수 있습니다. 마지막으로 얻어낸 id와 pwd를 클라이언트(브라우저)로 전달해주면 아래와 같은 실행 결과를 얻을 수 있습니다.

소스코드

postParam.js

var http = require('http'); var url = require('url'); var fs = require('fs'); var querystring = require('querystring'); http.createServer(function(req, res){ if(req.method == 'GET') { fs.readFile('./docRoot/form.html', function(err, 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 + ' pwd : ' + data.pwd) ; }); } }).listen(8888, function(){ console.log('server running on 8888.'); });

실행결과

from http://ourcstory.tistory.com/90 by ccl(A) rewrite - 2020-03-07 12:20:16

댓글

댓글 쓰기

이 블로그의 인기 게시물

[Mac OS X] 데스크탑 응용프로그램 개발시작

[Mac OS X] 데스크탑 응용프로그램 개발시작 현재 회사에서 다음 프로젝트로 Mac OS X를 개발해야 하는 일정이 생겨 난생 처음 데스크탑 응용프로그램을 개발하기 공부를 시작했고 여러가지 플랫폼이 있다는것을 발견했다. 어떤 플랫폼을 사용해야할 지 먼저 고민해보자. 무엇으로 개발할것인가? Xcode & Swfit or Objective-C Mac OS X 는 objective-c를 기반으로 만들어졌다. apple에서 제공하는 Xcode와 objective-c 혹은 Swift로 응용 프로그램을 만들 수 있다. Electron Electron 프레임워크를 사용하면 javascript, HTML, CSS를 사용하여 크로스 플랫폼 데스크탑 응용 프로그램을 만들 수 있다. react-native-desktop Qt 프레임 워크를 기반으로하는 크로스 플랫폼이다. react-native 와 javascript로 응용 프로그램을 만들 수 있다. Qt는 컴퓨터 프로그래밍에서 GUI 프로그램 개발에 널리 쓰이는 크로스 플랫폼 프레임워크. 각 플랫폼의 장단점은 무엇인가? Xcode & Swfit or Objective-C - 장점 모든 OSX API에 직접 접근할 수 있다. Xcode를 통해 App Store에 쉽게 배포할 수 있다. - 단점 Windows 전용 응용 프로그램을 다시 개발해야한다. Swift언어를 모른다면 새로 공부해야 한다. Electron - 장점 웹스택을 가지고 빠르게 만들 수 있다. 다양한 플랫폼을 지원한다. - 단점 Native언어로 개발할때 보다 성능이 떨어질 이슈가있다. OS X API를 사용하는데 복잡하다. *API에 대한 JavaScript 래퍼가 없으면 자체 래퍼를 작성하지 않는 한 프로젝트에서 사용할 수 없습니다. React-native-desktop - 장점 현재 개발스택과 완전히 동일하므로 더 빠르게 개발 할 수 있다. 다양한 플랫폼을 지원한다. - 단점 N...
댓글 쓰기
자세한 내용 보기

AWS CI/CD 파이프라인에 Slack 알람 적용(Lambda, CloudWatch Events 연동)

AWS CI/CD 파이프라인에 Slack 알람 적용(Lambda, CloudWatch Events 연동) 이번 글에서는 구축된 CI/CD 파이프라인과 Slack 알람을 연동하는 방법에 대해서 알아볼 것이다. CI/CD 파이프라인 시작/종료(성공/실패) 시 Amazon CloudWatch Events에서 해당 이벤트를 감지한 후 AWS Lambda로 트리거 신호를 보내면 AWS Lambda에서 Slack채널로 알람을 보내는 프로세스다. 글의 순서는 다음과 같다. Amazon CloudWatch Events, AWS Lambda란? 실습 전 준비사항 Slack Webhook 생성 AWS Lambda 함수 생성 AWS CloudWatch Events 생성 테스트 위와 같은 방식으로 구축을 하면 최종 프로세스는 다음 그림과 같다 (우리가 이 글에서 진행하는 내용은 빨간색으로 표시된 부분) 1. Amazon CloudWatch Events, AWS Lambda란? 1-1. Amazon CloudWatch Events란? Amazon CloudWatch Event(혹은 AWS CloudWatch Events)는 AWS 상태 변경 등을 감시할 수 있는 기능이다. 만약 사용자가 만든 규칙에 맞는 이벤트가 발생하게 되면 해당 이벤트가 사정에 정의된 규칙과 일치할 경우 하나 이상의 대상 작업을 호출한다. 이벤트 유형에 따라 알람을 보내거나, 이벤트 정보를 캡쳐하거나, 교정작업을 수행하거나, 이벤트를 시작하거나, 기타 작업을 수행할 수 있다. 이벤트가 발생할 경우 대상 작업은 AWS Lambda함수, AWS Kinesis 스트림, AWS SQS, Amazon SNS 등이 있다. 사용되는 사례로는 1) 이벤트가 발생하면 Lambda함수를 사용하여 Slack채널로 알림을 전달하거나, 2) AWS 상태 이벤트가 발생하면 Lambda 및 CloudWatch Events를 사용하여 Amazon SNS로 사용자 지정 텍스트 또는 SMS 알림을 보내는 등...
댓글 쓰기
자세한 내용 보기

[2020-angstromCTF] web - A peculiar query write-up

[2020-angstromCTF] web - A peculiar query write-up English write-up UI seems like below. If you click the 'the source' link, you can get back-end source code. const express = require("express"); const rateLimit = require("express-rate-limit"); const app = express(); const { Pool, Client } = require("pg"); const port = process.env.PORT || 9090; const path = require("path"); const client = new Client({ user: process.env.DBUSER, host: process.env.DBHOST, database: process.env.DBNAME, password: process.env.DBPASS, port: process.env.DBPORT }); async function query(q) { const ret = await client.query(`SELECT name FROM Criminals WHERE name ILIKE '${q}%';`); return ret; } app.set("view engine", "ejs"); app.use(express.static("public")); app.get("/src", (req, res) => { res.sendFile(path.join(__dirname, "index.js")); }); app.get("/", async (req, res) => { if (req.query...
댓글 쓰기
자세한 내용 보기