SBDevlog

React + Spring Boot Todo 평가 과제 - 필드확장, 페이지네이션, 마감일 임박 표시React와 Spring Boot로 실제 평가용 TodoList 서비스를 만든 기록이다. 지금까지 배운 React 기초(useState, useEffect, fetch)와 Spring Boot 기초(JPA 엔티티)를 실전 과제로 종합해본다.프로젝트 개요평가는 프론트엔드 위주로 진행되지만, 실제 동작하는 서비스를 보여주기 위해 백엔드까지 직접 구성했다.프론트엔드: React 19 + Vite + Tailwind CSS백엔드: Spring Boot 4.1.1 + Spring Data JPADB: H2 (인메모리)요구사항할 일(Todo) CRUD — 각 Todo는 제목 / 내용 / 마감일 / 완료 여부 / 카테..

React - JSONPlaceholder로 API 연습하기실제 서버 없이 API 연습을 할 수 있는 JSONPlaceholder를 정리한다. 주요 엔드포인트 종류부터, 중첩 객체 데이터를 다루는 법, 로딩 중 안전하게 화면을 보여주는 패턴까지 다룬다.JSONPlaceholder란?JSONPlaceholder는 실제 서버를 직접 만들지 않아도 연습용으로 사용할 수 있도록 가짜 데이터를 제공하는 무료 API다. 회원가입이나 API 키 발급 없이, 그냥 정해진 주소로 요청만 보내면 항상 똑같은 형식의 데이터를 돌려준다. 그래서 "서버에서 데이터를 받아와 화면에 그리는 연습"을 할 때 널리 사용된다.fetch("https://jsonplaceholder.typicode.com/posts/1") .then((..

React useEffect로 데이터 가져오기화면이 처음 나타났을 때 자동으로 서버 데이터를 불러오는 패턴을 정리한다. useEffect + fetch + useState를 조합하는 방법과, 왜 useEffect에 async 함수를 직접 넣으면 안 되는지까지 다룬다.왜 useEffect 안에서 fetch를 호출할까버튼을 클릭해야만 fetch가 실행되는 방식이 아니라, 실제 서비스에서는 "화면이 처음 나타났을 때 자동으로 데이터를 불러오는" 경우가 훨씬 많다.이전에 배운 useEffect를 떠올려보면, 의존성 배열을 빈 배열([])로 두면 컴포넌트가 마운트될 때(처음 화면에 나타날 때) 딱 한 번만 실행됐다. 이 성질을 이용하면 "컴포넌트가 화면에 나타나자마자 서버에서 데이터를 가져오는" 패턴을 만들 수 ..

React 비동기 처리 기초 정리 - Promise, async/await, fetch서버와 통신하는 코드를 짜려면 비동기 처리를 이해해야 한다. 동기/비동기의 차이부터 Promise, async/await 문법, 그리고 fetch API로 실제 데이터를 요청하는 방법까지 정리한다.동기(sync) vs 비동기(async) 처리지금까지 작성한 코드는 위에서 아래로, 한 줄이 끝나야 다음 줄이 실행되는 방식이었다. 이런 방식을 동기(sync) 처리라고 한다. 하지만 서버에서 데이터를 받아오는 작업처럼 시간이 오래 걸리는 작업을 동기 방식으로 처리하면, 데이터가 도착할 때까지 화면 전체가 멈춰버린다.function App() { const handleClick = () => { console.log("..

React + Tailwind CSS 정리지금까지 인라인 스타일(style={{ }})로 꾸며왔던 화면을 Tailwind CSS로 바꿔본다. Tailwind가 뭔지부터 Vite 프로젝트에 설치하는 방법, 자주 쓰는 클래스, 그리고 Todo 앱 전체를 Tailwind로 다시 스타일링하는 과정까지 다룬다.Tailwind CSS란지금까지는 style={{ color: "blue", padding: "12px" }}처럼 직접 스타일 값을 하나하나 지정했다. Tailwind CSS는 미리 정의된 클래스 이름을 className에 조합해서 붙이는 것만으로 스타일을 적용하는 도구다.// 지금까지 방식내용// Tailwind 방식내용p-4(padding), bg-gray-100(배경색), rounded-lg(둥근 모서..

React Todo 앱 - 트러블슈팅 & 전체 코드 정리지금까지 만든 Todo 앱을 마무리하면서, 자주 발생하는 오류들을 정리하고 전체 기능을 체크리스트로 점검한 뒤 완성된 전체 코드를 모아본다.자주 발생하는 오류들증상원인해결 방법콘솔에 "key" 관련 경고가 뜬다map()으로 리스트를 렌더링할 때 key를 안 넣었거나, key가 서로 겹친다todo.id처럼 고유한 값을 key로 지정한다버튼을 눌러도 화면이 안 바뀐다todos.push(newTodo)처럼 배열을 직접 수정한 뒤 setTodos(todos)를 호출했다setTodos([...todos, newTodo])처럼 새 배열을 만들어서 전달한다checkbox를 눌러도 아무 반응이 없다checked만 넣고 onChange를 안 넣었거나, onToggl..

React Todo 앱 - 필터링 기능 구현 (파생 데이터)Todo 앱에 "전체 / 미완료 / 완료" 필터 기능을 추가한다. 원본 데이터(todos)와 화면에 보여줄 데이터(filteredTodos)를 분리하는 이유, 남은 할 일 개수 계산, 조건부 스타일로 활성 버튼 강조까지 다룬다.필터 상태를 위한 state 만들기todos는 "무엇이 있는가"를 담고, 필터는 "그중 무엇을 보여줄 것인가"를 담기 때문에, 새로운 state로 따로 관리한다.const [filter, setFilter] = useState("all"); // "all" | "active" | "completed"필터 버튼 만들기 setFilter("all")}>전체 setFilter("active")}>미완료 setFilte..

React Todo 앱 - 완료 토글 기능 구현 (map, 객체 불변성)Todo 앱의 세 번째 기능인 "완료 체크"를 구현한다. checkbox 연결부터, filter()와는 다르게 map()으로 특정 항목만 값을 바꾸는 방법, 그리고 배열 안 객체 하나하나의 불변성까지 챙기는 법을 다룬다.TodoItem에 checkbox 추가하기function TodoItem({ todo, onDelete, onToggle }) { return ( onToggle(todo.id)} /> {todo.text} onDelete(todo.id)}>삭제 );}checkbox를 클릭하면 onToggle(todo.id)가 호출되어, "이 id를 가..

React Todo 앱 - 삭제 기능 구현 (props drilling, filter)Todo 앱의 두 번째 기능인 "삭제"를 구현한다. TodoItem에서 TodoList를 거쳐 App까지 콜백 함수를 전달하는 props drilling, 그리고 filter()로 안전하게 배열에서 항목을 제거하는 방법을 다룬다.TodoItem에 삭제 버튼 추가하기실제로 배열에서 항목을 지우는 로직은 todos를 가지고 있는 App에서 처리해야 하므로, TodoItem은 onDelete라는 콜백 함수를 props로 받아서 자신의 id와 함께 호출한다.function TodoItem({ todo, onDelete }) { return ( {todo.text} onDelete(todo.id)}>..

React Todo 앱 - 추가 기능 구현 (콜백 패턴, 불변성)Todo 앱의 첫 번째 기능인 "추가"를 구현한다. 자식 컴포넌트에서 부모에게 데이터를 요청하는 콜백 패턴, 고유 id 생성, 그리고 React에서 배열 state를 다룰 때 반드시 지켜야 할 불변성 개념까지 다룬다.TodoForm.jsx 만들기 - 입력값을 state로 관리// src/TodoForm.jsximport { useState } from "react";function TodoForm() { const [text, setText] = useState(""); return ( setText(e.target.value)} placeholder="할 일을 입력하세요" /> 추가 ..