티스토리 뷰

Front End/🤢 Next.js

use server <-> RDBMS와 연동

James Wetzel 2025. 3. 16. 17:13

MySQL과 연동하는 간단한 예제

1. 필요한 패키지 설치

MySQL과 연동하려면 먼저 mysql2 라이브러리를 설치해야 합니다. 아래 명령어를 사용하세요:

npm install mysql2

2. 서버 컴포넌트에서 MySQL 쿼리 실행

다음은 'use server'; 지시자를 사용해 서버에서만 실행되는 컴포넌트에서 MySQL 데이터를 가져와 렌더링하는 코드입니다:

// app/page.tsx
'use server';

import mysql from 'mysql2/promise';

async function getUsers() {
  // MySQL 연결 설정
  const connection = await mysql.createConnection({
    host: 'localhost',
    user: 'your_username',
    password: 'your_password',
    database: 'your_database',
  });

  try {
    // 쿼리 실행
    const [rows] = await connection.execute('SELECT * FROM users');
    return rows;
  } catch (error) {
    console.error('Database query failed:', error);
    return [];
  } finally {
    // 연결 종료
    await connection.end();
  }
}

export default async function Page() {
  const users = await getUsers();

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

코드 설명

  • 'use server';: 이 지시자는 해당 파일이 서버에서만 실행됨을 나타냅니다.
  • MySQL 연결: mysql2/promise를 사용해 비동기적으로 MySQL에 연결합니다. createConnection 메서드로 연결을 설정합니다.
  • 쿼리 실행: connection.execute('SELECT * FROM users')를 통해 users 테이블에서 데이터를 가져옵니다.
  • 렌더링: 가져온 데이터를 <ul> 목록으로 렌더링합니다. 각 사용자는 id를 키로, name을 표시 내용으로 사용합니다.

주의 사항

  1. 보안: 데이터베이스 연결 정보(호스트, 사용자명, 비밀번호 등)는 하드코딩하지 말고, .env 파일이나 환경 변수를 통해 관리하세요. 예제에서는 간단히 하드코딩했지만 실무에서는 피해야 합니다.
  2. 연결 관리: 이 예제에서는 연결을 매번 생성하고 종료하지만, 실제 애플리케이션에서는 성능 최적화를 위해 연결 풀(connection pool)을 사용하는 것이 좋습니다.
  3. 에러 처리: 데이터베이스 쿼리 실패 시 빈 배열을 반환하도록 했지만, 실무에서는 더 정교한 에러 처리가 필요합니다.
728x90
반응형