Express 웹서버 구동

익스프레스로 웹서버를 구동하는 방법에 대해서 알아보겠습니다.

익스프레스는 nodejs 웹 애플리케이션 프레임워크입니다.

조금 쉽게 설명하자면 웹서버도 만들 수 있고 다른 노드 패키지 메니저를 이용하여 웹사이트 개발을 할 수 있습니다.

이전의 개발 개념과는 조금 다르지만 같은 asp php처럼 개발을 할 수 있다는 이야기입니다.

먼저 익스프레스 설치를 위해서는 nodejs가 설치되어 있어야 합니다.

선행과정

• nodejs 설치 
• express 설치

app.js 에서 먼저 익스프레스를 익스프레스를 사용하겠다고 요구해야 합니다.

var express = require('express');

이렇게 되면 요구된 express 가 express 변수에 담기게 됩니다.

그럼 express 변수는 express()로 사용할 수 있게 되는데 , express() 안에는 많은 기능들이 존재합니다.

var app = express();

이렇게 만들어진  express()는 app 라는 변수에 담아 조금더 편하게 사용 할 수 있도록합니다. 그러다면 app 은 앞으로  express 라고 생각하시면 되고 express의 기능들을 app이라는 변수를 통하여 사용할 수 있습니다.

아래 코드로 웹서버를 생성할 수 있습니다.

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

nodejs에는 http로 웹서버를 생성할 수 있지만 express에서는 이를 좀 더 쉽게 만들어 줍니다.

이 express의 기능이 들어있는 app 안에 기능 중 listen 의 사용법을 보면  첫 번째 인자에는 포트번호 그리고 콜백 함수로 이에 대한 후처리 작업을 정의할 수 있습니다. 예제에는 3000번 포트로 서버가 정상적으로 실행되었다는 메시지가 출력 되고 console를 실행하였습니다.

이제 터미널로 들어가 아래 명령어를 치시면 "Example app listening on port 3000!"이라는 메시지가 나오면서 실제 웹서버가 구동되며 http://localhost:3000을 입력할 시 페이지가 나오긴 하지만, 페이지가 나오지는 않습니다. 

왜냐면 보여줄 페이지를 만들지 않았기 때문에 최초에 들어오는 페이지를 만들어줘야 합니다. 

이럴 때 라우트를 사용하여 페이지를 만들 수 있습니다.

app.get('/', function (req, res) {
  res.send('Hello World!');
});
 

위와 같이 get이라는 기능을 통하여 페이지를 생성할 수 있습니다. get의 첫 번째 인자에는 / 를 넣어 localhost:3000으로 들어왔을

콜백이 실행되고 이 콜백은 응답과 요청을 합니다. 

아래 코드에는 res.send라고 되어있습니다. 이것을 나름대로 해석하면....

"/" 으로 들어왓을때 보내기를 요청한다 Hello world라는 문자를 !

 

그러면 터미널 화면에서 Ctrl + C를 눌러 app.js를 종료하고 다시 node app.js를 실행한 다음 브라우저에서  localhost:3000을 입력하면 브라우저 화면에  "hello world"가 출력되는 것을 확인할 수 있습니다.

전체소스

var express = require('express');
var app = express();
 
app.get('/', function (req, res) {
  res.send('Hello World!');
});
 
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});