Node.js-Express 프레임 워크

Express 개요

Express는 웹 및 모바일 애플리케이션을 개발하기위한 강력한 기능 세트를 제공하는 최소한의 유연한 Node.js 웹 애플리케이션 프레임 워크입니다. 노드 기반 웹 애플리케이션의 신속한 개발을 촉진합니다. 다음은 Express 프레임 워크의 핵심 기능 중 일부입니다.

  • HTTP 요청에 응답하도록 미들웨어를 설정할 수 있습니다.

  • HTTP Method 및 URL을 기반으로 다른 작업을 수행하는 데 사용되는 라우팅 테이블을 정의합니다.

  • 템플릿에 인수를 전달하여 HTML 페이지를 동적으로 렌더링 할 수 있습니다.

Express 설치

첫째, 노드 터미널을 사용하여 웹 애플리케이션을 만드는 데 사용할 수 있도록 NPM을 사용하여 전역 적으로 Express 프레임 워크를 설치합니다.

$ npm install express --save

위의 명령은 설치를 로컬에 저장합니다. node_modulesnode_modules 내부에 익스프레스 디렉토리를 생성합니다. Express와 함께 다음과 같은 중요한 모듈을 설치해야합니다.

  • body-parser − JSON, Raw, Text 및 URL 인코딩 된 양식 데이터를 처리하기위한 node.js 미들웨어입니다.

  • cookie-parser − 쿠키 헤더를 구문 분석하고 쿠키 이름으로 키가 지정된 객체로 req.cookies를 채 웁니다.

  • multer − multipart / form-data를 처리하기위한 node.js 미들웨어입니다.

$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

Hello world 예

다음은 서버를 시작하고 포트 8081에서 연결을 수신하는 매우 기본적인 Express 앱입니다. 이 앱은Hello World!홈페이지에 대한 요청. 다른 모든 경로에 대해404 Not Found.

var express = require('express');
var app = express();

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

위 코드를 server.js라는 파일에 저장하고 다음 명령으로 실행합니다.

$ node server.js

다음 출력이 표시됩니다.

Example app listening at http://0.0.0.0:8081

브라우저에서 http://127.0.0.1:8081/을 열어 다음 결과를 확인합니다.

요청 및 응답

Express 애플리케이션은 매개 변수가 다음과 같은 콜백 함수를 사용합니다. request 과 response 사물.

app.get('/', function (req, res) {
   // --
})

  • 요청 객체 -요청 객체는 HTTP 요청을 나타내며 요청 쿼리 문자열, 매개 변수, 본문, HTTP 헤더 등에 대한 속성을 가지고 있습니다.

  • 응답 객체 -응답 객체는 Express 앱이 HTTP 요청을받을 때 보내는 HTTP 응답을 나타냅니다.

인쇄 할 수 있습니다. req 과 res 쿠키, 세션, URL 등 HTTP 요청 및 응답과 관련된 많은 정보를 제공하는 객체

기본 라우팅

홈페이지에 대한 HTTP 요청을 제공하는 기본 애플리케이션을 보았습니다. 라우팅은 애플리케이션이 특정 엔드 포인트 (URI (또는 경로) 및 특정 HTTP 요청 메서드 (GET, POST 등))에 대한 클라이언트 요청에 응답하는 방식을 결정하는 것을 의미합니다.

더 많은 유형의 HTTP 요청을 처리하도록 Hello World 프로그램을 확장 할 것입니다.

var express = require('express');
var app = express();

// This responds with "Hello World" on the homepage
app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET');
})

// This responds a POST request for the homepage
app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
})

// This responds a DELETE request for the /del_user page.
app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for /del_user");
   res.send('Hello DELETE');
})

// This responds a GET request for the /list_user page.
app.get('/list_user', function (req, res) {
   console.log("Got a GET request for /list_user");
   res.send('Page Listing');
})

// This responds a GET request for abcd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {   
   console.log("Got a GET request for /ab*cd");
   res.send('Page Pattern Match');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

위 코드를 server.js라는 파일에 저장하고 다음 명령으로 실행합니다.

$ node server.js

다음 출력이 표시됩니다.

Example app listening at http://0.0.0.0:8081

이제 http://127.0.0.1:8081에서 다른 요청을 시도하여 server.js에서 생성 된 출력을 볼 수 있습니다. 다음은 서로 다른 URL에 대해 서로 다른 응답을 보여주는 몇 가지 스크린 샷입니다.

다시 표시되는 화면 http://127.0.0.1:8081/list_user

다시 표시되는 화면 http://127.0.0.1:8081/abcd

다시 표시되는 화면 http://127.0.0.1:8081/abcdefg

정적 파일 제공

Express는 내장 된 미들웨어를 제공합니다. express.static 이미지, CSS, 자바 스크립트 등과 같은 정적 파일을 제공합니다.

정적 자산을 보관하는 디렉토리의 이름을 express.static미들웨어를 사용하여 파일을 직접 제공합니다. 예를 들어, 이미지, CSS 및 JavaScript 파일을 public이라는 디렉토리에 보관하면 다음과 같이 할 수 있습니다.

app.use(express.static('public'));

몇 개의 이미지를 public/images 다음과 같이 하위 디렉토리-

node_modules
server.js
public/
public/images
public/images/logo.png

"Hello Word"앱을 수정하여 정적 파일을 처리하는 기능을 추가해 보겠습니다.

var express = require('express');
var app = express();

app.use(express.static('public'));

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port

   console.log("Example app listening at http://%s:%s", host, port)
})

위 코드를 server.js라는 파일에 저장하고 다음 명령으로 실행합니다.

$ node server.js

이제 모든 브라우저에서 http://127.0.0.1:8081/images/logo.png를 열고 다음 결과를 관찰하십시오.

GET 방법

다음은 HTML FORM GET 메서드를 사용하여 두 값을 전달하는 간단한 예입니다. 우리는 사용할 것입니다process_get 이 입력을 처리하기 위해 server.js 내부의 라우터.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_get" method = "GET">
         First Name: <input type = "text" name = "first_name">  <br>
         Last Name: <input type = "text" name = "last_name">
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

위의 코드를 index.htm에 저장하고 server.js를 수정하여 홈페이지 요청과 HTML 양식에서 보낸 입력을 처리해 보겠습니다.

var express = require('express');
var app = express();

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.get('/process_get', function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.query.first_name,
      last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

http://127.0.0.1:8081/index.htm 을 사용하여 HTML 문서에 액세스하면 다음 양식이 생성됩니다.

이제 이름과 성을 입력하고 제출 버튼을 클릭하여 결과를 볼 수 있으며 다음 결과를 반환해야합니다.

{"first_name":"John","last_name":"Paul"}

POST 방법

다음은 HTML FORM POST 메서드를 사용하여 두 값을 전달하는 간단한 예입니다. 우리는 사용할 것입니다process_get 이 입력을 처리하기 위해 server.js 내부의 라우터.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_post" method = "POST">
         First Name: <input type = "text" name = "first_name"> <br>
         Last Name: <input type = "text" name = "last_name">
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

위 코드를 index.htm에 저장하고 server.js를 수정하여 홈 페이지 요청과 HTML 양식에서 보낸 입력을 처리해 보겠습니다.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/process_post', urlencodedParser, function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.body.first_name,
      last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

http://127.0.0.1:8081/index.htm 을 사용하여 HTML 문서에 액세스하면 다음 양식이 생성됩니다.

이제 이름과 성을 입력 한 다음 제출 버튼을 클릭하여 다음 결과를 볼 수 있습니다.

{"first_name":"John","last_name":"Paul"}

파일 업로드

다음 HTML 코드는 파일 업 로더 양식을 만듭니다. 이 양식에는 다음으로 설정된 메소드 속성이 있습니다.POST enctype 속성은 다음과 같이 설정됩니다. multipart/form-data

<html>
   <head>
      <title>File Uploading Form</title>
   </head>

   <body>
      <h3>File Upload:</h3>
      Select a file to upload: <br />
      
      <form action = "http://127.0.0.1:8081/file_upload" method = "POST" 
         enctype = "multipart/form-data">
         <input type="file" name="file" size="50" />
         <br />
         <input type = "submit" value = "Upload File" />
      </form>
      
   </body>
</html>

위의 코드를 index.htm에 저장하고 server.js를 수정하여 홈 페이지 요청과 파일 업로드를 처리해 보겠습니다.

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/file_upload', function (req, res) {
   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);
   var file = __dirname + "/" + req.files.file.name;
   
   fs.readFile( req.files.file.path, function (err, data) {
      fs.writeFile(file, data, function (err) {
         if( err ) {
            console.log( err );
            } else {
               response = {
                  message:'File uploaded successfully',
                  filename:req.files.file.name
               };
            }
         
         console.log( response );
         res.end( JSON.stringify( response ) );
      });
   });
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

http://127.0.0.1:8081/index.htm 을 사용하여 HTML 문서에 액세스하면 다음 양식이 생성됩니다.

File Upload:
Select a file to upload: 





NOTE: This is just dummy form and would not work, but it must work at your server.

쿠키 관리

다음 미들웨어 옵션을 사용하여 동일하게 처리 할 수있는 Node.js 서버에 쿠키를 보낼 수 있습니다. 다음은 클라이언트가 보낸 모든 쿠키를 인쇄하는 간단한 예입니다.

var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function(req, res) {
   console.log("Cookies: ", req.cookies)
})
app.listen(8081)
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2025 | All Rights Reserved