node.js 와 Express 프레임워크 설치하고 hello world 웹페이지 작성하기

최근의 웹 프로그래밍 시장(?)은 매우 혼란스럽다.

과거의 HTML과 Server Side Script 혹은 CGI로 이루어지던 단순했던 웹 애프리케이션의 운영 환경은 점점 많은 이용자와 개발자의 요구사항이 반영된 CSS, JQuery의 등장, 그리고 HTTP 프로토콜의 단순한 데이터 전달 방식을 개선하기 위해 등장한 JSON(Java Script Object Notation), SOAP(Simple Object Access Protocol)와 같은 데이터 교환 프로토콜까지… 작은 웹서비스 하나를 개발하기 위해 개발자가 미리 공부해야 할 것이 너무도 많다.

게다가 웹의 서버 환경도 점점 다양해지고 있다.

아파치 웹서버가 전부였던 시절이 있었는데 Java 기반의 다양한 WAS(Web Application Server)가 등장해 개발자들을 혼란스럽게 하더니 요즘엔 Node.js 마저도 웹서버로 사용되고 있다.

Node.js 란 무엇인가?

Node.js가 웹서버라고???? 누군가에게 node.js가 웹서버란 이야기를 듣고 떠오른 생각이다. 적어도 내가 알기론 Node.js는 그냥 Java Script를 돌려주는 엔진이라고 알고 있는데… 어느새 웹서버의 기능을 갖고 있단 말인가 싶었다.

Node.js의 정확한 정의는 Node.js의 홈페이지에 명시되어 있다.

“Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.”

node.js는 웹서버가 아니다. node.js를 웹서버로 알고 있는 엔지니어나 개발자가 있다면 둘 중 하나다. 기초가 부실하거나 웹서버나 Java 기술 동향에 관심이 “전혀” 없거나….

크롬의 V8 자바스크립트 엔진은 PC에서 사용되는 Chrome 브라우저에 내장된 Java Script를 실행해주는 엔진이며 Node.js는 크롬에 내장된 V8 자바스크립트 엔진을 떼어내 여러 운영체제에 포팅한 Java Script 런타임이란 소리다.

흔히 이야기하는 java 런타임은 .java 로 작성된 Java 프로그램 소스를 컴파일하면 생성되는 .class 확장자를 가진 byte code 파일을 메모리에 로드하고 실행해주는 것이고 Node.js는 .js로 작성된 Java Script를 읽어 실행해주는 인터프리터 기반 런타임인 것이다.

IT쪽 일을 하거나 공부하는 학생이라면… 이정도 설명했으면… Node.js가 무엇인지 이해해야 한다. 적어도 Node.js가 웹서버란 소리는 하지 않기를 바란다.

Node.js 를 웹서버로 동작하게 해주는 Express 프레임워크

node.js 만으로는 웹서버를 구축할 수 없다. node.js가 읽고 실행할 수 있는 Java Script가 있어야 한다. 그리고 그 자바스크립트의 기능에 따라 node.js를 어떤 용도로 사용할 것인지가 결정된다.

Node.js가 가장 많이 활용되는 용도 중 하나가 바로 웹서버다. 하지만 분명한 것은 Node.js는 스크립트 엔진이다. 바이너리 엔진보다 성능이 떨어질 수 밖에 없다는 것을 알고 있어야 한다. 즉 많은 이용자의 동시접속을 보장해야 하고 빠르고 안정적인 속도를 제공해야 하는 웹서버로는 적당하지 않을 수 있다는 사실이다.

node.js를 설치하고 나면 node.js에서 사용 가능한 패키지를 관리해주는 NPM(Node Package Manager)이라는 툴도 설치해야 한다.

우분투 리눅스 기준으로 과정을 설명한다.

1. node.js 및 NPM 설치 (함께 설치됨)

taeho@ubuntu:~$ sudo curl -sL https://deb.nodesource.com/setup_10.x | sudo bash –

[sudo] password for taeho:

## Installing the NodeSource Node.js 10.x repo…

## Populating apt-get cache…

+ apt-get update

Hit:1 http://security.ubuntu.com/ubuntu disco-security InRelease

Hit:2 http://archive.ubuntu.com/ubuntu disco InRelease

Hit:3 http://archive.ubuntu.com/ubuntu disco-updates InRelease

Hit:4 http://archive.ubuntu.com/ubuntu disco-backports InRelease

Reading package lists… Done

## Confirming “disco” is supported…

taeho@ubuntu:~$ sudo apt-get install -y nodejs

Reading package lists… Done

Building dependency tree

Reading state information… Done

The following additional packages will be installed:

libpython2.7-minimal python-minimal python2-minimal python2.7-minimal

Suggested packages:

binfmt-support

Recommended packages:

libpython2.7-stdlib python python2 python2.7…..

이 두 명령으로 node.js와 npm이 설치 완료 된다.

다음엔 Node.js를 웹서버로 탈바꿈 시켜줄 웹서버 프레임워크를 설치해야 한다. 현재 가장 많이 사용되는 웹서버 프레임워크는 Express 라고 불리는 프레임워크고 시간이 지나면 KOA라는 Express 프레임워크 개발자들이 새롭게 개발한 프레임워크가 그 자리를 차지할 것으로 예상된다.

일단 현재 가장 많이 사용되는 Express 프레임워크를 설치한다.

2. Express 웹서버 프레임워크 설치하기

먼저 아파치 웹서버의 SERVER_ROOT와 비교될 수 있는 디렉토리를 생성해야 한다. 아래에서는 myapp 라는 디렉토리를 생성하고 myapp 디렉토리로 이동(cd)한 다음 그 위치에서 npm init 명령으로 node.js가 읽고 실행할 Express 프레임워크 패키지의 패키지 정보를 담고 있는 package.json 파일을 생성하도록 해준다.

taeho@ubuntu:~$ mkdir myapp

taeho@ubuntu:~$ cd myapp

taeho@ubuntu:~/myapp$ npm init

This utility will walk you through creating a package.json file.

It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields

and exactly what they do.

Use `npm install ` afterwards to install a package and

save it as a dependency in the package.json file.

Press ^C at any time to quit.

package name: (myapp)

version: (1.0.0)

description: first express app

entry point: (index.js)

test command:

git repository:

keywords:

author:

license: (ISC)

About to write to /home/taeho/myapp/package.json:

{

“name”: “myapp”,

“version”: “1.0.0”,

“description”: “first express app”,

“main”: “index.js”,

“scripts”: {

“test”: “echo \”Error: no test specified\” && exit 1″

},

“author”: “”,

“license”: “ISC”

}

Is this OK? (yes)

taeho@ubuntu:~/myapp$ ls -al

total 12

drwxr-xr-x 2 taeho root 4096 Dec 23 00:55 .

drwxr-xr-x 6 taeho root 4096 Dec 23 00:52 ..

-rw-r–r– 1 taeho root  218 Dec 23 00:55 package.json

taeho@ubuntu:~/myapp$

taeho@ubuntu:~/myapp$  npm install express –save     <—- Express 프레임워크 설치

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN myapp@1.0.0 No repository field.

+ express@4.17.1

added 50 packages from 37 contributors and audited 126 packages in 1.744s

found 0 vulnerabilities

taeho@ubuntu:~/myapp$ ls -l

total 24

drwxr-xr-x 52 taeho root  4096 Dec 23 00:59 node_modules      <—- Express 프레임워크가 설치된 Node_modules 디렉토리

-rw-r–r–  1 taeho root   268 Dec 23 00:59 package.json

-rw-r–r–  1 taeho root 14281 Dec 23 00:59 package-lock.json

taeho@ubuntu:~/myapp$

taeho@ubuntu:~/myapp$ npm install express    <– –save 설치 후 종속항목 설치를 위해 한번 더 설치진행

npm WARN myapp@1.0.0 No repository field.

+ express@4.17.1

updated 1 package and audited 126 packages in 1.146s

found 0 vulnerabilities

taeho@ubuntu:~/myapp$

3. 첫 웹페이지 작성하고 웹서버 구동하기

이제 아파치의 DocumentRoot에 해당(?)되는 디렉토리를 생성하고 그 디렉토리에 첫 웹페이지(?)인 index.js를 만든다.

taeho@ubuntu:~/myapp$ mkdir src

taeho@ubuntu:~/myapp$ cd src

taeho@ubuntu:~/myapp/src$ cat index.js

const express = require(‘express’);

const app = express();

app.get(‘/’, function (req, res) {

res.send(‘Hello World!’);

});

var server = app.listen(4000, function () {

var host = server.address().address;

var port = server.address().port;

console.log(‘Server is working : PORT – ‘,port);

});

index.js의 내용을 보면…. 일반적인 웹페이지의 소스가 아닌… java script로 무언가 이상한 내용들이 많이 들어가 있는 것을 볼 수 있다. 먼저 설치한 express 프레임워크를 통해 app라는 웹서버 인스턴스(?)를 생성하고 …

express 프레임워크의 get 이라는 메소드를 통해 진짜~ DocumentRoot에 해당되는 / 경로를 function()을 통해 Hello World! 라는 문자열을 보내는 것을 알 수 있다.

이 문자열에 HTML TAG를 다음과 같이 추가할 수 있다. 해당 문장을 수정해보자.

res.send(‘

Hello World !

‘):

그리고 다음라인에는 4000번 포트를 사용하여 Listen 하라는 명령도 볼 수 있다.

이제 다음의 명령을 통해 Express 프레임워크를 실행한다.

taeho@ubuntu:~/myapp/src$ ls -l

total 4

-rw-r–r– 1 taeho root 328 Dec 23 01:11 index.js

taeho@ubuntu:~/myapp/src$ node ./index.js

Server is working : PORT –  4000

이 명령을 실행하고 웹브라우저를 통해 접속하면 다음과 같은 웹페이지가 보이게 된다.

node.js 와 Express 프레임워크 설치하고 hello world 웹페이지 작성하기

태그로 강조된 Hello World!가 표시된다.

PHP나 JSP와는 참..너무도 다르다.

다음에 시간이 되면 Express와 MariaDB 연동에대해 포스팅하기로 한다.

#nodejs #node.js #express

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Scroll to Top