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

튜토리얼

소개

Express는 Node.js용 웹 응용 프로그램 프레임워크로, 강력한 API 및 웹 서버를 훨씬 더 쉽고 깨끗하게 구축할 수 있습니다. 이는 핵심 Node.js 기능을 가릴 필요가 없는 가벼운 패키지입니다.

이 기사에서는 웹 서버를 구축하기 위해 Express를 설치하고 사용하는 방법을 설명합니다.

필수 사항

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

A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

이 자습서는 Node v15.14.0, npm v7.10.0, express v4.17.1 및 serve-index v1.9.1에서 확인되었습니다.

단계 1 — 프로젝트 설정

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

mkdir express-example

그런 다음 새로 만든 디렉토리로 이동합니다:

cd express-example

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

npm init -y

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

npm install express@4.17.1

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

단계 2 — Express 서버 만들기

이제 Express가 설치되었으니, 새 server.js 파일을 만들고 코드 편집기로 엽니다. 그런 다음, 다음의 코드 줄을 추가하십시오:

server.js

const express = require('express');

const app = express();

여기서 첫 번째 줄은 설치한 패키지에서 주요 Express 모듈을 가져옵니다. 이 모듈은 함수이며, 두 번째 줄에서 실행하여 app 변수를 만듭니다. 이렇게 하면 각각이 고유한 요청과 응답을 가진 여러 개의 앱을 만들 수 있습니다.

server.js

const express = require('express');

const app = express();

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

이 코드 줄은 Express 서버가 서버로부터의 GET 요청을 처리하는 방법을 지정하는 곳입니다. Express는 POST, PUT 등을 사용하여 app.post(...), app.put(...) 등 유사한 함수를 포함합니다.

이러한 함수는 두 가지 주요 매개변수를 사용합니다. 첫 번째는 이 함수가 작동할 URL입니다. 이 경우에는 웹 사이트의 루트를 대상으로 하고 있으므로 '/'을(를) 지정합니다. 이는 이 경우에는 localhost:3000입니다.

두 번째 매개변수는 두 개의 인수를 가진 함수입니다: req와 res. req는 서버로 전송된 요청을 나타냅니다. 이 객체를 사용하여 클라이언트가 무엇을 요청했는지에 대한 데이터를 읽을 수 있습니다. res는 클라이언트에게 다시 전송할 응답을 나타냅니다.

여기서는 res에 있는 함수를 호출하여 응답을 다시 보내고 있습니다: '성공적인 응답.'.

server.js

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

마침내 요청을 설정한 후에는 서버를 시작해야합니다! 우리는 listen 함수에 3000을 전달하여 애플리케이션이 청취할 포트를 지정합니다. 두 번째 매개변수로 전달된 함수는 선택 사항이며 서버가 시작될 때 실행됩니다. 이를 통해 콘솔에서 애플리케이션이 실행 중인지 알 수 있는 몇 가지 피드백을 얻을 수 있습니다.

터미널 창으로 돌아가서 애플리케이션을 실행하세요:

node server.js

그런 다음, 웹 브라우저에서 localhost:3000을 방문하세요. 웹 브라우저 창에는 다음이 표시됩니다: 'Successful response'. 터미널 창에는 다음이 표시됩니다: 'Example app is listening on port 3000.'.

여기에 웹 서버가 있습니다! 그러나 클라이언트에게 하나의 줄만 다시 보내는 것이 아니라 더 많은 내용을 보내고 싶습니다. 미들웨어가 무엇인지와 이 서버를 정적 파일 서버로 설정하는 방법에 대해 간단히 알아보겠습니다!

단계 3 — 미들웨어 사용하기

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

코드 실행.
요청 및 응답 객체 변경.
요청-응답 주기 종료.
스택에서 다음 미들웨어 함수 호출.

우리는 자체 미들웨어 함수를 작성하거나 다른 패키지와 마찬가지로 가져와서 서드파티 미들웨어를 사용할 수 있습니다.

우리 자신의 미들웨어를 작성하고 나서 기존의 미들웨어를 사용하여 정적 파일을 제공해 보겠습니다.

미들웨어 함수를 정의하려면 app.use()를 호출하고 함수를 전달합니다. 다음은 콘솔에 현재 시간을 인쇄하는 기본 미들웨어 함수입니다:

server.js

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() 호출은 미들웨어가 미들웨어 함수가 있는 경우 다음 미들웨어 함수로 이동하도록 합니다. 이것은 우리의 함수 끝에 포함하는 것이 중요합니다. 그렇지 않으면 요청이 이 미들웨어에 걸려 버립니다.

우리는 미들웨어에 경로를 선택적으로 전달할 수 있으며, 이는 해당 경로로의 요청만 처리하게 합니다. 예를 들어:

server.js

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

app.use()의 첫 번째 인수로 '/request-type'을 전달함으로써, 이 함수는 localhost:3000/request-type으로 보낸 요처에 대해서만 실행됩니다.

터미널 창을 다시 열고 애플리케이션을 실행하십시오:

node server.js

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

이제 기존의 미들웨어를 사용하여 정적 파일을 제공해 보겠습니다. Express에는 내장된 미들웨어 함수 express.static이 있습니다. 또한 파일의 색인 목록을 표시하기 위해 서드파티 미들웨어 함수 serve-index를 사용할 것입니다.

먼저, Express 서버가 있는 폴더 내부에 public이라는 디렉터리를 만들고 그 안에 몇 가지 파일을 넣어주세요.

그럼, serve-index 패키지를 설치하세요:

npm install serve-index@1.9.1

먼저, 서버 파일의 맨 위에 serve-index 패키지를 가져오세요.

그런 다음, express.static 및 serveIndex 미들웨어를 포함시키고 액세스할 경로와 디렉토리의 이름을 알려주세요:

server.js

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에서 req 객체 사용 방법, Express에서 res 객체 사용 방법, 그리고 Express에서 라우트 및 HTTP 요청 메서드 정의 방법으로 학습을 계속하세요.

Source:
https://www.digitalocean.com/community/tutorials/nodejs-express-basics