[Node.js 7강] 클라이언트-서버간 데이터(파라미터) 전송 방법과 REST방식 URL 설계

이제 Node.js에서 클라이언트에서 데이터를 전송하고 서버에서 데이터를 받아서 사용하는 방법을 알아보겠습니다. 

java + 스프링 프레임워크로 개발할 땐 편하게 파라미터를 받아서 사용했는데 Node.js에서는 데이터를 전송하는 방법에 따라 서버에서 사용하는 방법이 조금씩 다릅니다. 처음에 이것때문에 서버단에서 데이터가 계속 null로 찍혀서 한참을 고생했습니다. 

 

 

클라이언트-서버간 데이터(파라미터) 전송 방법

req.query.파라미터명

클라이언트에서 get방식으로 데이터를 넘길 때 서버단에서 받는 형태입니다.

//클라이언트
<a href='/club/?clubSn=34'>클럽상세</a>

//서버 
function(req, res){
	var mberCnt = req.query.clubSn;
}

 

req.body.파라미터명

html form에서 post 로 전송한 데이터, ajax를 통해 POST, PUT, DELETE 메서드를 이용해서 전송된 데이터를 서버에서 받는 형태입니다. 

req.body를 사용하려면 body-parser모듈을 사용하도록 web.js(app.js)에 설정해야 합니다. 

//web.js
var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.use(bodyParser.json()); // for parsing application/json

//클라이언트
<form method='post'>
<input type='password' name='password'>
</form>

또는 

$.ajax({ 
	url : '/club/pwd', 
	dataType :'json', 
	type: 'put', 
	data : { password : passwordChg, clubSn : CLUB_SN},
    ....
});


//서버
function(req, res){
  var pwd = req.body.password; 
  var clubSn = req.body.clubSn;
}

 

req.params.파라미터명

클라이언트에서 호출하는 URL에 가변적인 데이터를 세팅해서 보낼 경우 서버에서 받아서 사용하는 형태입니다.

서버의 라우트 경로에서 ':변수명' 형태로 설정하면 해당 데이터는 가변데이터를 의미합니다. 

//클라이언트
<a href='/club/34'>클럽</a>


//서버
router.get('/club/:clubSn', function (req, res) { 
	var clubSn = req.params.clubSn;
});

 

 

앞에서 살펴본것처럼 node.js에서 express 모듈을 사용할 때 다양한 라우팅 메소드(GET, POST, PUT, DELETE 등)를 제공하며, 클라이언트와 서버간 데이터를 전송하는 다양한 방법을 알아보다보니 자연스럽게 REST 에 대한 개념이 생각이 났습니다. 그래서 REST 구조를 이용해서 전체적인 URI 형태를 REST 형태를 적용하기로 했습니다.

REST 란?

위키백과에는 아래와 같이 명시되어 있습니다.

REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. 이 용어는 로이 필딩(Roy Fielding)의 2000년 박사학위 논문에서 소개되었다. 필딩은 HTTP의 주요 저자 중 한 사람이다. 이 개념은 네트워킹 문화에 널리 퍼졌다.
엄격한 의미로 REST는 네트워크 아키텍처 원리의 모음이다. 여기서 '네트워크 아키텍처 원리'란 자원을 정의하고 자원에 대한 주소를 지정하는 방법 전반을 일컫는다. 간단한 의미로는, 웹 상의 자료를 HTTP위에서 SOAP이나 쿠키를 통한 세션 트랙킹 같은 별도의 전송 계층 없이 전송하기 위한 아주 간단한 인터페이스를 말한다. 

 

핵심키워드는 '자원을 정의하고, 자원에 대한 주소를 지정하는 방법!' 네요.

 

REST = 리소스 + 메서드 + 메시지

 

예를 들어 테니스코어라는 이름의 클럽을 만든다 라고 했을 때

리소스는 '클럽', 메서드는 '만든다',  메시지는 '이름이 테니스코어' 를 의미하고, 

REST 형태에서는

HTTP POST, http://tenniscore.cafe24app.com/club/  

{ clubNm : '테니스코어' }

와 같이 구성됩니다.

 

실제 ajax에서 호출하는 형태로 보면 아래와 같습니다. 

$.ajax({
  url : '/club/',
  dataType : 'json',
  type : 'POST',	//생성은 POST 메서드 방식으로
  data : {clubNm :  '테니스코어'},
  success : function(data){

  },
  error: function(xhr,status, error){

  }
});	

 

HTTP 메서드는 CRUD를 의미하는 4가지를 사용합니다.

메서드	의미
POST	저장(insert)
GET	조회(select)
PUT	수정(update)
DELETE	삭제(delete)

 

기존 java를 이용한 웹서비스에서는 URL 에 저장, 조회, 수정, 삭제의 의미를 포함해서 호출했었는데 REST 형태에서는 메서드를 통해서 삭제인지 조회인지 등을 나타내야 합니다. 따라서 URL만 봐서는 삭제인지 조회인지 파악이 안됩니다. 

 

예를 들어 클럽 상세정보 조회의 호출 URL은 '/club/34' 이고, 클럽 삭제의 호출 URL 도 '/club/34' 입니다. 

동일한 URL을 호출했을 때 Node.js는 호출URL과 라우팅을 설정한 파일에 사용한 메서드를 이용해서 실제 수행할 라우터를 구분합니다. 

구분	클라이언트 호출	Node.js 라우팅 메서드
조회	<a href='/club/34'> 또는 ajax에서 type을 GET으로 호출	router.get('/club/:clubSn', function (req, res) {   clubDetail.detail(req, res); });
삭제	$.ajax({   url : '/club/34',   dataType : 'json',   type : 'DELETE',	router.delete('/club/:clubSn', function(req, res) { clubDetail.deleteClub(req, res); });

 

웹서비스를 개발할 때 조회, 저장, 수정, 삭제를 위와같은 패턴으로 호출하도록 설계했습니다. 

개발을 하다보니 단순한 화면이동을 제외하곤 저장, 수정, 삭제는 ajax를 이용해서 처리하게 되더군요. 아무래도 node.js가 비동기방식이다보니 저도 ajax로 처리하려고 노력했고, 결과값(성공, 실패, 에러)에 따라 사용자에게 적절하게 메세지를 보여주고 분기처리하는것도 편했습니다. 

 

지금까지 클라이언트 서버간 데이터를 주고받는 방법과 그에 따른 URI 패턴 설계 및 라우팅 메서드 사용하는 방법을 알아봤습니다. 다음 강좌에서는 데이터베이스를 연결하고 활용하는 방법을 알아보겠습니다. 

 

 

다음강좌 : 

2019/04/02 - [Node.js] - [Node.js 8-1강] mysql DB 연결하고 sql 결과 받아서 활용하는 방법