nodejs로 Web Server 만들기

(Web Application 서버, Web API 서버 만들기)

 

 

[ Web Client - Web Server 구조 ]

 

목차

 

  1. nodejs 개발 툴 설치하기
    1. nodejs & npm 다운
    2. vsCode 다운
  2. nodejs 개발 프로젝트 생성하기
    1. nodejs 프로젝트 폴더 생성
    2. npm 프로젝트 파일 생성
  3. nodejs 프로젝트 개발하기
    1. vsCode 열기
    2. vsCode로 Terminal 열기
    3. 외부라이브러리 (express) 설치
    4. 외부라이브러리 (axios) 설치
    5. Web Appilication 서버 개발하기
    6. Web API 서버 개발하기
  4. nodejs 프로젝트 실행하기
    1. nodejs 프로젝트 실행
    2. 브라우저로 url 접속
    3. nodejs 프로젝트 종료

 

 

개발 환경

OS : macOS

IDE : Visual Studio Code

Server Platform : nodeJS

Dependency Library : express, axios

 

 

1. nodejs 개발 툴 설치하기

1-1. nodejs & npm 다운

Terminal에서 아래 명령어를 실행해서 nodejs와 npm을 다운로드합니다.

// nodeJS & npm 설치하기
$ brew install node

설치가 완료되었다면 아래 명령어로 어떤 버전의 nodejs와 npm이 설치되었는지 확인할 수 있습니다.

// 설치된 nodeJS 버전 확인하기
$ node -v

// 설치된 npm 버전 확인하기
$ npm -v

 

모든 nodejs 프로젝트들은 기본적인 뼈대 구조가 동일합니다. 이 말은 nodejs 프로젝트 코드를 다운 받으면 안에 구성되어 있는 폴더와 파일들의 구성이 동일하다는 것인데, 이 때문에 숙련된 nodejs 개발자들에게는 서로의 코드가 어떻게 구성되어 있는지를 빠르게 파악할 수 있게 해줍니다. 그래서 다른 사람이 개발한 nodejs 프로젝트를 다운받는다면, 개발자가 작성한 소스코드들은 정해진 곳에 위치해 있고, 개발자가 외부에서 개발된 다른 라이브러리들을 사용하고 있다면 해당 라이브러리 소스코드들도 정해진 곳에 위치하게 됩니다. 이처럼 nodejs 개발의 뼈대 구조를 동일하게 해주는 역할을 해주는 프로그램이 바로 npm (Node Package Manager)라는 프로그램이고, 추가적으로 이 npm은 개발자가 작성한 js 코드들을 빌드시키고, 테스트하고, 외부라이브러리를 가져와서 관리하기 등의 nodejs 프로젝트를 개발하기 위해 개발자가 필요한 대부분의 기능들을 지원하고 있기 때문에, nodejs 개발을 위해서는 반드시 필요한 프로그램입니다.

 

 

1-2. vsCode 다운

Browser에서 아래 URL 주소를 입력한 후 macOS용의 실행파일을 다운받아 설치합니다.

https://code.visualstudio.com/download

 

소스코드를 개발할 때, 코드의 변수 색깔들도 변하지 않는 메모장으로 개발하기는 힘듭니다. 따라서 소스코드 편집기가 필요한데, nodejs 프로젝으로 개발을할 때 많은 개발자들이 사용하는 소스코드 편집기가 바로 Visual Studio Code (=vsCode)입니다. 개발할 때 특별히 알고 있는 소스코드 편집기가 없다면 이 편집기를 사용하는 것이 좋습니다.

 

사실, nodejs 프로젝트를 개발할 때, 이 글에서 소개하는 방법처럼 반드시 vsCode 다운 받아두고 사용할 필요는 없습니다. 무료로 개발할 수 있는 방법을 소개했을 뿐이며, 유료 결제를 해서 좀 더 화려한 디자인과 기능들이 담겨져 있는 IntelliJ라는 개발 툴을 사용해서 개발해도 됩니다. 개인적으로, 실무에서는 두가지 편집기를 모두 혼용해서 개발하고 있기 때문에, 굳이 유료 결제를 해서 IntelliJ를 사용하지 않고 이 글에서 소개하는 것처럼 vsCode만으로 시작해도 개발에는 전혀 문제가 없을 것이라고 생각됩니다.

 

 

2. nodejs 개발 폴더 생성하기

2-1. nodejs 프로젝트 폴더 생성

Terminal에서 아래 명령어를 실행해서 "lec_nodejs" 폴더를 생성합니다. ("lec_nodejs"라는 폴더이름은 예시일 뿐, 다른 이름으로 만들어도 됩니다.)

// 워크스페이스 폴더 생성
$ mkdir lec_nodejs

// 워크스페이스 폴더로 진입
$ cd lec_nodejs

생성 후, 폴더로 진입이 완료되었다면, 아래 명령어로 현재 위치를 확인할 수 있습니다. (글쓴이의 경우 Home(="~" or $HOME)의 위치에 생성하였습니다.)

// 현재 위치 확인
$ pwd
/Users/joker/lec_nodejs

 

여기서 생성된 폴더를 앞으로는 프로젝트 폴더라고 부를 것입니다. 이 프로젝트(Project) 폴더에는 이 글에서 개발하려는 nodejs 프로젝트 관련 파일들이 모두 놓여지게 될 것입니다.

 

 

2-2. npm 프로젝트 파일 생성

Terminal에서 아래 명령어를 실행해서 npm 프로젝트 파일을 생성합니다.

// npm 프로젝트 파일 생성
$ npm init

package name: lec_nodejs
version: (1.0.0)
description: <-- 생략
entry point: <-- 생략
test command: <-- 생략
git repository: <-- 생략
keywords: <-- 생략
author: <-- 생략
license: (ISC)

위 명령이 정상적으로 완료되었다면, 현재 위치에 "package.json" 파일이 생성되었을 것입니다.

// npm 프로젝트 관련 파일 생성 확인
$ ls
package.json

"package.json" 파일이 생성되면 아래와 같이 기본적으로 몇가지 내용들이 작성되어 있습니다.

// package.json 파일 내용
{
  "name": "lec_nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {}
}

 

생성된 npm 프로젝트 관련 파일은 "package.json"이라는 하나의 파일입니다. 앞으로 글쓴이가 현재 글에서 개발하려는 프로젝트의 코드를 관리하기 위해 필요한 중요한 정보들이 이 파일에 담길 것입니다. 이 파일의 내용 중 일부는 개발자가 직접 수정해야하는 것이 있고, 일부는 자동으로 수정되는 것이 있습니다. 예를 들면, "name"필드나 "version"필드의 값은 직접 수정하지만, "dependencies"필드의 값은 직접 수정하지 않고 특정 명령어를 통해 수정하게 됩니다. 이 글에서는 각 필드가 무엇을 의미하는지에 대해서만 소개합니다.

 

  • package name : 패키지의 이름
  • version : 패키지의 버전
  • description : 패키지의 설명
  • entry point : 패키지 내에서 nodejs 서버를 실행했을 때, 외부 사용자가 접근하기 위한 메인 페이지 파일을 의미합니다. 만약에 다음 사이트가 nodejs로 개발되었고, 이 때 다음 사이트의 메인 페이지 파일이 index.html 파일이고, 이 파일의 내용을 다음 사이트에서 "http://www.daum.net/index.html"로 제공하고 있다면, 이 프로젝트의 "package.json" 파일 내에 entry point 값은 index.html 파일이 되는 것입니다.
  • test command : 패키지 내에서 nodejs 서버를 실행할 때, 개발자들의 편의를 위해 등록해놓은 매크로 명령어들을 의미합니다. 개발을 하다보면 자주 사용하는 명령어들을 미리 정의해두고 사용하는 경우가 많이 생깁니다. 현재 만들어둔 패키지의 소스 코드를 테스트하는 명령어, 현재 패키지의 소스 코드를 실행할 때 npm의 다른 몇가지 옵션을 추가해서 실행하기 위한 명령어 등등 빈번한 명령어지만 외우기 귀찮은 것들은 이곳에 미리 정의해두면, 쉽게 사용할 수 있습니다.
  • git repository : 패키지의 소스코드가 업로드 되어 있는 깃 주소를 의미합니다. 내가 개발한 코드를 오픈소스로 공개해서 다른 사람들이 모두 볼 수 있도록 한다면, 이 주소를 통해 원본 코드가 어디에서 관리되고 있는지 확인할 수 있습니다.
  • keywords : 패키지의 검색 키워드를 의미합니다. 내가 개발한 코드를 오픈소스 공간에 업로드하여 공개할 때, 내 프로젝트를 대표하는 키워드 몇가지를 이 곳에 등록해둔다면, 다른 사람들이 오픈 소스 프로젝트 사이트에서 검색할 때, 이때 작성해놓은 키워드들의 연관성이 높은 프로젝트들이 우선 검색되게 됩니다.
  • author : 패키지의 제작자
  • license : 패키지의 라이센스를 의미합니다. 내가 개발한 코드를 오픈소스 공간에 업로드하여 공개할 때, 다른 사람들이 내 프로젝트를 어느정도까지 사용할 수 있을지 범위를 제한할 수 있습니다. 라이센스의 종류에 따라, 내 코드가 완전 무료로 복제 후 수정까지 가능한 코드가 될지, 무료 사용은 가능하지만 수정은 불가능한 코드가 될지, 내 코드를 무료로 사용하지만 상업적으로 사용한다면 돈을 내야하는지, 내 코드를 내 허락없이는 사용할 수 없도록 만들지 등등의 사용 범위를 정할 때 중요한 역할을 하게 됩니다.

 

3. nodejs 프로젝트 개발하기

3-1. vsCode 열기

vsCode를 실행 한후, 위에서 만든 lec_nodejs 폴더를 열면 됩니다. (vsCode가 어색한 분들을 위해 아래 차례로 설명합니다.)

 

  1. vsCode를 실행한다.
  2. 기본으로 열려져 있는 welcome 창은 x를 클릭해서 닫는다.
  3. 왼쪽 상단에 두개의 문석 겹쳐진 아이콘(=Explorer)를 누른다.
  4. Open Folder를 누른다.
  5. lec_nodejs 폴더를 선택한다.
  6. 열기를 선택한다. 아래 그림처럼 화면에 2등분으로 나눠지는데, 왼쪽는 열려진 폴더인 lec_nodejs 를 기준으로 폴더와 파일들을 탐색기처럼 트리형태로 나열한 것이고, 오른쪽은 왼쪽에서 파일을 누를 때마다 해당 파일의 내용들이 출력될 것입니다. 앞으로는 이 두 개의 화면을 보면서 개발을 하면 됩니다.
  7. 간혹 아래 그림처럼 update now 가 나오는데, vsCode 업데이트를 할 것이냐고 묻는 것이므로, 업데이트를 진행해주면 됩니다.

[ vsCode 열기 그림 참고 ]

 

3-2. vsCode로 Terminal 열기

vsCode > 상단 메뉴의 [Terminal] > [New Terminal]

 

위 단계까지는 macOS의 기본 Terminal을 실행했었지만, 앞으로는 vsCode에서 제공하는 Terminal을 통해서 명령어들을 실행시킬 것입니다. vsCode를 열었다면 상단에 [Terminal]이라는 탭이 보일 것입니다. 탭에서 [New Terminal]을 선택하면 vsCode 안에 터미널 창이 하나 추가될 것입니다.

 

참고로, macOS 에서 실행한 기본 Terminal과 vsCode 에서 실행한 Terminal 에는 차이가 전혀 없습니다. 단지, 별도의 Terminal 창을 띄워두고 개발하면 창 전환하는 번거로움이 생기기 때문에 vsCode에서 제공하는 Terminal을 사용하는 것 뿐입니다.

 

 

3-3. 외부라이브러리 (express) 설치

vsCode의 Terminal에서 아래의 npm 명령어를 실행해서 express를 다운로드합니다.

npm install express --save

express 패키지 다운이 정상적으로 완료된 이후에는, "package.json" 파일의 내용이 변경된 것을 확인할 수 있습니다.

{
  "name": "lec_nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

 

express 라이브러리 패키지는 nodejs 위에서 http 서버 기능을 제공하는 함수들을 묶어놓은 패키지입니다. 이 패키지를 다운 받는 이유는 현재 개발 중인 nodejs 프로그램이 외부에서 내부로 http 통신으로 접근할 수 있도록 서버 기능들을 탑재시키기 위함입니다. 이 기능을 사용해서 이 글의 프로젝트에서는 사용자가 브라우저로 Web Server #1 (http://127.0.0.1:3000/index.html) 페이지를 여는 것이 가능하도록 할 것입니다.

 

 

3-4. 외부라이브러리 (axios) 설치

vsCode의 Terminal에서 아래의 npm 명령어를 실행해서 axios를 다운로드합니다.

npm install axios --save

axios 패키지 다운이 정상적으로 완료된 이후에는, "package.json" 파일의 내용이 변경된 것을 확인할 수 있습니다.

{
  "name": "lec_nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.0",
    "express": "^4.17.1"
  }
}

 

axios 라이브러리 패키지는 nodejs 위에서 http 클라이언트 기능을 제공하는 함수들을 묶어놓은 패키지입니다. 이 패키지를 다운받는 이유는 현재 개발 중인 nodejs 프로그램에 내부에서 외부로 http 통신으로 접근할 수 있는 클라이언트 기능들을 탑재시키기 위함입니다. 이 기능을 사용해서 이 글의 프로젝트에서는 사용자가 브라우저로 Web Server #1 (http://127.0.0.1:3000/lastTransacstion/BTC) 로의 URL 로 요청을 했을 때, 외부 서버인 Web Server #2 (https://api.bitthumb.com/public/ticker/)에서 가져온 응답 데이터를 포함해서 페이지로 출력하도록 할 것입니다.

 

참고로, Web Server #2로 사용되는 서버는 빗썸(Bitthumb)이라는 가상화폐 거래소에서 제공하는 마지막으로 처리된 트랜잭션 내용의 응답을 반환시켜주는 API 서버를 활용했습니다. 만약, 예시로 작성한 가상화폐 거래서 데이터가 아니라, 코로나 19의 현재 각 나라별 발생 현황 데이터를 제공하는 API 서버나 NewYork Times의 뉴스기사 데이터를 제공하는 API 서버 등이 있다면, 이러한 데이터들 또한 axios 라이브러리에서 제공하는 기능들을 사용해서 쉽게 데이터를 요청하고 응답받아 올 수 있습니다.

 

 

3-5. Web Application 서버 개발하기

Web Application Server는 웹 페이지들은 이쁘게 만들어서 사용자에게 출력시켜주는 것이 목적입니다. 따라서, Web Front 와 Web Backend 영역에는 코드를 아래처럼 구분지을 수 있습니다.

 

Web Front

  • html : 웹 페이지 구조를 잡는 것이 목적
  • css : 웹 페이지를 이쁘게 디자인 하는 것이 목적
  • javascript : 웹 페이지를 자연스럽게 이동시키고, Web Backend와 통신하는 것이 목적

Web Backend

  • 웹 페이지에 필요한 데이터들을 만들어서 Web Front로 응답하는 것이 목적

서버를 개발할 때, Web Front와 Web Backend의 영역이 모두 포함되어 개발할 수 있습니다. 이렇게 되면 하나의 프로젝트를 웹 프론트 개발자와 백엔드 개발자가 모두 참여해서 소스코드를 수정하는 형태가 될 것입니다. 이를 그림으로 그려보면 아래처럼 서버가 Front와 Backend가 영역은 구분되어 있지만 하나의 프로젝트 안에 포함되어 있습니다. 이러한 형태로 개발한다면, 하나의 프로젝트에 코드가 커질수록 관리하기가 힘들어지기 때문에, 조그만 프로젝트나 파일럿 수준 정도에서 많이 사용되는 개발 구조입니다.

 

[ Web Application Server 한 개 프로젝트로 개발하는 구조 ]

 

이번 항목에서 작성하는 Web Application Server 코드는 단 두 개의 파일로 구성되어 있습니다. 웹 페이지의 구조를 잡는 index.html 파일은 웹 서버에 있다가, 브라우저에서 http://127.0.0.1:3000/index.html 경로를 통해 웹 서버로 요청하면, 웹 서버는 index.js 파일에 작성해놓은 로직을 통해서 public 폴더에 해당 파일이 있는지 확인하고, 존재한다면 index.html 파일을 사용자의 브라우저로 전달한 후, 브라우저는 index.html 페이지를 출력하게 됩니다.

 

index.html 파일

//... /Users/joker/lec_nodejs/public/index.html

<html>
	<body>Hello, world!</body>
</html>

 

index.js 파일

//... /Users/joker/lec_nodejs/index.js

const express = require('express');
const app = express();
const axios = require('axios');

/**
 * 메인 웹 페이지 설정
 * public 폴더를 static 파일들(ex, html, css, jpg)을 위치로 지정한다.
 * 
 * example) 
 * http://127.0.0.1:3000
 * http://127.0.0.1:3000/index.html
 */
app.use(express.static('public'));

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  
  console.log('Server is working : PORT - ',port);
});

 

 

3-6. Web API 서버 개발하기

Web API Server는 Web Front의 요청에 따른 응답 데이터를 응답 시켜주는 것이 목적입니다. 따라서, Web Front 는 신경쓰지 않고 Web Backend 영역만 존재합니다.

 

Web Backend

  • 웹 페이지에 필요한 데이터들을 만들어서 Web Front로 응답하는 것이 목적

서버를 개발할 때, Web Front와 Web Backend의 영역을 완전히 분리해서 개발할 수 있습니다. 이렇게 되면 프로젝트 두개를 만들어서 하나는 웹 프론트 개발자만 사용하고, 다른 하나는 백엔드 개발자만 사용해서 소스코드를 수정하는 형태가 될 것입니다. 이를 그림으로 그려보면 아래처럼 서버가 Front와 Backend가 완전히 구분되어 있습니다. Front 영역에서는 사용자의 시각적인 부분, 행위적인 부분에 집중해서 UI/UX만을 위해 개발을 하면되고, Backend 영역에서는 사용자의 UI/UX는 전혀 관여하지 않고 데이터만을 가공해서 정확히 전달해주기면 한다면 시간이 지남에 따라 프로젝트 코드 양이 커진다고 해도 큰 부담이 없을 것입니다. 따라서 어느정도 수준 이상의 서비스를 제공하는 서버라면 이러한 형태로 개발이 됩니다.

 

[ Web Application Server을 두개 프로젝트로 개발하는 구조 ]

 

이번 항목에서 작성하는 Web API Server 코드는 단 하나의 파일로 구성되어 있습니다. 웹 서버에 "/lastTransaction/:currency" 의 주소를 등록해두었다가, 브라우저에서 http://127.0.0.1:3000/lastTransaction/BTC 경로를 통해 웹 서버로 요청하면, 웹 서버는 index.js 파일에 작성해놓은 로직을 통해서 빗썸의 API 서버에 비트코인(BTC)의 마지막 거래내역을 요청하고, 그 응답값을 사용자의 브라우저로 전달한 후, 브라우저는 데이터를 출력하게 됩니다.

 

index.js 파일

//... /Users/joker/lec_nodejs/index.js

const express = require('express');
const app = express();
const axios = require('axios');

/**
 * 암호화폐 거래소의 특정 코인의 마지막 거래 정보 가져오기 REST API
 * 
 * BTC, ETH, DASH, LTC, ETC, XRP, BCH, XMR, ZEC, QTUM, BTG, EOS
 * example) 
 * http://127.0.0.1:3000/lastTransaction/BTC
 */
app.get('/lastTransaction/:currency', function (req, res) {
    var currency = req.params.currency;
    getData(currency)
    .then(function(data){
        res.send(data);
    }).catch(function(err) {
        console.error(err); 
    });
});

function getData(currency) {
    return new Promise(async function(resolve, reject) {
        var result = await axios.get(`https://api.bithumb.com/public/ticker/` + currency);
        resolve(result.data);
    });
};

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  
  console.log('Server is working : PORT - ',port);
});

 

 

4. nodejs 프로그랢 실행

4-1. nodejs 프로그램 실행

vsCode의 Terminal에서 아래의 명령어를 실행해서 현재 코드를 nodejs로 실행시킵니다.

// nodejs 서버 실행
$ node index.js
Debugger attached.
Server is working : PORT -  3000

 

 

4-2. 브라우저로 url 접속

Browser에서 아래 URL 주소들을 입력합니다. 

// (Web Application Server) index.html 페이지 출력
http://localhost:3000/

// (Web API Server) 페이지 없이 응답 데이터만 출력
http://localhost:3000/lastTransaction/BTC

 

첫번째 주소를 입력하면 브라우저에는 index.html 페이지가 띄워지게 되고, 두번째 주소를 입력하면 브라우저에는 응답 데이터만 출력되게 됩니다. 

 

참고로, 실무에서는 일반적으로 서버를 두 종류로 구분해서 개발하고 있습니다. 하나는 첫번째 주소처럼 웹 페이지를 띄워서 서비스하는 형태로, www.daum.net, www.google.com, www.naver.com 처럼 브라우저 위에서 화면을 직접 뿌려주면서 서비스를 하는 것입니다. 이러한 서버를 개발자들은 Web Application 서버라고 부르는데, 이 경우 프론트 서버 개발자(Front Server Developer)들의 javascript, css, html 작업들이 많이 필요합니다.

 

다른 하나는 두번째 주소처럼 웹 페이지는 필요 없이 서비스하는 형태로, 위에서 빗썸 가상화폐 거래소를 예시로 들은 것처럼 데이터만 제공하는 서비스를 하는 것입니다. 이러한 서버를 개발자들은 Web API 서버라고 부르는데, API 서버를 개발할 때는 프론트 서버 개발자 없이 백엔드 개발자(Backend Server Developer)들로만 구성되어 개발됩니다. 화면에 보여지는 개발을 할 필요가 없기 때문입니다. 

 

 

 

4-4. nodejs 프로젝트 종료

vsCode의 Terminal에서 Ctrl + C 를  입력해서 실행 중인 nodejs를 종료시킵니다. 만약, nodejs 프로그램이 실행 중에 코드를 수정하고 저장했다면, 이 방법을 사용해서 종료시킨 후 다시 실행시켜주어야 합니다.

(서버 실행 중에 Ctrl + C를 눌러서 서버 종료)
^C

 

 

추가 설명

이 글을 따라 웹 서버 개발이 완료되었다면, 프로젝트의 폴더 구조는 아래와 같습니다.

lec_nodejs
|--public/
|  |--index.html
|--node_modules/
|--index.js
|--package.json
|--package-lock.json

프로젝트 폴더 구조를 보면, 직접 생성하지 않은 node_modules 폴더와 package-lock.json 파일이 보입니다. 이 두 개의 파일은 윗 단계에서 "npm install" 명령어를 실행할 때, 자동으로 생성된 것들입니다. "node_module" 폴더는 윗 단계에서 다운받은 "express"와 "axios" 라이브러리 패키지에 대한 소스코드들이 모두 담겨져 있습니다. npm은 실행할 때 필요한 외부 라이브러리가 있다면, "node_module" 폴더에 모두 다운받아두고 사용하게 됩니다. 실제로 "node_module" 폴더를 열어보면 다양한 이름의 패키지들이 있는 것을 확인할 수 있는데, "express"와 "axios" 라이브러리가 또 다른 라이브러리들을 참조해서 개발된 패키지이기 때문에, 의존하고 있는 모든 라이브러리들을 다운받게 된 것입니다. 그리고 npm은 이렇게 서로 의존적인 라이브러리들을 관리하기 위해 하나의 파일을 추가해서 관리하고 있습니다. 그 파일이 바로 "package-lock.json" 파일입니다. 이 파일 내용을 보면, "node_module" 안에 있는 라이브러리들에 대한 정보들이 작성되어 있는 것을 확인할 수 있습니다. 따라서, nodejs 프로젝트를 개발할 때, "node_module"과 "package-lock.json" 파일은 npm에 의해 자동으로 생성도는 것이니 개발자가 직접 수정하지 않아야 합니다.

 

 

참고 사이트

express에서 static파일들(ex, html, css, jpg, js)을 제공하는 방법 링크

웹 페이지 샘플 사이트 링크

 

저작자표시 비영리 변경금지

티스토리툴바