Node.js Express FrameWork 튜토리얼

이번 튜토리얼에서는 Express 프레임워크를 학습하겠습니다. 이 프레임워크는 단일 및 다중 페이지, 하이브리드 웹 애플리케이션 구축을 위한 강력한 기능 세트를 제공하는 최소한의 유연한 Node.js 웹 애플리케이션 프레임워크 역할을 하는 방식으로 구축되었습니다.

Express.js란 무엇인가요?

Express.js는 단일 페이지, 다중 페이지 및 하이브리드 웹 애플리케이션을 구축하기 위해 특별히 설계된 Node js 웹 애플리케이션 서버 프레임워크입니다.

이는 node.js의 표준 서버 프레임워크가 되었습니다. Express는 MEAN 스택으로 알려진 것의 백엔드 부분입니다.

MEAN은 무료 오픈 소스입니다. Java스크립트 다음 구성 요소로 구성된 동적 웹 사이트와 웹 애플리케이션을 구축하기 위한 소프트웨어 스택입니다.

1) MongoDB – 표준 NoSQL 데이터베이스

2) 익스프레스.js – 기본 웹 애플리케이션 프레임워크

3) Angular.js - Java웹 애플리케이션에 사용되는 스크립트 MVC 프레임워크

4) Node.js를 – 확장 가능한 서버측 및 네트워킹 애플리케이션에 사용되는 프레임워크입니다.

Express.js 프레임워크를 사용하면 GET, PUT, POST 및 DELETE 요청과 같은 여러 유형의 요청을 처리하는 데 사용할 수 있는 애플리케이션을 매우 쉽게 개발할 수 있습니다.

Express 설치 및 사용

Express는 Node Package Manager를 통해 설치됩니다. 명령줄에서 다음 줄을 실행하여 이를 수행할 수 있습니다.

npm 설치 익스프레스

위 명령은 노드 패키지 관리자에게 필요한 익스프레스 모듈을 다운로드하고 그에 따라 설치하도록 요청합니다.

새로 설치된 Express 프레임워크를 사용하여 간단한 "Hello World" 애플리케이션을 만들어 보겠습니다.

우리 애플리케이션은 포트 번호 3000에서 수신 대기하는 간단한 서버 모듈을 생성할 것입니다. 이 예에서 브라우저를 통해 이 포트 번호로 요청이 이루어지면 서버 애플리케이션은 클라이언트에 'Hello' World' 응답을 보냅니다. .

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

코드 설명 :

코드의 첫 번째 줄에서는 "express 모듈"을 포함하기 위해 require 함수를 사용하고 있습니다.
Express 모듈을 사용하기 전에 먼저 객체를 만들어야 합니다.
여기서는 콜백 함수를 생성합니다. 이 함수는 누군가가 웹 애플리케이션의 루트를 탐색할 때마다 호출됩니다. http://localhost:3000 . 콜백 함수는 'Hello World' 문자열을 웹페이지로 보내는 데 사용됩니다.
콜백 함수에서는 "Hello World" 문자열을 클라이언트에 다시 보냅니다. 'res' 매개변수는 콘텐츠를 웹페이지로 다시 보내는 데 사용됩니다. 이 'res' 매개변수는 콘텐츠를 웹페이지로 다시 보낼 수 있도록 'request' 모듈에서 제공하는 것입니다.
그런 다음 수신 대기 기능을 사용하여 서버 애플리케이션이 포트 번호 3000에서 클라이언트 요청을 수신하도록 합니다. 여기에서 사용 가능한 포트를 지정할 수 있습니다.

명령이 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음 출력이 표시됩니다.

출력:

출력에서,

로컬호스트의 3000번 포트로 URL을 탐색하면 페이지에 'Hello World'라는 문자열이 표시되는 것을 분명히 볼 수 있습니다.
우리 코드에서는 서버가 포트 번호 3000에서 수신하도록 특별히 언급했기 때문에 이 URL을 탐색할 때 출력을 볼 수 있습니다.

경로란 무엇입니까?

라우팅은 애플리케이션이 특정 엔드포인트에 대한 클라이언트 요청에 응답하는 방식을 결정합니다.

예를 들어, 클라이언트는 아래와 같은 다양한 URL에 대해 GET, POST, PUT 또는 DELETE http 요청을 만들 수 있습니다.

http://localhost:3000/Books
http://localhost:3000/Students

위의 예에서

첫 번째 URL에 대해 GET 요청이 이루어진 경우 응답은 이상적으로 도서 목록이어야 합니다.
두 번째 URL에 대해 GET 요청이 이루어진 경우 응답은 이상적으로 학생 목록이어야 합니다.
따라서 액세스되는 URL을 기반으로 웹 서버의 다른 기능이 호출되고 그에 따라 응답이 클라이언트로 전송됩니다. 이것이 라우팅의 개념이다.

각 경로에는 경로가 일치할 때 실행되는 하나 이상의 처리기 기능이 있을 수 있습니다.

경로의 일반적인 구문은 다음과 같습니다.

app.METHOD(PATH, HANDLER)

여기서,

1) 앱은 익스프레스 모듈의 인스턴스입니다.

2) METHOD는 HTTP 요청 메소드(GET, POST, PUT 또는 DELETE)입니다.

3) PATH는 서버의 경로입니다.

4) HANDLER는 경로가 일치했을 때 실행되는 함수이다.

Express에서 경로를 구현하는 방법의 예를 살펴보겠습니다. 우리의 예에서는 다음과 같이 3개의 경로를 생성합니다.

이 경로에 액세스하면 "Tutorial on Node" 문자열을 표시하는 /Node 경로
이 경로에 액세스하면 "Tutorial on Angular"라는 문자열이 표시되는 /Angular 경로
"Guru99 Tutorials에 오신 것을 환영합니다."라는 문자열을 표시하는 기본 경로입니다.

기본 코드는 이전 예제와 동일하게 유지됩니다. 아래 스니펫은 라우팅 구현 방법을 보여주는 추가 기능입니다.

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
}));

코드 설명 :

여기서는 URL이 다음과 같은 경우 경로를 정의합니다. http://localhost:3000/Node 브라우저에서 선택되었습니다. 경로에 노드 URL을 탐색할 때 호출되는 콜백 함수를 첨부합니다. 이 함수에는 2개의 매개변수가 있습니다.

우리가 사용할 주요 매개변수는 클라이언트에 정보를 다시 보내는 데 사용할 수 있는 'res' 매개변수입니다.
'req' 매개변수에는 수행 중인 요청에 대한 정보가 있습니다. 때로는 추가 매개변수가 요청의 일부로 전송될 수 있으므로 'req' 매개변수를 사용하여 전송되는 추가 매개변수를 찾을 수 있습니다.

노드 경로가 선택된 경우 보내기 기능을 사용하여 "Tutorial on Node" 문자열을 클라이언트에 다시 보냅니다.
여기서는 URL이 다음과 같은 경우 경로를 정의합니다. http://localhost:3000/Angular 브라우저에서 선택되었습니다. 경로에 Angular URL을 탐색할 때 호출되는 콜백 함수를 연결합니다.
Angular 경로가 선택된 경우 보내기 기능을 사용하여 "Tutorial on Angular" 문자열을 클라이언트에 다시 보냅니다.
이는 애플리케이션의 경로를 탐색할 때 선택되는 기본 경로입니다. http://localhost:3000. 기본 경로를 선택하면 "Guru99 Tutorials에 오신 것을 환영합니다"라는 메시지가 클라이언트에 전송됩니다.

명령이 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음 출력이 표시됩니다.

출력:

출력에서,

로컬호스트의 3000번 포트의 URL을 탐색하면 페이지에 'Guru99 Tutorials에 오신 것을 환영합니다'라는 문자열이 표시되는 것을 분명히 볼 수 있습니다.
코드에서 기본 URL이 이 메시지를 표시한다고 언급했기 때문입니다.

출력에서,

URL을 /Node로 변경하면 해당 Node 경로가 선택되고 "Tutorial On Node" 문자열이 표시되는 것을 볼 수 있습니다.

출력에서,

URL을 /Angular로 변경하면 해당 노드 경로가 선택되고 "Tutorial On Angular" 문자열이 표시되는 것을 볼 수 있습니다.

express.js를 사용하는 샘플 웹 서버

위의 예에서 라우팅에 따라 표시할 출력을 결정하는 방법을 살펴보았습니다. 이러한 종류의 라우팅은 대부분의 최신 웹 애플리케이션에서 사용됩니다. 웹 서버의 다른 부분은 Node js에서 템플릿을 사용하는 것입니다.

빠른 즉석 노드 애플리케이션을 생성할 때 쉽고 빠른 방법은 애플리케이션용 템플릿을 사용하는 것입니다. 시장에는 템플릿 제작을 위한 많은 프레임워크가 있습니다. 우리의 경우 템플릿 작성을 위한 jade 프레임워크의 예를 들어 보겠습니다.

Jade는 Node Package Manager를 통해 설치됩니다. 명령줄에서 다음 줄을 실행하여 이를 수행할 수 있습니다.

npm 설치 옥

위 명령은 Node 패키지 관리자에게 필요한 jade 모듈을 다운로드하고 이에 따라 설치하도록 요청합니다.

알림: 최신 버전의 Node jade에서는 더 이상 사용되지 않습니다. 대신 퍼그를 사용하세요.

새로 설치된 Jade 프레임워크를 사용하여 몇 가지 기본 템플릿을 만들어 보겠습니다.

단계 1) 첫 번째 단계는 옥 템플릿을 만드는 것입니다. index.jade라는 파일을 생성하고 아래 코드를 삽입하세요. "views" 폴더에 파일을 생성했는지 확인하세요.

여기서는 이 템플릿이 호출될 때 페이지 제목이 전달된 값으로 변경되도록 지정합니다.
또한 헤더 태그의 텍스트가 jade 템플릿에 전달된 내용으로 대체되도록 지정하고 있습니다.

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

코드 설명 :

애플리케이션에서 가장 먼저 지정해야 할 것은 템플릿을 렌더링하는 데 사용되는 "뷰 엔진"입니다. 템플릿을 렌더링하기 위해 jade를 사용할 것이기 때문에 이에 따라 이를 지정합니다.
render 함수는 웹 페이지를 렌더링하는 데 사용됩니다. 이 예에서는 이전에 생성된 템플릿(index.jade)을 렌더링하고 있습니다.
"Guru99" 및 "Welcome" 값을 각각 "title" 및 "message" 매개변수에 전달합니다. 이 값은 index.jade 템플릿에 선언된 'title' 및 'message' 매개변수로 대체됩니다.

명령이 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음 출력이 표시됩니다.

출력:

출력에서,

페이지 제목이 "Guru99"로 설정되고 페이지 헤더가 "Welcome"으로 설정되는 것을 볼 수 있습니다.
이는 노드 js 애플리케이션에서 호출되는 jade 템플릿 때문입니다.

요약

Express 프레임워크는 Node.js 애플리케이션을 개발하는 데 사용되는 가장 일반적인 프레임워크입니다. Express 프레임워크는 node.js 프레임워크 위에 구축되었으며 서버 기반 애플리케이션의 빠른 개발을 돕습니다.
경로는 요청에 따라 사용자를 웹 애플리케이션의 다른 부분으로 전환하는 데 사용됩니다. 각 경로에 대한 응답은 사용자에게 표시해야 하는 내용에 따라 달라질 수 있습니다.
템플릿을 사용하여 효율적인 방식으로 콘텐츠를 삽입할 수 있습니다. Jade는 Node.js 애플리케이션에 사용되는 가장 널리 사용되는 템플릿 엔진 중 하나입니다.

당신은 좋아할 것입니다 :

Express.js란 무엇인가요?

Express 설치 및 사용

관련 기사

경로란 무엇입니까?

express.js를 사용하는 샘플 웹 서버

요약