개요

최근 웹 개발에서 싱글 페이지 어플리케이션(SPA)이 더욱 인기를 얻고 있습니다. 이러한 SPA는 페이지 전환이 발생할 때마다 서버로부터 새로운 페이지를 불러오는 대신, 초기에 모든 필요한 리소스를 불러와 브라우저에서 처음 로드된 이후에는 필요한 데이터만을 받아와서 페이지를 업데이트합니다. 이 때문에 클라이언트 측에서 라우팅을 관리하는 것이 중요한데, Node.js를 활용하여 이를 구현하는 방법에 대해 알아보겠습니다.

SPA에서의 라우팅

SPA에서는 클라이언트 측에서 라우팅을 관리합니다. 즉, 브라우저의 주소창에 입력된 URL에 대해 브라우저에서 원하는 페이지를 렌더링하는 것을 클라이언트 측에서 처리해야 합니다. 이를 위해 HTML5 History API나 라이브러리(예: React Router, Vue Router)를 사용하여 브라우저의 주소 변경에 따른 화면 전환을 제어합니다.

Node.js를 활용한 서버 측 라우팅

SPA에서 클라이언트 측에서 라우팅을 처리하고 있다면, Node.js에서는 어떻게 서버 측 라우팅을 관리할까요? Node.js에서는 Express.js나 Koa와 같은 웹 프레임워크를 사용하여 서버 측 라우팅을 구현할 수 있습니다. 이를 통해 클라이언트 측 라우팅에 대한 요청에 응답하여 브라우저에 필요한 페이지를 전달하게 됩니다.

아래는 Express.js를 사용한 간단한 서버 측 라우팅 예제입니다.

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.get('/about', (req, res) => {
  res.sendFile(__dirname + '/about.html');
});

app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중입니다.');
});

위 코드에서 app.get 메서드를 사용하여 ‘/’와 ‘/about’ 경로에 대한 요청을 처리하고 각각 index.html과 about.html을 클라이언트에 전송합니다.

마무리

싱글 페이지 어플리케이션에서는 클라이언트 측에서 라우팅을, Node.js에서는 서버 측 라우팅을 관리하여 둘을 연동하여 SPA의 기능을 완벽하게 구현할 수 있습니다. 두 가지 종류의 라우팅을 효과적으로 다루면서 웹 어플리케이션의 성능을 향상시킬 수 있습니다.

참고문헌:

• https://expressjs.com/