{"id":10433,"date":"2025-06-18T14:00:29","date_gmt":"2025-06-18T05:00:29","guid":{"rendered":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=10433"},"modified":"2025-06-18T15:50:30","modified_gmt":"2025-06-18T06:50:30","slug":"react-js-next-js-%ea%b2%8c%ec%8b%9c%ed%8c%90-%ec%83%9d%ec%84%b1","status":"publish","type":"post","link":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=10433","title":{"rendered":"React.js + Next.js + \uac8c\uc2dc\ud310 \uc0dd\uc131"},"content":{"rendered":"

React.js + Next.js + \uac8c\uc2dc\ud310 \uc0dd\uc131<\/h1>\n

\uac04\ub2e8\ud55c \uac8c\uc2dc\ud310\uc744 \ub9cc\ub4e4\uc5b4 \ubd05\ub2c8\ub2e4.
\n\uc778\uacf5\uc9c0\ub2a5\uc774 \uc791\uc131\ud55c \ucf54\ub4dc\uc9c0\ub9cc \uc815\uc0c1\uc791\ub3d9 \ud655\uc778\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n

\ud504\ub85c\uc81d\ud2b8 \uad6c\uc870<\/h2>\n
# \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\nsimple-board\/\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 .env.local\n\u251c\u2500\u2500 lib\/\n\u2502   \u2514\u2500\u2500 db.js\n\u251c\u2500\u2500 pages\/\n\u2502   \u251c\u2500\u2500 index.js (\uac8c\uc2dc\uae00 \ubaa9\ub85d)\n\u2502   \u251c\u2500\u2500 post\/\n\u2502   \u2502   \u251c\u2500\u2500 [id].js (\uac8c\uc2dc\uae00 \uc0c1\uc138)\n\u2502   \u2502   \u2514\u2500\u2500 write.js (\uac8c\uc2dc\uae00 \uc791\uc131)\n\u2502   \u2514\u2500\u2500 api\/\n\u2502       \u2514\u2500\u2500 posts\/\n\u2502           \u251c\u2500\u2500 index.js (\ubaa9\ub85d \uc870\ud68c, \uc791\uc131)\n\u2502           \u2514\u2500\u2500 [id].js (\uc0c1\uc138 \uc870\ud68c, \uc218\uc815, \uc0ad\uc81c)\n\u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 Layout.js\n\u2502   \u2514\u2500\u2500 PostForm.js\n\u2514\u2500\u2500 styles\/\n    \u2514\u2500\u2500 globals.css<\/code><\/pre>\n
\ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \ubc0f \uc124\uc815<\/h2>\n
mkdir simple-board\ncd simple-board\n\nnpm init -y\nnpm install next react@18 react-dom@18 mysql2<\/code><\/pre>\n
CREATE DATABASE db_board;\n\nUSE db_board;\n\nCREATE TABLE posts (\n  id INT AUTO_INCREMENT PRIMARY KEY,\n  title VARCHAR(255) NOT NULL,\n  content TEXT NOT NULL,\n  author VARCHAR(100) NOT NULL,\n  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP\n);<\/code><\/pre>\n
package.json<\/h2>\n
{\n  "name": "simple-board",\n  "version": "1.0.0",\n  "private": true,\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start"\n  },\n  "keywords": [],\n  "author": "",\n  "description": "",\n  "dependencies": {\n    "mysql2": "^3.14.1",\n    "next": "^15.3.3",\n    "react": "^18.3.1",\n    "react-dom": "^18.3.1"\n  }\n}<\/code><\/pre>\n
.env.local<\/h2>\n
DB_HOST=localhost\nDB_USER=your_username\nDB_PASSWORD=your_password\nDB_NAME=db_board<\/code><\/pre>\n
lib\/db.js<\/h2>\n
import mysql from 'mysql2\/promise';\n\nconst pool = mysql.createPool({\n  host: process.env.DB_HOST,\n  user: process.env.DB_USER,\n  password: process.env.DB_PASSWORD,\n  database: process.env.DB_NAME,\n  waitForConnections: true,\n  connectionLimit: 10,\n  queueLimit: 0,\n  charset: 'utf8mb4'  \/\/ \ud55c\uae00 \uc9c0\uc6d0\n});\n\nexport default pool;<\/code><\/pre>\n
components\/Layout.js<\/h2>\n
import Link from 'next\/link';\n\nexport default function Layout({ children }) {\n  return (\n    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>\n      <header style={{ borderBottom: '1px solid #eee', paddingBottom: '20px', marginBottom: '20px' }}>\n        <h1 style={{ margin: 0 }}>\n          <Link href="\/" style={{ textDecoration: 'none', color: '#333' }}>\n            \uac04\ub2e8\ud55c \uac8c\uc2dc\ud310\n          <\/Link>\n        <\/h1>\n        <nav style={{ marginTop: '10px' }}>\n          <Link href="\/" style={{ marginRight: '20px', textDecoration: 'none', color: '#666' }}>\n            \ubaa9\ub85d\n          <\/Link>\n          <Link href="\/post\/write" style={{ textDecoration: 'none', color: '#666' }}>\n            \uae00\uc4f0\uae30\n          <\/Link>\n        <\/nav>\n      <\/header>\n      <main>{children}<\/main>\n    <\/div>\n  );\n}<\/code><\/pre>\n
components\/PostForm.js<\/h2>\n
import { useState } from 'react';\nimport { useRouter } from 'next\/router';\n\nexport default function PostForm({ post = null, isEdit = false }) {\n  const [title, setTitle] = useState(post?.title || '');\n  const [content, setContent] = useState(post?.content || '');\n  const [author, setAuthor] = useState(post?.author || '');\n  const [loading, setLoading] = useState(false);\n  const router = useRouter();\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n\n    if (!title.trim() || !content.trim() || !author.trim()) {\n      alert('\ubaa8\ub4e0 \ud544\ub4dc\ub97c \uc785\ub825\ud574\uc8fc\uc138\uc694.');\n      return;\n    }\n\n    setLoading(true);\n\n    try {\n      const url = isEdit ? `\/api\/posts\/${post.id}` : '\/api\/posts';\n      const method = isEdit ? 'PUT' : 'POST';\n\n      const response = await fetch(url, {\n        method,\n        headers: {\n          'Content-Type': 'application\/json',\n        },\n        body: JSON.stringify({ title, content, author }),\n      });\n\n      if (response.ok) {\n        router.push('\/');\n      } else {\n        alert('\uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.');\n      }\n    } catch (error) {\n      console.error('Error:', error);\n      alert('\uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.');\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>\n      <div>\n        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>\uc81c\ubaa9<\/label>\n        <input\n          type="text"\n          value={title}\n          onChange={(e) => setTitle(e.target.value)}\n          style={{ \n            width: '100%', \n            padding: '10px', \n            border: '1px solid #ddd', \n            borderRadius: '4px',\n            fontSize: '16px'\n          }}\n          disabled={loading}\n        \/>\n      <\/div>\n\n      <div>\n        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>\uc791\uc131\uc790<\/label>\n        <input\n          type="text"\n          value={author}\n          onChange={(e) => setAuthor(e.target.value)}\n          style={{ \n            width: '100%', \n            padding: '10px', \n            border: '1px solid #ddd', \n            borderRadius: '4px',\n            fontSize: '16px'\n          }}\n          disabled={loading || isEdit}\n        \/>\n      <\/div>\n\n      <div>\n        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>\ub0b4\uc6a9<\/label>\n        <textarea\n          value={content}\n          onChange={(e) => setContent(e.target.value)}\n          rows="10"\n          style={{ \n            width: '100%', \n            padding: '10px', \n            border: '1px solid #ddd', \n            borderRadius: '4px',\n            fontSize: '16px',\n            resize: 'vertical'\n          }}\n          disabled={loading}\n        \/>\n      <\/div>\n\n      <div style={{ display: 'flex', gap: '10px' }}>\n        <button\n          type="submit"\n          disabled={loading}\n          style={{ \n            padding: '12px 24px', \n            backgroundColor: '#007bff', \n            color: 'white', \n            border: 'none', \n            borderRadius: '4px', \n            cursor: loading ? 'not-allowed' : 'pointer',\n            fontSize: '16px'\n          }}\n        >\n          {loading ? '\ucc98\ub9ac\uc911...' : (isEdit ? '\uc218\uc815' : '\uc791\uc131')}\n        <\/button>\n\n        <button\n          type="button"\n          onClick={() => router.back()}\n          style={{ \n            padding: '12px 24px', \n            backgroundColor: '#6c757d', \n            color: 'white', \n            border: 'none', \n            borderRadius: '4px', \n            cursor: 'pointer',\n            fontSize: '16px'\n          }}\n        >\n          \ucde8\uc18c\n        <\/button>\n      <\/div>\n    <\/form>\n  );\n}<\/code><\/pre>\n
pages\/api\/posts\/index.js<\/h2>\n
import pool from '..\/..\/..\/lib\/db';\n\nexport default async function handler(req, res) {\n  if (req.method === 'GET') {\n    \/\/ \uac8c\uc2dc\uae00 \ubaa9\ub85d \uc870\ud68c\n    try {\n      const [rows] = await pool.execute(\n        'SELECT id, title, author, created_at FROM posts ORDER BY created_at DESC'\n      );\n      res.status(200).json(rows);\n    } catch (error) {\n      console.error('Database error:', error);\n      res.status(500).json({ error: '\ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.' });\n    }\n  } else if (req.method === 'POST') {\n    \/\/ \uac8c\uc2dc\uae00 \uc791\uc131\n    const { title, content, author } = req.body;\n\n    if (!title || !content || !author) {\n      return res.status(400).json({ error: '\ubaa8\ub4e0 \ud544\ub4dc\ub97c \uc785\ub825\ud574\uc8fc\uc138\uc694.' });\n    }\n\n    try {\n      const [result] = await pool.execute(\n        'INSERT INTO posts (title, content, author) VALUES (?, ?, ?)',\n        [title, content, author]\n      );\n\n      res.status(201).json({ \n        id: result.insertId,\n        message: '\uac8c\uc2dc\uae00\uc774 \uc791\uc131\ub418\uc5c8\uc2b5\ub2c8\ub2e4.' \n      });\n    } catch (error) {\n      console.error('Database error:', error);\n      res.status(500).json({ error: '\ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.' });\n    }\n  } else {\n    res.setHeader('Allow', ['GET', 'POST']);\n    res.status(405).json({ error: `Method ${req.method} Not Allowed` });\n  }\n}<\/code><\/pre>\n
pages\/api\/posts\/[id].js<\/h2>\n
import pool from '..\/..\/..\/lib\/db';\n\nexport default async function handler(req, res) {\n  const { id } = req.query;\n  const postId = parseInt(id);\n\n  if (isNaN(postId)) {\n    return res.status(400).json({ error: '\uc798\ubabb\ub41c \uac8c\uc2dc\uae00 ID\uc785\ub2c8\ub2e4.' });\n  }\n\n  if (req.method === 'GET') {\n    \/\/ \uac8c\uc2dc\uae00 \uc0c1\uc138 \uc870\ud68c\n    try {\n      const [rows] = await pool.execute(\n        'SELECT * FROM posts WHERE id = ?',\n        [postId]\n      );\n\n      if (rows.length === 0) {\n        return res.status(404).json({ error: '\uac8c\uc2dc\uae00\uc744 \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.' });\n      }\n\n      res.status(200).json(rows[0]);\n    } catch (error) {\n      console.error('Database error:', error);\n      res.status(500).json({ error: '\ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.' });\n    }\n  } else if (req.method === 'PUT') {\n    \/\/ \uac8c\uc2dc\uae00 \uc218\uc815\n    const { title, content, author } = req.body;\n\n    if (!title || !content || !author) {\n      return res.status(400).json({ error: '\ubaa8\ub4e0 \ud544\ub4dc\ub97c \uc785\ub825\ud574\uc8fc\uc138\uc694.' });\n    }\n\n    try {\n      const [result] = await pool.execute(\n        'UPDATE posts SET title = ?, content = ?, author = ? WHERE id = ?',\n        [title, content, author, postId]\n      );\n\n      if (result.affectedRows === 0) {\n        return res.status(404).json({ error: '\uac8c\uc2dc\uae00\uc744 \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.' });\n      }\n\n      res.status(200).json({ message: '\uac8c\uc2dc\uae00\uc774 \uc218\uc815\ub418\uc5c8\uc2b5\ub2c8\ub2e4.' });\n    } catch (error) {\n      console.error('Database error:', error);\n      res.status(500).json({ error: '\ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.' });\n    }\n  } else if (req.method === 'DELETE') {\n    \/\/ \uac8c\uc2dc\uae00 \uc0ad\uc81c\n    try {\n      const [result] = await pool.execute(\n        'DELETE FROM posts WHERE id = ?',\n        [postId]\n      );\n\n      if (result.affectedRows === 0) {\n        return res.status(404).json({ error: '\uac8c\uc2dc\uae00\uc744 \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.' });\n      }\n\n      res.status(200).json({ message: '\uac8c\uc2dc\uae00\uc774 \uc0ad\uc81c\ub418\uc5c8\uc2b5\ub2c8\ub2e4.' });\n    } catch (error) {\n      console.error('Database error:', error);\n      res.status(500).json({ error: '\ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.' });\n    }\n  } else {\n    res.setHeader('Allow', ['GET', 'PUT', 'DELETE']);\n    res.status(405).json({ error: `Method ${req.method} Not Allowed` });\n  }\n}<\/code><\/pre>\n
pages\/index.js<\/h2>\n
import Link from 'next\/link';\nimport Layout from '..\/components\/Layout';\nimport pool from '..\/lib\/db';\n\nexport default function Home({ posts }) {\n  const formatDate = (dateString) => {\n    const date = new Date(dateString);\n    return date.toLocaleDateString('ko-KR', {\n      year: 'numeric',\n      month: '2-digit',\n      day: '2-digit',\n      hour: '2-digit',\n      minute: '2-digit'\n    });\n  };\n\n  return (\n    <Layout>\n      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>\n        <h2 style={{ margin: 0 }}>\uac8c\uc2dc\uae00 \ubaa9\ub85d<\/h2>\n        <Link \n          href="\/post\/write"\n          style={{ \n            padding: '10px 20px', \n            backgroundColor: '#007bff', \n            color: 'white', \n            textDecoration: 'none', \n            borderRadius: '4px',\n            fontSize: '14px'\n          }}\n        >\n          \uae00\uc4f0\uae30\n        <\/Link>\n      <\/div>\n\n      {posts.length === 0 ? (\n        <div style={{ \n          textAlign: 'center', \n          padding: '50px', \n          color: '#666',\n          border: '1px solid #eee',\n          borderRadius: '4px'\n        }}>\n          <p>\ub4f1\ub85d\ub41c \uac8c\uc2dc\uae00\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n          <Link href="\/post\/write" style={{ color: '#007bff', textDecoration: 'none' }}>\n            \uccab \ubc88\uc9f8 \uae00\uc744 \uc791\uc131\ud574\ubcf4\uc138\uc694!\n          <\/Link>\n        <\/div>\n      ) : (\n        <div style={{ border: '1px solid #ddd', borderRadius: '4px' }}>\n          {posts.map((post, index) => (\n            <div \n              key={post.id} \n              style={{ \n                padding: '15px 20px', \n                borderBottom: index < posts.length - 1 ? '1px solid #eee' : 'none',\n                display: 'flex',\n                justifyContent: 'space-between',\n                alignItems: 'center'\n              }}\n            >\n              <div style={{ flex: 1 }}>\n                <Link \n                  href={`\/post\/${post.id}`}\n                  style={{ \n                    textDecoration: 'none', \n                    color: '#333',\n                    fontSize: '16px',\n                    fontWeight: '500'\n                  }}\n                >\n                  {post.title}\n                <\/Link>\n                <div style={{ \n                  marginTop: '5px', \n                  fontSize: '14px', \n                  color: '#666' \n                }}>\n                  {post.author} \u2022 {formatDate(post.created_at)}\n                <\/div>\n              <\/div>\n            <\/div>\n          ))}\n        <\/div>\n      )}\n    <\/Layout>\n  );\n}\n\n\/\/ \uc11c\ubc84\uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1\uc73c\ub85c \uac8c\uc2dc\uae00 \ubaa9\ub85d\uc744 \uac00\uc838\uc634\nexport async function getServerSideProps() {\n  try {\n    const [rows] = await pool.execute(\n      'SELECT id, title, author, created_at FROM posts ORDER BY created_at DESC'\n    );\n\n    \/\/ Date \uac1d\uccb4\ub97c \ubb38\uc790\uc5f4\ub85c \ubcc0\ud658 (JSON \uc9c1\ub82c\ud654\ub97c \uc704\ud574)\n    const posts = rows.map(post => ({\n      ...post,\n      created_at: post.created_at.toISOString()\n    }));\n\n    return {\n      props: {\n        posts\n      }\n    };\n  } catch (error) {\n    console.error('Database error:', error);\n    return {\n      props: {\n        posts: []\n      }\n    };\n  }\n}<\/code><\/pre>\n
pages\/post\/[id].js<\/h2>\n
import { useState } from 'react';\nimport { useRouter } from 'next\/router';\nimport Link from 'next\/link';\nimport Layout from '..\/..\/components\/Layout';\nimport PostForm from '..\/..\/components\/PostForm';\nimport pool from '..\/..\/lib\/db';\n\nexport default function PostDetail({ post }) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const router = useRouter();\n\n  if (!post) {\n    return (\n      <Layout>\n        <div style={{ textAlign: 'center', padding: '50px' }}>\n          <h2>\uac8c\uc2dc\uae00\uc744 \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4<\/h2>\n          <Link href="\/" style={{ color: '#007bff', textDecoration: 'none' }}>\n            \ubaa9\ub85d\uc73c\ub85c \ub3cc\uc544\uac00\uae30\n          <\/Link>\n        <\/div>\n      <\/Layout>\n    );\n  }\n\n  const formatDate = (dateString) => {\n    const date = new Date(dateString);\n    return date.toLocaleDateString('ko-KR', {\n      year: 'numeric',\n      month: '2-digit',\n      day: '2-digit',\n      hour: '2-digit',\n      minute: '2-digit'\n    });\n  };\n\n  const handleDelete = async () => {\n    if (!confirm('\uc815\ub9d0 \uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?')) {\n      return;\n    }\n\n    setLoading(true);\n\n    try {\n      const response = await fetch(`\/api\/posts\/${post.id}`, {\n        method: 'DELETE',\n      });\n\n      if (response.ok) {\n        alert('\uac8c\uc2dc\uae00\uc774 \uc0ad\uc81c\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\n        router.push('\/');\n      } else {\n        alert('\uc0ad\uc81c \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.');\n      }\n    } catch (error) {\n      console.error('Error:', error);\n      alert('\uc0ad\uc81c \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.');\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  if (isEditing) {\n    return (\n      <Layout>\n        <h2>\uac8c\uc2dc\uae00 \uc218\uc815<\/h2>\n        <PostForm post={post} isEdit={true} \/>\n      <\/Layout>\n    );\n  }\n\n  return (\n    <Layout>\n      <div style={{ marginBottom: '20px' }}>\n        <Link href="\/" style={{ color: '#007bff', textDecoration: 'none' }}>\n          \u2190 \ubaa9\ub85d\uc73c\ub85c\n        <\/Link>\n      <\/div>\n\n      <article style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '20px' }}>\n        <header style={{ borderBottom: '1px solid #eee', paddingBottom: '15px', marginBottom: '20px' }}>\n          <h1 style={{ margin: '0 0 10px 0', fontSize: '24px', color: '#333' }}>\n            {post.title}\n          <\/h1>\n          <div style={{ fontSize: '14px', color: '#666' }}>\n            <span>{post.author}<\/span>\n            <span style={{ margin: '0 10px' }}>\u2022<\/span>\n            <span>\uc791\uc131\uc77c: {formatDate(post.created_at)}<\/span>\n            {post.updated_at !== post.created_at && (\n              <>\n                <span style={{ margin: '0 10px' }}>\u2022<\/span>\n                <span>\uc218\uc815\uc77c: {formatDate(post.updated_at)}<\/span>\n              <\/>\n            )}\n          <\/div>\n        <\/header>\n\n        <div style={{ \n          lineHeight: '1.6', \n          fontSize: '16px', \n          whiteSpace: 'pre-wrap',\n          minHeight: '200px'\n        }}>\n          {post.content}\n        <\/div>\n      <\/article>\n\n      <div style={{ \n        marginTop: '20px', \n        display: 'flex', \n        gap: '10px',\n        justifyContent: 'flex-end'\n      }}>\n        <button\n          onClick={() => setIsEditing(true)}\n          style={{ \n            padding: '10px 20px', \n            backgroundColor: '#28a745', \n            color: 'white', \n            border: 'none', \n            borderRadius: '4px', \n            cursor: 'pointer',\n            fontSize: '14px'\n          }}\n        >\n          \uc218\uc815\n        <\/button>\n\n        <button\n          onClick={handleDelete}\n          disabled={loading}\n          style={{ \n            padding: '10px 20px', \n            backgroundColor: '#dc3545', \n            color: 'white', \n            border: 'none', \n            borderRadius: '4px', \n            cursor: loading ? 'not-allowed' : 'pointer',\n            fontSize: '14px'\n          }}\n        >\n          {loading ? '\uc0ad\uc81c\uc911...' : '\uc0ad\uc81c'}\n        <\/button>\n      <\/div>\n    <\/Layout>\n  );\n}\n\nexport async function getServerSideProps({ params }) {\n  const { id } = params;\n  const postId = parseInt(id);\n\n  if (isNaN(postId)) {\n    return {\n      notFound: true\n    };\n  }\n\n  try {\n    const [rows] = await pool.execute(\n      'SELECT * FROM posts WHERE id = ?',\n      [postId]\n    );\n\n    if (rows.length === 0) {\n      return {\n        notFound: true\n      };\n    }\n\n    const post = {\n      ...rows[0],\n      created_at: rows[0].created_at.toISOString(),\n      updated_at: rows[0].updated_at.toISOString()\n    };\n\n    return {\n      props: {\n        post\n      }\n    };\n  } catch (error) {\n    console.error('Database error:', error);\n    return {\n      notFound: true\n    };\n  }\n}<\/code><\/pre>\n
pages\/post\/write.js<\/h2>\n
import Link from 'next\/link';\nimport Layout from '..\/..\/components\/Layout';\nimport PostForm from '..\/..\/components\/PostForm';\n\nexport default function WritePost() {\n  return (\n    <Layout>\n      <div style={{ marginBottom: '20px' }}>\n        <Link href="\/" style={{ color: '#007bff', textDecoration: 'none' }}>\n          \u2190 \ubaa9\ub85d\uc73c\ub85c\n        <\/Link>\n      <\/div>\n\n      <h2 style={{ marginBottom: '20px' }}>\uc0c8 \uac8c\uc2dc\uae00 \uc791\uc131<\/h2>\n\n      <PostForm \/>\n    <\/Layout>\n  );\n}<\/code><\/pre>\n
styles\/globals.css<\/h2>\n
* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nhtml,\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  line-height: 1.6;\n  color: #333;\n  background-color: #f8f9fa;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\nbutton {\n  font-family: inherit;\n}\n\ninput,\ntextarea {\n  font-family: inherit;\n  outline: none;\n}\n\ninput:focus,\ntextarea:focus {\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\nbutton:hover:not(:disabled) {\n  opacity: 0.9;\n  transform: translateY(-1px);\n  transition: all 0.2s ease;\n}\n\nbutton:disabled {\n  opacity: 0.6;\n}<\/code><\/pre>\n
pages\/_app.js<\/h2>\n
import '..\/styles\/globals.css';\n\nexport default function App({ Component, pageProps }) {\n  return <Component {...pageProps} \/>;\n}<\/code><\/pre>\n
\uc2e4\ud589<\/h2>\n
npm run dev<\/code><\/pre>\n
\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000\uc73c\ub85c<\/a> \uc811\uc18d\ud558\uc5ec \uac8c\uc2dc\ud310\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
React.js + Next.js + \uac8c\uc2dc\ud310 \uc0dd\uc131 \uac04\ub2e8\ud55c \uac8c\uc2dc\ud310\uc744 \ub9cc\ub4e4\uc5b4 \ubd05\ub2c8\ub2e4. \uc778\uacf5\uc9c0\ub2a5\uc774 \uc791\uc131\ud55c \ucf54\ub4dc\uc9c0\ub9cc \uc815\uc0c1\uc791\ub3d9 \ud655\uc778\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 # \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 simple-board\/ \u251c\u2500\u2500 package.json \u251c\u2500\u2500 .env.local \u251c\u2500\u2500 lib\/ \u2502 \u2514\u2500\u2500 db.js \u251c\u2500\u2500 pages\/ \u2502 \u251c\u2500\u2500 index.js (\uac8c\uc2dc\uae00 \ubaa9\ub85d) \u2502 \u251c\u2500\u2500 post\/ \u2502 \u2502 \u251c\u2500\u2500 [id].js (\uac8c\uc2dc\uae00 \uc0c1\uc138) \u2502 \u2502 \u2514\u2500\u2500 write.js (\uac8c\uc2dc\uae00 \uc791\uc131) \u2502 \u2514\u2500\u2500 api\/\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-10433","post","type-post","status-publish","format-standard","hentry","category-language"],"_links":{"self":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/10433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10433"}],"version-history":[{"count":6,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/10433\/revisions"}],"predecessor-version":[{"id":10439,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/10433\/revisions\/10439"}],"wp:attachment":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}