[Web/Node.js] Express 설치 및 웹페이지 연결시키기

Express 설치 및 웹페이지 연결시키기

1. Express 설치

express를 사용할 node.js 프로젝트 폴더로 이동합니다.
해당 폴더에서 아래 명령어를 수행합니다.

npm install express --save

설치를 하고 나면 package.json에 아래와 같은 dependency가 추가됩니다.

"dependencies": {
    "express": "^4.15.2"
  }

2. 웹페이지 연결

express를 이용해서 웹서버를 열고, 브라우저에서 접속했을 때 index.html을 나타내도록 해보겠습니다.

우선 index.html을 만듭니다. 위치는 프로젝트 루트에서 views라는 폴더를 만들고 그 안에 만들어 줍니다.

mkdir views
nano index.html

index.html의 내용을 적당히 채워줍니다. 되는지 먼저 봐야하니깐 화려할 필요는 없습니다.

그리고 npm 패키지 하나가 더 필요합니다. ejs 패키지 인데, 프로젝트 루트 위치에서 아래 명령어로 설치합니다. express 설치하는 것과 같습니다.

npm install ejs --save

ejs 패키지는 html 템플릿 엔진입니다. ejs에 대한 자세한 사항은 다음에 다시 살펴보도록 하겠습니다.

이제 메인이 되는 자바스크립트 코드를 아래처럼 작성합니다.

1 |var express = require('express');
2 |var app = express();
3 |
4 |app.set('views', __dirname + '/views');
5 |app.set('view engine', 'ejs');
6 |app.engine('html', require('ejs').renderFile);
7 |
8 |app.get('/',function(req,res){
9 |        res.render('index.html');
10|});
11|
12|var server = app.listen(80, function(){
13|        console.log("The server has started on port 80");
14|});

1번 줄은 express 패키지를 본 코드에서 사용할 수 있게 가져오는 것입니다. java에서의 import, c에서의 include와 유사합니다.
2번 줄은 express의 기능을 사용할 수 있는 객체를 가져오는 것입니다. 가져온 객체를 app이라는 이름의 변수에 담아서 express의 기능을 사용하는데 쓸겁니다.
4번 줄은 html 파일들을 위치시킨 경로를 설정하는 것입니다.
5,6번 줄은 html을 나타내는 엔진으로 ejs 패키지를 사용하다는 것입니다.
8번 줄은 '/'로 get요청이 오면 index.html 파일을 반환한다는 것입니다.
12번 줄은 80번 포트로 웹서버를 연다는 것입니다.

이렇게 작성하고 node로 자바스크립트를 실행하면 웹서버가 시작됩니다.
그리고 웹브라우저에서 해당 서버로 http 접속을 하면 index.html에 작성한 내용이 표시되는 것을 확인할 수 있습니다.
(80번 포트는 root 권한으로 웹서버를 실행시켜줘야합니다. 그래서 우분투에서는 sudo를 붙이도록 합니다.)