From 37961e092b3736e8d2c4e9ca1afd135aafea41ba Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Mon, 8 Jun 2026 01:26:59 +0900
Subject: [PATCH 01/13] =?UTF-8?q?docs:=205=EB=8B=A8=EA=B3=84=20=EB=AF=B8?=
 =?UTF-8?q?=EC=85=98=20=EC=9A=94=EA=B5=AC=EC=82=AC=ED=95=AD=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 05-effects/README.md | 49 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 05-effects/README.md

diff --git a/05-effects/README.md b/05-effects/README.md
new file mode 100644
index 0000000..3c445ae
--- /dev/null
+++ b/05-effects/README.md
@@ -0,0 +1,49 @@
+# 05. API 연동하기: side-effect(feat. effects)
+
+## 🎯 요구 사항
+- API로 레스토랑 목록을 불러와 `<RestaurantList />`에 내려줍니다.
+  - 로딩 상태, 에러 상태 등은 고려하지 않습니다.
+- 레스토랑 추가 모달에서 추가하기 버튼을 클릭하면 POST 요청을 보냅니다. 모달이 닫히고, 레스토랑 목록을 다시 불러옵니다. 
+
+## ✅ 키워드
+- effect (feat. side effect)
+  - useEffect
+
+## 🧙‍♀️ 진행 가이드
+
+- 진행 시간: 2시간 내에 완료하는 것을 목표로 합니다. 
+
+### `json-server`로 가짜 서버 띄워 활용하기     
+연습용 앱이기 때문에 [`json-server`](https://github.com/typicode/json-server)를 활용해 간단한 가짜 REST API를 구축해 사용합니다.         
+- `npm run server`를 실행합니다. (혹은 `npx json-server db.json` 를 직접 실행해도 상관없습니다)
+- `GET http://localhost:3000/restaurants`으로 `db.json`에 있는 레스토랑 목록을 불러올 수 있습니다.
+```javascript
+// GET 예시
+const response = await fetch("http://localhost:3000/restaurants");
+
+// POST 예시
+const response = await fetch("http://localhost:3000/restaurants", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: JSON.stringify(restaurant),
+});
+```     
+
+## 🔗 참고 문서
+- [Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects)
+> Effects let you specify side effects that are caused by rendering itself, rather than by a particular event.     
+  - [API Reference: useEffect](https://react.dev/reference/react/useEffect)
+  > useEffect is a React Hook that lets you synchronize a component with an external system. 
+- [API Reference: useSate > updater function](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state) 
+  > `set` function에 함수를 넘겨주면 `updater function`으로 동작합니다. 함수가 아닌 값을 넘겨줄 때와 어떻게 다른지 알아보세요.  
+
+구현을 다 해본 뒤에 Introduction에서 살펴보았던 설계 원칙과 관련해 조금 더 학습해보고 싶다면 아래 문서들도 추가로 확인해 보세요.
+- [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
+> You do need Effects to synchronize with external systems.  
+> In React, data flows from the parent components to their children. 
+- [Components and Hooks must be pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure)
+> Purity in Components and Hooks is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code.
+> Side effects should not run in render, as React can render components multiple times to create the best possible user experience.
+> One important principle in React is local reasoning: the ability to understand what a component or hook does by looking at its code in isolation. Hooks should be treated like “black boxes” when they are called.
\ No newline at end of file

From d7676f4b72accb2cc07d5c20091abcbdf2b804dc Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Mon, 8 Jun 2026 17:00:53 +0900
Subject: [PATCH 02/13] =?UTF-8?q?feat:=20API=20=EC=97=B0=EB=8F=99=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                  | 27 ++++++++++++------------
 src/api.js                   | 15 +++++++++++++
 src/constants/restaurants.js | 41 ------------------------------------
 3 files changed, 29 insertions(+), 54 deletions(-)
 create mode 100644 src/api.js
 delete mode 100644 src/constants/restaurants.js

diff --git a/src/App.jsx b/src/App.jsx
index 3c4bb06..ad97202 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,22 +2,29 @@ import "./App.css";
 import Header from "./components/Header/Header.jsx";
 import CategoryFilter from "./components/CategoryFilter/CategoryFilter.jsx";
 import RestaurantList from "./components/RestaurantList/RestaurantList.jsx";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { filterRestaurants } from "./utils/filterRestaurants.js";
-import { RESTAURANTS } from "./constants/restaurants.js";
 import RestaurantDetailModal from "./components/RestaurantDetailModal/RestaurantDetailModal.jsx";
 import AddRestaurantModal from "./components/AddRestaurantModal/AddRestaurantModal.jsx";
+import { getRestaurants, postRestaurant } from "./api.js";
 
 function App() {
   const [filterCategory, setFilterCategory] = useState("전체");
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
   const [isAddRestaurantModalOpen, setIsAddRestaurantModalOpen] =
     useState(false);
-  const [restaurants, setRestaurants] = useState(RESTAURANTS);
+  const [restaurants, setRestaurants] = useState([]);
 
   const isRestaurantDetailModalOpen = !!clickedRestaurant;
   const filteredRestaurants = filterRestaurants(restaurants, filterCategory);
 
+  useEffect(() => {
+    (async () => {
+      const restaurants = await getRestaurants();
+      setRestaurants(restaurants);
+    })();
+  }, []);
+
   function handleFilterCategoryChange(e) {
     setFilterCategory(e.target.value);
   }
@@ -38,17 +45,11 @@ function App() {
     setIsAddRestaurantModalOpen(false);
   }
 
-  function handleRestaurantSubmit({ category, name, description }) {
-    setRestaurants([
-      ...restaurants,
-      {
-        id: Date.now(),
-        category,
-        name,
-        description,
-      },
-    ]);
+  async function handleRestaurantSubmit({ category, name, description }) {
+    await postRestaurant({ category, name, description });
     setIsAddRestaurantModalOpen(false);
+    const restaurants = await getRestaurants();
+    setRestaurants(restaurants);
   }
 
   return (
diff --git a/src/api.js b/src/api.js
new file mode 100644
index 0000000..14a8ff5
--- /dev/null
+++ b/src/api.js
@@ -0,0 +1,15 @@
+export async function getRestaurants() {
+  const response = await fetch("http://localhost:3000/restaurants");
+  const jsonData = await response.json();
+  return jsonData;
+}
+
+export async function postRestaurant(restaurant) {
+  await fetch("http://localhost:3000/restaurants", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(restaurant),
+  });
+}
diff --git a/src/constants/restaurants.js b/src/constants/restaurants.js
deleted file mode 100644
index 7fc92cf..0000000
--- a/src/constants/restaurants.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export const RESTAURANTS = [
-  {
-    id: "a01",
-    name: "피양콩할마니",
-    description:
-      "평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, ‘피양’은 평안도 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다.",
-    category: "한식",
-  },
-  {
-    id: "a02",
-    name: "친친",
-    description:
-      "Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 펼쳐갑니다",
-    category: "중식",
-  },
-  {
-    id: "a03",
-    name: "잇쇼우",
-    description:
-      "잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 이길 수 없다는 신념으로 모든 음식에 최선을 다하는 잇쇼우는 고객 한분 한분께 최선을 다하겠습니다",
-    category: "일식",
-  },
-  {
-    id: "a04",
-    name: "이태리키친",
-    description: "늘 변화를 추구하는 이태리키친입니다.",
-    category: "양식",
-  },
-  {
-    id: "a05",
-    name: "호아빈 삼성점",
-    description: "푸짐한 양에 국물이 일품인 쌀국수",
-    category: "아시안",
-  },
-  {
-    id: "a06",
-    name: "도스타코스 선릉점",
-    description: "멕시칸 캐주얼 그릴",
-    category: "기타",
-  },
-];

From c68ea82fe3fea995dc8c04c5aaf6ea1ba70dd459 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Tue, 9 Jun 2026 09:23:23 +0900
Subject: [PATCH 03/13] chore: add .coderabbit.yaml

---
 .coderabbit.yaml | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 .coderabbit.yaml

diff --git a/.coderabbit.yaml b/.coderabbit.yaml
new file mode 100644
index 0000000..ecb145c
--- /dev/null
+++ b/.coderabbit.yaml
@@ -0,0 +1,14 @@
+language: ko-KR
+early_access: false
+reviews:
+  profile: "chill"
+  request_changes_workflow: false
+  high_level_summary: true
+  poem: false
+  review_status: true
+  collapse_walkthrough: false
+  auto_review:
+    enabled: true
+    drafts: false
+chat:
+  auto_reply: true

From 7daef97af40df38bcb5a494a1abd2bb342aac8b4 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sat, 13 Jun 2026 18:27:28 +0900
Subject: [PATCH 04/13] =?UTF-8?q?refactor:=20useRestaurants=20=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F?=
 =?UTF-8?q?=20api.js=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                 | 31 +++++++++++--------------------
 src/api.js                  | 34 +++++++++++++++++++++++-----------
 src/hooks/useRestaurants.js | 22 ++++++++++++++++++++++
 3 files changed, 56 insertions(+), 31 deletions(-)
 create mode 100644 src/hooks/useRestaurants.js

diff --git a/src/App.jsx b/src/App.jsx
index ad97202..b72f5b9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,31 +2,24 @@ import "./App.css";
 import Header from "./components/Header/Header.jsx";
 import CategoryFilter from "./components/CategoryFilter/CategoryFilter.jsx";
 import RestaurantList from "./components/RestaurantList/RestaurantList.jsx";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { filterRestaurants } from "./utils/filterRestaurants.js";
 import RestaurantDetailModal from "./components/RestaurantDetailModal/RestaurantDetailModal.jsx";
 import AddRestaurantModal from "./components/AddRestaurantModal/AddRestaurantModal.jsx";
-import { getRestaurants, postRestaurant } from "./api.js";
+import { useRestaurants } from "./hooks/useRestaurants.js";
 
 function App() {
-  const [filterCategory, setFilterCategory] = useState("전체");
+  const [selectedCategory, setSelectedCategory] = useState("전체");
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
   const [isAddRestaurantModalOpen, setIsAddRestaurantModalOpen] =
     useState(false);
-  const [restaurants, setRestaurants] = useState([]);
+  const { restaurants, addRestaurant } = useRestaurants();
 
   const isRestaurantDetailModalOpen = !!clickedRestaurant;
-  const filteredRestaurants = filterRestaurants(restaurants, filterCategory);
+  const filteredRestaurants = filterRestaurants(restaurants, selectedCategory);
 
-  useEffect(() => {
-    (async () => {
-      const restaurants = await getRestaurants();
-      setRestaurants(restaurants);
-    })();
-  }, []);
-
-  function handleFilterCategoryChange(e) {
-    setFilterCategory(e.target.value);
+  function handleCategoryChange(e) {
+    setSelectedCategory(e.target.value);
   }
 
   function handleRestaurantClick(restaurant) {
@@ -45,11 +38,9 @@ function App() {
     setIsAddRestaurantModalOpen(false);
   }
 
-  async function handleRestaurantSubmit({ category, name, description }) {
-    await postRestaurant({ category, name, description });
+  async function handleRestaurantSubmit(restaurant) {
+    await addRestaurant(restaurant);
     setIsAddRestaurantModalOpen(false);
-    const restaurants = await getRestaurants();
-    setRestaurants(restaurants);
   }
 
   return (
@@ -57,8 +48,8 @@ function App() {
       <Header onAddButtonClick={handleAddButtonClick} />
       <main>
         <CategoryFilter
-          category={filterCategory}
-          onCategoryChange={handleFilterCategoryChange}
+          category={selectedCategory}
+          onCategoryChange={handleCategoryChange}
         />
         <RestaurantList
           restaurants={filteredRestaurants}
diff --git a/src/api.js b/src/api.js
index 14a8ff5..2e018ca 100644
--- a/src/api.js
+++ b/src/api.js
@@ -1,15 +1,27 @@
+const BASE_URL = "http://localhost:3000";
+
 export async function getRestaurants() {
-  const response = await fetch("http://localhost:3000/restaurants");
-  const jsonData = await response.json();
-  return jsonData;
+  try {
+    const response = await fetch(`${BASE_URL}/restaurants`);
+    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+    const restaurants = await response.json();
+    return restaurants;
+  } catch (error) {
+    console.error("음식점 목록 조회 실패:", error);
+    throw error;
+  }
 }
 
-export async function postRestaurant(restaurant) {
-  await fetch("http://localhost:3000/restaurants", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(restaurant),
-  });
+export async function createRestaurant(restaurant) {
+  try {
+    const response = await fetch(`${BASE_URL}/restaurants`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(restaurant),
+    });
+    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+  } catch (error) {
+    console.error("음식점 추가 실패:", error);
+    throw error;
+  }
 }
diff --git a/src/hooks/useRestaurants.js b/src/hooks/useRestaurants.js
new file mode 100644
index 0000000..dbb5c26
--- /dev/null
+++ b/src/hooks/useRestaurants.js
@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+import { getRestaurants, createRestaurant } from "../api.js";
+
+export function useRestaurants() {
+  const [restaurants, setRestaurants] = useState([]);
+
+  useEffect(() => {
+    const fetchRestaurants = async () => {
+      const data = await getRestaurants();
+      setRestaurants(data);
+    };
+    fetchRestaurants();
+  }, []);
+
+  async function addRestaurant(restaurant) {
+    await createRestaurant(restaurant);
+    const data = await getRestaurants();
+    setRestaurants(data);
+  }
+
+  return { restaurants, addRestaurant };
+}

From 3c649692a0bb66c625e9a2ed67e4d215e0d9f329 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sat, 13 Jun 2026 18:27:41 +0900
Subject: [PATCH 05/13] =?UTF-8?q?docs:=205=EB=8B=A8=EA=B3=84=20=ED=95=99?=
 =?UTF-8?q?=EC=8A=B5=20=EB=82=B4=EC=9A=A9=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81=20=EB=82=B4=EC=9A=A9=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 276 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 168 insertions(+), 108 deletions(-)

diff --git a/README.md b/README.md
index e206bd7..d69c73c 100644
--- a/README.md
+++ b/README.md
@@ -1,181 +1,241 @@
-# 재사용 가능한 컴포넌트 설계
+# API 요청과 비동기 처리
 
 ## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드
 
 이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 한다.
 
-1. controlled 컴포넌트와 uncontrolled 컴포넌트의 차이를 이해하고, 각각 어떤 상황에서 선택하는지 기준을 세운다.
-2. 어떤 state를 어느 컴포넌트가 소유해야 하는지 판단하고, 필요한 경우 공통 부모로 끌어올리는 패턴(Lifting State Up)을 경험한다.
-3. `children` props를 활용해 재사용 가능한 Modal 컴포넌트를 설계하는 방법을 익힌다.
+1. side effect가 무엇인지 이해하고, `useEffect`가 왜 필요한지 설명할 수 있다.
+2. Promise가 무엇인지 이해하고, async/await가 Promise를 어떻게 다루는지 설명할 수 있다.
+3. `fetch`로 GET/POST 요청을 보내고 응답을 처리하는 방법을 익히고, `await`를 어디에 붙여야 하는지 스스로 판단할 수 있다.
 
 ---
 
 ## 📝 기능 구현 목록
 
-- [x] Header의 음식점 추가 버튼 클릭 시 AddRestaurantModal 열기
-- [x] 추가하기 버튼 클릭 시 음식점 목록에 항목 추가
-- [x] 재사용 가능한 Modal 컴포넌트로 AddRestaurantModal, RestaurantDetailModal 개선
+- [x] API로 음식점 목록을 불러와 RestaurantList에 렌더링
+- [x] 음식점 추가 시 POST 요청 후 목록 재조회
 
 ---
 
 ## 📚 학습 내용
 
-### Controlled vs Uncontrolled Component
+### useEffect와 side effect
 
-컴포넌트의 중요한 정보가 **props**에 의해 결정되면 controlled, **지역 state**로 자체 관리되면 uncontrolled이다.
+React 컴포넌트는 렌더링 중에 외부 시스템(서버, 타이머, DOM 직접 조작 등)에 영향을 주면 안 된다. 이런 작업을 side effect라고 하고, `useEffect`는 렌더링이 끝난 뒤 이를 안전하게 실행하는 공간이다.
 
-| | Controlled | Uncontrolled |
-|---|---|---|
-| 정보 출처 | props (부모가 제공) | 지역 state (자체 관리) |
-| 부모의 영향 | 동작을 완전히 지정 가능 | 영향을 줄 수 없음 |
-| 유연성 | 여러 컴포넌트와 조정 용이 | 독립적이지만 협력 어려움 |
-| 사용 난이도 | 부모에서 props 설정 필요 | 설정이 적어 사용하기 쉬움 |
-
-**언제 선택하나?**
-- **Controlled** — 부모 컴포넌트와 state를 공유하거나, 여러 컴포넌트의 동작을 함께 조정해야 할 때
-- **Uncontrolled** — 부모와 상태를 공유할 필요 없이 독립적으로 동작해도 될 때
+```jsx
+useEffect(() => {
+  // 렌더링 이후 실행 — 서버 요청, 구독, DOM 조작 등
+}, []);
+```
 
-**이 미션에서의 선택:**
+의존성 배열 `[]`를 넘기면 컴포넌트가 처음 마운트될 때 한 번만 실행된다. 배열을 아예 생략하면 매 렌더링마다 실행되어 무한 루프가 생길 수 있다.
 
-controlled/uncontrolled는 컴포넌트 전체에 붙이는 레이블이 아니라, 어떤 정보가 어디서 관리되는지를 기준으로 판단한다. AddRestaurantModal은 두 가지가 혼재한다.
+### useEffect 안에서 async/await 쓰는 법
 
-- **폼 데이터** (category, name, description) → 지역 state로 자체 관리 → **uncontrolled**
-- **모달 열림/닫힘** → App이 소유 → **controlled**
+`useEffect`의 콜백은 직접 `async`로 만들 수 없다. `async` 함수는 항상 Promise를 반환하는데, React는 `useEffect` 콜백의 반환값을 cleanup 함수로 기대하기 때문이다.
 
-모달 열림 상태를 App이 소유하는 이유는 트리거(Header의 추가 버튼)와 모달이 형제 관계이기 때문이다. 형제끼리는 서로의 state에 접근할 수 없으므로 공통 부모인 App으로 state를 끌어올렸다(Lifting State Up).
+```jsx
+// ❌ 이렇게 하면 안 됨 — async 콜백이 Promise를 반환해서 React가 경고
+useEffect(async () => {
+  const data = await getRestaurants();
+  setRestaurants(data);
+}, []);
+
+// ✅ 내부에서 async 함수를 정의하고 호출
+useEffect(() => {
+  const fetchRestaurants = async () => {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  };
+  fetchRestaurants();
+}, []);
+```
 
-`onSubmit`, `onClose`는 state가 아닌 콜백이다. "어떤 값을 누가 소유하냐"의 문제가 아니라 이벤트를 부모로 전달하는 통로이므로 controlled/uncontrolled 구분과는 별개다.
+### async/await를 어디에 붙여야 하는가
 
-### form submit 기본 동작과 e.preventDefault()
+`await`는 Promise를 반환하는 함수 앞에 붙인다. `await`를 쓰는 함수 자신은 반드시 `async`여야 한다. 이 규칙이 호출 체인을 따라 전파된다.
 
-`<form onSubmit={handler}>`에서 submit 이벤트가 발생하면 브라우저는 기본적으로 페이지를 새로고침한다. React SPA에서는 이 기본 동작을 막아야 state 업데이트가 유지된다.
+```
+fetch()                    → Promise 반환
+getRestaurants()           → 내부에서 await fetch() → async 필요
+handleRestaurantSubmit()   → 내부에서 await getRestaurants() → async 필요
+```
 
-리팩토링 후 `e.preventDefault()`는 폼을 소유한 AddRestaurantModal 내부에 있다. 완성된 데이터만 `onSubmit`을 통해 App으로 전달한다.
+실수하기 쉬운 패턴: `async` 함수를 호출할 때 `await`를 빠뜨리면 Promise가 풀리기 전에 다음 줄이 실행된다.
 
 ```jsx
-// AddRestaurantModal.jsx
-function handleFormSubmit(e) {
-  e.preventDefault(); // 없으면 setRestaurants 실행 직후 페이지 리로드로 state 초기화
-  onSubmit({ category, name, description });
+// ❌ await 누락 — POST가 완료되기 전에 GET 실행, 새 항목이 목록에 없을 수 있음
+async function handleRestaurantSubmit(restaurant) {
+  addRestaurant(restaurant);  // await 없음
+  const data = await getRestaurants();
+  setRestaurants(data);
 }
 
-// App.jsx — 이벤트 객체가 아닌 데이터 객체를 받음
-function handleRestaurantSubmit({ category, name, description }) {
-  setRestaurants([...restaurants, { id: Date.now(), category, name, description }]);
+// ✅ POST 완료를 기다린 뒤 GET
+async function handleRestaurantSubmit(restaurant) {
+  await addRestaurant(restaurant);
+  const data = await getRestaurants();
+  setRestaurants(data);
 }
 ```
 
-### 폼 state를 부모로 끌어올리기 (Lifting State Up)
+### api.js 파일 위치
 
-초기 구현에서는 `restaurants` state가 `App`에 있어서 폼 state도 `App`으로 끌어올려 props로 전달했다. 그러나 App이 실제로 필요한 것은 추가 완료 시점의 최종 데이터뿐이므로, 리팩토링을 통해 폼 state를 `AddRestaurantModal` 안으로 내리고 완성된 데이터만 부모로 전달하도록 변경했다. (자세한 내용은 리팩토링 섹션 참고)
+현재 `src/api.js`에 두었다. 프로젝트 규모에 따라 관례가 다르다.
 
-### 추가 후 상태 초기화
+| 규모 | 구조 | 예시 |
+|---|---|---|
+| 소규모 | 단일 파일 | `src/api.js` |
+| 중규모 | 도메인별 분리 | `src/api/restaurants.js`, `src/api/users.js` |
+| 대규모 | services 레이어 | `src/services/restaurantService.js` |
 
-음식점을 추가한 뒤 폼 입력값을 초기화하지 않으면 모달을 다시 열었을 때 이전 값이 남아있다.
+`api/`와 `services/`의 차이는 뉘앙스 차이다. `api/`는 서버와의 통신 함수 모음이라는 의미가 강하고, `services/`는 비즈니스 로직까지 포함할 수 있다는 의미로 쓰이기도 한다. 팀마다 다르므로 프로젝트 컨벤션을 따르면 된다. 현재 프로젝트처럼 API 함수가 몇 개 없을 때는 `src/api.js` 하나로 충분하다.
 
-초기 구현에서는 폼 state가 App에 있었기 때문에 추가 완료 시점에 명시적으로 초기화했다.
+---
+
+## 🤔 고민했던 문제와 해결 과정에서 배운 점
+
+### async 함수를 정의만 하고 호출하지 않은 문제
+
+`useEffect` 안에서 async 함수를 정의했지만 호출하지 않아 API 요청이 실행되지 않았다. 같은 실수를 두 번 했다.
 
 ```jsx
-setIsAddRestaurantModalOpen(false);
-setCategory("");
-setName("");
-setDescription("");
+// ❌ 정의만 하고 호출하지 않음 — 아무 일도 일어나지 않음
+useEffect(() => {
+  async () => {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  };
+}, []);
+
+// ✅ 정의 후 호출
+useEffect(() => {
+  const fetchRestaurants = async () => {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  };
+  fetchRestaurants();  // 호출
+}, []);
 ```
 
-리팩토링 후에는 폼 state를 AddRestaurantModal 내부로 내렸기 때문에 명시적 초기화가 불필요해졌다. `isAddRestaurantModalOpen`이 `false`가 되면 AddRestaurantModal이 언마운트되고, 다시 열릴 때 새로 마운트되면서 `useState("")`의 초기값으로 자동 초기화된다.
+### e.preventDefault()를 제거하면 안 된다는 것을 놓친 문제
 
----
+API 연동으로 전환하면서 "이제 서버에 제출하니까 `e.preventDefault()`가 필요 없다"고 생각했다. 그러나 `e.preventDefault()`는 서버 제출과 무관하게 **브라우저의 기본 폼 동작(페이지 새로고침)을 막는 역할**이다.
 
-## 🤔 고민했던 문제와 해결 과정에서 배운 점
+`e.preventDefault()` 없이 폼을 submit하면 React의 `fetch` 호출과 무관하게 브라우저가 페이지를 새로고침한다. `e.preventDefault()`는 항상 필요하다.
 
-### 어떤 state를 어느 컴포넌트가 소유해야 하는가
+---
 
-음식점 추가 기능을 구현하면서 다음 state들이 필요하다고 생각했다.
+## 🛠 리팩토링
 
-- `restaurants` — 음식점 목록
-- `category`, `name`, `description` — 폼 입력값
-- `isAddRestaurantModalOpen` - 모달 열림/닫힘
+### state 네이밍 — 용도가 아닌 값의 성격으로
 
-이 state들을 어느 컴포넌트에 선언할지 결정하기 위해 "이 state를 누가 필요로 하는가"를 기준으로 판단했다.
+`filterCategory`는 이 state가 필터링에 쓰인다는 **용도**를 표현한다. state 이름은 어디에 쓰이는지가 아니라 **어떤 값을 담고 있는지**를 나타내는 게 좋다.
 
-`restaurants`는 AddRestaurantModal(추가 시 갱신)과 RestaurantList(목록 렌더링) 모두 필요하다. 두 컴포넌트는 형제 관계라 서로의 state에 직접 접근할 수 없으므로, 공통 부모인 App으로 끌어올렸다(Lifting State Up).
+```jsx
+// Before: 용도 표현
+const [filterCategory, setFilterCategory] = useState("전체");
 
-`category`, `name`, `description`은 폼을 입력하는 동안 AddRestaurantModal 안에서만 쓰인다. 추가 완료 시점에 최종 데이터만 부모로 전달하면 되므로, 굳이 App까지 올릴 필요가 없다. AddRestaurantModal이 직접 소유한다.
+// After: 값의 성격 표현
+const [selectedCategory, setSelectedCategory] = useState("전체");
+```
 
-`isAddRestaurantModalOpen`도 같은 기준으로 판단했다. 모달을 여는 트리거는 Header의 추가 버튼이고, 실제로 열리는 것은 AddRestaurantModal이다. 두 컴포넌트는 형제 관계라 서로의 state에 접근할 수 없으므로 공통 부모인 App이 소유해야 한다.
+### API 함수명 — HTTP 메서드가 아닌 의도로
 
-### 식당을 추가해도 목록이 업데이트되지 않는 문제
+`postRestaurant`는 HTTP 메서드 이름(`post`)을 그대로 쓴 것이다. 함수명은 어떻게 동작하는지가 아니라 무엇을 하려는지를 나타내야 한다.
 
-`handleSubmit`에서 `setRestaurants`가 호출되는데도 목록이 바뀌지 않아서 원인을 찾아봤다. `e.preventDefault()`가 없어서 submit 시 페이지가 새로고침되고, state 업데이트가 반영되기 전에 초기 상태로 되돌아가는 것이었다. state 업데이트 자체는 올바르게 작성되어 있었지만 브라우저 기본 동작을 막지 않아서 생긴 문제였다.
+```js
+// Before: 구현 방법 표현
+export async function postRestaurant(restaurant) { ... }
 
-### setRestaurants 인자 오류
+// After: 의도 표현
+export async function addRestaurant(restaurant) { ... }
+```
 
-처음에 `setRestaurants(...restaurants, { ... })`로 작성했다. 이렇게 하면 배열이 아닌 여러 인자를 `setRestaurants`에 넘기는 것이라 새 배열이 만들어지지 않는다. 배열 리터럴 안에서 스프레드해야 한다.
+### BASE_URL 상수 추출
 
-```jsx
-// ❌ 인자를 여러 개 전달하는 것
-setRestaurants(...restaurants, { id: Date.now(), ... });
+`http://localhost:3000`이 `getRestaurants`와 `addRestaurant` 두 곳에 반복됐다. 상수로 추출해 한 곳에서 관리한다.
 
-// ✅ 기존 항목을 펼쳐서 새 배열 생성
-setRestaurants([...restaurants, { id: Date.now(), ... }]);
+```js
+const BASE_URL = "http://localhost:3000";
 ```
 
----
+### 반환값 변수명 — `jsonData` → `restaurants`
 
-## 🛠 리팩토링
+`response.json()`으로 파싱이 완료된 뒤에도 `jsonData`라는 이름을 쓰면 형식(JSON)을 강조하게 된다. 파싱 후에는 실제 내용을 나타내는 이름이 더 명확하다.
 
-### 이벤트 핸들러 네이밍 규칙
+```js
+// Before
+const jsonData = await response.json();
 
-`handle` + `[대상]` + `[동작]` 패턴을 사용한다. 대상은 항상 붙인다.
+// After
+const restaurants = await response.json();
+```
 
-```jsx
-handleFormSubmit       // Form + Submit
-handleCategoryChange   // Category + Change
-handleDetailModalClose // DetailModal + Close
+### try/catch 추가
+
+`fetch`는 네트워크 오류에서만 throw하고, HTTP 4xx/5xx 응답은 throw하지 않는다. 두 가지를 모두 처리하려면 `response.ok` 확인과 `try/catch`가 함께 필요하다.
+
+```js
+export async function getRestaurants() {
+  try {
+    const response = await fetch(`${BASE_URL}/restaurants`);
+    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+    const restaurants = await response.json();
+    return restaurants;
+  } catch (error) {
+    console.error("음식점 목록 조회 실패:", error);
+    throw error;  // 호출한 쪽이 에러를 알 수 있도록 다시 던짐
+  }
+}
 ```
 
-props로 넘길 때는 `on-`으로 통일한다. `on-`은 인터페이스(계약), `handle-`은 구현이다.
+catch에서 `throw error`를 다시 던지는 이유: 로그만 남기고 삼켜버리면 호출한 쪽(`App.jsx`)이 에러 발생 여부를 알 수 없다.
 
-```jsx
-// 정의는 handle-
-function handleNameChange(e) { ... }
+### 커스텀 훅 분리 — `useRestaurants`
 
-// props로 넘길 때는 on-
-<AddRestaurantModal onNameChange={handleNameChange} />
-```
+`App`이 렌더링 구조와 UI 상태를 다루는 컴포넌트인데, 서버 통신과 데이터 관리 로직까지 함께 들어있어 역할이 섞여 있었다. `restaurants` state, `useEffect`, fetch 로직을 커스텀 훅으로 추출했다.
 
-### 폼 state를 자식으로 내리기
+```js
+// hooks/useRestaurants.js
+export function useRestaurants() {
+  const [restaurants, setRestaurants] = useState([]);
 
-처음 구현에서는 폼 입력값(category, name, description)을 App에서 관리했다. `restaurants` state가 App에 있어서 폼 데이터도 App까지 올려야 한다고 생각했기 때문이다. 결과적으로 AddRestaurantModal에 props가 8개가 됐다.
+  async function fetchRestaurants() {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  }
 
-그러나 App이 실제로 필요한 것은 **추가 완료 시점의 최종 데이터**뿐이다. 폼을 채우는 중간 과정의 입력값은 App이 알 필요가 없다. 폼 state를 AddRestaurantModal 안으로 내리고, 완료 시에만 부모로 전달하도록 변경했다.
+  useEffect(() => {
+    fetchRestaurants();
+  }, []);
 
-```jsx
-// Before: App이 중간 입력값까지 관리
-<AddRestaurantModal
-  category={category}
-  name={name}
-  description={description}
-  onCategoryChange={handleCategoryChange}
-  onNameChange={handleNameChange}
-  onDescriptionChange={handleDescriptionChange}
-  onSubmit={handleSubmit}
-  onClose={handleAddRestaurantModalClose}
-/>
-
-// After: 완성된 데이터만 부모로 전달
-<AddRestaurantModal
-  onSubmit={handleRestaurantSubmit}   // { category, name, description } 객체를 받음
-  onClose={handleAddRestaurantModalClose}
-/>
-```
-
-props가 8개 → 2개로 줄었고, 폼 내부 관심사가 AddRestaurantModal 안에 캡슐화됐다.
+  async function addRestaurant(restaurant) {
+    await addRestaurant(restaurant);
+    await fetchRestaurants();
+  }
 
-### Modal 래퍼 div 제거
+  return { restaurants, addRestaurant };
+}
+```
 
-`display: none` / `display: block` 패턴은 템플릿(`templates/style.css`)에서 그대로 가져온 것이다. 템플릿은 순수 HTML/CSS 기반으로, 모달이 DOM에 항상 존재하면서 `.modal--open` 클래스를 붙이고 떼는 방식으로 보이고 숨겼다.
+App에서는 서버 통신 로직이 모두 사라지고, 모달 열림/닫힘 같은 UI 상태만 남았다.
 
-React로 전환하면서 조건부 렌더링(`{isOpen && <Modal />}`)을 사용하게 되면서 CSS 토글이 불필요해졌다. 템플릿의 구조를 그대로 쓰면서 생긴 불필요한 패턴을 뒤늦게 제거했다.
+```jsx
+// Before: App이 서버 통신까지 담당
+const [restaurants, setRestaurants] = useState([]);
+useEffect(() => { /* fetch 로직 */ }, []);
+async function handleRestaurantSubmit(...) {
+  await postRestaurant(...);
+  const data = await getRestaurants();
+  setRestaurants(data);
+}
 
-래퍼 `<div>`도 함께 제거했다. backdrop과 container가 둘 다 `position: fixed`라 부모 요소의 레이아웃에 영향을 받지 않아 래퍼가 없어도 동작이 동일하다. 불필요한 DOM 노드를 줄이기 위해 Fragment로 교체했다.
+// After: 훅이 데이터 관리를 담당
+const { restaurants, addRestaurant } = useRestaurants();
+async function handleRestaurantSubmit(restaurant) {
+  await addRestaurant(restaurant);
+  setIsAddRestaurantModalOpen(false);
+}
+```

From 9f4fff24dd4d06596ff75c7c1b819afcc6ed16dc Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sat, 13 Jun 2026 19:20:53 +0900
Subject: [PATCH 06/13] =?UTF-8?q?refactor:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EC=83=81=EC=88=98=20=EC=B6=94=EC=B6=9C=20=EB=B0=8F?=
 =?UTF-8?q?=20map=EC=9C=BC=EB=A1=9C=20=EC=98=B5=EC=85=98=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../AddRestaurantModal/AddRestaurantModal.jsx        | 12 ++++++------
 src/components/CategoryFilter/CategoryFilter.jsx     | 12 ++++++------
 src/constants/categories.js                          |  1 +
 3 files changed, 13 insertions(+), 12 deletions(-)
 create mode 100644 src/constants/categories.js

diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.jsx b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
index 8aee4d1..0e3e3e5 100644
--- a/src/components/AddRestaurantModal/AddRestaurantModal.jsx
+++ b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import styles from "./AddRestaurantModal.module.css";
 import Modal from "../Modal/Modal";
+import { CATEGORIES } from "../../constants/categories";
 
 export default function AddRestaurantModal({ onSubmit, onClose }) {
   const [category, setCategory] = useState("");
@@ -27,12 +28,11 @@ export default function AddRestaurantModal({ onSubmit, onClose }) {
             required
           >
             <option value="">선택해 주세요</option>
-            <option value="한식">한식</option>
-            <option value="중식">중식</option>
-            <option value="일식">일식</option>
-            <option value="양식">양식</option>
-            <option value="아시안">아시안</option>
-            <option value="기타">기타</option>
+            {CATEGORIES.map((value) => (
+              <option key={value} value={value}>
+                {value}
+              </option>
+            ))}
           </select>
         </div>
 
diff --git a/src/components/CategoryFilter/CategoryFilter.jsx b/src/components/CategoryFilter/CategoryFilter.jsx
index 184edb6..60f56b7 100644
--- a/src/components/CategoryFilter/CategoryFilter.jsx
+++ b/src/components/CategoryFilter/CategoryFilter.jsx
@@ -1,3 +1,4 @@
+import { CATEGORIES } from "../../constants/categories";
 import styles from "./CategoryFilter.module.css";
 
 export default function CategoryFilter({ category, onCategoryChange }) {
@@ -12,12 +13,11 @@ export default function CategoryFilter({ category, onCategoryChange }) {
         onChange={onCategoryChange}
       >
         <option value="전체">전체</option>
-        <option value="한식">한식</option>
-        <option value="중식">중식</option>
-        <option value="일식">일식</option>
-        <option value="양식">양식</option>
-        <option value="아시안">아시안</option>
-        <option value="기타">기타</option>
+        {CATEGORIES.map((value) => (
+          <option key={value} value={value}>
+            {value}
+          </option>
+        ))}
       </select>
     </section>
   );
diff --git a/src/constants/categories.js b/src/constants/categories.js
new file mode 100644
index 0000000..cac9f9e
--- /dev/null
+++ b/src/constants/categories.js
@@ -0,0 +1 @@
+export const CATEGORIES = ["한식", "중식", "일식", "양식", "아시안", "기타"];

From 89c13e6e94cf6f5c1b3cf48f533e540b907e1654 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sat, 13 Jun 2026 19:21:51 +0900
Subject: [PATCH 07/13] =?UTF-8?q?refactor:=20RestaurantList=20button=20?=
 =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=ED=98=95=20=EC=97=85=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RestaurantList/RestaurantList.jsx         | 38 +++++++++----------
 .../RestaurantList/RestaurantList.module.css  | 10 ++++-
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/RestaurantList/RestaurantList.jsx b/src/components/RestaurantList/RestaurantList.jsx
index 7fbdb78..0150f7f 100644
--- a/src/components/RestaurantList/RestaurantList.jsx
+++ b/src/components/RestaurantList/RestaurantList.jsx
@@ -7,26 +7,24 @@ export default function RestaurantList({ restaurants, onRestaurantClick }) {
       <ul>
         {restaurants.map((restaurant) => {
           return (
-            <li
-              key={restaurant.id}
-              className={styles.restaurant}
-              onClick={() => onRestaurantClick(restaurant)}
-            >
-              <div className={styles.restaurant__category}>
-                <img
-                  src={CATEGORY_IMAGES[restaurant.category]}
-                  alt={restaurant.category}
-                  className={styles.restaurant__categoryIcon}
-                />
-              </div>
-              <div className={styles.restaurant__info}>
-                <h3 className={`${styles.restaurant__name} text-subtitle`}>
-                  {restaurant.name}
-                </h3>
-                <p className={`${styles.restaurant__description} text-body`}>
-                  {restaurant.description}
-                </p>
-              </div>
+            <li key={restaurant.id} className={styles.restaurant}>
+              <button className={styles.restaurant__button} onClick={() => onRestaurantClick(restaurant)}>
+                <div className={styles.restaurant__category}>
+                  <img
+                    src={CATEGORY_IMAGES[restaurant.category]}
+                    alt={restaurant.category}
+                    className={styles.restaurant__categoryIcon}
+                  />
+                </div>
+                <div className={styles.restaurant__info}>
+                  <h3 className={`${styles.restaurant__name} text-subtitle`}>
+                    {restaurant.name}
+                  </h3>
+                  <p className={`${styles.restaurant__description} text-body`}>
+                    {restaurant.description}
+                  </p>
+                </div>
+              </button>
             </li>
           );
         })}
diff --git a/src/components/RestaurantList/RestaurantList.module.css b/src/components/RestaurantList/RestaurantList.module.css
index a1f4ffe..f7bdbdf 100644
--- a/src/components/RestaurantList/RestaurantList.module.css
+++ b/src/components/RestaurantList/RestaurantList.module.css
@@ -7,12 +7,20 @@
 }
 
 .restaurant {
+  border-bottom: 1px solid #e9eaed;
+}
+
+.restaurant__button {
   display: flex;
   align-items: flex-start;
 
+  width: 100%;
   padding: 16px 8px;
 
-  border-bottom: 1px solid #e9eaed;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
 }
 
 .restaurant__category {

From f9cc036d85d7d5621fd1ddbcc27d079bb78f5d40 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 14 Jun 2026 18:42:56 +0900
Subject: [PATCH 08/13] =?UTF-8?q?refactor:=20fetchRestaurants=EB=A5=BC=20u?=
 =?UTF-8?q?seCallback=EC=9C=BC=EB=A1=9C=20=EC=B6=94=EC=B6=9C=ED=95=B4?=
 =?UTF-8?q?=EC=84=9C=20=EC=9E=AC=EC=82=AC=EC=9A=A9=20=EB=B0=8F=20=EB=AC=B8?=
 =?UTF-8?q?=EC=84=9C=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                   | 41 ++++++++++++++++++++++++++++++-------
 src/hooks/useRestaurants.js | 18 ++++++++--------
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index d69c73c..49fdb28 100644
--- a/README.md
+++ b/README.md
@@ -197,23 +197,50 @@ catch에서 `throw error`를 다시 던지는 이유: 로그만 남기고 삼켜
 
 `App`이 렌더링 구조와 UI 상태를 다루는 컴포넌트인데, 서버 통신과 데이터 관리 로직까지 함께 들어있어 역할이 섞여 있었다. `restaurants` state, `useEffect`, fetch 로직을 커스텀 훅으로 추출했다.
 
+### `fetchRestaurants`를 `useCallback`으로 추출
+
+`fetchRestaurants`가 `useEffect` 내부에 정의되어 있어 `addRestaurant`에서 같은 로직을 중복으로 작성해야 했다. 함수를 훅 스코프로 꺼내 재사용하려면 `useCallback`이 필요하다.
+
+`useCallback` 없이 일반 함수로 선언하면 렌더링마다 새 함수 참조가 생성되어 `useEffect([fetchRestaurants])`가 매 렌더링마다 실행되는 무한 루프가 발생한다. `useCallback`의 빈 의존성 배열 `[]`이 참조를 고정해 이를 방지한다.
+
 ```js
-// hooks/useRestaurants.js
+// Before: fetchRestaurants가 useEffect 안에 갇혀 있어 addRestaurant에서 로직을 중복 작성
+export function useRestaurants() {
+  const [restaurants, setRestaurants] = useState([]);
+
+  useEffect(() => {
+    const fetchRestaurants = async () => {
+      const data = await getRestaurants();
+      setRestaurants(data);
+    };
+    fetchRestaurants();
+  }, []);
+
+  async function addRestaurant(restaurant) {
+    await createRestaurant(restaurant);
+    const data = await getRestaurants(); // 중복
+    setRestaurants(data);               // 중복
+  }
+
+  return { restaurants, addRestaurant };
+}
+
+// After: useCallback으로 추출해 재사용, 의존성 배열도 명시적으로 선언
 export function useRestaurants() {
   const [restaurants, setRestaurants] = useState([]);
 
-  async function fetchRestaurants() {
+  const fetchRestaurants = useCallback(async () => {
     const data = await getRestaurants();
     setRestaurants(data);
-  }
+  }, []);
 
   useEffect(() => {
-    fetchRestaurants();
-  }, []);
+    void fetchRestaurants();
+  }, [fetchRestaurants]);
 
   async function addRestaurant(restaurant) {
-    await addRestaurant(restaurant);
-    await fetchRestaurants();
+    await createRestaurant(restaurant);
+    await fetchRestaurants(); // 재사용
   }
 
   return { restaurants, addRestaurant };
diff --git a/src/hooks/useRestaurants.js b/src/hooks/useRestaurants.js
index dbb5c26..0a17a30 100644
--- a/src/hooks/useRestaurants.js
+++ b/src/hooks/useRestaurants.js
@@ -1,21 +1,21 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { getRestaurants, createRestaurant } from "../api.js";
 
 export function useRestaurants() {
   const [restaurants, setRestaurants] = useState([]);
 
-  useEffect(() => {
-    const fetchRestaurants = async () => {
-      const data = await getRestaurants();
-      setRestaurants(data);
-    };
-    fetchRestaurants();
+  const fetchRestaurants = useCallback(async () => {
+    const data = await getRestaurants();
+    setRestaurants(data);
   }, []);
 
+  useEffect(() => {
+    void fetchRestaurants();
+  }, [fetchRestaurants]);
+
   async function addRestaurant(restaurant) {
     await createRestaurant(restaurant);
-    const data = await getRestaurants();
-    setRestaurants(data);
+    await fetchRestaurants();
   }
 
   return { restaurants, addRestaurant };

From ae3919b867cbe95b825f74d64ac01d1a4407d6cb Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 14 Jun 2026 19:40:24 +0900
Subject: [PATCH 09/13] =?UTF-8?q?refactor:=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=ED=95=B8=EB=93=A4=EB=A7=81=20=EB=B0=8F=20isLoading=20state=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                 | 15 +++++++++++----
 src/api.js                  | 29 +++++++++--------------------
 src/hooks/useRestaurants.js | 15 ++++++++++++---
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index b72f5b9..485546e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,13 +7,14 @@ import { filterRestaurants } from "./utils/filterRestaurants.js";
 import RestaurantDetailModal from "./components/RestaurantDetailModal/RestaurantDetailModal.jsx";
 import AddRestaurantModal from "./components/AddRestaurantModal/AddRestaurantModal.jsx";
 import { useRestaurants } from "./hooks/useRestaurants.js";
+import { ALL_CATEGORY } from "./constants/categories.js";
 
 function App() {
-  const [selectedCategory, setSelectedCategory] = useState("전체");
+  const [selectedCategory, setSelectedCategory] = useState(ALL_CATEGORY);
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
   const [isAddRestaurantModalOpen, setIsAddRestaurantModalOpen] =
     useState(false);
-  const { restaurants, addRestaurant } = useRestaurants();
+  const { restaurants, addRestaurant, isLoading, error } = useRestaurants();
 
   const isRestaurantDetailModalOpen = !!clickedRestaurant;
   const filteredRestaurants = filterRestaurants(restaurants, selectedCategory);
@@ -39,14 +40,20 @@ function App() {
   }
 
   async function handleRestaurantSubmit(restaurant) {
-    await addRestaurant(restaurant);
-    setIsAddRestaurantModalOpen(false);
+    try {
+      await addRestaurant(restaurant);
+      setIsAddRestaurantModalOpen(false);
+    } catch {
+      alert("음식점 추가에 실패했습니다. 다시 시도해주세요.");
+    }
   }
 
   return (
     <>
       <Header onAddButtonClick={handleAddButtonClick} />
       <main>
+        {isLoading && <p>불러오는 중...</p>}
+        {error && <p>{error}</p>}
         <CategoryFilter
           category={selectedCategory}
           onCategoryChange={handleCategoryChange}
diff --git a/src/api.js b/src/api.js
index 2e018ca..450f0b9 100644
--- a/src/api.js
+++ b/src/api.js
@@ -1,27 +1,16 @@
 const BASE_URL = "http://localhost:3000";
 
 export async function getRestaurants() {
-  try {
-    const response = await fetch(`${BASE_URL}/restaurants`);
-    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
-    const restaurants = await response.json();
-    return restaurants;
-  } catch (error) {
-    console.error("음식점 목록 조회 실패:", error);
-    throw error;
-  }
+  const response = await fetch(`${BASE_URL}/restaurants`);
+  if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+  return response.json();
 }
 
 export async function createRestaurant(restaurant) {
-  try {
-    const response = await fetch(`${BASE_URL}/restaurants`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(restaurant),
-    });
-    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
-  } catch (error) {
-    console.error("음식점 추가 실패:", error);
-    throw error;
-  }
+  const response = await fetch(`${BASE_URL}/restaurants`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(restaurant),
+  });
+  if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
 }
diff --git a/src/hooks/useRestaurants.js b/src/hooks/useRestaurants.js
index 0a17a30..e9130eb 100644
--- a/src/hooks/useRestaurants.js
+++ b/src/hooks/useRestaurants.js
@@ -3,10 +3,19 @@ import { getRestaurants, createRestaurant } from "../api.js";
 
 export function useRestaurants() {
   const [restaurants, setRestaurants] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
 
   const fetchRestaurants = useCallback(async () => {
-    const data = await getRestaurants();
-    setRestaurants(data);
+    setIsLoading(true);
+    try {
+      const data = await getRestaurants();
+      setRestaurants(data);
+    } catch (error) {
+      setError("음식점 목록을 불러오지 못했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
   }, []);
 
   useEffect(() => {
@@ -18,5 +27,5 @@ export function useRestaurants() {
     await fetchRestaurants();
   }
 
-  return { restaurants, addRestaurant };
+  return { restaurants, addRestaurant, isLoading, error };
 }

From 6c5d4f8095373ca07f3475b068a7547963862b3d Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 14 Jun 2026 19:40:33 +0900
Subject: [PATCH 10/13] =?UTF-8?q?refactor:=20ALL=5FCATEGORY=20=EC=83=81?=
 =?UTF-8?q?=EC=88=98=ED=99=94=20=EB=B0=8F=20import=20=ED=99=95=EC=9E=A5?=
 =?UTF-8?q?=EC=9E=90=20=EC=9D=BC=EA=B4=80=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AddRestaurantModal/AddRestaurantModal.jsx  | 4 ++--
 src/components/CategoryFilter/CategoryFilter.jsx          | 4 ++--
 .../RestaurantDetailModal/RestaurantDetailModal.jsx       | 2 +-
 src/constants/categories.js                               | 1 +
 src/utils/filterRestaurants.js                            | 8 ++++----
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/AddRestaurantModal/AddRestaurantModal.jsx b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
index 0e3e3e5..0bb7c55 100644
--- a/src/components/AddRestaurantModal/AddRestaurantModal.jsx
+++ b/src/components/AddRestaurantModal/AddRestaurantModal.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styles from "./AddRestaurantModal.module.css";
-import Modal from "../Modal/Modal";
-import { CATEGORIES } from "../../constants/categories";
+import Modal from "../Modal/Modal.jsx";
+import { CATEGORIES } from "../../constants/categories.js";
 
 export default function AddRestaurantModal({ onSubmit, onClose }) {
   const [category, setCategory] = useState("");
diff --git a/src/components/CategoryFilter/CategoryFilter.jsx b/src/components/CategoryFilter/CategoryFilter.jsx
index 60f56b7..fdf1d99 100644
--- a/src/components/CategoryFilter/CategoryFilter.jsx
+++ b/src/components/CategoryFilter/CategoryFilter.jsx
@@ -1,4 +1,4 @@
-import { CATEGORIES } from "../../constants/categories";
+import { ALL_CATEGORY, CATEGORIES } from "../../constants/categories.js";
 import styles from "./CategoryFilter.module.css";
 
 export default function CategoryFilter({ category, onCategoryChange }) {
@@ -12,7 +12,7 @@ export default function CategoryFilter({ category, onCategoryChange }) {
         value={category}
         onChange={onCategoryChange}
       >
-        <option value="전체">전체</option>
+        <option value={ALL_CATEGORY}>{ALL_CATEGORY}</option>
         {CATEGORIES.map((value) => (
           <option key={value} value={value}>
             {value}
diff --git a/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx b/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx
index 93256b1..9318891 100644
--- a/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx
+++ b/src/components/RestaurantDetailModal/RestaurantDetailModal.jsx
@@ -1,5 +1,5 @@
 import styles from "./RestaurantDetailModal.module.css";
-import Modal from "../Modal/Modal";
+import Modal from "../Modal/Modal.jsx";
 
 export default function RestaurantDetailModal({ restaurant, onClose }) {
   return (
diff --git a/src/constants/categories.js b/src/constants/categories.js
index cac9f9e..49b8f39 100644
--- a/src/constants/categories.js
+++ b/src/constants/categories.js
@@ -1 +1,2 @@
+export const ALL_CATEGORY = "전체";
 export const CATEGORIES = ["한식", "중식", "일식", "양식", "아시안", "기타"];
diff --git a/src/utils/filterRestaurants.js b/src/utils/filterRestaurants.js
index 4069992..c45a877 100644
--- a/src/utils/filterRestaurants.js
+++ b/src/utils/filterRestaurants.js
@@ -1,6 +1,6 @@
+import { ALL_CATEGORY } from "../constants/categories.js";
+
 export function filterRestaurants(restaurants, category) {
-  if (category === "전체") return restaurants;
-  else {
-    return restaurants.filter((restaurant) => restaurant.category === category);
-  }
+  if (category === ALL_CATEGORY) return restaurants;
+  return restaurants.filter((restaurant) => restaurant.category === category);
 }

From b2a82fbe2ba0446ef833c9683cdd7519f832a20b Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 14 Jun 2026 19:40:41 +0900
Subject: [PATCH 11/13] =?UTF-8?q?refactor:=20Modal=20Escape=20=ED=82=A4=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20Header=20alt=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/Header.jsx | 2 +-
 src/components/Modal/Modal.jsx   | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 512a3c9..1451cbd 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -11,7 +11,7 @@ export default function Header({ onAddButtonClick }) {
         aria-label="음식점 추가"
         onClick={onAddButtonClick}
       >
-        <img src={addButton} alt="음식점 추가" />
+        <img src={addButton} />
       </button>
     </header>
   );
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
index 1164c19..7c55306 100644
--- a/src/components/Modal/Modal.jsx
+++ b/src/components/Modal/Modal.jsx
@@ -1,6 +1,15 @@
+import { useEffect } from "react";
 import styles from "./Modal.module.css";
 
 export default function Modal({ children, title, onClose }) {
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
   return (
     <>
       <div className={styles.modal__backdrop} onClick={onClose}></div>

From 6f208ecbb8a4584229514a37a7e7c82fd9e67624 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Sun, 14 Jun 2026 19:40:48 +0900
Subject: [PATCH 12/13] =?UTF-8?q?docs:=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81=20=EB=82=B4=EC=9A=A9=20README=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 139 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 139 insertions(+)

diff --git a/README.md b/README.md
index 49fdb28..a752a60 100644
--- a/README.md
+++ b/README.md
@@ -266,3 +266,142 @@ async function handleRestaurantSubmit(restaurant) {
   setIsAddRestaurantModalOpen(false);
 }
 ```
+
+### api.js에서 try/catch 제거
+
+`api.js`에서 `try/catch`로 잡고 `throw`로 다시 던지는 건 `try/catch`를 안 쓴 것과 결과가 같다. 콘솔 로그만 남기고 에러를 그대로 위로 올리기 때문이다. 에러를 처리할 수 있는 곳(훅, 컴포넌트)에서만 잡도록 `api.js`는 단순하게 throw만 하게 변경했다.
+
+```js
+// Before: try/catch로 잡았다가 다시 throw — 의미 없는 중간 처리
+export async function getRestaurants() {
+  try {
+    const response = await fetch(`${BASE_URL}/restaurants`);
+    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+    return await response.json();
+  } catch (error) {
+    console.error("음식점 목록 조회 실패:", error);
+    throw error;
+  }
+}
+
+// After: 단순하게 throw만
+export async function getRestaurants() {
+  const response = await fetch(`${BASE_URL}/restaurants`);
+  if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+  return response.json();
+}
+```
+
+### 에러 핸들링 추가
+
+에러는 사용자에게 보여줄 수 있는 가장 가까운 곳에서 한 번만 잡는다. 중간 함수(`addRestaurant`)에서 잡으면 에러가 거기서 소멸되어 최종 호출자가 실패 여부를 알 수 없다.
+
+- 초기 로딩 실패: `fetchRestaurants`의 `try/catch`에서 `error` state에 담아 화면에 표시
+- 음식점 추가 실패: `handleRestaurantSubmit`의 `try/catch`에서 alert로 사용자에게 알림
+
+```js
+// useRestaurants.js — 초기 로딩 에러 처리
+const fetchRestaurants = useCallback(async () => {
+  setIsLoading(true);
+  try {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  } catch (error) {
+    setError("음식점 목록을 불러오지 못했습니다.");
+  } finally {
+    setIsLoading(false);
+  }
+}, []);
+
+// App.jsx — 추가 실패 에러 처리
+async function handleRestaurantSubmit(restaurant) {
+  try {
+    await addRestaurant(restaurant);
+    setIsAddRestaurantModalOpen(false);
+  } catch {
+    alert("음식점 추가에 실패했습니다. 다시 시도해주세요.");
+  }
+}
+```
+
+### 매직 스트링 상수화 — `ALL_CATEGORY`
+
+`"전체"` 문자열이 `App.jsx`, `CategoryFilter.jsx`, `filterRestaurants.js` 세 곳에 흩어져 있었다. 하나라도 수정하면 나머지도 함께 바꿔야 하는 암묵적 결합이다. 상수로 추출해 한 곳에서 관리한다.
+
+```js
+// Before: 세 곳에 흩어진 매직 스트링
+useState("전체");
+<option value="전체">전체</option>
+if (category === "전체") return restaurants;
+
+// After: 상수로 단일화
+export const ALL_CATEGORY = "전체";
+
+useState(ALL_CATEGORY);
+<option value={ALL_CATEGORY}>{ALL_CATEGORY}</option>
+if (category === ALL_CATEGORY) return restaurants;
+```
+
+### import 확장자 일관성
+
+Vite 프로젝트에서 일부 파일은 `.jsx`/`.js` 확장자를 명시하고 일부는 생략해 혼재된 상태였다. Vite는 ESM 표준에 가깝게 확장자 명시를 권장하므로 모든 로컬 import에 확장자를 추가했다.
+
+```js
+// Before
+import Modal from "../Modal/Modal";
+import { CATEGORIES } from "../../constants/categories";
+
+// After
+import Modal from "../Modal/Modal.jsx";
+import { CATEGORIES } from "../../constants/categories.js";
+```
+
+### isLoading state 추가
+
+데이터를 불러오는 동안 화면이 빈 상태로 보이는 문제를 해결하기 위해 `isLoading` state를 추가했다. `finally`를 사용해 성공/실패 여부와 관계없이 로딩 상태가 반드시 해제되도록 했다.
+
+```js
+const [isLoading, setIsLoading] = useState(false);
+
+const fetchRestaurants = useCallback(async () => {
+  setIsLoading(true);
+  try {
+    const data = await getRestaurants();
+    setRestaurants(data);
+  } catch (error) {
+    setError("음식점 목록을 불러오지 못했습니다.");
+  } finally {
+    setIsLoading(false); // 성공/실패 모두 로딩 해제
+  }
+}, []);
+
+return { restaurants, addRestaurant, isLoading, error };
+```
+
+### Modal Escape 키 처리
+
+backdrop 클릭으로만 모달을 닫을 수 있어 키보드 사용자가 닫을 수 없는 접근성 문제가 있었다. `useEffect`로 keydown 이벤트를 등록해 Escape 키로도 닫히도록 했다.
+
+cleanup 함수로 이벤트 리스너를 제거하지 않으면 모달이 닫혀도 리스너가 남아, 모달을 여러 번 열고 닫을수록 리스너가 누적되어 `onClose`가 중복 호출된다.
+
+```js
+useEffect(() => {
+  function handleKeyDown(e) {
+    if (e.key === "Escape") onClose();
+  }
+  document.addEventListener("keydown", handleKeyDown);
+  return () => document.removeEventListener("keydown", handleKeyDown);
+}, [onClose]);
+```
+
+### Header 이미지 alt 중복 제거
+
+버튼에 `aria-label="음식점 추가"`가 있는데 내부 이미지에도 `alt="음식점 추가"`가 있어 스크린 리더가 "음식점 추가 음식점 추가"를 두 번 읽는 문제가 있었다. 버튼 안의 이미지는 버튼 자체가 의미를 전달하므로 장식적 역할이다. `alt` 속성을 제거해 스크린 리더가 이미지를 건너뛰도록 했다.
+
+```jsx
+// Before
+<img src={addButton} alt="음식점 추가" />
+
+// After
+<img src={addButton} />
+```

From 1f0cb944257589607e9345f20ef5961d9f748492 Mon Sep 17 00:00:00 2001
From: Nam Yooseong <nys8765@naver.com>
Date: Mon, 15 Jun 2026 21:40:16 +0900
Subject: [PATCH 13/13] =?UTF-8?q?docs:=20README=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 128 +++++++++++++++++++++++-------------------------------
 1 file changed, 54 insertions(+), 74 deletions(-)

diff --git a/README.md b/README.md
index a752a60..e9671f0 100644
--- a/README.md
+++ b/README.md
@@ -119,80 +119,6 @@ useEffect(() => {
 }, []);
 ```
 
-### e.preventDefault()를 제거하면 안 된다는 것을 놓친 문제
-
-API 연동으로 전환하면서 "이제 서버에 제출하니까 `e.preventDefault()`가 필요 없다"고 생각했다. 그러나 `e.preventDefault()`는 서버 제출과 무관하게 **브라우저의 기본 폼 동작(페이지 새로고침)을 막는 역할**이다.
-
-`e.preventDefault()` 없이 폼을 submit하면 React의 `fetch` 호출과 무관하게 브라우저가 페이지를 새로고침한다. `e.preventDefault()`는 항상 필요하다.
-
----
-
-## 🛠 리팩토링
-
-### state 네이밍 — 용도가 아닌 값의 성격으로
-
-`filterCategory`는 이 state가 필터링에 쓰인다는 **용도**를 표현한다. state 이름은 어디에 쓰이는지가 아니라 **어떤 값을 담고 있는지**를 나타내는 게 좋다.
-
-```jsx
-// Before: 용도 표현
-const [filterCategory, setFilterCategory] = useState("전체");
-
-// After: 값의 성격 표현
-const [selectedCategory, setSelectedCategory] = useState("전체");
-```
-
-### API 함수명 — HTTP 메서드가 아닌 의도로
-
-`postRestaurant`는 HTTP 메서드 이름(`post`)을 그대로 쓴 것이다. 함수명은 어떻게 동작하는지가 아니라 무엇을 하려는지를 나타내야 한다.
-
-```js
-// Before: 구현 방법 표현
-export async function postRestaurant(restaurant) { ... }
-
-// After: 의도 표현
-export async function addRestaurant(restaurant) { ... }
-```
-
-### BASE_URL 상수 추출
-
-`http://localhost:3000`이 `getRestaurants`와 `addRestaurant` 두 곳에 반복됐다. 상수로 추출해 한 곳에서 관리한다.
-
-```js
-const BASE_URL = "http://localhost:3000";
-```
-
-### 반환값 변수명 — `jsonData` → `restaurants`
-
-`response.json()`으로 파싱이 완료된 뒤에도 `jsonData`라는 이름을 쓰면 형식(JSON)을 강조하게 된다. 파싱 후에는 실제 내용을 나타내는 이름이 더 명확하다.
-
-```js
-// Before
-const jsonData = await response.json();
-
-// After
-const restaurants = await response.json();
-```
-
-### try/catch 추가
-
-`fetch`는 네트워크 오류에서만 throw하고, HTTP 4xx/5xx 응답은 throw하지 않는다. 두 가지를 모두 처리하려면 `response.ok` 확인과 `try/catch`가 함께 필요하다.
-
-```js
-export async function getRestaurants() {
-  try {
-    const response = await fetch(`${BASE_URL}/restaurants`);
-    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
-    const restaurants = await response.json();
-    return restaurants;
-  } catch (error) {
-    console.error("음식점 목록 조회 실패:", error);
-    throw error;  // 호출한 쪽이 에러를 알 수 있도록 다시 던짐
-  }
-}
-```
-
-catch에서 `throw error`를 다시 던지는 이유: 로그만 남기고 삼켜버리면 호출한 쪽(`App.jsx`)이 에러 발생 여부를 알 수 없다.
-
 ### 커스텀 훅 분리 — `useRestaurants`
 
 `App`이 렌더링 구조와 UI 상태를 다루는 컴포넌트인데, 서버 통신과 데이터 관리 로직까지 함께 들어있어 역할이 섞여 있었다. `restaurants` state, `useEffect`, fetch 로직을 커스텀 훅으로 추출했다.
@@ -267,6 +193,60 @@ async function handleRestaurantSubmit(restaurant) {
 }
 ```
 
+## 🛠 리팩토링
+
+### state 네이밍 — 용도가 아닌 값의 성격으로
+
+`filterCategory`는 이 state가 필터링에 쓰인다는 **용도**를 표현한다. state 이름은 어디에 쓰이는지가 아니라 **어떤 값을 담고 있는지**를 나타내는 게 좋다.
+
+```jsx
+// Before: 용도 표현
+const [filterCategory, setFilterCategory] = useState("전체");
+
+// After: 값의 성격 표현
+const [selectedCategory, setSelectedCategory] = useState("전체");
+```
+
+### API 함수명 — HTTP 메서드가 아닌 의도로
+
+`postRestaurant`는 HTTP 메서드 이름(`post`)을 그대로 쓴 것이다. 함수명은 어떻게 동작하는지가 아니라 무엇을 하려는지를 나타내야 한다.
+
+```js
+// Before: 구현 방법 표현
+export async function postRestaurant(restaurant) { ... }
+
+// After: 의도 표현
+export async function addRestaurant(restaurant) { ... }
+```
+
+### BASE_URL 상수 추출
+
+`http://localhost:3000`이 `getRestaurants`와 `addRestaurant` 두 곳에 반복됐다. 상수로 추출해 한 곳에서 관리한다.
+
+```js
+const BASE_URL = "http://localhost:3000";
+```
+
+### try/catch 추가
+
+`fetch`는 네트워크 오류에서만 throw하고, HTTP 4xx/5xx 응답은 throw하지 않는다. 두 가지를 모두 처리하려면 `response.ok` 확인과 `try/catch`가 함께 필요하다.
+
+```js
+export async function getRestaurants() {
+  try {
+    const response = await fetch(`${BASE_URL}/restaurants`);
+    if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
+    const restaurants = await response.json();
+    return restaurants;
+  } catch (error) {
+    console.error("음식점 목록 조회 실패:", error);
+    throw error;  // 호출한 쪽이 에러를 알 수 있도록 다시 던짐
+  }
+}
+```
+
+catch에서 `throw error`를 다시 던지는 이유: 로그만 남기고 삼켜버리면 호출한 쪽(`App.jsx`)이 에러 발생 여부를 알 수 없다.
+
 ### api.js에서 try/catch 제거
 
 `api.js`에서 `try/catch`로 잡고 `throw`로 다시 던지는 건 `try/catch`를 안 쓴 것과 결과가 같다. 콘솔 로그만 남기고 에러를 그대로 위로 올리기 때문이다. 에러를 처리할 수 있는 곳(훅, 컴포넌트)에서만 잡도록 `api.js`는 단순하게 throw만 하게 변경했다.