[Step2.1] cactus: Context API 적용하기

02-state-management-tools/2.1-ContextAPI/README.md

@@ -0,0 +1,61 @@
+# 02-1. 전역상태관리 - Context API
+
+## 🎯 요구사항
+
+- Context API를 사용해서 애플리케이션 내의 **props drilling** 문제를 해결하세요.
+  - props로 **똑같은** 데이터 혹은 함수를 전달하지 않도록 해야합니다.
+  - props를 쓴다면 그 이유를 PR에 적어주세요.
+- PR에 Context API를 **왜** 사용하는지, 기존의 코드구조와 어떤 **trade-off**가 있는지 적어주세요.
+- Context API와 데이터를 사용하는 Component 사이의 **관계를 도식화**하고 이미지를 PR에 첨부해주세요.
+  - 실제 코드와 상관없이 일반적인 관계를 나타내야합니다.
+  - 도식화 방식은 자유롭게 하셔도 좋습니다.
+  - (추천) **Figma**
+
+### 😗구현 예시
+
+- 컴포넌트의 이름이나 구조는 마음대로 변경해도 좋습니다.
+- 아래의 코드는 Context를 설정하는 예시입니다.
+
+```javascript
+import { createContext, useState } from "react";
+
+// Context 생성
+const UserContext = createContext({
+  user: { name: "", email: "" },
+  setUser: () => {},
+});
+
+// Provider 컴포넌트
+export const UserProvider = ({ children }) => {
+  const [user, setUser] = useState({
+    name: "John Doe",
+    email: "johndoe@example.com",
+  });
+
+  return (
+    <UserContext.Provider value={{ user, setUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserContext;
+```
+
+## ✅ 키워드
+
+- props drilling
+- 전역상태관리
+  - Context
+  - Provider
+  - Consumer
+- Hook : useContext
+
+## 🧙‍♀️ 진행 가이드
+
+- 진행시간 : 2시간 내에 완료하는 것을 목표로 합니다.
+
+## 🔗 참고 문서
+
+- [Context API 공식문서](https://ko.legacy.reactjs.org/docs/context.html)
+- [리액트를 다루는 기술(저:김민준(velopert))](https://thebook.io/080203/0501/)

02-state-management-tools/2.2-Zustand/README.md

@@ -0,0 +1,46 @@
+# 02-2. 전역상태관리 - Zustand
+
+## 🎯 요구사항
+
+- Context API로 구성한 애플리케이션을 Zustand 기반 전역 상태로 마이그레이션하세요.
+- props에 대한 요구사항은 2-1 요구사항과 같습니다.
+- Zustand를 **왜** 사용하는지, Context API와 비교했을때 어떤 점이 달랐는지, 또 trade-off가 있는지 적어주세요.
+  - 기술적인 것도 좋고 개발자의 경험 측면에서도 좋습니다.
+- (선택): 카테고리 필터의 선택된 카테고리가 새로고침 후에도 유지되도록 구현해보세요
+
+### 😗구현 예시
+
+- 컴포넌트의 이름이나 구조를 정한 이유가 명확해야하며 타인에게 설명할 수 있어야합니다.
+- 아래 코드는 Zustand 스토어를 설정하는 예시입니다.
+
+```javascript
+import { create } from "zustand";
+
+// Zustand 스토어 예시
+export const useBear = create((set) => ({
+  // state
+  bears: 0,
+
+  // actions
+  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+  removeAllBears: () => set({ bears: 0 }),
+  updateBears: (newBears) => set({ bears: newBears }),
+}));
+```
+
+## ✅ 키워드
+
+- props drilling
+- 전역상태관리
+  - Zustand
+  - create
+  - set / get
+
+## 🧙‍♀️ 진행 가이드
+
+- 진행시간 : 2시간 내에 완료하는 것을 목표로 합니다.
+
+## 🔗 참고 문서
+
+- [Zustand 공식문서](https://recoiljs.org/docs/introduction/installation/)
+- [Zustand와 React Context](https://tkdodo.eu/blog/zustand-and-react-context)

02-state-management-tools/2.3-TanStack Query/README.md

@@ -0,0 +1,53 @@
+# 02-3. 서버상태관리 - TanStack Query
+
+💡해당 미션은 **여러 사용자가 하나의 서버를 공유하고, 식당 목록이 주기적으로 업데이트되는 환경**을 가정하여 진행합니다.
+
+## 🎯 요구사항
+
+- TanStack Query를 사용해 서버 상태를 클라이언트 상태와 분리하고, 효율적인 데이터 캐싱과 요청 관리를 구현해 보세요.
+  - 쿼리 및 뮤테이션 설정은 명확한 이유가 있다면 자유롭게 변경해도 좋습니다.
+- TanStack Query를 **왜** 사용하는지, 서버 상태와 클라이언트 상태를 분리하였을때 어떤 점이 달랐는지, 또 trade-off가 있는지 적어주세요.
+  - 기술적인 것도 좋고 개발자의 경험 측면에서도 좋습니다.
+- TanStack Query Devtools를 이용하여 Query의 변화와 Mutation의 발생을 확인해보세요.
+- (선택) 뮤테이션 로직에 낙관적 업데이트(Optimistic Update)를 적용해 보고 어떤 상황에서 낙관적 업데이트가 효과적인지, 그리고 주의해야 할 점은 무엇인지 적어주세요.
+  - Browser Throttling 기능을 활용하여 네트워크 속도를 느리게 설정한 뒤 낙관적 업데이트가 실제로 어떻게 동작하는지 확인해 보세요.
+
+### 😗구현 예시
+
+- 컴포넌트의 이름이나 구조를 정한 이유가 명확해야하며 타인에게 설명할 수 있어야합니다.
+- 아래는 main.jsx의 설정 모습입니다.
+
+```javascript
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")).render(
+  <QueryClientProvider client={queryClient}>
+    <App />
+  </QueryClientProvider>,
+);
+```
+
+## ✅ 키워드
+
+- props drilling
+- 서버 상태관리
+  - TanStack Query
+  - QueryClient
+  - Query Key
+  - useQuery
+  - useMutation
+  - Optimistic Update
+
+## 🧙‍♀️ 진행 가이드
+
+- 진행시간 : 4시간 내에 완료하는 것을 목표로 합니다.
+
+## 🔗 참고 문서
+
+- [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview)
+- [TanStack Query 메인테이너 Tk Dodo 님의 블로그](https://tkdodo.eu/blog/tags/react-query)
+- [테코톡(시모의 Tanstack Query)](https://www.youtube.com/watch?v=RfK15tw8H-I)