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