웹사이트 검색

Node.js 및 Express를 시작하는 방법

소개

Express는 Node.js용 웹 애플리케이션 프레임워크로 강력한 API와 웹 서버를 훨씬 쉽고 깔끔하게 가동할 수 있습니다. 핵심 Node.js 기능을 가리지 않는 경량 패키지입니다.

이 기사에서는 Express를 설치하고 사용하여 웹 서버를 구축합니다.

전제 조건

이 기사를 따라 하려면 다음이 필요합니다.

  • Node.js용 로컬 개발 환경입니다. Node.js 설치 및 로컬 개발 환경 생성 방법을 따르십시오.

이 튜토리얼은 Node v15.14.0, npm v7.10.0, express v4.17.1 및 serve-index v1.9.1에서 검증되었습니다.

1단계 - 프로젝트 설정

먼저 터미널 창을 열고 새 프로젝트 디렉토리를 만듭니다.

  1. mkdir express-example

그런 다음 새로 생성된 디렉터리로 이동합니다.

  1. cd express-example

이 시점에서 새 npm 프로젝트를 초기화할 수 있습니다.

  1. npm init -y

다음으로 express 패키지를 설치해야 합니다.

  1. npm install express@4.17.1

이 시점에서 Express를 사용할 준비가 된 새 프로젝트가 있습니다.

2단계 - 익스프레스 서버 생성

이제 Express가 설치되었으므로 새 server.js 파일을 만들고 코드 편집기로 엽니다. 그런 다음 다음 코드 줄을 추가합니다.

const express = require('express');

const app = express();

여기서 첫 번째 줄은 설치한 패키지에서 기본 Express 모듈을 가져오는 것입니다. 이 모듈은 app 변수를 만들기 위해 두 번째 줄에서 실행되는 함수입니다. 이 방법으로 각각 고유한 요청 및 응답이 있는 여러 앱을 만들 수 있습니다.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

이 코드 줄은 Express 서버에 서버에 대한 GET 요청을 처리하는 방법을 알려주는 곳입니다. Express에는 app.post(...), app.put(. ..) 등

이 함수는 두 가지 주요 매개변수를 사용합니다. 첫 번째는 이 함수가 작동할 URL입니다. 이 경우 웹 사이트의 루트인 /를 대상으로 합니다. 이 경우에는 localhost:3000입니다.

두 번째 매개변수는 req 및 res의 두 인수가 있는 함수입니다. req는 서버로 전송된 요청을 나타냅니다. 이 개체를 사용하여 클라이언트가 요청한 작업에 대한 데이터를 읽을 수 있습니다. res는 클라이언트에 다시 보낼 응답을 나타냅니다.

여기에서는 res에서 Successful response.라는 응답을 보내는 함수를 호출합니다.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

마지막으로 요청을 설정했으면 서버를 시작해야 합니다! 우리는 3000을 listen 함수에 전달하여 앱에 어떤 포트에서 수신 대기할지 알려줍니다. 두 번째 매개 변수로 전달되는 함수는 선택 사항이며 서버가 시작될 때 실행됩니다. 이렇게 하면 응용 프로그램이 실행 중임을 알 수 있도록 콘솔에 몇 가지 피드백이 제공됩니다.

터미널 창을 다시 방문하여 애플리케이션을 실행합니다.

  1. node server.js

그런 다음 웹 브라우저에서 localhost:3000을 방문합니다. 브라우저 창에 성공적인 응답이 표시됩니다. 터미널 창에 Example app is listen on port 3000.이 표시됩니다.

그리고 거기에 웹 서버가 있습니다! 그러나 우리는 단 한 줄 이상의 텍스트를 클라이언트에 다시 보내고 싶습니다. 미들웨어가 무엇이며 이 서버를 정적 파일 서버로 설정하는 방법에 대해 간략하게 살펴보겠습니다!

3단계 - 미들웨어 사용

Express를 사용하면 서버로 들어오는 모든 HTTP 요청에 액세스할 수 있는 미들웨어 기능을 작성하고 사용할 수 있습니다. 이러한 기능은 다음을 수행할 수 있습니다.

  • 모든 코드를 실행합니다.
  • 요청 및 응답 개체를 변경합니다.
  • 요청-응답 주기를 종료합니다.
  • 스택의 다음 미들웨어 함수를 호출합니다.

우리는 우리 자신의 미들웨어 기능을 작성하거나 다른 패키지와 동일한 방식으로 가져옴으로써 타사 미들웨어를 사용할 수 있습니다.

우리 자신의 미들웨어를 작성하는 것부터 시작해 보겠습니다. 그런 다음 기존 미들웨어를 사용하여 정적 파일을 제공하려고 합니다.

미들웨어 함수를 정의하려면 app.use()를 호출하고 함수를 전달합니다. 다음은 요청이 있을 때마다 콘솔에 현재 시간을 출력하는 기본 미들웨어 기능입니다.

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

next() 호출은 미들웨어에게 다음 미들웨어 함수가 있는 경우 그 함수로 이동하도록 지시합니다. 이는 기능 끝에 포함하는 것이 중요합니다. 그렇지 않으면 요청이 이 미들웨어에 고정됩니다.

선택적으로 해당 경로에 대한 요청만 처리하는 미들웨어에 대한 경로를 전달할 수 있습니다. 예를 들어:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

/request-type을 app.use()의 첫 번째 인수로 전달하면 이 함수는 localhost:3000/request-type으로 전송된 요청에 대해서만 실행됩니다. .

터미널 창을 다시 방문하여 애플리케이션을 실행합니다.

  1. node server.js

그런 다음 웹 브라우저에서 localhost:3000/request-type을 방문하십시오. 터미널 창에 요청의 타임스탬프와 요청 유형: GET이 표시됩니다.

이제 기존 미들웨어를 사용하여 정적 파일을 제공해 보겠습니다. Express에는 파일의 인덱스 목록을 표시하는 내장 미들웨어 기능인 serve-index가 함께 제공됩니다.

먼저 익스프레스 서버가 있는 동일한 폴더 안에 public이라는 디렉터리를 만들고 거기에 파일을 몇 개 넣습니다.

그런 다음 serve-index 패키지를 설치합니다.

  1. npm install serve-index@1.9.1

먼저 서버 파일 상단에 있는 serve-index 패키지를 가져옵니다.

그런 다음 express.static 및 serveIndex 미들웨어를 포함하고 액세스 경로와 디렉토리 이름을 알려줍니다.

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

이제 서버를 다시 시작하고 localhost:3000/public으로 이동합니다. 모든 파일 목록이 표시됩니다!

결론

이 기사에서는 Express를 설치하고 사용하여 웹 서버를 구축했습니다. 내장 및 타사 미들웨어 기능도 사용했습니다.

Express에서 경로 및 HTTP 요청 방법을 정의하는 방법으로 학습을 계속하십시오.