[Step5] cactus - API 요청과 비동기 처리 - #10
Open
ehlung wants to merge 10 commits into
Open
Conversation
📝 WalkthroughWalkthrough
ChangesREST API 연동 및 학습 문서 교체
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
ehlung
changed the title
meteorqz6
reviewed
Jun 14, 2026
| { id: crypto.randomUUID(), ...newRestaurant }, | ||
| ]); | ||
| const fetchRestaurants = useCallback(async () => { | ||
| const response = await fetch("http://localhost:3000/restaurants"); |
Contributor
There was a problem hiding this comment.
[제안]
http://localhost:3000 BASE_URL의 경우, 상수로 추출해서 한 곳에서 관리를 하면 좋을 것 같습니다. 여러 파일에 하드코딩되어 있으면 API 주소가 변경될 때마다 일일이 검색해서 수정해야 하기 때문에 한 곳에서 관리하면 수정 범위를 최소화할 수 있습니다!
Contributor
|
@CodeRabbit review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@README.md`:
- Around line 141-151: The comparison table in README.md (lines 141-151) has the
"과거 코드" (past code) and "현재 코드" (current code) columns reversed, causing the
descriptions of useCallback/dependency array and id generation to contradict the
actual current src/App.jsx implementation. Swap the column contents or re-label
the columns so that "현재 코드" accurately describes what is actually implemented in
the current App.jsx code (general async function without useCallback and empty
dependency array for fetchRestaurants, and server-side id generation). Also
correct the same backwards description in the id generation section that follows
to ensure learners understand the actual evolution and current state of the
code.
In `@src/App.jsx`:
- Around line 15-31: The current code treats API failures as successes because
fetch does not throw exceptions on 4xx/5xx status codes. The fetchRestaurants
function lacks error handling and does not check response.ok before processing
data, which can cause unhandled rejections on mount. The handleFormSubmit
function does not verify the POST succeeded before refetching restaurants. Wrap
both fetchRestaurants and handleFormSubmit in try/catch blocks, add response.ok
checks after each fetch call to verify success, and only proceed with state
updates and subsequent operations when the response is successful. Remove calls
to setNewRestaurants and fetchRestaurants from the error paths.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 64265a6d-9ff3-414a-8bf2-0e0aef25727c
📒 Files selected for processing (4)
04-form/README.md05-effects/README.mdREADME.mdsrc/App.jsx
💤 Files with no reviewable changes (1)
- 04-form/README.md
Comment on lines
141
to
151
| | 구분 | 과거 코드 | 현재 코드 | | ||
| |------|---------|---------| | ||
| | 방식 | Uncontrolled (`FormData`) | Controlled (`useState`) | | ||
| | 값 접근 | 제출 시 DOM에서 읽음 | state로 실시간 관리 | | ||
| | 코드량 | 적음 | 많음 | | ||
| | fetchRestaurants 선언 | `useCallback`으로 감쌈 | 일반 async 함수 | | ||
| | 의존성 배열 | `[fetchRestaurants]` | `[]` | | ||
|
|
||
| 과거 코드는 state 없이 폼 제출 시 `FormData`로 DOM에서 한 번에 읽었다. 각 input에 `name` 속성이 있으면 키-값 쌍으로 꺼낼 수 있어 코드가 간결하다. | ||
| 과거 코드는 `fetchRestaurants`를 의존성 배열에 넣기 위해 `useCallback`으로 참조를 안정화했다. 현재 코드는 `useCallback` 없이 `[]`로 뒀다. | ||
|
|
||
| ```jsx | ||
| // 과거 — Uncontrolled | ||
| const fd = new FormData(e.currentTarget); | ||
| onAdd({ category: fd.get("category"), name: fd.get("name") }); | ||
| **2. id 생성 방식** | ||
|
|
||
| // 현재 — Controlled | ||
| const [name, setName] = useState(""); | ||
| <input value={name} onChange={(e) => setName(e.target.value)} /> | ||
| ``` | ||
| 과거 코드는 처음에 `` `a${Date.now()}` ``로 클라이언트에서 id를 생성해 POST 요청에 포함했다. 리뷰를 통해 클라이언트 생성 id의 문제(밀리초 충돌, 시스템 시간 불일치)를 인지하고 id를 보내지 않아 서버가 발급하도록 수정했다. 현재 코드도 같은 방식이다. | ||
|
|
There was a problem hiding this comment.
현재 코드와 비교 표가 뒤집혀 있습니다.
useCallback/의존성 배열 설명과 id 생성 방식 설명이 현재 src/App.jsx 구현과 맞지 않습니다. 지금 문서는 "과거 코드"와 "현재 코드"를 서로 바꿔 적은 상태라 학습자가 실제 흐름을 잘못 이해할 수 있습니다. 표와 아래 설명을 현재 구현 기준으로 다시 맞춰 주세요.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@README.md` around lines 141 - 151, The comparison table in README.md (lines
141-151) has the "과거 코드" (past code) and "현재 코드" (current code) columns
reversed, causing the descriptions of useCallback/dependency array and id
generation to contradict the actual current src/App.jsx implementation. Swap the
column contents or re-label the columns so that "현재 코드" accurately describes
what is actually implemented in the current App.jsx code (general async function
without useCallback and empty dependency array for fetchRestaurants, and
server-side id generation). Also correct the same backwards description in the
id generation section that follows to ensure learners understand the actual
evolution and current state of the code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
개인 목표 달성 여부
리뷰어에게
[]로만 뒀다가 과거 코드 리뷰를 보고useCallback을 적용해 수정했습니다. 이 방향이 적절한지 피드백 부탁드립니다.await fetchRestaurants()로 순서를 보장했는데, 스터디 때 다른 방법도 함께 알아보면 좋을 것 같습니다.Summary by CodeRabbit
Documentation
New Features
Refactor