diff --git a/keyword/chapter10/keyword.md b/keyword/chapter10/keyword.md
new file mode 100644
index 00000000..69a6e81a
--- /dev/null
+++ b/keyword/chapter10/keyword.md
@@ -0,0 +1,1248 @@
+# 📝 학습 목표
+
+---
+
+**1) Referential Equality(참조 동일성)의 원리 이해 및 적용**
+
+- 자바스크립트의 값(Primitive) 타입과 참조(Object) 타입의 차이를 메모리 관점에서 설명할 수 있다.
+- `==`, `===`, `Object.is`의 비교 방식 차이를 이해하고, 상황에 맞게 구별하여 사용할 수 있다.
+- React의 불변성(Immutability)과 참조 동일성이 렌더링 최적화에 미치는 영향을 설명할 수 있다.
+
+**2) React 성능 최적화(Optimization) Hooks 마스터**
+
+- `useCallback`, `useMemo`, `React.memo`의 개념과 차이점을 명확히 구분할 수 있다.
+- 메모이제이션(Memoization)이 무엇인지 이해하고, 불필요한 리렌더링을 방지하는 코드를 직접 구현할 수 있다.
+- 의존성 배열(Dependency Array)과 참조 동일성의 관계를 파악하여 `stale closure` 문제를 예방할 수 있다.
+- 무조건적인 최적화가 아닌, 성능상 이점이 있는 경우를 판단하여 적절한 Hook을 선택할 수 있다.
+
+**3) Vercel을 활용한 실전 배포 및 서버 환경 이해**
+
+- 배포(Deployment)의 핵심 개념(Build, Hosting)과 로컬(Local) 환경과의 차이를 설명할 수 있다.
+- Vercel과 GitHub를 연동하여 코드 푸시 시 자동으로 배포되는 흐름을 구축할 수 있다.
+- SPA(Single Page Application) 배포 시 발생하는 라우팅 문제(404 에러)를 `vercel.json`으로 해결하고, 환경변수(Environment Variables)를 안전하게 관리할 수 있다.
+
+**4) CI/CD 개념 이해와 모던 웹 개발 프로세스 정립**
+
+- CI(지속적 통합)와 CD(지속적 배포)의 정의와 이를 사용하는 이유(생산성, 안정성)를 설명할 수 있다.
+- 자동화된 배포 시스템이 개발자의 실수(Human Error)를 줄여주는 원리를 이해한다.
+- 커스텀 도메인 연결 과정을 통해 실제 사용자가 접근 가능한 서비스를 완성하는 경험을 갖는다.
+
+# ⚠️ 스터디 진행 방법
+
+---
+
+1. **워크북 완료 후 스터디 참여**
+    - 스터디 전, 워크북 내용을 **모두 작성**하고 이해되지 않은 부분을 준비합니다.
+2. **스터디 미션 수행**
+    - 워크북 완료 후 미션을 수행합니다.
+    - 진행 내용과 문제점을 스터디 시간에 공유합니다.
+    - **코드 리뷰**는 GitHub PR에서 상시 진행합니다.
+3. **스터디 시간 구성**
+    1. 각자 진행한 미션 중 **해결하지 못한 이슈 공유**
+    2. 해당 문제를 **스터디원과 함께 해결 방법 공유**, 필요 시 같이 해결
+    3. 미션 후 **피드백 공유 및 개선**
+4. **주차별 미션 제출**
+    - 매주 **워크북과 미션을 제출**합니다. (디자인은 개인 보완 가능)
+    - 워크북 완료 후 [**워크북 피드백 폼 제출**](https://forms.gle/aXPWVZpDSfYTAiCd6?utm_source=chatgpt.com)
+        - 특정 주제에 많은 피드백 요청이 들어올 경우, 피드백 이후 해당 내용을 바탕으로 **추가 강의 영상** 제공 예정 ([유튜브 구독](https://www.youtube.com/@yongcoding?utm_source=chatgpt.com))
+    - **🍠 코드 리뷰 제출 기준**
+        - 본인이 리뷰한 코드 **최소 1개**
+        - 본인이 받은 리뷰를 코드에 **실제 반영한 것 최소 1개**
+5. **스터디 인증샷**
+    - 매주 대표 사진 **1장** 남기기
+    - 이미지 임베드 또는 복사·붙여넣기 가능
+
+# 📸 잠깐 ! 스터디 인증샷은 찍으셨나요?📸
+
+---
+
+* 스터디리더께서 대표로 매 주차마다 한 장 남겨주시면 좋겠습니다!🙆💗
+ (사진을 저장해서 이미지 임베드를 하셔도 좋고, 복사+붙여넣기해서 넣어주셔도 좋습니다!)
+
+[]()
+
+# 🎯 핵심 키워드
+
+---
+
+<aside>
+💡 주요 내용들에 대해 조사해보고, 자신만의 생각을 통해 정리해보세요!
+레퍼런스를 참고하여 정의, 속성, 장단점 등을 적어주셔도 됩니다.
+조사는 공식 홈페이지 **Best**, 블로그(최신 날짜) **Not Bad**
+
+🍠 이모지가 달린 부분은, 여러분들이 직접 조사하여, 추가 작성하거나, 실습해보실 부분이니, 꼭 진행해주셔야 합니다!
+
+</aside>
+
+- **`Referential Equality` (참조 동일성)** 🍠
+    - **`Referential Equality`는 무엇인가요?**
+        
+        # **`Referential Equality`는 무엇인가요?**
+        
+        간단히 말하면, 
+        
+        > **참조 동일성**은 “두 변수가 **완전히 같은 객체를 가리키고 있는가**?”를 보는 개념이에요.
+        > 
+        - “같은 값이냐?”가 아니라 “같은 **메모리 주소(같은 객체 인스턴스)**를 가리키냐?”를 묻는 거에요.
+        
+        그래서 **“두 객체가 진짜로 같은 녀석이냐?”** 를 확인할 때 쓰는 기준이라고 볼 수 있어요.
+        
+        ---
+        
+        ## 1. 자바스크립트에서 값 vs 참조에요
+        
+        ---
+        
+        ### 1-1. 값(primitive) 타입
+        
+        - `number`, `string`, `boolean`, `null`, `undefined`, `bigint`, `symbol`
+        - 변수 안에 **값 자체가 들어있는 경우**에요.
+        
+        ```jsx
+        let a = 10;
+        let b = 10;
+        
+        console.log(a === b); // true (값 비교)
+        ```
+        
+        ---
+        
+        ### 1-2. 참조(object) 타입
+        
+        - `object`, `array`, `function`, `Date`, `Map` 등
+        - 변수 안에는 “객체가 저장된 메모리 위치(참조)”가 들어있어요.
+        
+        ```jsx
+        const obj1 = { x: 1 };
+        const obj2 = { x: 1 };
+        const obj3 = obj1;
+        
+        console.log(obj1 === obj2); // false (서로 다른 객체(주소값)에요)
+        console.log(obj1 === obj3); // true  (같은 객체(주소값)를 가리켜요)
+        ```
+        
+        - `obj1`과 `obj2`는 모양은 같지만 **서로 다른 객체**에요.
+        - `obj1`과 `obj3`는 **정확히 같은 객체**를 공유해요.
+            
+            → 이 둘이 “참조 동일”하다고 말하는 거예요.
+            
+        
+        ---
+        
+        ## 2. 자바스크립트에서 ==, ===, Object.is 에요
+        
+        ---
+        
+        ### 2-1. `==` (느슨한 동등)
+        
+        - 타입을 **암묵적으로 변환**하면서 비교해요.
+        - 예측하기 어려운 경우가 많아서, **실무에서는 거의 안 쓰는 게 좋아요.**
+        
+        ```jsx
+        0 == false;   // true
+        "" == false;  // true
+        null == undefined; // true
+        ```
+        
+        ---
+        
+        ### 2-2 `===` (엄격한 동등)
+        
+        - 타입 변환 없이 **그대로 비교**해요.
+        - primitive에서는 “값 동일성”
+        - 객체/배열/함수에서는 “참조 동일성”을 비교해요.
+        
+        ```jsx
+        // primitive
+        1 === 1;       // true
+        "hi" === "hi"; // true
+        
+        // object
+        const a = { x: 1 };
+        const b = { x: 1 };
+        const c = a;
+        
+        a === b; // false (서로 다른 객체)
+        a === c; // true  (참조 동일성)
+        ```
+        
+        ---
+        
+        ### 2-3. `Object.is`
+        
+        - 기본적으로 `===`와 비슷하지만,
+            - `NaN` 비교, `+0` vs `-0` 같은 특수 케이스에서만 조금 달라요.
+        
+        ```jsx
+        NaN === NaN;       // false
+        Object.is(NaN, NaN); // true
+        
+        +0 === -0;        // true
+        Object.is(+0, -0);   // false
+        ```
+        
+        - **객체에 대해서는 `===`와 똑같이 참조 동일성**을 비교해요.
+        
+        ```jsx
+        const obj1 = {};
+        const obj2 = obj1;
+        
+        Object.is(obj1, obj2); // true (같은 참조에요)
+        ```
+        
+        ---
+        
+        ## 3. 객체/배열/함수에서 참조 동일성 예제
+        
+        ---
+        
+        ### 3-1. 객체
+        
+        ```jsx
+        const user1 = { name: "kim" };
+        const user2 = { name: "kim" };
+        const user3 = user1;
+        
+        console.log(user1 === user2); // false
+        console.log(user1 === user3); // true
+        ```
+        
+        - `user1`과 `user2`는 **값은 같아 보여도** 서로 다른 객체에요.
+        - `user1`과 `user3`는 같은 참조를 공유하니까 참조 동일이에요.
+        
+        ---
+        
+        ### 3-2. 배열
+        
+        ```jsx
+        const arr1 = [1, 2, 3];
+        const arr2 = [1, 2, 3];
+        const arr3 = arr1;
+        
+        console.log(arr1 === arr2); // false
+        console.log(arr1 === arr3); // true
+        ```
+        
+        “배열 내용이 같은지”를 보려면 **직접 비교 로직**이 필요해요.
+        
+        ```jsx
+        const isArrayEqual = (a, b) => 
+          a.length === b.length && a.every((v, i) => v === b[i]);
+        
+        console.log(isArrayEqual(arr1, arr2)); // true (값 동일성)
+        ```
+        
+        ---
+        
+        ### 3-3. 함수
+        
+        ```jsx
+        function foo() {}
+        
+        const bar = function () {};
+        
+        const baz = foo;
+        
+        console.log(foo === bar); // false (다른 함수 객체)
+        console.log(foo === baz); // true  (같은 함수 객체)
+        ```
+        
+        - 함수도 결국 **객체**라서, 참조 단위로 비교돼요.
+        
+        ---
+        
+        ## 4. 참조 동일성이 중요한 이유
+        
+        ---
+        
+        ### 4-1. 가변 객체 공유로 인한 사이드 이펙트
+        
+        ```jsx
+        const state = { count: 0 };
+        
+        function increment(s) {
+          s.count += 1;
+          return s;
+        }
+        
+        const a = state;
+        const b = increment(state);
+        
+        console.log(a === b);     // true (같은 객체)
+        console.log(state.count); // 1
+        console.log(a.count);     // 1
+        console.log(b.count);     // 1
+        ```
+        
+        - `state`, `a`, `b` 세 변수가 **같은 객체를 공유**하고 있어요.
+        - 어느 한 곳에서 `count`를 바꾸면 **전부 동시에 바뀌는 효과**가 나요.
+        - “여기만 바꾼 줄 알았는데, 저기도 같이 바뀌었다”는 버그가 나기 쉬운 패턴이에요.
+        
+        ---
+        
+        ### 4-2. 불변 객체(immutable) + 참조 동일성
+        
+        ```jsx
+        const state = { count: 0 };
+        
+        function incrementImmutable(s) {
+          return { ...s, count: s.count + 1 };
+        }
+        
+        const a = state;
+        const b = incrementImmutable(state);
+        
+        console.log(a === b); // false (새 객체)
+        console.log(a.count); // 0
+        console.log(b.count); // 1
+        ```
+        
+        - **원본은 그대로 두고, 새로운 객체를 만들어서 반환**해요.
+        - 이 패턴을 쓰면
+            - 과거 상태를 안전하게 보관할 수 있고
+            - “참조가 바뀌었는지”만 봐도 변경 여부를 어느 정도 알 수 있어요.
+        
+        리액트에서
+        
+        - `useMemo`, `useCallback`
+        - `React.memo`, `shouldComponentUpdate`
+        - 리덕스의 상태 비교
+        
+        같은 곳에서 **“참조가 바뀌었냐?”를 기준으로 리렌더링/계산 최적화를 하는 이유**가 여기에 있어요.
+        
+        ---
+        
+        ## 5. 자바스크립트에서 자주 하는 실수들
+        
+        ---
+        
+        ### 5-1. “객체 내용이 같은데 왜 false죠?”
+        
+        ```jsx
+        const a = { x: 1 };
+        const b = { x: 1 };
+        
+        console.log(a === b); // false
+        ```
+        
+        - 이 비교는 **“같은 객체냐?”** 를 묻는 거예요.
+        - “내용이 같냐?”를 보려면 별도의 **deepEqual** 로직이나 라이브러리를 써야 해요.
+        
+        ---
+        
+        ### 5-2. 배열도 마찬가지
+        
+        ```jsx
+        [1, 2, 3] === [1, 2, 3]; // 항상 false
+        ```
+        
+        매번 새로 만들어지는 배열은 **다 다른 객체**라서, 참조 동일성이 깨져요.
+        
+        ---
+        
+        ### 5-3. 상태를 직접 수정하면서, 참조 비교로 변경 여부를 보려는 경우
+        
+        ```jsx
+        const state = { x: 1 };
+        
+        function mutate(s) {
+          s.x = 2;
+        }
+        
+        mutate(state);
+        
+        console.log(state === state); // 항상 true죠…
+        ```
+        
+        - “객체를 직접 수정”했는데, 참조는 그대로니까 참조 동일성으로는 변경 여부를 알 수 없어요.
+        - 참조 비교로 변경 여부를 감지하고 싶다면 **불변 패턴(새 객체 생성)**을 써야 해요.
+        
+    - **리액트 렌더링 최적화**와 **`Referential Equality`**는 어떤 관계가 있을까요? 🍠
+        
+        리액트는 객체의 **내용을 비교하지 않고 참조 동일성(`===`)** 으로 props와 state의 변경 여부를 판단.
+        
+        따라서 객체·배열·함수를 새로 생성하면 값이 같아도 참조가 달라져 리렌더링이 발생!
+        
+        `React.memo`, `useMemo`, `useCallback`은 이러한 **불필요한 참조 변경을 막아,**  리렌더링과 재계산을 최적화하기 위한 도구.
+        
+        이를 제대로 활용하려면 상태를 **불변 객체로 관리**해 참조 변경이 의미 있는 경우에만 발생하도록 해야 함.
+        
+- **`useCallabck`과 `memo`** 🍠
+    
+    ### 🎥 실습 1. 강의 영상
+    
+    https://www.youtube.com/watch?v=Z3uNjFqYSF8&t=904s
+    
+    <aside>
+    🍠
+    
+    위의 영상을 보고 **`useCallabck`과 `memo`에**대해 정리해주세요!
+    
+    또한 아래 공식문서 또한 읽어보시면서 부족한 내용을 보충해서 정리해주세요!
+    
+    https://react.dev/reference/react/useCallback
+    
+    https://react.dev/reference/react/memo
+    
+    </aside>
+    
+    - **`useCallabck`** 에 대하여 정리해주세요! 🍠
+        
+        # **`useCallabck`** 에 대하여 정리해주세요! 🍠
+        
+        ---
+        
+        - **`useCallabck`** 이 무엇인지? 🍠
+            
+            # **`useCallabck`** 이 무엇인지?
+            
+            ---
+            
+            - 함수(콜백)를 “메모이제이션” 한다는 게 무슨 뜻인지?
+                - 함수의 **실행 결과를 저장하는 게 아니라**,
+                    
+                    **함수 객체 자체(참조)를 저장**하는 것이다.
+                    
+                - dependencies가 같으면 → **이전 함수 그대로 반환**
+                - dependencies가 바뀌면 → **새 함수 생성**
+            - 언제 새 함수를 만들고, 언제 기존 함수를 재사용하는지?
+                - 컴포넌트가 다시 렌더링되어도 **의존성이 변하지 않으면 같은 함수 참조를 재사용**한다.
+                - 즉, 매 렌더마다 새 함수를 만들지 않고 **기존 함수를 유지**해준다.
+                - 의존성이 변할 때만 함수를 생성.
+        - 왜 **`useCallabck`**을 사용하는지? 🍠
+            
+            # 왜 **`useCallabck`**을 사용하는지?
+            
+            ---
+            
+            - **불필요한 리렌더링 방지**와 어떤 관련이 있는지
+                - React는 props를 `===`로 비교한다.
+                - 매 렌더마다 새 함수가 생성되면 참조가 달라져
+                    
+                    `React.memo`로 감싼 자식도 다시 렌더링된다.
+                    
+                - `useCallback`은 **함수 참조를 고정**해 이를 막아준다.
+            - 성능 최적화 관점에서 얻는 이득 vs 남용했을 때의 오버헤드
+                - `useCallback`은 함수 참조를 유지해 **불필요한 리렌더링과 재계산을 줄이는 이점**이 있다.
+                - 특히 `React.memo`로 감싼 자식 컴포넌트에 콜백을 전달할 때 효과적이다.
+                - 하지만 모든 함수에 사용하면 **의존성 비교 비용과 코드 복잡도**가 증가한다.
+                - 따라서 실제 성능 이득이 있는 경우에만 **선별적으로 사용하는 것이 중요**하다.
+        - **`useCallabck`** 기본 사용법 🍠
+            
+            # **`useCallabck`** 기본 사용법
+            
+            ---
+            
+            - **`useCallabck`**은 어떻게 사용하나요? (코드)
+                
+                ```tsx
+                import { useCallback } from "react";
+                
+                const handleClick = useCallback(() => {
+                  console.log("click");
+                }, []);
+                ```
+                
+            - `deps` 배열에 무엇을 넣어야 하는지 규칙
+                - 콜백 내부에서 사용하는 **state, props, 변수는 모두 deps에 포함**해야 한다.
+                - deps는 **항상 고정된 길이의 배열**이어야 한다.
+                - React는 deps를 `Object.is`로 비교한다.
+            - 의존성 변경 시 콜백이 어떻게 다시 만들어지는지
+                - `useCallback`은 렌더링 시마다 **의존성 배열(deps)을 이전 값과 비교**한다.
+                - React는 각 의존성을 `Object.is`로 비교해 변경 여부를 판단한다.
+                - deps 중 하나라도 변경되면 **기존 콜백을 버리고 새 함수를 생성**한다.
+                - 모든 의존성이 동일하면 **이전 렌더에서 생성된 콜백을 그대로 재사용**한다.
+        - **`useCallabck`**에서 중요한 개념 🍠
+            
+            # **`useCallabck`**에서 중요한 개념
+            
+            ---
+            
+            - **참조 동일성(reference equality)** 이 왜 중요한지 (=== 비교)
+                - React는 객체·배열·함수의 변경 여부를 **값이 아니라 참조 동일성(`===`)** 으로 판단한다.
+                - 참조가 같으면 “변경 없음”, 참조가 다르면 “변경 있음”으로 인식한다.
+                - 따라서 값이 같아도 새 객체나 새 함수가 생성되면 **불필요한 리렌더링**이 발생할 수 있다.
+                - `useCallback`, `useMemo`, `React.memo`는 **참조를 유지해 성능 최적화**를 가능하게 한다.
+            - 클로저와 상태: 콜백 안에서 state, props를 사용할 때 주의할 점
+                - 콜백 함수는 **생성 시점의 state와 props를 클로저로 캡처**한다.
+                - 따라서 `useCallback`의 deps에 state나 props를 누락하면 **최신 값이 반영되지 않을 수 있다**.
+                - 콜백 내부에서 state를 기반으로 업데이트할 경우, **함수형 업데이트(`prev => …`)를 사용하는 것이 안전**하다.
+                - 항상 콜백에서 참조하는 값이 **의존성 배열에 정확히 포함되어 있는지** 확인해야 한다.
+            - **stale closure(낡은 값 캡처)** 문제는 언제 생기는지, 어떻게 피하는지
+                - `useCallback`으로 만든 함수가 **생성 당시의 state/props 값을 클로저로 기억**할 때 발생한다.
+                - deps 배열에 필요한 state나 props를 빠뜨리면, **최신 값이 아닌 과거 값**을 계속 사용하게 된다.
+                - 이를 피하려면 **콜백에서 사용하는 모든 값들을 deps에 정확히 포함**해야 한다.
+                - 상태 업데이트가 목적이라면 `setState(prev => …)` 같은 **함수형 업데이트**를 사용하면 stale closure를 안전하게 피할 수 있다.
+        - **`useCallabck`**을 사용한 콜백 메모이제이션 예시 🍠
+            
+            # **`useCallabck`**을 사용한 콜백 메모이제이션 예시
+            
+            ---
+            
+            - 부모에서 자식으로 콜백을 내려줄 때, `onClick`, `onChange` 같은 핸들러를 **`useCallabck`** 없이 넘겼을 때와 **`useCallabck`**으로 감싸서 넘겼을 때 차이
+                
+                ### ❌ `useCallback` 없이 콜백 전달
+                
+                ```tsx
+                functionParent() {
+                consthandleClick = () => {
+                console.log("click");
+                  };
+                
+                return<ChildonClick={handleClick} />;
+                }
+                ```
+                
+                - 렌더링마다 **새 함수가 생성**
+                - `Child`가 `memo`로 감싸져 있어도 **항상 리렌더링됨**
+                
+                ---
+                
+                ### ✅ `useCallback`으로 감싼 경우
+                
+                ```tsx
+                functionParent() {
+                const handleClick =useCallback(() => {
+                console.log("click");
+                  }, []);
+                
+                return<ChildonClick={handleClick} />;
+                }
+                ```
+                
+                - 함수 참조가 유지됨
+                - `Child`는 props가 같다고 판단해 **리렌더링을 건너뜀**
+                
+                ---
+                
+                ### 정리 한 줄 ✏️
+                
+                > useCallback은 부모 렌더링 시에도 콜백 참조를 유지해
+                자식 컴포넌트의 불필요한 리렌더링을 막는다.
+                > 
+            
+        - 이벤트 핸들러 / 비동기 로직에서 **`useCallabck`** 예시 🍠
+            
+            # 이벤트 핸들러 / 비동기 로직에서 **`useCallabck`** 예시
+            
+            ---
+            
+            - 버튼 클릭 시 API 호출하는 핸들러를 `useCallback`으로 감싸는 패턴
+                
+                ### 버튼 클릭 시 API 호출 핸들러
+                
+                ```tsx
+                const handleClick =useCallback(async () => {
+                awaitfetch("/api/data");
+                }, []);
+                
+                ```
+                
+                - 클릭 핸들러를 메모이제이션해 **불필요한 함수 재생성**을 막는다.
+                - `memo`된 자식 컴포넌트에 전달할 때 효과적이다.
+            - `useEffect` 안에서 의존성으로 콜백을 넣을 때 패턴
+                
+                ### `useEffect` 의존성으로 콜백을 넣는 패턴
+                
+                ```tsx
+                const fetchData =useCallback(() => {
+                fetch(`/api/${id}`);
+                }, [id]);
+                
+                useEffect(() => {
+                fetchData();
+                }, [fetchData]);
+                
+                ```
+                
+                - 콜백을 `useCallback`으로 감싸면 **Effect가 필요할 때만 실행**된다.
+                - 매 렌더마다 Effect가 다시 실행되는 문제를 방지한다.
+            - 폼 제출 핸들러, 디바운스/스로틀 함수와 함께 사용할 때
+                
+                ### 폼 제출 / 디바운스·스로틀과 함께 사용
+                
+                ```tsx
+                const handleSubmit =useCallback(() => {
+                submitForm(form);
+                }, [form]);
+                
+                ```
+                
+                - 이벤트 핸들러의 **참조를 안정적으로 유지**할 수 있다.
+                - 디바운스·스로틀 함수와 결합 시, **타이머가 매번 초기화되는 문제**를 막아준다.
+            
+    - **`memo`**에 대하여 정리해주세요!🍠
+        
+        # **`memo`**에 대하여 정리해주세요!🍠
+        
+        ---
+        
+        - **`memo`**가 무엇인지? 🍠
+            
+            # **`memo`**가 무엇인지?
+            
+            ---
+            
+            - `memo`는 **props가 변경되지 않으면 컴포넌트 리렌더링을 건너뛰는** 고차 컴포넌트(HOC)이다.
+            - 부모 컴포넌트가 리렌더링되어도, **props가 이전과 같으면 자식은 리렌더링되지 않는다**.
+            - 기본적으로 React는 props를 `Object.is`(얕은 비교)로 비교한다.
+            - 단, `memo`는 **성능 최적화 도구이지 렌더링 보장을 의미하지는 않는다**.
+            
+        - 왜 **`memo`**를 사용하는지? 🍠
+            
+            # 왜 **`memo`**를 사용하는지?
+            
+            ---
+            
+            - 렌더링 비용이 큰 컴포넌트의 **불필요한 리렌더링을 방지**하기 위해 사용한다.
+            - 부모 상태 변경이 잦지만, 자식 props는 거의 변하지 않는 경우에 효과적이다.
+            - `useCallback`, `useMemo`와 함께 사용하면 **참조 동일성 유지로 최적화 효과가 커진다**.
+            - 결과적으로 **UI 반응성과 성능을 개선**할 수 있다.
+        - **`memo`** 기본 사용법 🍠
+            
+            # **`memo`** 기본 사용법
+            
+            ---
+            
+            ```tsx
+            import { memo }from"react";
+            
+            constChild =memo(functionChild({ value }) {
+            return<div>{value}</div>;
+            });
+            ```
+            
+            - `memo(Component)` 형태로 감싸서 사용한다.
+            - props가 이전과 동일하면 컴포넌트 렌더링을 건너뛴다.
+            - 필요하면 두 번째 인자로 **커스텀 비교 함수**를 전달할 수 있다.
+        - **`memo`**를 언제 쓰면 좋은지 / 안 좋은지 🍠
+            
+            # **`memo`**를 언제 쓰면 좋은지 / 안 좋은지
+            
+            ---
+            
+            ### ✅ 쓰기 좋은 경우
+            
+            - 렌더링 비용이 크고 props 변경이 드문 컴포넌트
+            - 리스트 아이템, 차트, 복잡한 UI 컴포넌트
+            - props로 객체·함수 전달 시 `useCallback`/`useMemo`와 함께 사용
+            
+            ### ❌ 안 좋은 경우
+            
+            - 렌더링 비용이 매우 작은 컴포넌트
+            - props가 자주 바뀌는 컴포넌트
+            - 무분별하게 사용하면 **비교 비용과 코드 복잡도만 증가**
+        
+        ### 한 줄 요약 ✏️
+        
+        > memo는 props의 참조 동일성을 기준으로
+        불필요한 리렌더링을 줄이기 위한 컴포넌트 최적화 도구다.
+        > 
+    
+    ---
+    
+    ### 🍠 실습 1. 제출
+    
+    - 깃허브 주소 🍠
+    - 실행 영상 🍠
+    
+- **`useMemo`** 🍠
+    
+    # **`useMemo`** 🍠
+    
+    ---
+    
+    ### 🎥 실습 2. 강의 영상
+    
+    https://youtu.be/GdnfH_WH8pg?si=lILRTKG4hFOjqrYH
+    
+    <aside>
+    🍠
+    
+    위의 영상을 보고 **`useMemo`**에 대해 정리해주세요!
+    
+    또한 아래 공식문서 또한 읽어보시면서 부족한 내용을 보충해서 정리해주세요!
+    
+    https://react.dev/reference/react/useMemo
+    
+    </aside>
+    
+    - **`useMemo`** 에 대하여 정리해주세요! 🍠
+        
+        # **`useMemo`** 에 대하여 정리해주세요! 🍠
+        
+        ---
+        
+        - **`useMemo`**가 무엇인지? 🍠
+            
+            # **`useMemo`**가 무엇인지? 🍠
+            
+            ---
+            
+        - 왜 **`useMemo`**를 사용하는지? 🍠
+            
+            # 왜 **`useMemo`**를 사용하는지? 🍠
+            
+            ---
+            
+        - **`useMemo`** 기본 사용법 🍠
+            
+            # **`useMemo`** 기본 사용법 🍠
+            
+            ---
+            
+        - **`useMemo`**에서 중요한 개념 🍠
+            
+            # **`useMemo`**에서 중요한 개념 🍠
+            
+            ---
+            
+        - **`useMemo`** 실전 예시 🍠
+            
+            # **`useMemo`** 실전 예시 🍠
+            
+            ---
+            
+        
+    
+    ---
+    
+    ### 🍠 실습 2. 제출
+    
+    - 깃허브 주소 🍠
+    - 실행 영상 🍠
+- **Vercel**을 활용한 **`배포`**와 CI/CD 🍠
+    
+    # Vercel을 활용한 **`배포`**와 CI/CD 🍠
+    
+    ---
+    
+    <aside>
+    💡
+    
+    **`배포`(Deployment)와 CI/CD**는 개발의 마지막 단계이자 꽃입니다. 처음 접하실 때 용어가 낯설고 서버 개념이 복잡하게 느껴질 수 있습니다. 그래서 이번 챕터에서는 여러분의 이해를 돕기 위해 핵심 개념 설명을 먼저 제공해 두었습니다.
+    
+    다만, 앞으로의 개발 과정에서는 이 과정을 스스로 구축하고 자동화하는 능력이 매우 중요하기 때문에, 제공된 설명만 보지 말고 아래 방법도 함께 활용해 보시길 추천드립니다.
+    
+    ---
+    
+    ### 1. 제공된 개념 설명 먼저 정독하기
+    
+    - 이번 챕터에 포함된 배포와 CI/CD 개념 설명을 꼼꼼히 읽으면서 "내 코드가 사용자에게 전달되는 흐름"을 먼저 잡아주세요.
+    - 생소한 용어(Build, Pipeline 등)는 표시해 두었다가, 추가 자료를 참고하며 보완해 주세요.
+    
+    ### 2. 공식 문서 및 자료 추가 탐색
+    
+    - Vercel 공식 문서와 GitHub Actions 관련 글을 함께 참고해 보세요. 특히 다음을 중점적으로 살펴보면 좋습니다:
+        - GitHub에 코드를 올리면(Push) 어떻게 배포까지 이어지는지
+        - 자동화 과정에서 설정 파일(.yml, json)이 어떤 역할을 하는지
+    
+    ### 3. 워크북 작성 원칙 (중요!)
+    
+    - 워크북의 각 토글을 하나씩 펼쳐 보면서
+        
+        **제공된 개념 설명 + 직접 찾아본 내용**을 기반으로 정리해 주세요.
+        
+    - ⚠️ **절대 복사/붙여넣기를 하지 마세요!** ⚠️
+        
+        직접 이해하고 자신의 문장으로 정리하는 과정이 학습 효과를 극대화합니다.
+        
+    
+    ---
+    
+    앞으로의 개발 과정에서는 **필요한 지식을 스스로 탐색하고, 정리하고, 기록하는 능력**이 매우 중요해집니다.
+    
+    이번 미션을 통해 이러한 능력을 더욱 단단하게 쌓아 가시길 응원합니다! 🍠
+    
+    </aside>
+    
+    [Vercel Documentation](https://vercel.com/docs)
+    
+    [GitHub Actions documentation - GitHub Docs](https://docs.github.com/en/actions)
+    
+    - **`배포`**는 무엇인가요?
+        
+        # **`배포`**는 무엇인가요?
+        
+        ---
+        
+        **`배포`(Deployment)**는 개발자가 만든 코드를 실제 사용자들이 사용할 수 있도록 인터넷 상에 공개하는 과정이에요. 내 컴퓨터(Localhost)에서만 돌아가던 웹사이트를, 누구나 URL을 통해 접속할 수 있는 (Server)로 옮기는 작업이라고 생각하면 좋아요.
+        
+        ---
+        
+        **특징 정리:**
+        
+        - **빌드(Build):** 우리가 작성한 코드(React, TypeScript 등)를 브라우저가 이해할 수 있는 파일(HTML, CSS, JS)로 변환하는 과정이 필요해요.
+        - **호스팅(Hosting):** 변환된 파일들을 24시간 켜져 있는 컴퓨터(서버)에 저장해 두고, 요청이 오면 보여줘요.
+        - **접근성:** 배포가 완료되면 고유한 도메인 주소(예: `www.yolog.co.kr`)가 생겨서 어디서든 접속할 수 있어요.
+        
+        ---
+        
+        **단점도 있어요:**
+        
+        - 과거에는 직접 서버 컴퓨터를 사고, 리눅스를 설치하고, 복잡한 네트워크 설정을 해야 했어요.
+        - 코드를 수정할 때마다 수동으로 파일을 서버에 업로드해야 해서 번거롭고 실수가 잦았어요.
+    - **Vercel**은 무엇인가요?
+        
+        # **Vercel**은 무엇인가요?
+        
+        ---
+        
+        **Vercel**은 프론트엔드 개발자가 복잡한 서버 설정 없이 아주 쉽고 빠르게 웹사이트를 배포할 수 있도록 도와주는 플랫폼이에요.
+        React의 프레임워크인 **Next.js**를 만든 팀에서 개발했기 때문에, 리액트 기반 프로젝트와 찰떡궁합인 도구라고 생각하면 좋아요.
+        
+        ---
+        
+        **특징:**
+        
+        - **GitHub 연동:** GitHub 저장소에 코드를 올리기만 하면(Push), Vercel이 알아서 감지하고 배포를 시작해요.
+        - **자동 설정:** 복잡한 서버 세팅 없이도 HTTPS(보안 연결), 도메인 설정 등을 자동으로 해줘요.
+        - **미리보기(Preview):** 실제 서비스에 반영하기 전에, 테스트 주소를 생성해 줘서 팀원들과 미리 확인해 볼 수 있어요.
+        - **빠른 속도:** 전 세계 곳곳에 서버(CDN)가 있어서 사용자가 어디에 있든 빠르게 사이트를 보여줘요.
+        
+    - **CI / CD**는 무엇인가요?
+        
+        # **CI / CD**는 무엇인가요?
+        
+        ---
+        
+        **CI/CD**는 개발부터 배포까지의 과정을 "자동화"하여, 더 자주, 더 안전하게 코드를 배포할 수 있게 하는 방법론이자 도구 모음이에요.
+        개발자가 일일이 수동으로 하던 일들을 "로봇(스크립트)"에게 맡겨서 실수를 줄이는 것이 핵심이에요.
+        
+        ---
+        
+        ### **1. CI (Continuous Integration - 지속적 통합)**
+        
+        - **무엇인가요?** 여러 개발자가 작성한 코드를 **자주, 정기적으로 합치는(Merge)** 과정이에요.
+        - **하는 일:** 코드가 합쳐질 때마다 자동으로 **테스트**를 실행하고, 빌드가 잘 되는지 확인해요.
+        - **왜 하나요?** 버그를 미리 발견해서, 잘못된 코드가 합쳐지는 것을 막기 위해서예요. "문지기" 역할을 한다고 보면 돼요.
+        
+        ---
+        
+        ### **2. CD (Continuous Deployment/Delivery - 지속적 배포/제공)**
+        
+        - **무엇인가요?** CI를 통과한 코드를 자동으로 **사용자에게 배포**하는 과정이에요.
+        - **하는 일:** 테스트가 끝난 코드를 서버로 전송하고, 실제 웹사이트를 업데이트해요.
+        - **왜 하나요?** 개발자가 수동으로 업로드할 필요 없이, 코드만 작성하면 고객에게 기능이 즉시 전달되게 하기 위해서예요.
+        
+    - **`배포`** vs **Vercel** vs **CI/CD** 한눈에 비교
+        
+        # 배포 vs Vercel vs CI/CD 한눈에 비교
+        
+        ---
+        
+        | **항목** | **배포 (Deployment)** | **Vercel** | **CI / CD** |
+        | --- | --- | --- | --- |
+        | **핵심 개념** | 서비스 공개 | 배포 도구 (플랫폼) | 자동화 프로세스 |
+        | **역할** | 내 컴퓨터 -> 세상 밖으로 | 배포를 쉽게 해주는 조력자 | 개발~배포 과정을 연결하는 파이프라인 |
+        | **비유** | 가게 오픈 | 인테리어/설비 다 된 매장 임대 | 로봇이 청소/요리/서빙까지 자동화 |
+        | **난이도** | (과거) 매우 높음 | 매우 낮음 (클릭 몇 번) | 설정에 따라 다름 (GitHub Actions 등) |
+        | **주요 작업** | 파일 업로드, 서버 실행 | GitHub 레포지토리 연결 | 테스트 코드 작성, 워크플로우(.yml) 설정 |
+    - **Vercel과 CI/CD**가 권장되는 이유
+        
+        # **Vercel과 CI/CD**가 권장되는 이유
+        
+        ---
+        
+        현대 개발 환경에서 핵심은 **"생산성"**과 **"안정성"**이에요:
+        
+        > "개발자는 비즈니스 로직(기능 구현)에만 집중하세요. 배포와 운영은 도구가 해결해 드립니다."
+        > 
+        
+        즉, **Vercel**을 사용하면 인프라 구축 시간을 아낄 수 있고, **CI/CD**를 구축하면 사람이 할 수 있는 실수를 컴퓨터가 대신 검증해주기 때문에 훨씬 안정적인 서비스 운영이 가능해요.
+        
+        ---
+        
+        ### **✔ 언제 이 도구들을 사용할까요?**
+        
+        ---
+        
+        👉 **이런 경우라면 강력 추천해요**
+        
+        - ✔ 내가 만든 프로젝트를 포트폴리오로 제출해서 링크로 보여주고 싶을 때 (**Vercel**)
+        - ✔ 코드를 수정할 때마다 일일이 다시 빌드하고 업로드하기 귀찮을 때 (**CI/CD**)
+        - ✔ 팀 프로젝트를 진행하며, 팀원의 코드가 에러 없이 잘 합쳐지는지 확인하고 싶을 때
+        - ✔ 실무에서처럼 체계적인 개발 프로세스를 경험해보고 싶을 때
+        
+        ---
+        
+        👉 **이런 경우 과할 수도 있어요**
+        
+        - ✔ 인터넷 연결 없이 로컬에서만 동작하는 프로그램을 만들 때
+        - ✔ 배포할 필요 없이 코드 로직만 공부하는 단계일 때
+    - **추가로 본인이 학습한 내용에 대해서 정리해주세요** 🍠
+        
+        # **추가로 본인이 학습한 내용에 대해서 정리해주세요** 🍠
+        
+        ---
+        
+        - **Preview 배포의 중요성**: Vercel은 PR마다 Preview URL을 자동 생성해, 실제 배포 전 기능·UI를 안전하게 검증할 수 있다.
+        - **환경 변수 관리**: API Key 같은 민감한 값은 코드에 직접 넣지 않고, Vercel의 Environment Variables로 관리해야 한다.
+        - **Rollback의 필요성**: 배포 후 문제가 생기면 이전 버전으로 즉시 되돌릴 수 있어 서비스 안정성이 높아진다.
+        - **자동화의 신뢰성**: CI 단계에서 테스트가 실패하면 배포 자체가 차단되어, 오류 코드가 사용자에게 노출되는 것을 막는다.
+        - **협업 효율 향상**: GitHub Actions + Vercel을 사용하면 팀원 간 “내 로컬에서는 됐어” 문제를 크게 줄일 수 있다.
+        - **실무와의 연결성**: 대부분의 실무 프론트엔드 프로젝트는 CI/CD 기반 배포를 사용하므로, 학습 자체가 실무 경험이 된다.
+        - **배포는 개발의 끝이 아니라 시작**: 배포 이후 로그, 성능, 사용자 반응을 보며 지속적으로 개선하는 과정이 중요하다는 것을 이해했다.
+
+# 🍠 미션 1 - 영화 사이트 렌더링 최적화
+
+---
+
+<aside>
+🔥 이번 미션에서는 **`useCallabck`**, **`useMemo`**, **`memo`**를 활용해서 **최적화된 영화 검색 기능**을 직접 구현하는 것이 목표예요.
+
+> 📌 방법: 
+1. 먼저 **기본 버전의 영화 검색 기능**을 구현해봐요. (검색어 입력 → API 호출 → 결과 리스트 렌더링)
+> 
+> 
+> 2. 그 다음, **불필요한 렌더링이 어디서 발생하는지** 콘솔 로그 등으로 직접 확인해봐요.
+> 
+> 3. 확인한 문제 지점을 기준으로 아래 최적화 훅을 활용해 최적화해봐요.
+> 
+> - **`useCallabck`**으로 **이벤트 핸들러 참조 고정**
+> - **`useMemo`**로 **계산 비용이 큰 값 메모이제이션**
+> - **`memo`**로 **리렌더링이 필요 없는 컴포넌트 메모이제이션**
+> 1. 아래 체크박스를 바탕으로 직접 문제를 파악해보며 해결해보고, 어렵거나 이해가 안가는 부분이 있으면 아래 강의 영상을 참고해주세요. 
+</aside>
+
+### 🎥 미션 1. 강의 영상
+
+https://www.youtube.com/watch?v=Zr0OP21zF4c&t=3611s
+
+## 🎬 1. 영화 검색 기능
+
+### 🪟 레이아웃
+
+- [ ]  페이지 상단에 **영화 검색 영역 레이아웃**을 만들어주세요.
+- [ ]  검색 폼을 `form` 태그로 감싸주세요. (엔터 입력 시에도 검색되도록)
+
+### 🎬 영화 제목 입력
+
+- [ ]  “영화 제목”을 입력할 수 있는 `input`(text)를 만들어주세요.
+- [ ]  `placeholder`를 만들어주세요. **예) 영화 제목을 입력하세요**
+- [ ]  사용자가 입력한 값을 상태(state)로 관리해주세요.
+    
+    ![Screenshot 2025-05-05 at 2.26.21 AM.png](attachment:c256d019-be44-41a1-a617-5772ee3a388d:Screenshot_2025-05-05_at_2.26.21_AM.png)
+    
+
+### 🔞 성인 콘텐츠 표시 여부 (체크박스)
+
+- [ ]  “성인 콘텐츠 포함” 여부를 선택할 수 있는 `checkbox`를 만들어주세요.
+- [ ]  체크 여부를 상태로 관리해주세요. (true/false)
+- [ ]  실제 API 호출 시, 이 값에 따라 **성인 콘텐츠 포함 여부가 반영되도록** 해주세요. (예: TMDB의 `include_adult` 파라미터 활용 등)
+
+### 🌐 언어 선택 (한국어 / 영어 / 일본어)
+
+- [ ]  언어를 선택할 수 있는 `select` 박스를 만들어주세요.
+- [ ]  옵션은 아래 3가지 중에서 선택 가능하게 해주세요.
+    - [ ]  한국어 (ko-KR)
+    - [ ]  영어 (en-US)
+    - [ ]  일본어 (ja-JP)
+    - [ ]  실제 API 호출 시, 선택한 언어 코드가 적용되도록 해주세요.
+- [ ]  선택된 언어 값을 상태로 관리해주세요.
+    
+    ![Screenshot 2025-05-05 at 2.26.40 AM.png](attachment:55e6e542-bb58-4e3e-91d9-324147e1e133:Screenshot_2025-05-05_at_2.26.40_AM.png)
+    
+
+---
+
+## 🪟 2. 영화 상세 정보 모달 구현
+
+### 🎨 모달 디자인 요구사항
+
+- [ ]  영화 카드를 클릭하면 **선택된 영화의 정보**를 모달 형태로 보여주세요.
+- [ ]  제공된 **이미지/영상과 최대한 유사한 레이아웃**으로 모달을 디자인해주세요.
+    - [ ]  포스터, 제목, 평점, 개봉일, 줄거리 등이 보기 좋게 배치해주세요.
+    - [ ]  중앙에 카드 형태의 모달 박스가 나타나게 해주세요.
+    
+    [Screen Recording 2025-05-05 at 2.27.20 AM.mov](attachment:f75fbe0c-fb14-437c-9c45-199a7e905ed8:Screen_Recording_2025-05-05_at_2.27.20_AM.mov)
+    
+- [ ]  모달 상단에 **포스터 이미지**를 보여주세요.
+- [ ]  모달에 최소 아래 이미지의 정보들을 표시해주세요.
+    
+    ![Screenshot 2025-05-05 at 2.26.50 AM.png](attachment:59b72244-f758-470d-b411-488c3a8c2353:Screenshot_2025-05-05_at_2.26.50_AM.png)
+    
+- [ ]  모달 안에 **“IMDb에서 검색하기” 버튼**을 만들어주세요.
+    - [ ]  버튼 클릭 시, 새 탭에서 IMDb 검색 결과가 열리도록 해주세요.
+        - [ ]  예: `https://www.imdb.com/find?q=${영화제목}` 형식으로 URL 구성
+- [ ]  모달 내부에 “닫기” 버튼을 만들어주세요.
+    - [ ]  닫기 버튼 클릭시 모달이 닫히게 해주세요.
+
+---
+
+## ⚙️ 성능 최적화 (React.memo, useCallback, useMemo)
+
+- [ ]  브라우저에 **React DevTools**를 설치한다.
+    
+    [React Developer Tools - Chrome Web Store](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?pli=1)
+    
+- [ ]  React DevTools의 **Profiler 탭**을 열어주세요.
+- [ ]  영화 검색 및 필터링을 한 번 수행해 보고, 어떤 컴포넌트가 리렌더링되는지 확인해주세요.
+    
+    [Screen Recording 2025-05-05 at 2.28.37 AM.mov](attachment:75ffd2ba-abb4-482c-b42f-3801c50db5ba:Screen_Recording_2025-05-05_at_2.28.37_AM.mov)
+    
+    - [ ]  불필요하게 상위 전체가 리렌더링 된다면, 원인을 찾아 `memo`, `useCallback`, `useMemo`를 조정해주세요.
+- [ ]  최적화 전 / 후의 차이를 캡처해서 기록하거나, 간단히 정리해 주세요.
+    - **적용한 최적화 정리해 보기**
+- [ ]  그동안 여러분이 제작하신 **LP 사이트**도 최적화를 3개 이상 해보시고 아래에 남겨주세요.
+    - **LP 페이지 성능 개선 포인트 정리**
+
+### 🍠 미션 1. 제출
+
+- 깃허브 주소 🍠
+- 실행 영상 🍠
+
+---
+
+# 🍠 미션 2. Vercel을 활용한 영화 사이트 배포 및 도메인 연결
+
+---
+
+<aside>
+💡
+
+**"Localhost를 넘어, 전 세계 사용자와 만날 시간입니다."**
+
+지난 미션 1에서 여러분은 성능 최적화가 적용된 멋진 영화 사이트를 제작했습니다. 하지만 내 컴퓨터(Localhost)에서만 볼 수 있다면 진정한 웹 서비스라고 할 수 없겠죠? 이번 미션에서는 **Vercel**을 활용하여 여러분의 결과물을 실제 인터넷 환경에 배포해 봅니다.
+
+특히 이번 미션은 단순히 배포 버튼을 누르는 것을 넘어, **"나만의 브랜드(Domain)"**를 갖는 방법까지 학습하는 것을 목표로 합니다.
+
+**- 중앙 웹 파트장 매튜 / 김용민 -** 
+
+</aside>
+
+### 🎥 미션 2. 강의 영상
+
+https://youtu.be/GX9QbJiiQyQ?si=hVBHTZqgySzoyy82
+
+### 📚 미션 2. 블로그 자료
+
+[개발자 매튜 | 우리는 Vercel로 간다! 프론트엔드 배포 가이드](https://www.yolog.co.kr/post/vercel-deployment)
+
+### Vercel 배포 체크리스트
+
+---
+
+**1. 준비 단계 (GitHub & CLI)**
+
+내 코드를 배포할 준비를 하는 단계예요.
+
+- [ ]  **GitHub 레포지토리 생성 및 코드 업로드 (Push)**
+    - `git init` → `git add .` → `git commit` → `git push`
+    - ⚠️ **주의:** API 키가 들어있는 `.env` 파일은 절대 올리면 안 돼요! (`.gitignore` 확인)
+- [ ]  **Vercel CLI 설치**
+    - 터미널에 `npm install -g vercel` 입력
+- [ ]  **Vercel 로그인**
+    - 터미널에 `vercel login` 입력 후 GitHub 계정 등으로 로그인 완료하기
+
+**2. 프로젝트 연결 및 첫 배포 (Preview)**
+
+Vercel과 내 프로젝트를 연결하고 미리보기(Preview)를 띄우는 단계예요.
+
+- [ ]  **Vercel 연동 시작**
+    - 프로젝트 경로에서 `vercel` 명령어 입력
+- [ ]  **초기 설정 질문 답변하기**
+- [ ]  **Preview 배포 확인**
+    - 터미널에 뜬 `Preview` URL로 접속해서 사이트가 나오는지 확인하기
+
+**3. 실서비스 배포 (Production)**
+
+이제 진짜 사용자가 볼 수 있는 주소로 배포하는 단계예요.
+
+- [ ]  **Production 배포 명령어 실행**
+    - 터미널에 `vercel --prod` 입력
+- [ ]  **Production URL 확인**
+    - `Production` 옆에 뜬 URL로 접속해서 확인하기
+
+**4. 필수 설정 및 에러 해결**
+
+블로그에서 강조한 **"새로고침 시 404 에러"**와 **"환경변수"** 해결 단계에요.
+
+- [ ]  **`react-router-dom`**을 활용하여 영화 상세페이지 라우팅만 해주세요
+    - [ ]  제대로 **`/movies/:movieId`** 페이지 이동이 되는지 확인해주세요. (실제로 디자인을 할 필요는 없습니다.)
+- [ ]  **환경변수(Environment Variables) 등록**
+    - Vercel 대시보드 → Settings → Environment Variables 탭 이동
+    - `.env` 파일에 있던 내용(API URL 등)을 똑같이 입력하고 Save
+    - **필수:** 저장 후 반드시 **재배포(`vercel --prod`)** 해야 적용됨!
+- [ ]  **SPA 새로고침 404 에러 방지 (`vercel.json`)**
+    - React, Vue 등 SPA 프로젝트라면 필수!
+    - 프로젝트 최상단에 `vercel.json` 파일 만들기
+    - 블로그에 나온 `rewrites` 코드(모든 경로를 index.html로 보내는 설정) 복사·붙여넣기
+
+**5. 도메인 연결 (선택 사항)**
+
+나만의 예쁜 주소(`yolog.co.kr` 등)를 갖고 싶다면 진행하세요.
+
+- [ ]  **도메인 추가**
+    - Vercel 대시보드 → Domains 탭 → 구입한 도메인 입력 후 Add
+- [ ]  **DNS 레코드 설정**
+    - 도메인 구입처(가비아 등) 설정 페이지 이동
+    - **A Record** (IP 주소) 또는 **CNAME Record** (vercel.app 주소) 입력
+- [ ]  **연결 확인**
+    - 'Configured Correctly' 초록불이 들어오는지 확인하기
+
+### 🍠 미션 2. 제출
+
+- 깃허브 주소 🍠
+- 배포 사이트 링크 🍠
+
+# 🍠 워크북 피드백 (완료)
+
+---
+
+<aside>
+💡
+
+여러분들이 워크북을 학습하며 느낀 **좋았던 점**, **아쉬웠던 점**, **개선이 필요한 부분**을 자유롭게 남겨주세요.
+
+여러분의 솔직한 의견은 다음 기수와 현재 진행하고 있는 웹 파트 스터디를 더 발전시키는 데 큰 힘이 됩니다. 🙌
+
+**📌 설문 안내**
+
+**제출 시점 :** 각 주차 워크북 학습을 마친 뒤 **반드시 제출**해주세요.
+
+(제출하지 않으면 해당 주차 **워크북 미이수**로 간주됩니다.)
+
+</aside>
+
+[](https://forms.gle/PCLJq6NUn1qBd1Ha8)
+
+# 🍠 코드 리뷰
+
+---
+
+<aside>
+💡
+
+워크북 하단에 아래 내용을 정리해 제출해 주세요. (제출용 폼은 추후 제공 예정)
+
+1. **내가 리뷰한 내용**
+    - 직접 리뷰한 코드 내용을 캡처하여 업로드 (**`GitHub Pull Request`** 캡처 권장)
+2. **리뷰 반영 결과**
+    - 받은 피드백을 반영한 개선된 코드와 그 캡처를 함께 업로드 (**`GitHub Pull Request`** 캡처 권장)
+
+> 💬 아직 코드 작성을 하지 않은 경우
+> 
+> 
+> 스터디 참여 인증 또는 워크북 피드백을 작성해 제출해 주세요.
+> 
+</aside>
+
+- 내가 리뷰한 내용을 캡처해 업로드
+    
+    **예시**
+    
+    ![스크린샷 2025-09-05 오후 12.46.40.png](attachment:39549968-68c3-4416-b41f-423fd1f7fd79:스크린샷_2025-09-05_오후_12.46.40.png)
+    
+- 받은 리뷰를 반영하여 개선한 코드와 캡처 업로드
+    
+    **예시**
+    
+    ![스크린샷 2025-09-05 오후 12.47.34.png](attachment:01011e3f-c9fd-4041-bdd5-4da72a805955:스크린샷_2025-09-05_오후_12.47.34.png)
+    
+
+# 🥕 Vercel은 어떻게 무료로 배포를 가능하게 할까?
+
+---
+
+<aside>
+🥕
+
+**Vercel**은 AWS CloudFront처럼 트래픽 비용을 직접 지불해야 하는 방식과 달리, 개인 개발자에게 **완전 무료 배포**를 제공하며 프론트엔드 배포의 **치트키**로 자리 잡았어요.
+
+사실 Vercel은 자체 서버가 아닌 **AWS 인프라** 위에서 구동되지만, 복잡한 설정을 걷어내고 **개발자 경험(DX)**을 극대화하는 전략으로 사용자를 모으고 있어요.
+
+개인에게는 비용을 대신 내주며 생태계에 **락인(Lock-in)** 시키고, **기업 및 팀 단위**로 확장될 때 **협업 기능과 보안** 비용을 청구해 수익을 내는 **프리미엄(Freemium) 모델**이 핵심이에요.
+
+즉, AWS가 저렴한 도매상이라면 Vercel은 **편리함과 시간을 제공**하는 대신 성공한 서비스에게 비용을 받는 똑똑한 구조인 셈이죠.
+
+이러한 프론트엔드 배포의 흐름을 한번 재미있게 정리해보았어요.
+
+참고로, 이 글의 내용은 전부 **Perplexity**를 기반으로 정리했습니다.
+
+</aside>
+
+[Vercel은 어떻게 무료로 배포를 가능하게 할까?](https://www.notion.so/Vercel-2b8b57f4596b81618336d5d8976bfb63?pvs=21)
+
+# 🍠 학습 회고
+
+---
+
+<aside>
+📢 이번 주차 워크북을 해결해보면서 어땠는지 **회고**해봅시다.
+
+- **핵심 키워드**에 대해 완벽하게 이해했는지? 
+- **이해한 점 - 어려운 점 (개선 방법) - 회고** 순서로 작성해주세요.
+- **참고 자료**가 있다면 아래에 남겨주세요.
+
+</aside>
+
+- 📢 학습 회고 (예시, 서식만 복사하시고 지워주세요.)
+    - **프론트엔드 배포, Vercel 활용**
+        - **이해한 점**: Vercel은 프론트엔드 프로젝트를 **빠르고 간편하게 배포**할 수 있는 플랫폼입니다.
+            
+            GitHub 연동, 환경변수 설정, 커스텀 도메인 연결 등 배포 과정 대부분이 GUI와 CLI로 쉽게 처리되며, SPA 환경에서도 라우팅 문제를 `vercel.json` 설정으로 해결할 수 있습니다.
+            
+            - 예시:
+                
+                ```bash
+                # CLI로 배포
+                vercel         # Preview 배포
+                vercel --prod  # Production 배포
+                ```
+                
+                ```json
+                // SPA 라우팅 문제 해결
+                {
+                  "routes": [
+                    { "src": "/[^.]+", "dest": "/index.html", "status": 200 }
+                  ]
+                }
+                ```
+                
+        - **어려운 점 (개선 방법)**: SPA 기반 프로젝트는 새로고침 시 404 문제가 발생할 수 있으며, 환경변수 관리, 커스텀 도메인 연결 과정이 처음에는 헷갈렸습니다.
+            - 개선 방법: `vercel.json` 설정으로 SPA 라우팅 문제를 해결하고, Vercel Dashboard에서 환경변수와 DNS 설정을 직접 확인하면서 반복적으로 배포 실습을 진행했습니다.
+            - 예시:
+                
+                ```tsx
+                // 환경변수 사용
+                const api = axios.create({
+                  baseURL: import.meta.env.VITE_API_URL,
+                  headers: { 'Content-Type': 'application/json' },
+                });
+                
+                ```
+                
+        - **회고**: 실제 배포 과정을 경험해보니, 로컬 환경과 다른 실제 서비스 환경에서의 테스트 필요성을 이해할 수 있었습니다.
+            
+            앞으로 프로젝트를 진행할 때, GitHub 연동과 Vercel 배포를 활용해 **즉시 테스트 가능한 환경**을 만들고, SPA 라우팅 문제와 환경변수를 신경 써서 안정적으로 서비스를 운영할 수 있을 것 같습니다.
+            
+        
+        ---
+        
+        ### 참고 자료
+        
+        [개발자 매튜 | 우리는 Vercel로 간다! 프론트엔드 배포 가이드](https://www.yolog.co.kr/post/vercel-deployment)
+        
+
+# 🤔 참고 자료
+
+---
+
+[useCallback – React](https://ko.react.dev/reference/react/useCallback)
+
+[useMemo – React](https://ko.react.dev/reference/react/useMemo)
+
+[memo – React](https://ko.react.dev/reference/react/memo)
+
+[개발자 매튜 | 우리는 Vercel로 간다! 프론트엔드 배포 가이드](https://www.yolog.co.kr/post/vercel-deployment)
+
+[Vercel Documentation](https://vercel.com/docs)
+
+[GitHub Actions documentation - GitHub Docs](https://docs.github.com/en/actions)
+
+# 🛡️ 저작권
+
+---
+
+**© 2025 [Kim Yongmin (Matthew)](https://www.youtube.com/@yongcoding). All rights reserved.**
\ No newline at end of file