june blog

안녕하세요! 이번 시간에는 리액트 블로그에 댓글 기능을 추가해보겠습니다. 각 게시글에 사용자가 댓글을 남길 수 있도록 하고, 댓글은 localStorage에 저장되도록 만들어볼게요.📌 목표게시글마다 댓글 입력 가능댓글 목록 렌더링댓글은 localStorage에 저장되어 새로고침해도 유지🧱 1. 댓글 상태 만들기 (App.js)const [comments, setComments] = useState({});useEffect(() => { const savedComments = localStorage.getItem('my-blog-comments'); if (savedComments) { setComments(JSON.parse(savedComments)); }}, []);설명: 전체 댓글을 ..

안녕하세요! 리액트 블로그 튜토리얼 아홉 번째 시간입니다 😄이번에는 각 글에 좋아요 버튼을 추가해서 사용자의 반응을 표현해보겠습니다!좋아요 수는 localStorage에 저장돼서, 새로고침해도 유지됩니다.📌 목표각 글에 ❤️ 좋아요 수 표시좋아요 버튼 클릭 시 숫자 증가좋아요 수 localStorage에 저장📄 1. 글에 좋아요 수 속성 추가App.js에서 addPost 함수에 likes: 0을 추가해 주세요:const addPost = (newPost) => { const postWithId = { ...newPost, id: Date.now(), likes: 0 // ✅ 좋아요 수 초기화 }; const updatedPosts = [postWithId, ...posts]; ..

안녕하세요! 리액트 블로그 여덟 번째 시간입니다 😊이번 시간에는 작성한 글을 삭제할 수 있는 기능을 추가해볼게요.글 목록 옆에 '삭제' 버튼을 추가하고, 클릭 시 해당 글이 지워지게 만들 거예요.📌 목표글 목록에서 '삭제' 버튼 추가클릭 시 해당 글 삭제삭제 후 localStorage도 업데이트📄 1. App.js에서 삭제 함수 만들기function App() { const [posts, setPosts] = useState([]); useEffect(() => { const savedPosts = localStorage.getItem('my-blog-posts'); if (savedPosts) { setPosts(JSON.parse(savedPosts)); } }, ..

안녕하세요! 리액트 블로그 튜토리얼 일곱 번째 시간입니다!이번 시간에는 이미 작성한 글을 수정할 수 있는 기능을 만들어볼게요.수정 페이지에서 제목과 내용을 바꾸고 저장하면,목록과 상세 페이지에 바로 반영되고 localStorage에도 저장됩니다.📌 목표글 목록에서 수정 버튼 추가수정 페이지에서 제목과 내용 수정 가능수정 후 저장하면 글이 업데이트됨localStorage도 같이 업데이트📄 1. 수정 페이지 컴포넌트 만들기 (PostEdit.js)import React, { useState, useEffect } from 'react';import { useParams, useNavigate } from 'react-router-dom';function PostEdit({ posts, setPosts }..

안녕하세요! 리액트 블로그 여섯 번째 시간입니다 😄이번엔 작성한 글들을 제목으로 검색할 수 있는 기능을 추가해볼 거예요.검색창에 글 제목 일부를 입력하면, 그에 맞는 글만 보여지도록 만들어볼게요!📌 목표검색어를 입력할 수 있는 입력창 추가입력한 값에 따라 포스트 리스트 실시간 필터링📄 1. PostList.js 수정📄 src/components/PostList.jsimport React, { useState } from 'react';import { Link } from 'react-router-dom';function PostList({ posts }) { const [searchTerm, setSearchTerm] = useState(''); // 🔍 검색 필터링 const filter..

안녕하세요! 리액트 블로그 튜토리얼 다섯 번째 시간입니다 😄오늘은 각 글마다 댓글을 추가할 수 있도록 댓글 기능을 만들어볼 거예요.작성한 댓글도 글처럼 localStorage에 함께 저장돼서새로고침해도 사라지지 않도록 만들어보겠습니다.📌 목표각 글 상세 페이지에 댓글 작성 폼 추가댓글 리스트 표시댓글도 localStorage에 저장/불러오기📄 1. PostDetail.js 수정📄 src/components/PostDetail.jsimport React, { useState, useEffect } from 'react';import { useParams, Link } from 'react-router-dom';function PostDetail({ posts }) { const { id } = u..

안녕하세요! 리액트 블로그 튜토리얼 네 번째 시간입니다 😊지난 시간까지는 글 작성, 상세 보기까지 만들었고요.하지만 문제는… 새로고침하면 글이 날아간다는 것!오늘은 이걸 해결하기 위해 브라우저 저장소인 localStorage를 활용해볼 거예요.📌 목표사용자가 작성한 글을 localStorage에 저장앱을 다시 열었을 때 저장된 글을 불러오기🛠 1. localStorage에서 글 가져오기📄 src/App.js 수정import React, { useState, useEffect } from 'react';// ...function App() { const [posts, setPosts] = useState([]); // 🔽 저장된 글 불러오기 (컴포넌트 처음 마운트될 때 한 번만 실행) use..

안녕하세요! 리액트 블로그 튜토리얼 세 번째 시간입니다. 😊오늘은 React Router를 활용해서글 목록에서 글을 클릭하면 상세 페이지로 이동하는 기능을 만들어볼 거예요.📦 1. React Router 설치터미널에서 아래 명령어를 입력해 React Router를 설치해주세요:npm install react-router-dom🛠️ 2. Router 설정하기📄 src/App.js 수정import React, { useState } from 'react';import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';import Header from './components/Header';import PostList from './..

안녕하세요! 리액트 블로그 튜토리얼 두 번째 시간입니다. 👋오늘은 내 블로그에 "글 쓰기 기능"을 추가해볼 거예요.React에서 폼을 다루는 기본기를 배울 수 있는 실전 예제랍니다!📁 파일 구조 추가이번에는 PostForm.js 컴포넌트를 새로 만들어볼게요.src/ ┣ components/ ┃ ┣ Header.js ┃ ┣ PostList.js ┃ ┣ PostItem.js ┃ ┗ PostForm.js ← 추가! ┗ App.js✏️ PostForm.js 만들기📄 src/components/PostForm.jsimport React, { useState } from 'react';function PostForm({ onAddPost }) { const [title, setTitle] = useState..

안녕하세요, 오늘은 코딩 초보자도 따라할 수 있는 React 블로그 만들기 튜토리얼을 준비했어요.HTML, CSS 정도만 알고 있다면 누구든지 도전할 수 있도록 아주 쉽게 설명할게요.그럼, 바로 시작해볼까요?📦 1. 프로젝트 환경 준비하기먼저, 리액트를 설치해야겠죠?📌 필수 준비물Node.js 설치 👉 https://nodejs.org터미널 or 명령 프롬프트 사용 가능✅ 리액트 프로젝트 만들기npx create-react-app my-blogcd my-blognpm start이제 기본적인 리액트 프로젝트가 준비됐어요!브라우저에서 http://localhost:3000 열면 "Hello World"가 반겨줄 거예요. 👋🧱 2. 블로그 구조 만들기이제 블로그에 필요한 기본 구조를 만들어볼게요.📁..