Colin's Blog
SSR을 활용한 웹 애플리케이션의 데이터베이스 연동 방법

개요

서버 사이드 렌더링(Server Side Rendering, SSR)은 웹 애플리케이션의 초기 렌더링을 서버에서 처리하는 방식입니다. 이를 통해 사용자는 초기 로딩 속도가 빠르고 SEO(Search Engine Optimization)에 유리한 화면을 볼 수 있습니다. 이번 포스트에서는 SSR을 활용한 웹 애플리케이션에서 데이터베이스 연동을 어떻게 할 수 있는지 알아보겠습니다.

데이터베이스 연동 방법

SSR을 사용하는 웹 애플리케이션에서 데이터베이스 연동은 일반적으로 다음과 같은 단계로 이루어집니다.

  1. 서버에서 클라이언트로의 데이터 전송: 서버는 데이터베이스에 접속하여 필요한 데이터를 가져옵니다. 그리고 해당 데이터를 클라이언트로 전송합니다. 이때, 전송받은 데이터는 서버에서 미리 정해진 템플릿에 적용되어 클라이언트에게 HTML 형식으로 보여지게 됩니다.

  2. 클라이언트에서 서버로의 데이터 전송: 클라이언트는 사용자의 요청에 따라 서버로 데이터를 전송합니다. 이때, 서버에서는 전송받은 데이터를 데이터베이스에 저장하거나 조회하여 필요한 정보를 가져올 수 있습니다. 이후, 서버는 데이터를 다시 클라이언트로 전송하여 화면을 업데이트합니다.

  3. 실시간 데이터베이스 감지: SSR을 사용하는 웹 애플리케이션에서는 실시간으로 데이터베이스의 변경을 감지해야 할 때가 있습니다. 이를 위해 서버와 데이터베이스 간의 연결을 유지하고, 변경된 데이터를 실시간으로 클라이언트에게 전달해야 합니다. 이러한 실시간 데이터베이스 감지를 위해서는 WebSocket 등의 프로토콜을 활용할 수 있습니다.

예시 코드

아래는 Node.js와 MongoDB를 연동하여 데이터베이스 연동을 수행하는 예시 코드입니다.

// 필요한 라이브러리를 import 합니다.
const express = require('express');
const mongoose = require('mongoose');

// MongoDB에 연결합니다.
mongoose.connect('mongodb://localhost:27017/myapp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('Connected to MongoDB'))
  .catch((err) => console.error('Error connecting to MongoDB', err));

// 모델 정의
const User = mongoose.model('User', new mongoose.Schema({
  name: String,
  age: Number
}));

// Express 애플리케이션 생성
const app = express();

// GET 요청에 대한 핸들러
app.get('/users', async (req, res) => {
  // 데이터베이스에서 사용자 정보를 조회합니다.
  const users = await User.find();

  // 조회된 사용자 정보를 클라이언트로 전송합니다.
  res.json(users);
});

// 서버 실행
app.listen(3000, () => console.log('Server is running on port 3000'));

위의 코드는 Express 프레임워크를 사용하여 Node.js 애플리케이션을 생성하고, MongoDB와 연동하여 사용자 정보를 조회하는 예시입니다. 해당 예시는 “/users” 경로로 GET 요청을 받으면 데이터베이스에서 사용자 정보를 조회하여 클라이언트로 전송합니다.

참고 자료

#webdevelopment #ssr

© 2018 Colin. All rights reserved.