Nodejs - Express를 이용해 간단한 웹 앱 만들기

지난 포스팅에서 express를 설치해보았다. 그렇다면 이제 express를 이용해서 간단한 웹 앱을 만들어보자.

우선 atom 에디터를 열어 앞으로 메인파일이 될 app.js 파일을 생성한다.

app.js

var express = require('express');
var app = express();
app.listen(3000, function() {
    console.log('Connected 3000 port!');
});

app은 express의 인스턴스로 사용된다. 그리고 listen 메소드를 통해 3000번 포트를 listening 하게 하고 listening이 성공하면 콜백 함수를 통해 'Connected 3000 port!'를 출력하게끔 한다. 이를 한번 실행시켜보자.

위와 같이 서버가 연결되고 문구가 출력되는 것을 볼 수 있다.
이제 웹서버를 열고 localhost:3000 포트로 접속해보면..

위와 같이 error 화면이 뜬다. 이 것은 서버 연결은 성공했으나 아직 Router를 정의하지 않아서 생긴 오류이다. 즉, 브라우저에서 request가 왔을 때 서버에서 어떤 작업을 할 지 Router를 통해 설정해주어야한다. app.js 파일에

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

를 추가해보자. express는 get방식 또는 post방식을 통해 콜백 함수를 호출할 수 있는 메소드를 가지고 있다. 그리고 우리는 우리가 listening하고 있는 3000번 포트의 request(요청)에 대한 response(응답)을 해주어야 하는 것이므로 res.send 메소드를 통해 홈페이지에 접속했을 때 'Hello home page' 를 출력하게끔 해주는 것이다.

자 그럼, app.js 를 다시 실행하고 웹 서버를 통해 접속해보자.

우리가 작성한 Hello home page가 출력되었다.
만약, 우리가 홈페이지 주소가 아니라 로그인 주소로 접속했을 때, 어떠한 출력결과를 띄워야한다면 어떻게 하면 될까?
다음과 같이 작성해보자.

app.get('/login', function(req, res){
    res.send('Login please');
});

주소 창에 localhost:3000/login으로 접속하면 다음과 같이 우리가 send의 내용으로 입력한 'Login please'가 뜨는 것을 볼 수 있다.

우리는 지금까지 express의 get메소드를 이용해 어떠한 경로(주소)로 어떤 텍스트를 출력할 것인지를 세팅했다. 이 때, 우리가 get을 사용해서 get('/'), get('/login')과 같이 알맞은 주소값을 연결시켜주는 메소드를 Router(라우터)라고 하며 이 메소드가 하는일을 Routing(라우팅)이라고 한다.

Router

라우터는 네트워크 연결에 있어서 가장 중요하다고 해도 과언이 아니다. 네트워크는 크게 세 가지로 나눌 수 있다.

1. 웹에 접속해서 어플리케이션을 사용하는 사용자
2. 사용자와 컨트롤러를 연결하는 중개자인 라우터
3. 사용자의 요청을 처리해주는 컨트롤러

중간 다리인 라우터를 통하지 않고 사용자의 요청을 컨트롤러가 읽을 수 없고, 컨트롤러의 응답을 사용자가 받아볼 수도 없다. express에서는 http 요청메서드라고 해서 GET, POST, PUT, DELETE 와 같이 요청 주소에 각자의 방법으로 작업을 수행하는 메소드가 존재한다.
이처럼 중요한 역할을 수행하는 라우터.. 꼭 숙지하고 공부해봐야겠다.