Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 ESLint를 포함한 기본 개발 환경을 설정하여 Vite를 사용하는 새로운 React 프로젝트를 초기화합니다. 또한 작업 추가 및 제거와 같은 핵심 기능을 갖춘 기본적인 TODO 애플리케이션을 소개합니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
mission todoapp/src/App.jsx
Outdated
| const [todos, setTodos] = useState(4); | ||
|
|
||
| const [todoId, setTodoId] = useState([ | ||
| {id:3, text:'공부하기', checked:false}, | ||
| {id:2, text:'코딩하기', checked:false}, | ||
| {id:1, text:'운동하기', checked:false}, | ||
|
|
||
| ]); |
There was a problem hiding this comment.
todos 상태가 숫자 4로 잘못 초기화되어 있어 map 함수 사용 시 런타임 에러가 발생합니다. 또한, todoId 상태는 선언만 되고 사용되지 않고 있습니다. todos 상태를 todoId의 초기 데이터로 초기화하고, 불필요한 todoId 상태는 제거하는 것이 좋습니다.
const [todos, setTodos] = useState([
{id:3, text:'공부하기', checked:false},
{id:2, text:'코딩하기', checked:false},
{id:1, text:'운동하기', checked:false},
]);
mission todoapp/src/App.jsx
Outdated
| const handleOnSubmit = (e) => { | ||
| e.preventDefault(); | ||
| const form = e.target; | ||
| setTodos([{ text: form.todo.value, checked: false }, ...todos]); |
There was a problem hiding this comment.
새로운 할 일을 추가할 때 고유한 id를 부여하지 않고 있습니다. React에서 목록을 렌더링할 때, 각 항목은 안정적이고 고유한 key prop을 가져야 합니다. 배열의 인덱스를 key로 사용하는 것(32번째 줄)은 항목이 추가, 삭제, 또는 재정렬될 때 예기치 않은 동작이나 성능 저하를 유발할 수 있습니다.
useRef를 사용하여 다음 id를 관리하고, 이를 새 할 일에 부여하는 것을 권장합니다. 예를 들어, 다음과 같이 수정할 수 있습니다.
// 컴포넌트 상단에 추가
import { useState, useRef } from "react";
// App 컴포넌트 내부에 추가
const nextId = useRef(4);
// handleOnSubmit 수정
const handleOnSubmit = (e) => {
e.preventDefault();
const form = e.target;
setTodos([{ id: nextId.current++, text: form.todo.value, checked: false }, ...todos]);
form.reset(); // 입력 필드 초기화
};그리고 map 함수에서 key prop을 todo.id로 설정해야 합니다: <li key={todo.id}>
mission todoapp/src/App.jsx
Outdated
| const removeTodo = (selectedIndex) => { | ||
| const filterTodos = todos.filter((todo, index) => index != selectedIndex); | ||
| setTodos(filterTodos); | ||
| }; |
There was a problem hiding this comment.
할 일을 삭제할 때 배열의 인덱스를 사용하고 있습니다. 이는 목록이 필터링되거나 정렬될 경우 의도치 않은 항목이 삭제될 수 있는 버그를 유발할 수 있습니다. 각 할 일의 고유 id를 사용하여 삭제하는 것이 더 안전하고 예측 가능합니다.
이 변경사항을 적용하려면 onClick 핸들러도 <button onClick={() => removeTodo(todo.id)}>X</button>와 같이 수정해야 합니다.
const removeTodo = (idToRemove) => {
const filterTodos = todos.filter((todo) => todo.id !== idToRemove);
setTodos(filterTodos);
};
woo0218
changed the title
|
앱 설명과 구조를 잘 정리해주셔서 전체적인 흐름을 이해하기 쉬웠습니다 특히 Quick Add, Interactive List, Smart Delete처럼 기능을 명확하게 구분해두신 부분이 인상적이었고 전체적으로 기능 구현과 구조 설계 모두 잘 되어 있어서 인상적인 PR이었습니다! |
|
구조를 알기 쉽게 설명해주신거 같아요 |
3 participants
📝 앱 설명 (App Description)
본 프로젝트는 일상의 할 일을 효율적으로 관리할 수 있는 가벼운 웹 애플리케이션입니다.
✨ 주요 기능 (Key Features)
| 기능 | 상세 설명 | 상태 |
| Quick Add |
Enter키나 버튼 클릭을 통한 즉각적인 할 일 등록 | ✅ || Interactive List | 완료 항목 토글(Check/Uncheck) 및 시각적 피드백(취소선 등) | ✅ |
| Smart Delete | 특정 항목을 목록에서 안전하게 제거하는 필터링 로직 | ✅ |
| Responsive UI | 다양한 디바이스 환경에 최적화된 레이아웃 구성 | 🎨 |
🛠 기술 스택 (Tech Stack)
React 18,Vite(빠른 빌드 및 개발 환경)useState,props(컴포넌트 간 데이터 전달)src/
┣ 📂 components/ # 재사용 가능한 UI 컴포넌트
┃ ┣ 📜 TodoInput.jsx # 할 일 입력 창 및 등록 로직
┃ ┣ 📜 TodoList.jsx # 할 일 목록 렌더링 컨테이너
┃ ┗ 📜 TodoItem.jsx # 개별 항목 표시 및 삭제/토글 기능
┣ 📂 assets/ # 이미지 및 정적 리소스
┣ 📜 App.jsx # 메인 비즈니스 로직 및 전체 상태 관리
┗ 📜 main.jsx # React 앱 엔트리 포인트