티스토리 뷰
Nuxt.js를 이용해 주로 싱글페이지 웹 (Single Page Applications) 을 개발하다보면
서버쪽에서 api를 호출해 정보를 넘겨받거나 넘겨줄 일이 있는데 그럴때마다 너무 두렵고,, 어렵고,,
그냥 서버, API라고 하는 단어만 들으면 겁부터 나는듯하다 @_@
그래도 일단 배운건 아는데로 정리를 해두는게 좋을듯하여 정리하쟈 정리!!
express라는 NodeJS 웹 애플리케이션 프레임워크를 통해 클라이언트 요청에 응답할 수 있는 함수를 구현할 수 있다.
const express = require('express');
const app = express();
라고 선언해주면 app은 express의 인스턴스가 된다.
app.get( "/test", ( request, response )=>{
.get()은 주소창에 정보가 고스란히 노출되어 보안에 취약하다.
.get()은 유저 정보를 조회를 요청하는 프로토콜이라고 해석한다.
});
app.post( "/test", ( request, response )=>{
.post()는 주소창엔 정보가 나타나지 않고 Resquest Playload를 통해 정보를 확인할 수 있다.
.post()는 새로운 유정 정보를 서버에 추가하는 요청이라고 해석한다.
});
app.get( ① , ② )의 첫번째 파라미터에는 ① = 서버자원을 가리키는 URI 문자열을
두번째 파라미터에는 ② = 라우팅 로직 함수를 콜백 형태로 구현한다.
test라는 주소의 메소드로 요청이 들어오면 두번째 파라미터에 구현한 함수가 동작하는 것이다.
콜백 함수의 request에는 클라언트 요청 정보가 담겨있고, response는 클라이언트 응답을 위한 객체가 되겠다.
requset에는 요청정보에 접근할 수 있는 request.query, request.query(), request.body 객체와 함수를 각각 제공하고 있다.
예) https://yoonlangcow.tistory.com/test?userId=yoonlangcow&userOffice=seongsu 라는 요청의 경우
.get(url, [,config])
app.get( "/test", ( request, response )=>{
request.query( 'userId' );
request.query( 'userOffice' );
});
.post(url, [,data [,config]])
app.post( "/test", ( request, response )=>{
request.body( 'userAge' );
});
를 통해 쿼리값을 확인 할 수 있다.
이때 request.body는 body-parser를 사용하지 않으면 기본값으로 undefined가 설정되어있기 때문에 undefined Error를 내게 된다.
따라서 body-parser를 설치하여 문제를 해결해야하지만 Express 버전이 업데이트 되면서 (Express v4.16.0 기준) 빌트인 body-parser를 제공하고 있기 때문에 아래와 같이 코드를 추가하여 쓴다면 request.body에 접근 할 수 있게 된다.
app.use(express.json());
app.use(express.urlencoded({extended:false}));
( * request.query에 { userId : 'yoonlangcow', userOffice : 'seongsu' }, request.body에 { userAge : 25 } 형태로 담겨 있음 )
라우트 로직을 구현한 뒤에는 요청한 클라이언트로 결과를 보내줘야 한다.
app.get( "/test", ( request, response )=>{
try{
response.writeHead( 200, {"Content-type" : "application/json"} );
response.end( JSON.stringify( request.query ) );
}catch(error){
response.writeHead( 400, {"Content-type" : "application/json"} );
response.end( "error" );
}
});
을 통해 response 값을 클라이언트로 보내줄 수 있다.
> server.js 폴더
const express = require('express');
const app = express();
app.use(express.json());
app.use(express.urlencoded({extended:false}));
app.get( "/test", ( request, response )=>{
try{
response.writeHead( 200, {"Content-type" : "application/json"} );
response.end( JSON.stringify( request.query ) );
}catch(error){
response.writeHead( 400, {"Content-type" : "application/json"} );
response.end( "error" );
}
});
app.post( "/test", ( request, response )=>{
try{
response.writeHead( 200, {"Content-type" : "application/json"} );
response.end( JSON.stringify( request.body ) );
}catch(error){
response.writeHead( 400, {"Content-type" : "application/json"} );
response.end( "error" );
}
});
'Frontend > Javascript' 카테고리의 다른 글
# 데이터 타입 (0) | 2020.10.21 |
---|---|
# TypeScript를 시작하며 (0) | 2020.09.29 |
# Javascript 클로저 (2) | 2020.08.30 |
# export / import (0) | 2019.10.31 |
# Excel export network error (1) | 2019.08.22 |