[nodejs 강좌] Node.js 를 이용해 웹애플리케이션 만들기 - 섹션 5. Express

1. Express 도입

webserver.js 예제 이해하기

const http = require('http'); //http 모듈 require

const hostname = '127.0.0.1';
const port = 1337;

// http.createServer((req, res) => { //서버 생성.
//     res.writeHead(200, { 'Content-Type': 'text/plain' });
//     res.end('Hello World\n');
// }).listen(port, hostname, () => {  //축약형
//     console.log(`Server running at http://${hostname}:${port}/`);
// });

var server = http.createServer(function(req, res){
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
});
server.listen(port, hostname, function(){
    console.log(`Server running at http://${hostname}:${port}/`);
});

아래의 코드는 위의 주석 처리된 코드를 풀어서 쓴 것으로 실행하면 동일한 결과가 나온다.

위와 같은 방법으로 웹 서버를 생성할 수도 있지만, 노드를 이용해서 만들어진 프레임워크를 사용해서 더 간단하게 웹 개발을 진행할 수 있다. 그러한 웹 프레임워크 중 하나가 바로 Express이다.

https://expressjs.com/

---

2. Express 설치

https://expressjs.com/ko/starter/installing.html
위의 가이드를 따라서 설치하면 된다. npm을 이용해서 설치하기 위해서 먼저 현재 디렉토리를 npm package로 만드는 npm init을 실행해야 되는데, 나는 이전 실습에서 이미 underscore를 다운받느라 npm init을 진행해뒀기 때문에 해당 부분은 생략했다.

npm install --save express

해당 명령어를 실행하고 package.json을 확인해보면 dependencies에 express가 추가되어 있는 것을 확인할 수 있다.

---

3. Express를 이용한 간단한 웹앱 만들기

공식 홈페이지에 있는 Express "Hello World" 예제를 따라해 볼 것이다.

https://expressjs.com/ko/starter/hello-world.html

먼저 app.js 파일을 만든다. 이 파일은 메인파일, 메인 application, entry application 이라고 부른다. 프로젝트를 시작하기 위해서 실행해야 하는 파일을 뜻하고, express에서 권장하는 main application의 이름이 app.js 이다.

var express = require('express'); // express 모듈 가져오기
var app = express(); // 가져온 모듈(함수)을 실행 하면 application 객체를 리턴한다.

app.listen(3000, function(){
    console.log('Connected 3000 port!');
}); // 3000번 포트 리스닝

위의 코드를 실행하고 'localhost/3030' 에 접속하면 Cannot GET / 이라는 문구가 뜬다. 서버는 제대로 만들어졌지만 라우터가 없기 때문에 발생하는 에러이다. 라우터를 추가해보자.

var express = require('express'); // express 모듈 가져오기
var app = express(); // 가져온 모듈(함수)을 실행 하면 application 객체를 리턴한다.

app.get('/', function(req, res){
    res.send('Hello home page');
}); // 사용자가 home으로 접속하면 실행되는 코드

app.get('/login', function(req, res){
    res.send('<h1>Login please</h1>');
}) // 사용자가 /login으로 접속하면 실행되는 코드
// --> router가 routing을 하는 것.

app.listen(3000, function(){
    console.log('Connected 3000 port!');
}); // 3000번 포트 리스닝

이러면 '/'으로 접속한 경우에는 'Hello home page' 라는 문구가 리턴되고, '/login' 으로 접속한 경우에는 'Login please' 라는 문구가 리턴된다. 이렇게 사용자의 접속 URL에 따라 컨트롤러를 연결해주는 것을 Router라고 하고 Router가 하는 일을 Routing이라고 한다.

Router

여기서 Routing과 Controller의 개념이 분리되는 것이 잘 이해가 가지 않았는데, 스프링에서 개발할 때는 Controller가 Routing의 역할을 함께 수행했던 것 같아서.. 검색해보니 다음과 같다고 한다.

Router:

Routing is the process of taking a URI endpoint (that part of the URI which comes after the base URL) and decomposing it into parameters to determine which module, controller, and action of that controller should receive the request.

Controller:

Controller implements a »Controller pattern, in which all requests are intercepted by controller and dispatched to individual Action Controllers based on the URL requested(that is routing request from Router).

그리고 프레임워크에 따라서 두 역할이 명확히 분리되지 않는 경우도 있다고 한다🤔
+) 하지만 더 검색해보니 스프링에서 라우터를 분리해서 사용하는 방법이 있는 것 같다..! 다음 스택오버플로우를 참고하자..

https://stackoverflow.com/questions/47092029/difference-between-controller-and-routerfunction-in-spring-5-webflux

---

4. 연결성🔥

• Javascript와 Node.js의 관계

Node.js가 제공하는 기본적인 기능 - FS, HTTP, OS ... - 들을 Javascript의 문법에 맞게 결합해서 사용.

 

• NPM과 Module의 관계

Module은 프로그램 안에서 부품으로 사용되는 작은 기능들.- Express, Underscore, Jade ... - NPM을 통해 모듈을 우리의 application에 담아서 사용할 수 있다.

 

• Router와 Controller의 관계

Router는 사용자의 요청을 어떤 컨트롤러에 전달해 줄 것인가 하는 중개자, 연결자의 역할

Controller는 기능(로직)에 따라 존재.

---

5. Express, 정적 파일을 서비스 히는 법

https://expressjs.com/ko/starter/static-files.html

app.js안에 아래 코드를 추가하면 public이라는 디렉토리에 위치한 정적인 파일을 서비스할 수 있다.

app.use(express.static('public')); // 정적인 파일이 위치한 디렉토리를 지정하는 기능

만약 public 안에 'test.txt' 라는 파일을 만든 후 'localhost:3000/test.txt' 로 접속한다면, test.txt의 내용이 화면에 보여진다.

 

다음과 같이 코드 안에서 사용할 수도 있다.

app.get('/route', function(req, res){
    res.send('Hello Router, <img src="/image.png">');
})

---

6. Express, 웹페이지를 표현하는 방법

정적인 웹페이지

public 디렉토리 안에 html파일을 위치시키면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello, Static!
    <ul>
        <li>coding</li>
        <li>coding</li>
        <li>coding</li>
        <li>coding</li>
        <li>coding</li>
    </ul>
</body>
</html>

'localhost:3000/static.html' 을 호출하면 해당 페이지가 보여지고,

정적인 파일을 수정할 경우 node application을 재부팅할 필요 없이 reload시키면 반영된다.

동적인 웹페이지

동적인 파일을 수정할 경우 node application을 재부팅해야 반영된다.

app.get('/dynamic', function(req, res){
    var lis = '';
    for(var i=0; i<5; i++){
        lis = lis + '<li>coding</li>'
    }
    var time = Date();
    var output = `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        Hello, Dynamic!
        <ul>
        ${lis}
        </ul>
        ${time}
    </body>
    </html>`;
    res.send(output)
})

app.js안에 해당 코드를 추가해서 'localhost:3000/dynamic'을 호출하면 웹페이지가 보여진다.

프로그래밍 코드를 이용해서 유지 보수가 용이하고, 시간과 같이 변하는 값을 출력하기 위해선 동적인 웹페이지를 사용해야 한다.