React 평가

# Vite + React 프로젝트 생성 npm create vite@latest [프로젝트명] -- --template react # 생성된 폴더로 이동 후 기본 패키지 설치 cd [프로젝트명] npm install # 라이브러리 설치 npm install [라이브러리명] # Tailwind v4 설치 npm install tailwindcss @tailwindcss/vite

// vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite' // ← 추가 export default defineConfig({ plugins: [ react(), tailwindcss(), // ← 추가 ], })

/* src/index.css — 기존 내용 모두 삭제 후 아래 한 줄만 작성 */ @import "tailwindcss";

// com.aloha.product.domain.Product @Data @NoArgsConstructor @AllArgsConstructor public class Product { private String id; // UUID (ex. "550e8400-e29b-41d4-a716-446655440000") private String name; private int price; private int stock; private LocalDateTime createdAt; }

// com.aloha.product.mapper.ProductMapper @Mapper public interface ProductMapper { List<Product> selectAll(); Product selectOne(String id); int insert(Product product); int update(Product product); int delete(String id); }

<!-- resources/mapper/ProductMapper.xml --> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "<http://mybatis.org/dtd/mybatis-3-mapper.dtd>"> <mapper namespace="com.aloha.product.mapper.ProductMapper"> <!-- 전체 조회 --> <select id="selectAll" resultType="com.aloha.product.domain.Product"> SELECT * FROM product ORDER BY created_at DESC </select> <!-- 단건 조회 --> <select id="selectOne" parameterType="String" resultType="com.aloha.product.domain.Product"> SELECT * FROM product WHERE id = #{id} </select> <!-- 등록 — UUID는 Controller에서 생성 후 product 객체에 세팅하여 전달 --> <insert id="insert" parameterType="com.aloha.product.domain.Product"> INSERT INTO product (id, name, price, stock, created_at) VALUES (#{id}, #{name}, #{price}, #{stock}, NOW()) </insert> <!-- 수정 --> <update id="update" parameterType="com.aloha.product.domain.Product"> UPDATE product SET name = #{name}, price = #{price}, stock = #{stock} WHERE id = #{id} </update> <!-- 삭제 --> <delete id="delete" parameterType="String"> DELETE FROM product WHERE id = #{id} </delete> </mapper>

// Controller 기본 구조 @RestController @RequestMapping("/api/products") @CrossOrigin(origins = "<http://localhost>:_____") // React(Vite) 포트 번호 채우기 public class ProductController { @Autowired private ProductMapper productMapper; // GET 전체 조회 @GetMapping public List<Product> getAll() { return productMapper.________(); } // GET 단건 조회 @GetMapping("/{id}") public Product getOne(@PathVariable String id) { return productMapper.________(id); } // POST 등록 — UUID를 직접 생성하여 id에 세팅 @PostMapping public Product create(@RequestBody Product product) { product.setId(UUID.randomUUID().toString()); // UUID 생성 productMapper.________(product); return product; } // PUT 수정 @PutMapping("/{id}") public Product update(@PathVariable String id, @RequestBody Product product) { product.setId(id); productMapper.________(product); return productMapper.________(id); } // DELETE 삭제 @DeleteMapping("/{id}") public void delete(@PathVariable String id) { productMapper.________(id); } }

# application.properties — DB 연결 및 MyBatis 설정 spring.datasource.url=jdbc:mysql://localhost:3306/[DB명]?useSSL=false&serverTimezone=Asia/Seoul spring.datasource.username=root spring.datasource.password=1234 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver # MyBatis mapper xml 위치 mybatis.mapper-locations=classpath:mapper/*.xml # 카멜케이스 자동 변환 (created_at → createdAt) mybatis.configuration.map-underscore-to-camel-case=true

// App.js — 라우팅 기본 구조 import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Navbar from './components/Navbar'; import ProductList from './pages/ProductList'; // ... 나머지 import 추가 function App() { return ( <BrowserRouter> <Navbar /> <Routes> <Route path="/" element={<ProductList />} /> {/* 나머지 Route 추가 */} </Routes> </BrowserRouter> ); } export default App;

// Navbar.jsx — Link 컴포넌트 사용 import { Link } from 'react-router-dom'; function Navbar() { return ( <nav> <Link to="/">상품 목록</Link> <Link to="/products/new">상품 등록</Link> </nav> ); }

// productApi.js — axios 인스턴스 및 함수 예시 import axios from 'axios'; const api = axios.create({ baseURL: '<http://localhost:8080/api>' }); export const getProducts = () => api.get('/products'); export const getProduct = (id) => api.get(`/products/${id}`); export const createProduct = (data) => api.______('/products', data); export const updateProduct = (id, data) => api.______(`/products/${id}`, data); export const deleteProduct = (id) => api.______(`/products/${id}`);

// ProductList.jsx — useEffect, useState 사용 예시 import { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { getProducts, deleteProduct } from '../api/productApi'; function ProductList() { const [products, setProducts] = useState([]); const navigate = useNavigate(); // 목록 불러오기 const fetchProducts = () => { getProducts().then(res => setProducts(res.data)); }; useEffect(() => { fetchProducts(); // 컴포넌트 마운트 시 1회 실행 }, []); // 삭제 처리 const handleDelete = (id) => { if (window.confirm('정말 삭제하시겠습니까?')) { deleteProduct(id).then(() => fetchProducts()); // 삭제 후 목록 갱신 } }; return ( <div> {products.map(product => ( <div key={product.id}> <span>{product.name}</span> <button onClick={() => navigate(`/products/${product.id}`)}>상세보기</button> <button onClick={() => handleDelete(product.id)}>삭제</button> </div> ))} </div> ); }

// ProductForm.jsx — 등록/수정 모드 분기 처리 예시 import { useState, useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { getProduct, createProduct, updateProduct } from '../api/productApi'; function ProductForm() { const { id } = useParams(); // 수정 모드이면 id 존재, 등록 모드이면 undefined const navigate = useNavigate(); const isEdit = !!id; // true면 수정 모드 const [form, setForm] = useState({ name: '', price: '', stock: '' }); useEffect(() => { if (isEdit) { // 수정 모드: 기존 데이터 불러오기 getProduct(id).then(res => setForm(res.data)); } }, [id]); const handleChange = (e) => { setForm({ ...form, [e.target.name]: e.target.value }); }; const handleSubmit = (e) => { e.preventDefault(); if (isEdit) { updateProduct(id, form).then(() => navigate('/')); } else { createProduct(form).then(() => navigate('/')); } }; return ( <form onSubmit={handleSubmit}> <input name="name" value={form.name} onChange={handleChange} placeholder="상품명" /> <input name="price" value={form.price} onChange={handleChange} placeholder="가격" /> <input name="stock" value={form.stock} onChange={handleChange} placeholder="재고" /> <button type="submit">{isEdit ? '수정' : '등록'}</button> </form> ); }

// vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite' // ← 추가 export default defineConfig({ plugins: [ react(), tailwindcss(), // ← 추가 ], })

/* src/index.css */ @import "tailwindcss";

// 유효성 검사 예시 const handleSubmit = (e) => { e.preventDefault(); if (!form.name.trim()) { alert('상품명을 입력하세요.'); return; } if (form.price === '' || Number(form.price) < 0) { alert('가격은 0 이상의 숫자를 입력하세요.'); return; } if (form.stock === '' || Number(form.stock) < 0) { alert('재고는 0 이상의 숫자를 입력하세요.'); return; } // 검사 통과 후 API 호출 if (isEdit) { ... } else { ... } };

// Tailwind 스타일 예시 <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700" > 등록 </button> <input className="border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" />