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! 이 풀 리퀘스트는 Vite를 사용하여 React TODO 애플리케이션의 기본 구조를 설정합니다. 코드 품질과 일관성을 위한 ESLint 및 Prettier와 같은 필수 개발 구성을 포함합니다. 더미 API를 통해 TODO 항목을 관리하는 핵심 애플리케이션 로직(가져오기, 추가, 삭제, 업데이트)이 구현되었으며, UI를 위한 모듈식 컴포넌트 아키텍처가 적용되었습니다. 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}
README.md
Outdated
| # React + Vite | ||
|
|
||
| This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
|
|
||
| Currently, two official plugins are available: | ||
|
|
||
| - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) | ||
| - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) | ||
|
|
||
| ## React Compiler | ||
|
|
||
| The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). | ||
|
|
||
| ## Expanding the ESLint configuration | ||
|
|
||
| If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. |
There was a problem hiding this comment.
현재 README.md 파일의 내용은 일반적인 Vite + React 템플릿 설명입니다. 이 프로젝트가 "React TODO 앱 만들기" 미션의 일환이므로, 실제 애플리케이션의 기능, 실행 방법, 사용된 API 엔드포인트 등 프로젝트에 특화된 정보로 업데이트하는 것이 사용자에게 더 유용할 것입니다.
| .then((res) => setTodos(res.todos)) | ||
| }, []) | ||
|
|
||
| let randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min |
There was a problem hiding this comment.
randomInt 함수는 App 컴포넌트 내부에 정의되어 있어 컴포넌트가 리렌더링될 때마다 새로 생성됩니다. 이 함수는 컴포넌트의 상태나 props에 의존하지 않는 유틸리티 함수이므로, 컴포넌트 외부로 이동시키거나 useCallback을 사용하여 메모이제이션하는 것이 좋습니다. 이는 코드의 재사용성을 높이고 불필요한 함수 재생성을 방지합니다.
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
function App() {| <div className="app"> | ||
| <div className="app-container"> | ||
| <header className="app-header"> | ||
| <h1 style={{ textAlign: 'center' }}>React Todo API</h1> |
There was a problem hiding this comment.
h1 태그에 style={{ textAlign: 'center' }}와 같이 인라인 스타일이 적용되어 있습니다. 스타일의 일관성과 유지보수성을 위해 이러한 스타일은 App.css 파일에 클래스로 정의하여 관리하는 것이 더 좋습니다.
<h1 className="app-title">React Todo API</h1>| // <li key={item.id} style={{ textDecoration: item.completed ? 'line-through' : 'none' }}> | ||
| // <input type="checkbox" checked={item.completed} onChange={() => onToggleCompleted(item.id)} /> | ||
| // {JSON.stringify(item.completed)} - {item.todo} | ||
| // <button onClick={() => deleteTodo(item.id)}>삭제</button> | ||
| // </li> |
There was a problem hiding this comment.
주석 처리된 코드는 더 이상 사용되지 않는 것으로 보입니다. 불필요한 코드는 제거하여 코드의 가독성을 높이고 혼란을 줄이는 것이 좋습니다.
Replaced Markdown image syntax with HTML image tag.
Sinou3936
changed the title
Sinou3936
changed the title
|
css 적용, 랜덤 id 생성 vite 등 코드에서 내공이 느껴지네요! |
Rakhyunn
left a comment
Rakhyunn
left a comment
There was a problem hiding this comment.
전체적으로 깔끔하였고 그 중 API 요청 처리하는 부분에 await를 걸어 응답이 오면 데이터를 처리해서 undefined 에러를 방지한 부분이 특히 좋았습니다!
고생하셨습니다! 😄
|
API 요청을 조회, 생성, 삭제, 수정 기능별로 잘 분리해주셔서 전체 CRUD 흐름을 이해하기 쉬웠던 것 같습니다. |
|
기능 구분이 잘 되어있는거 같아 이해하기 편합니다. 디자인도 깔끔하네요 |
5 participants
Uh oh!
There was an error while loading. Please reload this page.