상세 컨텐츠

본문 제목

[node.js] express 웹서버

Server/node.js

by 클리엘 클리엘 2020. 6. 25. 01:11

본문

1. 설치 및 구동

 

node.js에서 express모듈은 웹서버를 만들 수 있도록 해줍니다. express모듈은 외부 모듈이므로 다음과 같이 설치합니다.

 

npm install express

그리고 임의의 js파일을 만들어 express모듈의 서버를 구동할 수 있도록 합니다. 여기서는 작성할 파일명을 test.js로 하겠습니다.

var express = require('express');

var server = express();

server.listen(8080, function() {
	console.log('Welcome to server!');
});

require('express')로 모듈을 추출한 다음 listen메서드로 서버 구동을 시작합니다.

 

node test.js

예제를 위해 node.js를 설치한 서버는 윈도우서버입니다. test.js파일 내용을 보면 포트를 8080으로 설정했으므로 서버에서는 8080 포트로 접속할 수 있게끔 포트를 열어줘야 합니다. 예제에서는 8080을 사용했지만 포트번호는 49981처럼 임의로 잡아도 무관합니다. 참고적으로 포트는 0~65535까지 설정할 수 있습니다.

 

포트를 열기 위해서는 우선 다음과 같이 방화벽설정을 열어서 설정을 잡아줘야 합니다.

 

Inbound Rules(인바운드 규칙)에서 오른쪽에 New Rule을 선택합니다.

 

Port(포트)를 선택합니다.

 

포트는 8080을 지정합니다.

 

Allow the connection(연결허용)을 선택합니다.

 

선택되어 있는 상태 그대로 진행합니다.

 

Name(이름)을 임의로 입력합니다.

 

이렇게 방화벽 규칙을 추가하면 이제 8080포트를 통해 서버에 접근할 수 있게 됩니다.

 

방화벽 설정을 끝내고 브라우저를 통해 접근해 보겠습니다.

 

현재 서버는 아무런 기능이 없기에 저런 에러가 나오는게 아닌가 싶습니다. 서버로 접근할 때 간단한 메시지를 표시하기 위해 파일을 다음과 같이 수정해 보겠습니다. js파일이 수정되면 node는 새로 구동되어야 합니다.

var express = require('express');

var server = express();

server.listen(8080, function() {
	console.log('Welcome to server!');
});

server.use(function (request, response) {
	response.send('<p>환영합니다.</p>');
});

use 메서드를 통해 서버로 접근이 이루어지면 '환영합니다.'라는 문구를 응답하도록 하였습니다.

 

use메서드는 다음과 같이 여러개 사용될 수 있습니다.

var express = require('express');

var server = express();

server.listen(8080, function() {
	console.log('Welcome to server!');
});

server.use(function (request, response, next) {
	console.log('first');
	next();
});

server.use(function (request, response, next) {
	console.log('second');
	next();
});

server.use(function (request, response) {
	console.log('third');

	response.send('<p>세번째 입니다.</p>');
});

만약 사용자가 서버에 접근하면 위에서 사용된 use순서대로 처리되며 이때 next매개변수는 다음 함수로의 이동을 의미합니다.

 

first부터 third까지 두번씩 접근한 것으로 표시되어 있는데 이는 웹브라우저가 파피콘을 자동으로 요청하면서 생기는 현상입니다.

 

2. 파일응답 (static)

 

이번에는 문자열외에 단일 파일을 응답하는 형태로 서버를 구성해 보겠습니다. js가 있는 곳에 default라는 폴더를 하나 만들어 두고

 

default안에 다음과 같은 index.html 파일을 하나 만듭니다. 참고로 폴더명과 파일명은 임의로 작성해도 상관없으나 예제에서는 파일명은 index.html로 하겠습니다.

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<p>테스트 파일입니다.</p>
	</body>
</html>

그리고 js파일을 다음과 같이 수정합니다.

var express = require('express');

var server = express();

server.use(express.static('default'));
server.use(function(request, response) {
	response.send('A file not find.');
});

server.listen(8080, function() {
	console.log('Welcome to server!');
});

첫번째 use메서드에서 express.static메서드를 통해 위에서 생성한 폴더명을 지정하였습니다. 위와 같이 작성한 후 서버를 재 구동한 뒤 접근해 보면

 

작성한 파일내용이 표시됨을 알 수 있습니다. js파일에서 두번째 use는 만약 이전에 static메서드에서 표시할 파일이 발견되지 않았을 때 다음 use를 호출하게 되는 경우를 대비한 것입니다.

 

파일은 index.html로 했으므로 서버접근시 별도의 파일을 지정하지 않아도 자동으로 index.html 파일을 찾게 됩니다. 만약 파일명을 test.html로 했다면 웹브라우저에서도 http://server2016.cliel.com/test.html'처럼 파일명을 맞춰줘야 합니다.

 

3. 기타응답처리

 

정적인 파일의 응답은 위에서 살펴보았습니다. 만약 json이나 xml 등 기타 다른 형식으로 응답하고자 한다면 해당 형식에 맞춰진 응답을 해주면 됩니다. 예컨대 html내용의 응답은 response.send() 메서드를 통해 ', <p> 응답 </p>'과 같이 html형식의 문자열을 그대로 사용해 응답을 처리했습니다.

 

반면 json형식의 데이터를 응답하고자 한다면 다음과 같이 할 수 있습니다.

var express = require('express');

var server = express();

var member = [
   {
      "name":"홍길동",
      "age":"30세",
      "address":"서울"
   },
   {
      "name":"홍길순",
      "age":"32세",
      "address":"대구"
   },
   {
      "name":"홍길남",
      "age":"28세",
      "address":"부산"
   }
];

server.use(function(request, response) {
	response.send(member);
});

server.listen(8080, function() {
	console.log('Welcome to server!');
});

위 예제는 json으로 응답하기 위해 json형식에 맞춰진 데이터를 생성하고 해당 데이터를 그대로 send() 메서드로 전달했습니다.

 

4. 라우트(route)

 

라우트를 사용하면 사용자가 특정 경로로 접근 시 각각의 경로마다 개별적인 응답을 수행할 수 있도록 구현할 수 있습니다.

var express = require('express');

var server = express();

server.use(express.static('default'));

server.all('/a', function(request, response) {
	response.send('<p>route a</p>');
});
server.all('/b', function(request, response) {
	response.send('<p>route b</p>');
});

server.listen(8080, function() {
	console.log('Welcome to server!');
});

라우트는 위와 같이 작성하며 이때 all 메서드는 모든 요청에 응답함을 의미합니다.

 

만약 post나 get요청에만 응답해야 한다면 all메서드 대신 다음과 같은 메서드를 사용할 수 있습니다.

 

get() get요청에 응답합니다.
post() post요청에 응답합니다.
put() put요청에 응답합니다.
dell() delete요청에 응답합니다.
all() 모든 요청에 응답합니다.

 

5. 요청 처리

 

get방식의 요청을 처리하려면 request.param() 메서드를 통해 get값을 추출합니다.

var express = require('express');

var server = express();

server.use(express.static('default'));

server.get('/a', function(request, response) {
	var data = request.param('data');
	var value = request.param('value');

	response.send('data : ' + data + '<br />' + 'value : ' + value);
});

server.listen(8080, function() {
	console.log('Welcome to server!');
});

위 예제는 get요청으로 data와 value라는 값을 추출해 사용자에게 표시하도록 한 것입니다.

 

http://localhost:8080/a/data 형식처럼 라우트를 통해 들어오는 요청 매개변수는 지정한 라우트를 해당 주소 형식으로 구현하면 됩니다.

var express = require('express');

var server = express();

server.use(express.static('default'));

server.all('/a/data', function(request, response) {
	response.send('<p>route data</p>');
});

server.listen(8080, function() {
	console.log('Welcome to server!');
});

하지만 /a/data나 /a/value처럼 라우트가 어떤 값으로 들어올지 알 수 없는 상황(동적 라우트)에서는 일일이 그에 대응하는 주소를 그대로 사용하기 힘들기 때문에 다음과 같이 처리해야 합니다.

var express = require('express');

var server = express();

server.use(express.static('default'));

server.all('/a/:route', function(request, response) {
	var route = request.params.route;

	response.send('<p>route ' + route + '</p>');
});

server.listen(8080, function() {
	console.log('Welcome to server!');
});

하지만 get 이외에 post나 put 등 기타 다른 요청에는 request의 params로는 값을 읽을 수 없습니다. 따라서 이런 경우에는 body를 이용해야 합니다.

 

post요청을 처리하기 위해 default에 있는 index.html 파일을 다음과 같이 수정합니다.

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<form name="login" method="post" action="/login">
			이름 : <input type="text" id="name" name="name"><br />
			비밀번호 : <input type="password" id="password" name="password"><br />
			<input type="submit" value="확인">
		</form>
	</body>
</html>

간단하게 login 처리하는 페이지를 흉내 내 본 것입니다. 보통의 경우 login은 전송하는 값을 노출하지 않도록 post로 보내는 것이 일반적입니다.

 

이제 test.js에 body를 통한 파싱 부분을 다음과 같이 추가합니다.

var express = require('express');

var server = express();

server.use(express.static('default'));
server.use(express.urlencoded({ extended: true }));

server.post('/login', function(request, response) {
	var name = request.body.name;
	var password = request.body.password;

	response.send('name : ' + name + '--' + 'password : ' + password);
});

server.listen(8080, function() {
	console.log('Welcome to server!');
});

urlencoded메서드는 url이 encoding 되어 들어오는 경우 값을 읽을 수 있도록 처리해 줍니다. 위와 같이 작성하고 페이지를 호출한 뒤

 

임의의 값을 입력하고 '확인'버튼을 누르면 정상적으로 속성 값이 처리됨을 알 수 있습니다.

 

 

'Server > node.js' 카테고리의 다른 글

[node.js] express 웹서버  (0) 2020.06.25
[node.js] 확장모듈  (0) 2020.06.22
[node.js] 설치및 구동  (0) 2020.06.21

태그

관련글 더보기

댓글 영역