Node.js Express.js 프레임워크 튜토리얼

이 튜토리얼에서는 Express 프레임워크를 살펴보겠습니다. Express 프레임워크는 최소한의 기능으로 유연하게 사용할 수 있는 Node.js 웹 애플리케이션 프레임워크로, 단일 페이지, 다중 페이지 및 하이브리드 웹 애플리케이션을 구축하는 데 필요한 강력한 기능을 제공합니다.

Express.js란 무엇인가요?

Express.js는 Node.js 기반 웹 애플리케이션 서버 프레임워크로, 단일 페이지, 다중 페이지 및 하이브리드 웹 애플리케이션 구축에 특화되어 설계되었습니다.

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

Express는 Node.js의 핵심 HTTP 계층 위에 라우팅 및 미들웨어를 제공합니다. 스트림 및 이벤트 API.

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

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

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

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

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

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

Express 설치 및 사용

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

npm 설치 익스프레스

위 명령은 Node Package Manager에게 필요한 Express 패키지를 다운로드하도록 요청합니다. 모듈 그리고 그에 맞게 설치하십시오.

버전 참고: npm은 이제 Express 5.2를 설치하지만, 여전히 많은 프로젝트에서 Express 4를 사용하고 있습니다. 아래 예제는 모두 실행 가능합니다. 지원되는 Node.js 릴리스.

새로 설치된 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() {});

Code 설명 :

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

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

출력:

출력에서,

• 둘러보시면 분명히 알 수 있습니다. URL localhost의 3000번 포트로 접속하면 페이지에 'Hello World'라는 문자열이 표시됩니다.
• 우리 코드에서 서버가 3000번 포트에서 수신 대기하도록 명시적으로 지정했기 때문에 해당 주소로 접속하면 출력을 볼 수 있습니다. URL.

경로란 무엇입니까?

단일 루트 경로는 단지 시작점일 뿐입니다.

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

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

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

위의 예에서

• 첫 번째에 대해 GET 요청이 이루어지면 URL그렇다면 이상적으로는 책 목록이 답변이 되어야 합니다.
• 두 번째에 대한 GET 요청이 이루어지면 URL그렇다면 이상적으로는 학생 목록이 답변으로 제공되어야 합니다.
• 그래서 다음을 바탕으로 URL 클라이언트가 특정 페이지에 접근하면 웹 서버의 다른 기능이 호출되고, 그에 따라 응답이 클라이언트로 전송됩니다. 이것이 바로 라우팅의 개념입니다.

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

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

app.METHOD(PATH, HANDLER)

여기서,

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

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

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

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

⚠️ 급행 5 참고 사항 : 이러한 서명은 변경되지 않았지만 app.del()은 app.delete()로, res.sendfile()은 res.sendFile()로 변경되었으며 와일드카드는 이제 /*splat과 같은 이름을 사용해야 합니다.

Express에서 라우트를 구현하는 방법을 예시를 통해 살펴보겠습니다. 이 예시에서는 다음과 같이 3개의 라우트를 생성합니다.

1. 이 경로에 액세스하면 "Tutorial on Node" 문자열을 표시하는 /Node 경로
2. 이 경로에 액세스하면 "Tutorial on Angular"라는 문자열이 표시되는 /Angular 경로
3. 기본 경로(/)를 입력하면 "Welcome to"라는 문자열이 표시됩니다. Guru99개의 튜토리얼."

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

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');
});

Code 설명 :

1. 여기서는 경로를 정의하고 있습니다. URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URL이 함수는 매개변수가 2개 있습니다.
   • 우리가 사용할 주요 매개변수는 클라이언트에 정보를 다시 보내는 데 사용할 수 있는 'res' 매개변수입니다.
   • 'req' 매개변수에는 수행 중인 요청에 대한 정보가 있습니다. 때로는 추가 매개변수가 요청의 일부로 전송될 수 있으므로 'req' 매개변수를 사용하여 전송되는 추가 매개변수를 찾을 수 있습니다.
2. 노드 경로가 선택된 경우 보내기 기능을 사용하여 "Tutorial on Node" 문자열을 클라이언트에 다시 보냅니다.
3. 여기서는 경로를 정의하고 있습니다. URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
4. Angular 경로가 선택된 경우 보내기 기능을 사용하여 "Tutorial on Angular" 문자열을 클라이언트에 다시 보냅니다.
5. 이는 애플리케이션의 루트(http://localhost:3000)로 접속할 때 선택되는 기본 경로입니다. 기본 경로가 선택되면 "Welcome to"라는 메시지가 표시됩니다. Guru"99개의 튜토리얼"이 고객에게 발송될 예정입니다.

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

출력:

출력에서,

• 둘러보시면 분명히 알 수 있습니다. URL localhost의 3000번 포트에 접속하면 'Welcome to'라는 문자열이 표시됩니다. Guru페이지에 99개의 튜토리얼이 표시됩니다.
• 왜냐하면 우리 코드에서 기본값을 명시했기 때문입니다. URL 이 메시지가 표시됩니다.

다음으로 /Node로 이동합니다.

출력에서,

• 만약 URL /Node로 변경되면 해당 Node 경로가 선택되고 "Node 튜토리얼"이라는 문자열이 표시됩니다.

그런 다음 /Angular로 이동하세요.

출력에서,

• 만약 URL 경로가 /Angular로 변경되면 해당 Node 경로가 선택되고 "Angular 튜토리얼"이라는 문자열이 표시됩니다.

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

위 예시에서처럼 라우팅을 기반으로 어떤 출력을 표시할지 결정하는 방법을 살펴보았습니다. 이러한 라우팅 방식은 대부분의 최신 웹 애플리케이션에서 사용됩니다. 웹 서버의 또 다른 중요한 부분은 Node.js에서 템플릿을 사용하는 것입니다.

Node.js 애플리케이션을 빠르게 개발할 때, 템플릿을 활용하는 것이 쉽고 빠른 방법입니다. 시중에는 템플릿 제작을 위한 다양한 프레임워크가 나와 있습니다. 여기서는 Jade 프레임워크를 예시로 사용하겠습니다.

Jade는 Node Package Manager를 통해 설치됩니다. 명령줄에서 다음 줄을 실행하면 됩니다.

npm 설치 옥

위 명령어는 Node Package Manager에게 필요한 Jade 모듈을 다운로드하고 설치하도록 요청합니다.

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

⚠️ 현대어 표현: 설치 이긴 흙index.jade 파일의 이름을 index.pug로 변경하고 app.set('view engine','pug')를 설정하세요. jade 패키지는 업데이트되지 않지만 아래 단계는 그대로 실행됩니다.

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

단계 1) 첫 번째 단계는 Jade 템플릿을 만드는 것입니다. index.jade라는 파일을 생성하고 아래 코드를 삽입하세요. 해당 파일은 반드시 "views" 폴더에 생성해야 합니다.

1. 여기서는 이 템플릿이 호출될 때 페이지 제목이 전달된 값으로 변경되도록 지정합니다.
2. 또한 헤더 태그 안의 텍스트는 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() {});

Code 설명 :

1. 애플리케이션에서 가장 먼저 지정해야 할 것은 템플릿을 렌더링하는 데 사용할 "뷰 엔진"입니다. 우리는 Jade를 사용하여 템플릿을 렌더링할 것이므로, 그에 맞게 지정합니다.
2. render 함수는 웹 페이지를 렌더링하는 데 사용됩니다. 이 예에서는 이전에 생성된 템플릿(index.jade)을 렌더링하고 있습니다.
3. 우리는 "의 값을 전달하고 있습니다.Guru99”와 “Welcome”을 각각 “title”과 “message” 매개변수에 할당합니다. 이 값들은 index.jade 템플릿에 선언된 ‘title’과 ‘message’ 매개변수로 대체됩니다.

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

출력:

출력에서,

• 페이지 제목이 "로 설정되는 것을 볼 수 있습니다.Guru99”라고 입력하면 페이지 헤더가 “환영합니다.”로 설정됩니다.
• 이는 Node.js 애플리케이션에서 호출되는 Jade 템플릿 때문입니다.

자주 묻는 질문