node-express

  Node.js - Express

---

• Express 개요와 설치하기
• Express 개요
• Express 설치하기
• Express를 이용한 Web server
• Express를 이용한 Web server 예: Hello world
• Express를 이용한 Web server 예: GET method
• Express를 이용한 Web server 예: POST method
• Express를 이용한 Web server 예: Static Files

---

Express 개요와 설치하기

• Express 개요
• Express.js는 Node.js를 사용하여 쉽게 Web 서버를 구현할 수 있게 하는 클래스와 라이브러리의 집합체(Web framework) 이다. 그러므로, Express.js를 이용하면 효과적으로 Web 서버를 구축할 수 있다.
• Express.js는 Node.js 생태계에서 가장 인기 있는 웹 프레임워크 중 하나로, Express.js는 템플릿 작성, 정적 파일 처리, SQL 및 NoSQL 데이터베이스와의 연결과 같은 최신 웹 프레임워크의 모든 기능을 제공한다.
• Express.js는 Node.js API의 핵심 모듈 중 하나인 http를 기반으로 하는 connect 미들웨어 위에 구축되었다.
• Express.js는 빠르고 강력하며 확장 가능한 웹 애플리케이션을 용이하게 작성할 수있게 하는 유틸리티 세트이다.
• Express의 유용성
• Node.js에는 웹 서버가 내장되어 있기 때문에 http 모듈의 createServer() 메서드를 사용하여 비동기 http 서버를 시작할 수 있다.
• 그러므로, Node.js 기능만을 사용하여 웹 애플리케이션을 개발하는 것이 가능하다. 그러나 HTTP 요청 및 응답과 같이 낮은 수준 기능을 애플리케이션 작성자가 처리되어야 한다.
• Express은 HTTP 요청 및 응답과 같은 낮은 수준의 일반적인 작업을 처리하므로 개발자는 자신이 개발하고자 하는 애플리케이션에 보다 더 집중할 수 있다.
• Express의 중요 기능
• HTTP 요청에 응답하도록 미들웨어를 설정할 수 있다.
• HTTP 메소드 및 URL을 기반으로 다양한 작업을 수행하는 데 사용되는 라우팅 테이블을 정의한다.
• 템플릿에 전달된 인수를 기반으로 HTML 페이지를 동적으로 렌더링할 수 있습니다.
• Express 설치하기

아래와 같이 npm을 사용 하여 express와 body-parser를 설치 한다.

• Express 설치하기

아래 명령으로 npm을 사용 하여 express를 설치 한다.

npm install express --save

주: --save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미이다. 그러나 npm5 부터는 --save 옵션을 기본 옵션으로 적용하기 때문에 --save를 사용하지 않아도 dependencies에 항목이 자동으로 추가된다.

• body-parser 설치하기

아래 명령으로 npm을 사용 하여 body-parser를 설치 한다.

npm install body-parser

• Express를 설치한 다음 package.json 파일에서 설치 정보를 확인할 수 있다.
• 참고자료: expressjs.com Home
• 참고자료: npm: body-parser
• 참고자료: Node.js - Express Framework
• 참고자료: MDS web docs (Express web framework)


• Express를 이용한 Web server
• Express를 이용한 Web server 예: Hello world
• 실험을 위한 폴더(예: D:\node_js)를 만들고 아래 프로그램을 복사하여 저장(예: hello-express.js) 한다.
// Express module을 Load 하고 인스턴스를 생성한다. const express = require('express') const app = express(); // GET request의 url 종점(Endpoint)이 '/' 인 경우 실행되는 Callback function app.get('/', (req, res) => { res.send('Hello World!') }); // app.listen() method는 Node.js 웹 서버를 생성(port 번호: 8080)한다. // Web server를 시작하고 포트 8080에서 연결을 수신한다. app.listen(8080, () => { // listen method 실행후 실행되는 Callback function console.log('Example app listening on port 8080!') });
• DOS command 창을 열고 hello-express.js 파일이 있는 폴더(예: D:\node_js)로 이동한다.
• D:\node_js>node hello-express.js 명령를 실행 한다.
• Web browser를 열고 http://localhost:8080/ 으로 접속 하면 Browser에 "Hello World!" 메세지가 출력 된다.

주: localhost(IP: 127.0.0.1)는 네트워크 상에서 자신의 컴퓨터 주소를 뜻한다.



• Express를 이용한 Web server 예: GET method
• Express Object Routing
• 위 예(hello-express.js)의 app object는 HTTP requests(GET, POST, PUT 및 DELETE)를 app.get(), app.post(), app.put() 및 app.delete() 메서드를 사용하여 각각 처리할 수 있다.
• 각 메소드의 첫 번째 매개변수는 URL의 종점(Endpoint)을 나타내는 문자열(예: '/')이다.
• 두 번째 매개변수는 NodeJS 서버에서 제공되는 HTTP request 및 HTTP response 객체(이 객체는 Callback function에 전달되어 이용됨)이다.
• 이러한 메서드는 비동기식이며 Callback function에 Request 및 Response 개체를 전달한다.

주: 여기서는 자주 사용하는 app.get()와 app.post() 메소드를 이용한 Web server에 대하여만 설명한다.

• GET method를 사용하는 Web server 예: 1번
// Express module을 Load 하고 인스턴스를 생성한다. var express = require('express'); var app = express(); // path module을 Load 한다. var path = require('path'); // GET request의 url 종점(Endpoint)이 '/' 인 경우 실행되는 Callback function app.get('/', function (req, res) { // GET request의 url를 출력한다. let fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl; console.log('req get url: ' + fullUrl) // index-get.html File을 Client에 전송한다. res.sendFile(path.join(__dirname,"index-get.html")); }) // app.listen() method는 Node.js 웹 서버를 생성(port 번호: 8080)한다. // Web server를 시작하고 포트 8080에서 연결을 수신한다. var server = app.listen(8080, function () { // console에 메세지를 출력한다. console.log("Example app listening on port 8080!"); })

위 예는 Client 가 '/' 종점(Endpoint)를 방문할 때 GET 요청을 처리하는 예 이다. 윗 예에서,

• Request Object(req)는 HTTP Request는 request query string, parameters, body, HTTP headers 등에 대한 속성을 저장하고 있다. Callback function에서 이 속성을 이용할 수 있다.
• Response Object(res)는 Express 앱이 HTTP Request를 받고 Client에 전송할 응답(Response)을 저장한다. Callback function에서 이 Object에 Client에 전송할 응답을 설정하고, 이 Object의 send() 메서드를 사용하여 서버의 응답을 Client에 전송한다.
• 쿠키, 세션, URL 등 HTTP Request 와 Response 관련된 정보를 제공하는 Request 와 Response 개체를 Callback function에서 출력하여 확인 또는 이용 할 수 있다.
• Response Object의 sendFile() 메서드를 이용하여 지정된 파일을 응답으로 보낼 수 있다.
• GET method 실험
• 위 Code를 복사하여 express-get.js 파일로 저장한다.

아래 Code를 복사하여 express-get.js 파일이 있는 '/' 폴더에 index-get.html 로 저장한다.

<html> <body> <h2>Hello World!</h2> </body> </html>
• DOS command 창을 열고 express-get.js 파일이 있는 폴더(예: D:\node_js)로 이동한다.
• D:\node_js>node express-get.js 명령를 실행 한다.
• Web browser를 열고 http://localhost:8080/ 으로 접속 하면 Browser에 "Hello World!" 메세지가 출력 된다.
• DOS command 창에 출력된 url을 확인한다. 아래 예는 Host address: localhost, port 번호: 8080, url 종점(Endpoint): '/' 인 경우이다.

req get url: http://localhost:8080/

주: localhost(IP: 127.0.0.1)는 네트워크 상에서 자신의 컴퓨터 주소를 뜻한다.

• GET method를 사용하는 Web server 예: 2번

이 예는 HTML Form-data를 GET method를 이용하여 서버에 전송하는 예 이다.

• 아래 예는 url 종점(Endpoint)이 '/' 인 경우 "form-get.html" 파일을 Client에 전송하고, 종점(Endpoint)이 '/get_data' 일 경우 GET method로 수신한 req 객체의 first_name 과 last_name을 JSON Format으로 Client에 전송하는 예 이다.
const express = require('express') const app = express(); // GET request의 url 종점(Endpoint)이 '/' 인 경우 실행되는 Callback function app.get('/', (req, res) => { res.sendFile(__dirname + "/" + "form-get.html"); }); // GET request의 url 종점(Endpoint)이 '/get_data' 인 경우 실행되는 Callback function app.get('/get_data', function (req, res) { // GET request의 전체 url를 출력한다. let fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl; console.log('req get url: ' + fullUrl) // JSON format의 Response를 준비한다. response = { first_name:req.query.first_name, last_name:req.query.last_name }; // JSON format의 Response를 Console에 출력하고, console.log(response); // JSON format의 Response를 문자열로 변환하여 Client에 전송한다. res.end(JSON.stringify(response)); }) app.listen(8080, () => { console.log('Example app listening on port 8080!') });
• Form-data를 GET method를 이용하여 서버에 전송하는 실험
• 위 Code를 복사하여 express-form-get.js 파일로 저장한다.

아래 Code를 복사하여 express-form-get.js 파일이 있는 '/' 폴더에 form-get.html 로 저장한다.

<!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="/get_data" method="get"> <label for="first_name">First name:</label><br> <input type="text" name="first_name" value="YoungSu"><br> <label for="last_name">Last name:</label><br> <input type="text" name="last_name" value="Kim"><br><br> <input type="submit" value="Get Submit"> </form> <p>"Get Submit" button을 클릭하면 web 서버에 Get method로 data를 전송한다.</p> </body> </html>
• DOS command 창을 열고 express-form-get.js 파일이 있는 폴더(예: D:\node_js)로 이동한다.
• D:\node_js>node express-form-get.js 명령를 실행 한다.
• Web browser를 열고 http://localhost:8080/ 으로 접속 하면 Browser에 "HTML Forms"이 출력된다.
• Browser에 "HTML Forms"에 Data를 입력하고 "Get Submit" button을 클릭하면 web 서버에 Get method로 data가 전송된다.
• DOS command 창에서 url이 아래와 같이 출력되었는지 확인한다. 아래 예는 Host address: localhost, port 번호: 8080, url 종점(Endpoint): '/get_data', Get method로 전송된 Data: first_name=YoungSu&last_name=Kim 인 경우이다.

req get url: http://localhost:8080/get_data?first_name=YoungSu&last_name=Kim

• 새 Web browser에 서버로 부터 전송된 first_name 과 last_name이 아래와 같이 JSON Format으로 출력된다.

{"first_name":"YoungSu","last_name":"Kim"}



• Express를 이용한 Web server 예: POST method

이 예는 HTML Form-data를 POST method를 이용하여 서버에 전송하는 예 이다.

• 아래 예는 url 종점(Endpoint)이 '/' 인 경우 "form-post.html" 파일을 Client에 전송하고, POST method로 수신한 req 객체의 first_name 과 last_name을 JSON Format으로 Client에 전송하는 예 이다.
const express = require('express') const app = express(); // Use the express.json middleware app.use(express.json()); app.use(express.urlencoded({ extended: true })); // GET request의 url 종점(Endpoint)이 '/' 인 경우 실행되는 Callback function app.get('/', (req, res) => { res.sendFile(__dirname + "/" + "form-post.html"); }); app.post('/post_data', function (req, res) { const req_data = req.body; // JSON.stringify()는 JavaScript object를 string으로 변환한다. // console.log()는 Object를 직접 출력하지 못한다. dataSerial = JSON.stringify(req_data); console.log('req post data: ' + dataSerial) console.log('data first_name: ' + req_data.first_name) console.log('data last_name: ' + req_data.last_name) // JSON format의 Response를 준비한다. response = { first_name:req_data.first_name, last_name:req_data.last_name }; // JSON format의 Response를 Console에 출력하고, console.log(response); // JSON format의 Response를 문자열로 변환하여 Client에 전송한다. res.end(JSON.stringify(response)); }) app.listen(8080, () => { console.log('Example app listening on port 8080!') });
• Form-data를 POST method를 이용하여 서버에 전송하는 실험
• 위 Code를 복사하여 express-form-post.js 파일로 저장한다.

아래 Code를 복사하여 express-form-post.js 파일이 있는 '/' 폴더에 form-post.html 로 저장한다.

<!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="/post_data" method="post"> <label for="first_name">First name:</label><br> <input type="text" name="first_name" value="YoungSu"><br> <label for="last_name">Last name:</label><br> <input type="text" name="last_name" value="Kim"><br><br> <input type="submit" value="Post Submit"> </form> <p>"Post Submit" button을 클릭하면 web 서버에 Post method로 data를 전송한다.</p> </body> </html>
• DOS command 창을 열고 express-form-post.js 파일이 있는 폴더(예: D:\node_js)로 이동한다.
• D:\node_js>node express-form-post.js 명령를 실행 한다.
• Web browser를 열고 http://localhost:8080/ 으로 접속 하면 Browser에 "HTML Forms"이 출력된다.
• Browser에 "HTML Forms"에 Data를 입력하고 "Post Submit" button을 클릭하면 web 서버에 Post method로 data가 전송된다.
• DOS command 창에서 Post method로 전송된 Data(req.body) 가 아래와 같이 출력되었는지 확인한다.

req post data: {"first_name":"YoungSu","last_name":"Kim"}

data first_name: YoungSu

data last_name: Kim

• 새 Web browser에 서버로 부터 전송된 first_name 과 last_name이 아래와 같이 JSON Format으로 출력된다.

{"first_name":"YoungSu","last_name":"Kim"}



• Express를 이용한 Web server 예: Static Files

Express는 내장된 미들웨어 express.static을 이용하여 이미지, CSS, JavaScript 등과 같은 정적 파일을 Client에 제공할 수 있다.

정적 자산을 보관하는 디렉터리의 이름을 express.static 미들웨어에 전달하는 것 만으로 Client에서 파일 사용할 수 있다. 예를 들어, 이미지, CSS 및 JavaScript 파일을 public이라는 디렉토리에 보관한 경우 다음과 같이 파일을 전송할 수 있다.

var express = require('express'); var app = express(); // 'public' 디렉토리를 Static로 설정한다. app.use(express.static('public')); app.get('/', function (req, res) { // url이 'public' 디렉토리 내의 Static File을 지정하는 경우 File이 전송되고, // http://localhost:8080/로 연결하는 경우 아래 메세지가 Client에 전송된다. res.send('Static files serving'); }) app.listen(8080, () => { console.log('Example app listening on port 8080!') });
• 정적 파일(Static Files)을 이용하는 예
• 위 Code를 복사하여 express-static.js 파일로 저장한다.
• /public/images 디렉터리에 Image 파일 logo.png를 저장한다.
• DOS command 창을 열고 express-static.js 파일이 있는 폴더(예: D:\node_js)로 이동한다.
• D:\node_js>node express-static.js 명령를 실행 한다.
• Web browser를 열고 http://localhost:8080/images/logo.png 으로 접속 하면 Browser에 "logo.png" 이미지가 출력된다.
• 참고자료: ExpressJS Tutorial