Node.js와 Express.js로 웹사이트 구축하기

이 글은 Node.js와 Express.js를 사용하여 웹사이트를 구축하는 방법을 자세히 다루고 있습니다. Express.js는 Node.js를 기반으로 강력하고 확장 가능한 웹 애플리케이션을 만드는 데 필수적인 프레임워크입니다. 오늘은 라우팅, 미들웨어, 템플릿 엔진 및 쿠키 세션.

컨셉 하이라이트:

app.use(콜백)
app.use(경로, 콜백)
GET, POST, PUT, DELETE
익스프레스 미들웨어
스택에서 다음 미들웨어 호출
익스프레스 라우터 사용
쿠키 세션 관리 미들웨어
템플릿 변수
EJS

1. app.use(콜백)

Express.js의 app.use(callback) 메소드는 미들웨어 기능을 탑재하는 데 사용됩니다. 이 미들웨어는 HTTP 메소드나 URL에 관계없이 애플리케이션에 대한 모든 요청에 ​​대해 실행됩니다.

예) 이 예에서 미들웨어는 들어오는 모든 요청에 ​​대해 실행되고 콘솔에 메시지를 기록합니다.

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

app.use((req, res, next) => {
  console.log('Middleware running for every request.');
  next();
});

2. app.use(경로, 콜백)

이 방법을 사용하면 특정 경로에 미들웨어를 마운트할 수 있습니다. 미들웨어는 요청이 지정된 경로와 일치하는 경우에만 실행됩니다.

예) 이 예에서는 /users로 시작하는 경로에 대해서만 미들웨어가 트리거됩니다.

app.use('/users', (req, res, next) => {
  console.log('Middleware only for /users route.');
  next();
});

3. 받기, 게시하기, 넣기, 삭제하기

이러한 메소드를 사용하면 특정 경로에서 특정 HTTP 메소드(GET, POST, PUT, DELETE 등)를 처리할 수 있습니다. 여기에서 웹 애플리케이션의 동작을 정의합니다.

예) 각 메소드는 사용자 관리를 위한 CRUD 작업(생성, 읽기, 업데이트, 삭제)의 다른 부분을 처리합니다.

app.get('/users', (req, ress) => {
  res.send('Fetching all users');
});

app.post('/users', (req, res) => {
  res.send('Creating a new user');
});

app.put('/users/:id', (req, res) => {
  res.send(`Updating user with ID: ${req.params.id}`);
});

app.delete('/users/:id', (req, res) => {
  res.send('Deleting user with ID: ${req.params.id}`);
});

4. 익스프레스 미들웨어

Express.js의 미들웨어 기능은 요청(req) 및 응답(res) 개체에 액세스할 수 있으며 코드를 실행하거나 수정하거나 요청-응답 주기를 종료할 수 있습니다.

주요 특징:

• 코드 실행: 모든 논리나 작업을 수행할 수 있습니다.
• 요청/응답 수정: 미들웨어는 헤더를 업데이트하거나, req에 데이터를 추가하거나, res 객체를 수정할 수 있습니다.
• 요청-응답 주기 종료: 미들웨어는 데이터를 클라이언트에 다시 보내고 주기를 종료할 수 있습니다.

예) 이 예에서 미들웨어는 요청 객체에 사용자 정의 데이터를 추가하고 경로 핸들러는 이에 액세스합니다.

app.use((req, res, next) => {
  req.customData = 'Some custom data';
  next();
});

app.get('/', (req, res) => {
  res.send(`Data from middleware: ${req.customData}`);
});

5. 다음 미들웨어 호출

위의 예에서는 next()를 사용하여 다음 미들웨어나 경로 핸들러에 제어권을 전달했습니다. next()를 호출하지 않으면 주기가 앞으로 진행되지 않기 때문에 요청이 중단됩니다.

예) 이렇게 하면 각 미들웨어 조각이 체인의 다음 조각으로 제어권을 전달할 수 있습니다.

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

app.use((req, res, next) => {
  console.log('Middleware running for every request.');
  next();
});

6. 익스프레스 라우터 사용하기

Express Router는 모듈식 애플리케이션에서 경로를 구성하는 데 탁월한 도구입니다. 경로를 더 작고 관리 가능한 부분으로 나누는 데 도움이 됩니다.

예) 이 예에서 라우터는 /users에 마운트되고 /users/profile에 대한 요청은 라우터의 경로에 따라 처리됩니다.

app.use('/users', (req, res, next) => {
  console.log('Middleware only for /users route.');
  next();
});

7. 쿠키 세션 관리 미들웨어

사용자 인증 및 상태를 관리하려면 세션과 쿠키를 처리하는 것이 중요합니다. Express.js는 세션 데이터를 관리하기 위한 미들웨어를 제공합니다.

예) express-session을 사용하여 세션을 초기화하고 세션 데이터를 설정하는데, 이는 사용자 세션 전반에 걸쳐 접근 가능합니다.

app.get('/users', (req, ress) => {
  res.send('Fetching all users');
});

app.post('/users', (req, res) => {
  res.send('Creating a new user');
});

app.put('/users/:id', (req, res) => {
  res.send(`Updating user with ID: ${req.params.id}`);
});

app.delete('/users/:id', (req, res) => {
  res.send('Deleting user with ID: ${req.params.id}`);
});

8. 템플릿 변수

템플릿 엔진을 사용하여 뷰를 렌더링할 때 변수를 전달하여 콘텐츠를 동적으로 생성할 수 있습니다. 예를 들어 EJS에서는 렌더링을 위해 뷰에 변수를 전달할 수 있습니다.

예) 이 예에서는 제목과 메시지 변수를 EJS 템플릿에 전달합니다.

app.use((req, res, next) => {
  req.customData = 'Some custom data';
  next();
});

app.get('/', (req, res) => {
  res.send(`Data from middleware: ${req.customData}`);
});

9. EJS(임베디드 자바스크립트)

EJS는 HTML을 작성하고 HTML 구조 내에 직접 JavaScript를 포함할 수 있는 인기 있는 템플릿 엔진입니다. 간단하지만 강력하며 Express.js와 잘 통합되어 동적 웹페이지를 제공합니다.

예) <%= %> 구문은 JavaScript 표현식을 HTML에 삽입하는 데 사용됩니다.

app.use((req, res, next) => {
  console.log('First middleware');
  next();
});

app.use((req, res, next) => {
  console.log('Second middlware');
});

위 내용은 Node.js와 Express.js로 웹사이트 구축하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!