티스토리 뷰
1. 서버 요청 테스트 - Postman
서버를 만들기 위해서는 많은 어플리케이션이 사용됩니다. 실제 서버를 만들기 위해서 우린 물리적인 서버도 필요하고, 물리적 서버가 우리가 만든 서비스와 통신할 수 있도록 다양한 API의 설치가 필요합니다. 하지만, 우리가 서버를 구축하는 단계에서 이와 같이 모든 API 구성을 만들기란 상당히 까다롭습니다.
그래서 우리는 이 문제를 해결하기 위해 간단한 서버 테스트 API를 활용하게 됩니다. 대표적인 도구가 바로 Postman입니다. Postman 설치는 Chrome 웹스토어를 활용해 진행할 수 있습니다.
- Postman 설치 URL (Chrome Web Store)
https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop/related?hl=ko_KR
그 다음 크롬의 추가 버튼을 누르면 설치가 완료됩니다.
- Postman의 장점
- 웹 브라우저는 GET 요청만 가능한 반면, Postman에서는 GET, POST, PUT, DELETE 모두 가능하다.
- 요청 시, 우측에 params 버튼을 누르면 key와 value를 'key=value&key=value' 형태로 변환해 요청합니다.
- 요청에 대한 History가 자동으로 기록되며, 사용자가 원하는 경우 요청 저장 가능
한가지 주의사항은 서버 API이다보니 완전 무료는 아니라는 점입니다. Postman은 한달에 1000번의 요청만 가능합니다. 개인용이나 학습용으로 Postman을 사용할 생각이라면 1000번의 요청은 충분한 양이지만, 기업이나 영리목적으로 개발을 위한 사람에게는 턱없이 부족한 숫자입니다. 이 경우엔 유료 라이센스를 구매하던가, 다른 API를 사용할 것을 권장합니다.
- Postman 사용 방법
앞서 배운 간단한 웹 서버 구조를 통해 Postman을 어떻게 사용하게 되는지 알아보자.
1 2 3 4 5 6 7 8 | const http = require('http'); http.createServer(function (req, res) { res.writeHead(200); res.end('hello world'); }).listen(3000, function(){ console.log('server on : 3000port') }); | cs |
응답 종료 시, hello world를 출력하는 간단한 구조의 웹 서버 입니다. terminal을 이용해 해당 서버를 localhost에 올립니다.
node <웹 서버 파일 명(.js)>
우선 웹 브라우저를 사용해 결과를 봅시다.
해당 요청을 Postman에서 조회해봅시다. 웹 브라우저와 동일하게 URL에 localhost:3000을 입력합니다.
postman에서도 다음과 같이 동일하게 결과를 확인 할 수 있습니다.
2. 요청 객체 (resquest)
1 2 3 4 | http.createServer(function (req, res) { res.writeHead(200); res.end('hello world'); }) | cs |
http 서버에서 createServer를 클라이언트에서 요청하면 위와 같이 req, res 두 변수를 인자로 하는 콜백 함수를 만들어야 합니다. 이번 시간에는 웹 서버를 만드는데 사용되는 요청 객체(req)와 응답 객체(res)에 대해 알아보도록 하자.
요청 객체를 살펴보기 위해 console 함수를 통해 출력하면 상당히 많은 정보를 다루고 있음을 알 수 있다. 즉 우리가 어떤 요청을 웹 서버에 보내게 되는대 해당 요청을 위해 우린 상당히 많은 정보를 보내야 한다는 것을 의미한다. 이 정보를 우리가 모두 정의내릴 수 없다. 우리가 봐야하는 중요한 정보 3가지는 header, url, method 이다.
이 3가지 정보를 보기 위해 별도의 변수를 만들어 출력해보자.
1 2 3 4 | let url = req.url; let method = req.method; let header = req.headers; console.log(url, method, header) | cs |
- 요청객체 URL
요청 객체에서의 URL은 Path와 QueryString으로 구성되어 있다. 앞서 살펴본대로 Path는 웹 서버의 위치를 나타내주는 기느을 하고, QueryString은 변수를 전달하는 기능을 한다. 만약, console 메소드를 통해 url을 출력한다면 Path는 제외하고 QueryString만 출력되는 것을 알 수 있다.
만약 경로를 살펴보아야 한다면 우리는 req.url이 아닌 req.path를 사용해야 한다.
- 요청 객체 Body
body의 경우 요청 객체에서 바로 가져오지 못하고, 이벤트를 발생 시켜 데이터를 받아와야 한다. 만약 요청 객체의 확장을 원한다면 boby에 이벤트를 포함하고, 포함된 이벤트를 발생시켜 우리가 원하는 모듈 확장을 구현할 수 있다.
- req.body : 요청 객체의 body를 받아 옴
- 요청 객체 확장
앞서 배운 요청 객체의 구조를 활용해 우리가 원하는 객체 확장이 가능하다. 아래의 코드를 살펴보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | const http = require('http'); var fs = require('fs'); var url = require('url'); http.createServer(function (req, res) { var pathname = url.parse(req.url).pathname; if(pathname == '/') { // http://localhost:3000/ fs.readFile('index.html', function(err, data) { res.writeHead(200, { 'Content-Type' : 'text/html' }); res.end(data); }); } else if(pathname == '/1') { // http://localhost:3000/1 fs.readFile('1.html', function(err, data) { res.writeHead(200, { 'Content-Type' : 'text/html' }); res.end(data); }); } }).listen(3000, function(){ console.log('server on : 3000port') }); | cs |
만약 URL의 Path에 아무런 정보가 없다면 index.html 을 수생하고, 1이 입력되어 있다면 1.html을 수행하도록 만들었다. 각각의 html 코드는 다음과 같다.
<index.html>
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <head> <title> Index </title> </head> <body> <h1> index.html </h1> </body> </html> | cs |
<1.html>
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <head> <title> 1 </title> </head> <body> <h1> 1.html</h1> </body> </html> | cs |
수행 1)
URL : http://localhost:3000/1
수행 2)
URL : http://localhost:3000/
3. 응답 개체 (response)
응답 개체는 반대로 서버에서 사용자에게 데이터를 전달하기 위해 사용됩니다. 콜백 함수에서 두번째 인자로 사용됩니다.
- 응답 코드
응답 객체에 반드시 포함되는 것은 바로 응답 코드입니다. 응답 코드는 서버 요청이 정상적으로 이뤄졌는지 확인하기 위해서 http를 처음 만들때 모든 인터넷 사용자들이 약속한 코드입니다. 따라서, 응답코드의 경우 사용자가 임의로 바꿔서는 안됩니다.
1 2 3 4 5 6 7 | http.createServer(function (req, res) { res.writeHead(200); res.end('hello world'); }).listen(3000, function(){ console.log('server on : 3000port') }); | cs |
위의 웹 서버에서 응답 개체의 writeHead 함수에 인자가 '200'으로 설정되어 있습니다. 응답 코드 200은 '요청 처리가 성공적으로 이루어 졌음'을 의미합니다. 즉 응답 결과에 따라 writeHead 함수를 사용하여 응답커드를 설정합니다.
다음과 같은 방법으로도 응답 코드의 설정이 가능합니다.
1 2 | res.statusCode = 200; | cs |
주요 응답 코드는 다음과 같습니다. (이전에도 한번 배운 적이 있습니다.)
- 200 : 성공적으로 요청 처리
- 201 : 성공적으로 데이터를 추가함
- 404 : 요청한 리소스가 없음
- 500 : 서버의 문제로 에러 발생
- 응답 헤더 설정
응답 헤더를 설정하기 위한 함수는 writeHead와 setHeader를 사용합니다. writeHead에서는 두 번째 인자로 json 형태로 헤더를 설정해주고, setHeader에서는 첫 번쨰 인자로 헤더를 설정해주면 됩니다.
1 2 3 4 | res.writeHead(200, {'Content-Type': 'text/plain'}); res.setHeader('Content-Type': 'text/plain') | cs |
- 응답 바디 설정
데이터 전달은 응답 바디에서 진행됩니다. 응답 바디의 작업을 통해 사용자에게 html 페이지를 보여주는 예제입니다.
1 2 3 4 5 6 7 8 9 10 11 | const http = require('http'); http.createServer(function (req, res) { let resData = '<html><boby><h1> Response Body Example </h1></body></html>' res.writeHead(200, {'Content-Type': 'text/plain'}); res.end(resData); }).listen(3000, function(){ console.log('server on : 3000port') }); | cs |
위의 웹 서버를 호출하게 되면 다음과 같은 결과가 출력됩니다.
다음과 같이 resData가 출력되는 이유는 헤더에 설정한 'Content-Type'이 'text/plain'으로 설정되어 있어 resData 변수를 html 코드로 인식하지 못하고 있습니다. 따라서 이를 html로 인식하기 위해 'Content-Type'을 'text/html'로 변경합니다.
1 2 3 4 5 6 7 8 9 10 11 | const http = require('http'); http.createServer(function (req, res) { let resData = '<html><boby><h1> Response Body Example </h1></body></html>' res.writeHead(200, {'Content-Type': 'text/html'}); res.end(resData); }).listen(3000, function(){ console.log('server on : 3000port') }); | cs |
이제 아래와 같이 우리가 원하는 결과를 얻을 수 있습니다.
'Skill > Programming - Server & Client' 카테고리의 다른 글
| 19.[Node.js] Express (0) | 2020.03.29 |
|---|---|
| 18.[Node.js] GET, POST 요청 (0) | 2020.03.22 |
| 16.[Node.js] Node.js와 서버 요청 (0) | 2020.02.29 |
| 15. [Nuxt.js] Component (0) | 2020.02.23 |
| 14. [Nuxt.js] Layout (0) | 2020.02.16 |