코사장의 코딩 놀이터

웹개발

Express 라우터 이해 및 활용하기

코사장_ 2023. 4. 21. 17:47
반응형

Express는 Node.js 웹 애플리케이션 프레임워크로 간단한 웹 서버부터 RESTful API 서버까지 다양한 웹 애플리케이션을 구축할 수 있습니다. 이 글에서는 Express의 핵심 구성 요소 중 하나인 라우터(Router)에 대해 알아보고, 라우터를 사용하여 기본적인 웹 애플리케이션을 구현하는 방법에 대해 설명하겠습니다.

Express Router 라이브러리

 

1. Express 라우터 기본 개념

라우터는 웹 애플리케이션에서 URL 경로와 HTTP 메서드(GET, POST, PUT, DELETE 등)에 따라 요청을 처리하는 기능을 제공합니다. Express 라우터를 사용하면 URL 경로와 HTTP 메서드에 따라 적절한 미들웨어 함수를 실행하여 요청을 처리할 수 있습니다. 이를 통해 코드를 모듈화하고 가독성을 높일 수 있습니다.

 

2. Express 라우터 사용법

먼저 Express를 설치해야 합니다. 터미널에서 다음 명령어를 실행하여 Express를 설치합니다.

npm install express

설치가 완료되면, 라우터를 사용하기 위해 app.js 파일을 생성하고 다음과 같이 작성합니다.

// app.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

위 코드에서는 / 경로에 대한 GET 요청을 처리하는 라우터를 생성했습니다. (GET 방식과 POST 방식에 대해서는 이후 포스팅에서 다뤄보겠습니다..!) 이제 터미널에서 node app.js 명령어를 실행하면, 웹 서버가 시작되고 브라우저에서 http://localhost:3000 주소로 접속하면 'Hello, World!' 메시지를 확인할 수 있습니다.

 

3. 라우터 모듈화 및 임포트

Express 라우터를 사용하면, 각 경로에 대한 요청 처리를 별도의 파일로 분리하여 모듈화할 수 있습니다. 예를 들어, routes 폴더를 생성하고 그 안에 index.js 파일을 작성하여 라우터를 정의하겠습니다.

// routes/index.js
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.send('Hello, World!');
});

module.exports = router;

이제 app.js 파일에서 라우터를 임포트하여 사용할 수 있습니다.

// app.js
const express = require('express');
const indexRouter = require('./routes/index');
const app = express();
const port = 3000;

app.use('/', indexRouter);

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

위와 같이 라우터를 모듈화하면 코드의 가독성이 높아지고 유지보수가 용이해집니다.

 

4. 라우터 매개변수와 쿼리

Express 라우터는 URL 경로에 변수를 포함하거나 쿼리를 사용하여 동적인 요청 처리를 할 수 있습니다. 예를 들어, 사용자 이름을 받아 인사말을 출력하는 라우터를 작성해 보겠습니다.

// routes/users.js
const express = require('express');
const router = express.Router();

router.get('/:username', (req, res) => {
  const { username } = req.params;
  res.send(`Hello, ${username}!`);
});

module.exports = router;

위 코드에서는 :username이라는 경로 매개변수를 사용하여 동적인 경로를 생성했습니다. 이제 app.js 파일에서 사용자 라우터를 임포트하고 사용합니다.

// app.js
const express = require('express');
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const app = express();
const port = 3000;

app.use('/', indexRouter);
app.use('/users', usersRouter);

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

이제 브라우저에서 http://localhost:3000/users/John 주소로 접속하면 'Hello, John!' 메시지를 확인할 수 있습니다.

쿼리를 사용하는 경우에는 다음과 같이 작성할 수 있습니다.

// routes/users.js
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  const { username } = req.query;
  res.send(`Hello, ${username}!`);
});

module.exports = router;

이제 브라우저에서 http://localhost:3000/users?username=John 주소로 접속하면 'Hello, John!' 메시지를 확인할 수 있습니다.

5. 추가 정보 및 학습 자료

이 글에서는 Express의 라우터에 대한 기본 개념과 사용 방법에 대해 알아보았습니다. Express를 더 깊게 배우려면 다음과 같은 자료들을 참고하세요.

  • Express 공식 문서(https://expressjs.com/): Express의 가장 기본적인 문서로, 기본 개념부터 고급 기능까지 체계적으로 설명되어 있습니다.
  • Express 라우터 가이드 (https://expressjs.com/en/guide/routing.html): Express 공식 문서에서 라우팅 관련 내용을 상세하게 설명하는 부분입니다. 라우터의 고급 기능과 활용 방법을 알아볼 수 있습니다.
  • Express 라우터 예제 깃허브(https://github.com/expressjs/express/tree/master/examples): Express의 깃허브 저장소에서 제공하는 예제 코드들입니다. 다양한 상황에서 라우터를 사용하는 방법을 살펴볼 수 있습니다.

위의 자료들을 참고하여 Express의 라우터를 활용하여 다양한 웹 애플리케이션을 개발해 보세요.

반응형