다뤄야 할 내용간단한 로그인/로그아웃 기능 구현 (비밀번호 없이 닉네임만 입력)로그인 상태를 전역 상태(Context)로 관리로그인 여부에 따라 글쓰기/댓글 작성 UI 제어AuthContext 생성src/└── context/ └── AuthContext.jsx AuthContext.jsximport { createContext, useState, useEffect } from 'react';export const AuthContext = createContext();export function AuthProvider({ children }) { const [user, setUser] = useState(() => { const saved = localStorage.getItem('user'..
프로그래밍/React
댓글 전역 상태 관리 (CommentContext) CommentContext 생성src/└── context/ └── CommentContext.jsx CommentContext.jsximport { createContext, useState, useEffect } from 'react';export const CommentContext = createContext();export function CommentProvider({ children }) { const [comments, setComments] = useState(() => { const saved = localStorage.getItem('comments'); return saved ? JSON.parse(saved) :..
다뤄야 할 내용PostContext에 deletePost() 함수 추가글 상세 페이지(PostPage)에서 삭제 버튼 구현삭제 후 홈(/)으로 이동PostContext 수정deletePost 추가import { createContext, useState, useEffect } from "react";export const PostContext = createContext();export function PostProvider({ children }) { const [posts, setPosts] = useState(() => { const saved = localStorage.getItem("posts"); return saved ? JSON.parse(saved) : []; }); us..
Tailwind CSS 설치 (ver 4.1)https://tailwindcss.com/docs/installation/using-vitenpm install tailwindcss @tailwindcss/vite vite.config.js 수정import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import tailwindcss from '@tailwindcss/vite'// https://vite.dev/config/export default defineConfig({ plugins: [react(), tailwindcss()],}) App.css 에 추가@import "tailwindcss"; 레이아웃 컴포넌트 생성s..
설치 및 실행npm install -g json-server db.json 파일 만들기{ "posts": [ { "id": 1, "title": "서버 글1", "content": "내용입니다." }, { "id": 2, "title": "서버 글2", "content": "내용입니다." }, { "id": 3, "title": "서버 글3", "content": "내용입니다." }, { "id": 4, "title": "서버 글4", "content": "내용입니다." }, { "id": 5, "title": "서버 글5", "content": "내용입니다." }, { "id": 6, "title": "서버 글6", "content": "내용입..
다뤄야 할 내용새로고침 시 데이터가 사라지지 않도록 유지하는 방법 학습 localStorage 사용하기PostContext 수정// src/context/PostContext.jsximport { createContext, useState, useEffect } from 'react';export const PostContext = createContext();export function PostProvider({ children }) { const [posts, setPosts] = useState(() => { const saved = localStorage.getItem('posts'); return saved ? JSON.parse(saved) : []; }); useEffect(..
다뤄야 할 내용글 작성과 수정에서 공통으로 사용하는 폼 컴포넌트를 분리하여 재사용성 향상폼 컴포넌트 분리src/└── components/ └── PostForm.jsx PostForm.jsx// src/components/PostForm.jsximport { useState } from 'react';function PostForm({ initialTitle = '', initialContent = '', onSubmit, submitLabel = "등록" }) { const [title, setTitle] = useState(initialTitle); const [content, setContent] = useState(initialContent); const handleSubmit = e..
글 상세 보기 (PostPage)import { useContext, useState } from 'react';import { useParams, useNavigate } from 'react-router-dom';import { PostContext } from '../context/PostContext';function PostPage() { const { posts, updatePost } = useContext(PostContext); const { id } = useParams(); const post = posts.find(p => p.id === Number(id)); const navigate = useNavigate(); const [editing, setEditing] = u..
다뤄야 할 내용React의 useState를 사용해 글 데이터를 메모리에 저장하고 관리합니다.useContext와 createContext를 사용해 글 데이터를 전역 상태로 공유합니다.글 작성 폼을 만들고 새 글을 추가할 수 있도록 합니다.더미 데이터 만들기src/data/initialPosts.js// src/data/initialPosts.jsconst initialPosts = [ { id: 1, title: "첫 번째 글", content: "안녕하세요!" }, { id: 2, title: "두 번째 글", content: "React는 재밌어요." }];export default initialPosts; Context 만들기 - 전역 데이타 다루기// src/context/PostConte..
React Router 설치npm install react-router-dom 라우팅 설정 파일 만들기src/routes/Router.jsx// src/routes/Router.jsximport { BrowserRouter, Routes, Route } from 'react-router-dom';import Header from '../components/Header';import HomePage from '../pages/HomePage';import WritePage from '../pages/WritePage';import PostPage from '../pages/PostPage';function Router() { return ( } /> ..
1 .Vite + React 프로젝트 생성하기npm create vite@latest my-blog -- --template reactcd my-blognpm installnpm run dev 2. 폴더구조 만들기src/├── components/ # 공통 컴포넌트 (Header, PostCard 등)├── context/ # Context 훅├── data/ # 더미 데이터 (초기 글/댓글 등)├── layout/ # Layout├── pages/ # 페이지 단위 컴포넌트 (홈, 글 작성 등)├── routes/ # 라우팅 설정├── App.jsx├── main.jsxmkdir src/components src..
1. if () {} 2. &&{ cars.length && { cars.length } } 3. condition ? A : B (참이면 A, 거짓이면 B)
