React와 PHP를 활용하여 MySQL 연동된 Admin 대시보드 웹사이트를 만드는 과정

React와 PHP를 활용하여 MySQL 연동된 Admin 대시보드 웹사이트를 만드는 과정을 단계별로 설명하겠습니다. 이 예제에서는 무료 템플릿을 사용하여 로그인 후 메인 페이지로 리다이렉트하는 기본 구조를 구현합니다.

1. 프로젝트 구조 설정

먼저, 두 개의 프로젝트를 생성합니다. 하나는 React 프론트엔드, 다른 하나는 PHP 백엔드입니다.

React 프로젝트 설정

npx create-react-app admin-dashboard
cd admin-dashboard

PHP 백엔드 설정

PHP 프로젝트를 위한 디렉토리를 생성합니다.

mkdir php-backend
cd php-backend

2. 데이터베이스 설정

MySQL에서 사용할 데이터베이스를 생성합니다.

CREATE DATABASE admin_dashboard;
USE admin_dashboard;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);

3. PHP 백엔드 구현

3.1. PHP 파일 생성

php-backend 디렉토리 내에 login.php 파일을 생성합니다.

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "admin_dashboard";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $user = $_POST['username'];
    $pass = $_POST['password'];

    $sql = "SELECT * FROM users WHERE username = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("s", $user);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        if (password_verify($pass, $row['password'])) {
            echo json_encode(["status" => "success"]);
        } else {
            echo json_encode(["status" => "error", "message" => "Invalid credentials."]);
        }
    } else {
        echo json_encode(["status" => "error", "message" => "User not found."]);
    }
    $stmt->close();
}
$conn->close();
?>

3.2. 사용자 등록 (선택 사항)

사용자를 등록할 수 있는 register.php 파일도 추가할 수 있습니다.

<?php
// register.php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "admin_dashboard";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $user = $_POST['username'];
    $pass = password_hash($_POST['password'], PASSWORD_DEFAULT);

    $sql = "INSERT INTO users (username, password) VALUES (?, ?)";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("ss", $user, $pass);

    if ($stmt->execute()) {
        echo json_encode(["status" => "success"]);
    } else {
        echo json_encode(["status" => "error", "message" => "User registration failed."]);
    }
    $stmt->close();
}
$conn->close();
?>

4. React 프론트엔드 구현

4.1. 로그인 페이지 만들기

src 디렉토리 내에 Login.js 파일을 생성합니다.

import React, { useState } from 'react';

const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [message, setMessage] = useState('');

    const handleLogin = async (e) => {
        e.preventDefault();
        const response = await fetch('http://localhost/php-backend/login.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({
                username: username,
                password: password,
            }),
        });
        const data = await response.json();
        if (data.status === 'success') {
            window.location.href = '/dashboard'; // 로그인 성공 시 대시보드로 리다이렉트
        } else {
            setMessage(data.message);
        }
    };

    return (
        <div>
            <h2>Login</h2>
            <form onSubmit={handleLogin}>
                <input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} required />
                <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} required />
                <button type="submit">Login</button>
            </form>
            {message && <p>{message}</p>}
        </div>
    );
};

export default Login;

4.2. 대시보드 페이지 만들기

src 디렉토리 내에 Dashboard.js 파일을 생성합니다.

import React from 'react';

const Dashboard = () => {
    return (
        <div>
            <h2>Dashboard</h2>
            <p>Welcome to the Admin Dashboard!</p>
        </div>
    );
};

export default Dashboard;

4.3. 라우팅 설정

src/App.js 파일을 수정하여 라우팅을 설정합니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './Login';
import Dashboard from './Dashboard';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route path="/" exact component={Login} />
                <Route path="/dashboard" component={Dashboard} />
            </Switch>
        </Router>
    );
};

export default App;

5. 실행 및 테스트

1. PHP 서버를 실행합니다. 예를 들어, XAMPP나 MAMP를 사용하여 PHP 파일이 있는 디렉토리를 웹 서버의 루트로 설정합니다.
2. React 앱을 실행합니다.

npm start

1. 웹 브라우저에서 http://localhost:3000으로 접속하여 로그인 페이지를 확인합니다. 등록된 사용자로 로그인하면 대시보드 페이지로 리다이렉트됩니다.

이렇게 하면 React와 PHP를 활용한 기본적인 Admin 대시보드 웹사이트가 완성됩니다. 추가적인 기능이나 스타일링은 필요에 따라 확장해 나가면 됩니다.