From 40b7e78424e4b050ff3f4adb0268fab8ff3164da Mon Sep 17 00:00:00 2001
From: RyuDongHo <thffhahs03@gmail.com>
Date: Thu, 14 Nov 2024 01:30:10 +0900
Subject: [PATCH] =?UTF-8?q?keyword:=205~6=EC=A3=BC=EC=B0=A8=20=ED=82=A4?=
 =?UTF-8?q?=EC=9B=8C=EB=93=9C=20=EC=B6=94=EA=B0=80=2005=2006=20chapter=20?=
 =?UTF-8?q?=ED=82=A4=EC=9B=8C=EB=93=9C=20=EC=B6=94=EA=B0=80=20=ED=96=88?=
 =?UTF-8?q?=EC=8A=B5=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 keyword/chapter05/keyword.md | 615 +++++++++++++++++++++++++++++++++++
 keyword/chapter06/keyword.md | 337 +++++++++++++++++++
 2 files changed, 952 insertions(+)
 create mode 100644 keyword/chapter05/keyword.md
 create mode 100644 keyword/chapter06/keyword.md

diff --git a/keyword/chapter05/keyword.md b/keyword/chapter05/keyword.md
new file mode 100644
index 0000000..8a0e0e3
--- /dev/null
+++ b/keyword/chapter05/keyword.md
@@ -0,0 +1,615 @@
+# 📝 학습 목표
+
+---
+
+1. **`유효성 검사`**에 대해 학습합니다.
+2. **`input 태그`**의 여러가지 속성에 대해 학습합니다.
+3. **`Custom Hook`**을 만들었을 떄의 장점에 대해 알아봅니다.
+4. **`Custom Hook`**을 활용하여, 효율적으로, 유효성 검사를 하며, 폼 데이터를 관리하는 방법에 대해 알아봅니다.
+
+# ⚠️  스터디 진행 방법
+
+---
+
+1. 스터디를 진행하기 전, 워크북 내용들을 모두 채우고 스터디에서 서로 모르는 내용들을 스터디원과 함께 공유해 주세요.
+2. 실습과 미션은 워크북 내용들을 모두 완료한 후, 스터디 전에 진행해 오세요!
+    - 1주 차 스터디 이전에 1주 차 워크북을 완성한 후 스터디를 진행해 주세요.
+3. 스터디 시간에는 각자 해 온 미션들을 공유하고, 아래의 과정을 진행합니다.
+    1. 스터디원과 함께 코드 리뷰 진행.
+    2. 코드 리뷰 이후, 본인의 코드의 문제가 있는 경우 리팩토링 진행.
+    3. 팀원들과, 조금 더 코드를 깔끔하게 작성할 수 있는 개선점이 있을지 고민 후, 리팩토링 진행.
+    4. 각자 미션을 진행하면서 해결하지 못한 이슈를 공유 후, 해당 이슈를 도움받아 해결.
+4. 매주 주어진 미션을 성실하게 제출합니다.
+5. 🍠 이모지가 붙어있는 곳은, 직접 여러분들이 채워 넣으셔야 하는 부분입니다. 꼭 Google을 통한 검색을 하시고, VSCode를 활용하여, 실행 결과를 눈으로 보시면서 정리해 주세요!
+
+# 📸 잠깐 ! 스터디 인증샷은 찍으셨나요?📸
+
+---
+
+* 스터디리더께서 대표로 매 주차마다 한 장 남겨주시면 좋겠습니다!🙆💗
+ (사진을 저장해서 이미지 임베드를 하셔도 좋고, 복사+붙여넣기해서 넣어주셔도 좋습니다!)
+
+[]()
+
+# 🎯 핵심 키워드
+
+---
+
+<aside>
+💡 주요 내용들에 대해 조사해보고, 자신만의 생각을 통해 정리해보세요!
+레퍼런스를 참고하여 정의, 속성, 장단점 등을 적어주셔도 됩니다.
+조사는 공식 홈페이지 **Best**, 블로그(최신 날짜) **Not Bad**
+
+</aside>
+
+### 키워드 정리 🍠
+
+- useRef 🍠
+    
+    렌더링이 되어도, 유지하고 싶은 값이 있을 때 사용합니다.
+    
+    useRef로 값을 저장합니다.
+    
+- input의 주요 프로퍼티 🍠
+    - 아래 내용 이외에, 자주 사용하는 프로퍼티가 있으면 추가로 더 정리해주세요! 🍠
+        
+        email 타입을 쓰면, 간단하게 이메일 형식을 입력하도록 하는 입력 창을 만들 수 있습니다. 
+        
+    
+    ### 1. `type`
+    
+    - **설명**: 입력 필드의 종류를 설정합니다.
+    - **값 예시**: `"text"`, `"password"`, `"email"`, `"number"`, `"checkbox"`, `"radio"` 등
+    - **예시**: `<input type="text" />`
+    
+    ### 2. `value`
+    
+    - **설명**: 입력 필드의 값을 설정하고 제어할 때 사용됩니다. **Controlled Component**에서 자주 사용됩니다.
+    - **값 예시**: 문자열 또는 숫자
+    - **예시**: `<input type="text" value={value} />`
+    
+    ### 3. `defaultValue`
+    
+    - **설명**: 초기값을 설정하는 데 사용됩니다.
+    - **값 예시**: 문자열 또는 숫자
+    - **예시**: `<input type="text" defaultValue="초기값" />`
+    
+    ### 4. `onChange`
+    
+    - **설명**: 사용자가 입력 필드에 값을 입력하거나 변경할 때 호출되는 이벤트 핸들러입니다.
+    - **값 예시**: 함수
+    - **예시**: `<input type="text" onChange={(e) => setValue(e.target.value)} />`
+    
+    ### 5. `placeholder`
+    
+    - **설명**: 입력 필드가 비어 있을 때 표시되는 힌트 텍스트입니다.
+    - **값 예시**: 문자열
+    - **예시**: `<input type="text" placeholder="여기에 입력하세요" />`
+    
+    ### 6. `checked`
+    
+    - **설명**: 체크박스나 라디오 버튼이 선택되었는지 여부를 제어합니다.
+    - **값 예시**: `true` 또는 `false`
+    - **예시**: `<input type="checkbox" checked={isChecked} />`
+    
+    ### 7. `defaultChecked`
+    
+    - **설명**: 체크박스나 라디오 버튼의 초기 상태를 설정합니다.
+    - **값 예시**: `true` 또는 `false`
+    - **예시**: `<input type="checkbox" defaultChecked />`
+    
+    ### 8. `disabled`
+    
+    - **설명**: 입력 필드를 비활성화하여 사용자 입력을 막습니다.
+    - **값 예시**: `true` 또는 `false`
+    - **예시**: `<input type="text" disabled />`
+    
+    ### 9. `readOnly`
+    
+    - **설명**: 입력 필드의 값을 읽기 전용으로 설정합니다. 사용자는 값을 변경할 수 없습니다.
+    - **값 예시**: `true` 또는 `false`
+    - **예시**: `<input type="text" readOnly />`
+    
+    ### 10. `name`
+    
+    - **설명**: 폼 데이터를 제출할 때 서버로 전송되는 데이터의 이름을 지정합니다.
+    - **값 예시**: 문자열
+    - **예시**: `<input type="text" name="username" />`
+    
+    ### 11. `maxLength`
+    
+    - **설명**: 입력할 수 있는 최대 글자 수를 지정합니다.
+    - **값 예시**: 숫자
+    - **예시**: `<input type="text" maxLength={10} />`
+    
+    ### 12. `min` / `max`
+    
+    - **설명**: 숫자 또는 날짜 입력에서 사용할 수 있는 최소/최대 값을 지정합니다.
+    - **값 예시**: 숫자 또는 날짜
+    - **예시**: `<input type="number" min={1} max={10} />`
+    
+    ### 13. `autoFocus`
+    
+    - **설명**: 페이지가 로드될 때 자동으로 입력 필드에 포커스를 줍니다.
+    - **값 예시**: `true` 또는 `false`
+    - **예시**: `<input type="text" autoFocus />`
+    
+    ### 14. `required`
+    
+    - **설명**: 입력 필드를 필수 입력으로 설정합니다. 폼을 제출할 때 이 필드가 비어 있으면 제출이 거부됩니다.
+    - **값 예시**: `true` 또는 `false`
+    - **예시**: `<input type="text" required />`
+
+### **`Controlled Input`** vs **`UnControlled Input`**
+
+- Controlled Input
+    
+    ### Controlled Input
+    
+    **`Controlled Input`**은 React의 상태(state)에 의해 폼의 값을 관리하는 방식입니다. Input의 value가 컴포넌트의 상태에 연결되어 있고, 상태값이 달라질 떄 마다, 입력 필드의 값도 갱신됩니다.
+    
+    쉽게 말해서, Input의 값은, **`React Component가 제어`**하고, 모든 입력 변화 또한, **`컴포넌트의 상태로 반영`**되어집니다.
+    
+    특징
+    
+    - Input의 value는, React의 **`state`**로 관리됩니다.
+    - 상태 값이, **`Input의 value 속성에 직접적으로 연결`** 됨.
+    - **`Input`**의 **`Value`**가 **`변경`**되면, **`상태가 업데이트`**되고, **`상태가 다시 렌더링을 Trigger`** 함.
+    - **`React`**가 **`Form 요소의 현재 값을 항상 알고 있기에 제어가 용이`**.
+    
+    ```tsx
+    import { useState } from 'react';
+    
+    function ControlledInput() {
+      const [inputValue, setInputValue] = useState('');
+    
+      const handleChange = (event) => {
+        setInputValue(event.target.value);
+      };
+    
+      return (
+        <div>
+          <input type="text" value={inputValue} onChange={handleChange} />
+          <p>입력: {inputValue}</p>
+        </div>
+      );
+    }
+    
+    export default ControlledInput;
+    
+    ```
+    
+    ### 장점:
+    
+    - 상태를 통해 값이 직접적으로 제어되기 때문에 **`폼 데이터를 검증`**하거나 **`조작`**하기가 쉽습니다.
+    - **`사용자 입력을 실시간으로 검증`**하거나 **`포맷을 조정`**할 수 있습니다.
+    
+    ### 단점:
+    
+    - **`컴포넌트에서 상태 관리가 복잡`**해질 수 있으며, 특히 폼 데이터에 너무 많은 value들을 관리하는 경우 **`성능에 부담`**이 될 수 있습니다.
+    
+- UnControlled Input
+    
+    ### UnControlled Input
+    
+    **`Uncontrolled Input`**은 React의 state가 아닌 DOM 자체에서 입력 값을 관리하는 방식입니다. 폼의 값은 **`React 컴포넌트가 직접 관리하지 않고`**, 필요할 때 DOM에서 직접 값을 참조하는 방법입니다. 이를 위해 `ref`를 사용하여 **`DOM 요소에 직접 접근`**할 수 있습니다.
+    
+    ### 특징
+    
+    - 입력값이 `state`에 의존하지 않고, React의 제어 밖에서 관리됩니다.
+    - 폼 요소의 값은 사용자가 입력하는 대로 DOM에 저장되며, 필요할 때만 값을 읽어 옵니다.
+    - React의 상태를 사용하지 않기 때문에 폼을 간단하게 유지할 수 있습니다.
+    
+    ```tsx
+    import { useRef } from 'react';
+    
+    function UncontrolledInput() {
+      const inputRef = useRef(null);
+    
+      const handleSubmit = () => {
+        console.log(`입력: ${inputRef.current.value}`);
+      };
+    
+      return (
+        <div>
+          <input type="text" ref={inputRef} />
+          <button onClick={handleSubmit}>제출</button>
+        </div>
+      );
+    }
+    
+    export default UncontrolledInput;
+    
+    ```
+    
+    ### 장점
+    
+    - 상태 관리가 필요 없으므로 간단한 폼에 적합하며, **`성능적으로도 유리`**할 수 있습니다.
+    - 작은 폼이나 **`상태가 필요 없는 경우 사용하기 쉽습니다.`**
+    
+    ### 단점
+    
+    - 입력 값을 **`실시간으로 검증하거나 조작하기 어려우며`**, 폼 데이터와 관련된 논리를 관리하는 데 제약이 있을 수 있습니다.
+    - **`DOM에 직접 접근`**하기 때문에 **`React의 단방향 데이터 흐름을 벗어나는 경우`**가 생길 수 있습니다.
+    
+
+### react-hook-form & yup 🍠
+
+**`react-hook-form`**과 **`yup`**은 React에서 폼을 간편하게 관리하고, 유효성 검사를 수행하는 데 유용한 라이브러리 입니다. 두 개의 라이브러리를 함께 사용하면, 폼 입력 관리와 검증 과정을 매우 효율적으로 처리할 수 있습니다.
+
+현재, 여기서는 **`yup`**을 통한, **`validation`**을 설명하지만, 혹시라도, 본인이 작업하시는 프로젝트가 **`TypeScript`**시라면, **`zod`**를 사용하는 것이 조금 더 유리할 수도 있으니, **`zod`**를 더욱 추천드립니다!
+
+https://tech.inflab.com/202207-rallit-form-refactoring/react-hook-form/
+
+- **`react-hook-form`** 공식문서 설명
+    
+    ### react-hook-form
+    
+    https://react-hook-form.com/get-started
+    
+    주요 특징
+    
+    1. DX (개발자 경험)
+        
+        직관적이고, 기능이 완벽한 API로, 개발자가 폼을 구축할 떄 매끄러운 경험을 제공합니다.
+        
+    2. HTML 표준
+        
+        기존의 HTML 마크업을 활용하여 제약 기반 검증 API로 폼을 검증합니다.
+        
+    3. 가벼움
+        
+        패키지 크기는 매우 중요합니다. React Hook Form은 의존성이 없는 작은 라이브러리이다.
+        
+    4. 성능
+        
+        리렌더링 횟수를 최소화하고, 검증 계산을 줄이며, 더 빠른 마운팅을 제공.
+        
+    5. 채택 가능성
+        
+        폼 상태는 본질적으로 로컬에 있기 떄문에 다른 의존성 없이도 쉽게 채택 가능하다.
+        
+    6. UX (사용자 경험)
+        
+        최상의 사용자 경험을 제공하기 위해 일관된 검증 전략을 지향.
+        
+- **`yup`** 공식문서 설명
+    
+    ### yup
+    
+    https://github.com/jquense/yup
+    
+    **`Yup`**은 런타임 값 파싱 및 검증을 위한 스키마 빌더입니다. 스키마를 정의하고, 값을 변환하여 일치시키거나, 기존 값의 형태를 검증하거나, 두 작업을 모두 수행할 수 있습니다. **`Yup 스키마`**는 매우 표현력이 뛰어나며 복잡하고 상호 의존적인 검증이나 값 변환을 모델링할 수 있습니다.
+    
+    주요 기능:
+    
+    1. 간결하면서도 표현력이 뛰어난 스키마 인터페이스로, 간단한 데이터 모델부터 복잡한 데이터 모델까지 설계 가능
+    2. 강력한 TypeScript 지원: 스키마에서 정적 타입을 추론하거나, 스키마가 올바르게 타입을 구현하는지 확인
+    3. 내장된 비동기 검증 지원: 서버 측 및 클라이언트 측 검증을 동일하게 모델링 가능
+    4. 확장성: 타입 안정성이 보장된 메서드와 스키마를 추가할 수 있음
+    5. 풍부한 오류 세부 정보 제공으로 디버깅이 쉬움
+- **react-hook-form & yup validation 실습 🍠**
+    
+    ### 실습
+    
+    아래와 같이 **`라이브러리를 설치`**해줍니다.
+    
+    ```tsx
+    yarn add react-hook-form yup
+    ```
+    
+    그 이후 **`useForm`** hook을 불러옵니다.
+    
+    ```tsx
+    import {useForm} from 'react-hook-form'
+    
+    const SignUpPage = () => {
+        const {register, handleSubmit} = useForm();
+    
+        const onSubmit = () => {
+            console.log('폼 데이터 제출')
+        }
+    
+        return (
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <input type={'email'}/>
+                <input type={'password'}/>
+                <input type={'submit'}/>
+            </form>
+        );
+    };
+    
+    export default SignUpPage;
+    
+    ```
+    
+    1. **`register`**를 통해서, 각 **`input`**에 연결해줍니다. 이 떄 **`spread operator`**를 통해서, 원하는 **`name`**과 함께 연결을 해주면 된다고 이해하시면 됩니다.
+    2. form 태그 안에는 자체적으로 **`onSubmit`** 내부에 함수를 연결해줄 수 있습니다. 이 떄, **`useForm`** Hook에서 제공해주는 **`handleSubmit`**을 연결해주고, 자체적으로 **`onSubmit`** 함수를 통해서, data를 전달 받아, **`data 호출`**하면 됩니다.
+    
+    ```tsx
+    import {useForm} from 'react-hook-form'
+    
+    const SignUpPage = () => {
+        const {register, handleSubmit} = useForm();
+    
+        const onSubmit = (data) => {
+            console.log('폼 데이터 제출')
+            console.log(data);
+        }
+    
+        return (
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <input type={'email'} {...register("email")}/>
+                <input type={'password'} {...register("password")}/>
+                <input type={'submit'}/>
+            </form>
+        );
+    };
+    
+    export default SignUpPage;
+    
+    ```
+    
+    제가 만약 **`formData`**의 **`register`**에 아래와 같이 **`email`**, **`password`** 라는 이름으로, 연결했으니 아래와 같이 데이터가 출력됩니다.
+    
+    ![스크린샷 2024-09-17 오후 4.12.51.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/e2a62981-5cb1-4703-aed2-d758f6bde89d/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-17_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_4.12.51.png)
+    
+    우리가 위에서, 설명하기에는 **`yup`**을 활용해서, 유효성 검사를 진행한다고 했습니다. 이를 하기 위해서는 우리가 만든, **`schema`**를 **`resolve`** 하는 과정이 필요한데, 이를 위해 아래 라이브러리가 하나 더 필요합니다.
+    
+    ```tsx
+    yarn add @hookform/resolvers
+    ```
+    
+    먼저, 이메일과 비밀번호 관련해서 **`schema`**를 생성해보겠습니다. 여기서 말하는 **`schema`**는 쉽게 생각해서 **`유효성 검사`**라고 생각하시면 됩니다.
+    
+    우리의 **`회원가입 유효성 검사 조건`**은 아래와 같다는 가정하에 진행해보겠습니다.
+    
+    ### 이메일 유효성 검사 조건
+    
+    - [x]  문자열이어야 한다.
+    - [x]  필수로 입력되어야 한다.
+    
+    ### 비밀번호 유효성 검사 조건
+    
+    - [x]  문자열이어야 한다.
+    - [x]  최소 8글자이어야 한다.
+    - [x]  최대 16자이어야 한다.
+    - [x]  필수로 입력되어야 한다.
+    
+    **`yup`**의 **`object`**를 통해, **`schema`**의 **`shape을 정의`**할 수 있습니다.
+    
+    ```tsx
+    import {useForm} from 'react-hook-form'
+    import * as yup from 'yup'
+    // TIP: zod를 사용하신다면 @hookform/resolvers/zod 를 import 하시면 됩니다!
+    import {yupResolver} from '@hookform/resolvers/yup'
+    
+    const SignUpPage = () => {
+        const schema = yup.object().shape({
+            email: yup.string().email().required(),
+            password: yup.string().min(8).max(16).required(),
+        })
+    
+        const {register, handleSubmit} = useForm();
+    
+        const onSubmit = (data) => {
+            console.log('폼 데이터 제출')
+            console.log(data);
+        }
+    
+        return (
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <input type={'email'} {...register("email")}/>
+                <input type={'password'} {...register("password")}/>
+                <input type={'submit'}/>
+            </form>
+        );
+    };
+    
+    export default SignUpPage;
+    
+    ```
+    
+    실제로, 이렇게 하면 적용이 되지 않습니다. 추가적인 처리를 해주어야 합니다. 우리가, 위에서 패키지로 설치한 **`yupResolver`**를 통해, 우리가 만든 **`schema`**를 연결시켜주면 됩니다.
+    
+    ```tsx
+        const {register, handleSubmit} = useForm({
+            resolver: yupResolver(schema)
+        });
+    ```
+    
+    그럼 이제 유효성 검사가 매우 잘되는 것을 확인할 수 있습니다.
+    
+    에러 메시지를 확인하고 싶으시면, **`useForm`** hook에서 **`formState`**를 추가로 불러와야 합니다.
+    
+    ```tsx
+        const {register, handleSubmit, formState: {errors}} = useForm({
+            resolver: yupResolver(schema)
+        });
+    ```
+    
+    아래와 같이 전체 코드를 구성하면 에러메시지를 볼 수 있습니다.
+    
+    ```tsx
+    import {useForm} from 'react-hook-form'
+    import * as yup from 'yup'
+    import {yupResolver} from '@hookform/resolvers/yup'
+    
+    const SignUpPage = () => {
+        const schema = yup.object().shape({
+            email: yup.string().email().required(),
+            password: yup.string().min(8).max(16).required(),
+        })
+    
+        const {register, handleSubmit, formState: {errors}} = useForm({
+            resolver: yupResolver(schema)
+        });
+    
+        const onSubmit = (data) => {
+            console.log('폼 데이터 제출')
+            console.log(data);
+        }
+    
+        return (
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <input type={'email'} {...register("email")}/>
+                // register 한 이름에 맞게 연결해주세요!
+                <p style={{color: 'red'}}>{errors.email?.message}</p>
+                <input type={'password'} {...register("password")}/>
+                <p style={{color: 'red'}}>{errors.password?.message}</p>
+                <input type={'submit'}/>
+            </form>
+        );
+    };
+    
+    export default SignUpPage;
+    
+    ```
+    
+    ![스크린샷 2024-09-17 오후 5.07.41.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/6b74818d-e5d1-4b3f-b151-04c085b46578/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-17_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_5.07.41.png)
+    
+    위와 같이 에러메시지가, 나옵니다. 하지만, 우리는 한국인이기에, 영어로 된 에러메시지를 원하는 사람은 많지 않을 것 입니다.
+    
+    **`커스텀 에러 메시지 또한 선언`**해줄 수 있습니다.
+    
+    ```tsx
+    const schema = yup.object().shape({
+        email: yup.string().email().required('이메일을 반드시 입력해주세요.'),
+        password: yup.string().min(8, '비밀번호는 8자 이상이어야 합니다.').max(16, '비밀번호는 16자 이하여야 합니다.').required(),
+    })
+    ```
+    
+    ![스크린샷 2024-09-17 오후 5.09.24.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/7b8d8f7d-4579-4511-928d-495857e9990e/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-17_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_5.09.24.png)
+    
+    특정 조건에 맞지 않는경우에 우리가 **`지정한 커스텀 에러`**를 넘겨줄 수 있습니다.
+    
+
+# ✅ 실습 1.  - 로그인 페이지 유효성 검사 구현 🍠
+
+<aside>
+💡
+
+이번 실습은, 실제로 로그인 페이지를 만들어보는 것 입니다. 유효성 검사를 통해, 로그인 페이지를 구현해 보는 것 입니다.
+
+여러분들은 2가지 방식으로, 해당 실습 미션을 제출해주셔야 합니다.
+
+1. 강의 영상 없이, 본인이 스스로 작성한 코드.
+
+2. 강의 영상을 참고한 후, 본인이 개선한 코드.
+
+저의 코드가, 항상 정답이 아니기에, 여러분들이 직접 작성해보시고 그 이후에 제 코드를 참고하셔서, 코드를 수정해주셔도 좋습니다!
+더 좋은 방식이 있으면 공유해주세요~ 😀
+
+- Web 중앙 파트장 매튜 / 김용민 - 
+
+</aside>
+
+![스크린샷 2024-09-16 오후 9.28.39.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/f848035a-91b4-4f6a-8738-78d927da4e4f/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-16_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9.28.39.png)
+
+### UI
+
+- [x]  이메일과, 비밀번호 **`type`**의 **`input`**을 2개 만들어주세요.
+- [x]  모든 값을 입력한 후, 로그인 할 수 있는 **`로그인 버튼`**을 만들어주세요.
+
+[화면 기록 2024-09-17 오후 3.31.03.mov](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/b4fd6547-f18d-4d29-bf8d-d77cbeb5ef1b/%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2024-09-17_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_3.31.03.mov)
+
+### 기능 체크
+
+- [x]  이메일은 **`올바른 이메일 형식이 아닐 경우`**, 위와 같이 에러 메시지와, UI상 변화가 나타나도록, 구현해주세요.
+- [x]  비밀번호도, **`8자리 이상 16자리 이하가 아닌 경우`**, 에러메시지가 나오게 구현해주세요.
+- [x]  에러 메시지는, **`실시간으로 조건이 충족하면, 사라져야 합니다.`**
+- [x]  실제로, **`input 창을 클릭했을 경우`**, **`에러메시지가 나오게 동작`**해주세요. input 창을 누르지도 않았는데, 바로 에러메시지가 나오면, UX 측면에서 기분 좋지 않겠죠?
+
+### 이것도 해보면 좋아요
+
+- [x]  **`모든 조건을 충족하지 않았을 떄는, 로그인 버튼을 gray 색상으로 비활성화 되게 해주세요.`** (disabled props 활용)
+    - [x]  실제로, 버튼 동작도 비활성화 되어야 합니다.
+    - [x]  단 조건 충족시, 원래 색상(핑크)로 색상이 변경되게 합니다.
+
+### 실습 1 제출
+
+- 실습 1 깃허브 링크 제출
+    
+    https://github.com/RyuDongHo/UmcWeb/tree/main/mission/chapter05/mission
+    
+- 실습 1 실행 영상 제출
+    
+    [1.mp4](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/0cd283dd-ccc8-496b-8919-5000b6813d9d/1.mp4)
+    
+
+# ✅ 실습 2.  useForm Hook을 통한 유효성 검사 🍠
+
+<aside>
+💡
+
+위에서, 본인 코드로, 유효성 검사를 성공적으로 마치셨다면, 아래 영상을 보며, 코드를 리팩토링 해주세요!
+
+저의 코드가, 정답은 아니니, 본인 코드에서 개선시킬 수 있는 점은 개선시켜봐도 좋고, 한 번 동일하게 만들어보는 과정도 좋습니다!
+
+</aside>
+
+https://www.youtube.com/watch?v=gWSAYvBH16I
+
+### 구현 유의사항
+
+- [x]  **`useForm`** hook을 사용했는가?
+
+### 실습 2 제출
+
+- 실습 2 깃허브 링크 제출
+    
+    https://github.com/RyuDongHo/UmcWeb/tree/main/mission/chapter05/mission
+    
+- 실습 2 실행 영상 제출
+    
+    
+
+# 🔥 미션 - 회원 가입 페이지 제작 🍠
+
+<aside>
+💡
+
+이번에는, 위에서 실습한, **`react-hook-form`**과 **`yup`**을 바탕으로 회원가입 페이지를 만들어보고자 합니다.
+
+</aside>
+
+![스크린샷 2024-09-17 오후 5.24.27.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/067e2dad-e8d9-4200-bdce-208932d73547/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-17_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_5.24.27.png)
+
+### 유효성 검사 조건
+
+- [x]  **`Email`** input을 만들어줍니다.
+    - [x]  문자열이어야 합니다.
+    - [x]  유효한 이메일 형식이어야 합니다.
+    - [x]  이메일은 필수 입력요소입니다.
+- [x]  **`Password`** input을 만들어줍니다.
+    - [x]  문자열이어야 합니다.
+    - [x]  비밀번호는 8자 이상이어야 합니다.
+    - [x]  비밀번호는 16자 이하여야 합니다.
+    - [x]  비밀번호는 필수 입력요소입니다.
+- [x]  **`PasswordCheck`** input을 만들어줍니다.
+    - [x]  **`Password input에 들어간 요소`**와, **`PasswordCheck input 요소`**에 들어간 요소의 **`value가 다를때`** **`비밀번호가 일치하지 않습니다. 라는 에러가 발생`**합니다.
+    - [x]  비밀번호 검증은 필수 입력 요소입니다.
+
+### 구현 유의 사항
+
+- [x]  **`Input`** 컴포넌트를 만들어 잘 활용했는가?
+- [x]  **`react-hook-form`** 과 **`yup`**의 라이브러리를 잘 활용했는가?
+- [x]  모든 input의 value가, 원하는 **`{ key: value }`** 형태로 잘 출력되었는가?
+
+### 이것도 해보면 좋아요 (필수 X)
+
+- [x]  실습 2에서 함께 만든 **`useForm hook을 활용`**해서, 위의 내용을 동일하게 만들어보세요!
+    - **`useForm`** Hook으로 만든, 깃허브 링크 제출
+    - **`useForm`** Hook으로 만든, 실행 영상 제출
+- [ ]  성별이나, 생년월일 등 **`실제로 있을 법한 Form 요소들을 만들어, 추가적으로 더 만들어보시고 스터디원들과 공유`**해보세요!
+- [ ]  **`zod`** 라이브러리도 한번 사용해보세요!
+
+### 미션 제출
+
+- 실습 2 깃허브 링크 제출
+    
+    https://github.com/RyuDongHo/UmcWeb/tree/main/mission/chapter05/mission
+    
+- 실습 2 실행 영상 제출
+    
+    [2.mp4](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/7d5c159a-73b5-4d0d-a3d9-d6303b926ae0/2.mp4)
\ No newline at end of file
diff --git a/keyword/chapter06/keyword.md b/keyword/chapter06/keyword.md
new file mode 100644
index 0000000..816b393
--- /dev/null
+++ b/keyword/chapter06/keyword.md
@@ -0,0 +1,337 @@
+# 📝 학습 목표
+
+---
+
+1. **`QueryParameter`**를 활용하여, 검색 기능을 구현해봅니다.
+2. **`Debounce`**와 **`Throttling`**이 무엇인지 알아보고, 이를 실제 프로젝트에 적용해봅니다.
+3. **`useContext`**를 활용하여, 전역 상태 관리를 하는 이유와, 기존 코드 리팩토링을 진행해봅니다.
+4. **`AccessToken`**과 **`RefreshToken`**을 활용한 로그인 방식에 대해 학습합니다.
+
+# ⚠️  스터디 진행 방법
+
+---
+
+1. 스터디를 진행하기 전, 워크북 내용들을 모두 채우고 스터디에서 서로 모르는 내용들을 스터디원과 함께 공유해 주세요.
+2. 실습과 미션은 워크북 내용들을 모두 완료한 후, 스터디 전에 진행해 오세요!
+    - 1주 차 스터디 이전에 1주 차 워크북을 완성한 후 스터디를 진행해 주세요.
+3. 스터디 시간에는 각자 해 온 미션들을 공유하고, 아래의 과정을 진행합니다.
+    1. 스터디원과 함께 코드 리뷰 진행.
+    2. 코드 리뷰 이후, 본인의 코드의 문제가 있는 경우 리팩토링 진행.
+    3. 팀원들과, 조금 더 코드를 깔끔하게 작성할 수 있는 개선점이 있을지 고민 후, 리팩토링 진행.
+    4. 각자 미션을 진행하면서 해결하지 못한 이슈를 공유 후, 해당 이슈를 도움받아 해결.
+4. 매주 주어진 미션을 성실하게 제출합니다.
+5. 🍠 이모지가 붙어있는 곳은, 직접 여러분들이 채워 넣으셔야 하는 부분입니다. 꼭 Google을 통한 검색을 하시고, VSCode를 활용하여, 실행 결과를 눈으로 보시면서 정리해 주세요!
+
+# 📸 잠깐 ! 스터디 인증샷은 찍으셨나요?📸
+
+---
+
+* 스터디리더께서 대표로 매 주차마다 한 장 남겨주시면 좋겠습니다!🙆💗
+ (사진을 저장해서 이미지 임베드를 하셔도 좋고, 복사+붙여넣기해서 넣어주셔도 좋습니다!)
+
+[]()
+
+# 🎯 핵심 키워드
+
+---
+
+<aside>
+💡 주요 내용들에 대해 조사해보고, 자신만의 생각을 통해 정리해보세요!
+레퍼런스를 참고하여 정의, 속성, 장단점 등을 적어주셔도 됩니다.
+조사는 공식 홈페이지 **Best**, 블로그(최신 날짜) **Not Bad**
+
+</aside>
+
+### 키워드 정리 🍠
+
+- Debounce & Throttling 🍠
+    - Debounce는 무엇일까요?
+        
+        이벤트가 발생할 때, 인식하는 최소 시간을 지정하는 최적화 방식입니다.
+        
+        예를 들어 이벤트를 인식하게할 최소 시간을 10초로 지정하고
+        
+        1초 간격으로 같은 이벤트를 계속 발생시키면, 실제로 인식되지 않고
+        
+        10초 간격 이상으로 실행되는 이벤트만을 인식합니다.
+        
+    - Debounce는 주로 어디에 사용하나요?
+        
+        이벤트가 여러번 발생해도, 한 번만 실행되는 것이 정상적인 로직에 사용하면 됩니다.
+        
+        예를 들어 사용자가 로그아웃 버튼을 누를 때, 정말 빠른 속도로 100번 버튼을 클릭하더라도, 실제로 로그아웃 함수를 100번 호출하는 게 아니라, 한 번만 실행하면 되는 것이 정상적인 로직인 경우에 사용합니다.
+        
+    - Throttling은 무엇일까요?
+        
+        이벤트 발생 사이의 딜레이타임을 지정하는 것입니다.
+        
+        스크롤 이벤트를 구현할 때, 스크롤을 0.1s안에 매우 길게 많이 해버렸을때,
+        
+        사용자 입력에 맞춰 이벤트를 발생시켜버리면, 문제가 생길 수 있습니다.
+        
+        이때, 그 이벤트들을 적당한 간격으로 실행시키는 겁니다.
+        
+    - Throttling은 주로 어디에 사용하나요?
+        
+        위에서 말한 것 처럼, 적당한 간격으로 실행시켜주고 싶은 로직에 사용하면 됩니다.
+        
+    - Debounce와 Throttling의 차이점은 무엇일까요?
+        
+        디바운스는 결국 마지막 하나의 이벤트를 실행하는 것이고, 쓰로틀은 여러번 발생하면 간격을 둘 뿐 전부 이벤트가 작동합니다.
+        
+    - 어떤 기능을 구현할 때 Debounce를 적용하고, Throttling을 적용하는 것이 좋을까요?
+        
+        위의 내용과 같습니다.
+        
+- 쿠키 🍠
+    - 쿠키란 무엇이고, 어떤 특징을 가지고 있을까요?
+        
+        쿠키는 로컬스토리지와 마찬가지로 클라이언트쪽에 데이터를 저장시키는 방식입니다.
+        
+        대신 쿠키는 http통신에 사용되고, session을 만들때도 자동으로 하나 생성되고, 더 작은 크기 제한, 유효시간 설정 등등 여러가지 기능이 있습니다. httpOnly flag를 통해 브라우저에서의 접근을 막아 보안을 높일 수도 있습니다.
+        
+    - 쿠키를 어떻게 사용할 수 있을까요?
+        
+        패키지를 사용해도 되고, document.cookie 처럼 사용해도 됩니다.
+        
+- 토큰 🍠
+    - 토큰이 왜 필요할까요?
+        
+        인증 방식의 일환입니다, 사용자 정보 같은 중요한 데이터를 그대로 저장하고 전송하면 위험이 크기 때문에 사용합니다.
+        
+    - CORS 에러가 무엇이고, 이 에러를 어떻게 해결할 수 있을까요?
+        
+        출처가 다른 소스를 교차하여 사용하지 못하게 하는 정책을 어기면 발생합니다.
+        
+        proxy설정을 건든다거나 하는 방식으로 해결이 되지만, 일단
+        
+         CORS에러가 발생한 정확한 원인 고민해봐야합니다. 
+        
+    - JWT 토큰 기반 인증 방법이란 무엇일까요?
+        
+        json 형식으로 데이터를 암호화하여 사용하는 방식입니다.
+        
+    - JWT 기반 로그인 동작 과정에 대해 알아보세요.
+        
+        암호화된 데이터를 통신에 사용하면 서버에서, 검증하고 데이터를 전달해줍니다.
+        
+    - AccessToken / RefreshToken의 차이에 대해 설명해주세요.
+        
+        accessToken의 주기를 짧게 Refresh는 길게 가져가서, access토큰은 탈취의 리스크를 줄인 뒤에 access토큰을 데이터 통신에 주로 사용하고 refresh는 가려둡니다.
+        
+- 웹 스토리지 🍠
+    - 웹 스토리지의 메소드와 프로퍼티는 어떤게 있을까요?
+        
+        get set key removeItem 같은 메소드가 있고
+        
+        length 프로퍼티 있습니다.
+        
+    - 세션 스토리지에 대해 정리해 주세요!
+        
+        탭을 기준으로 저장하고 사용하는 데이터가 들어갑니다.
+        
+    - 로컬 스토리지에 대해 정리해 주세요!
+        - 브라우저에 데이터를 **영구적으로 저장**합니다.
+        - 명시적으로 삭제하지 않는 이상 브라우저를 닫아도 데이터가 유지됩니다.
+        - 동일한 도메인 간에 데이터가 공유됩니다
+    - 로컬 스토리지에서 JWT 토큰을 저장하고, 사용하고, 삭제하는 메소드에 대해 찾아보세요!
+        
+        위에 토큰에서 설명한 바와 같습니다. 말 그대로 저장하고 사용하고 삭제할 뿐이지 JWT라고 해서 더 특별한 무언가가 있는 게 아닙니다.
+        
+        다만 탈취되었을 때의 문제를 생각해서 여러가지 보안 장치를 마련해야 합니다.
+        
+        프론트에서 다루는 데이터는 무조건 탈취가능합니다. 탈취를 최대한 방지하는 방식으로 설계하되, 반드시 탈취가 되었다는 경우도 가정해야합니다. 이부분은 백엔드에서 더 많이 고민해야할 문제이기도 합니다.
+        
+    - 스토리지가 변경되었을 때 처리하는 방법을 조사해 주세요.
+        
+        
+        스토리지 변경은 `storage` 이벤트로 처리할 수 있습니다. 이 이벤트는 **다른 브라우저 탭이나 창에서 스토리지 데이터가 변경될 때 발생**합니다.
+        
+    - Bearer Token이 무엇인지 찾아보고, 이를 통해 백엔드 서버와 어떠한 방식으로 통신하는지 조사해 보세요!
+        - 인증 정보를 포함한 문자열 형태의 토큰으로, 주로 **OAuth 2.0**에서 사용됩니다.
+        - 클라이언트가 서버로 요청을 보낼 때 **HTTP 헤더의 `Authorization` 필드에 포함**하여 전송.
+- Context-API 🍠
+    - 전역 상태 관리는 왜 해야할까요?
+        
+        유지보수와, 최적화 때문에 필요합니다.
+        
+    - Context API란 무엇일까요?
+        
+        데이터를 여러 컴포넌트에서 사용하고자 할 때, 사용합니다
+        
+        하지만, 재사용 성을 낮추고, 상태가 수정될 때 모든 하위 컴포넌트가 재 렌더링 되는 건 마찬가지기 때문에 단순히 props drilling을 해결하기 위해서만 사용하기엔 적절하진 않습니다.
+        
+
+<aside>
+🍠
+
+잘 이해가 되시지 않는다면, 아래 영상을 참고해도 좋습니다!
+
+</aside>
+
+https://www.youtube.com/watch?v=WQHuqL2S74o&t=877s
+
+https://www.youtube.com/watch?v=WQHuqL2S74o&t=877s
+
+# ✅ 실습
+
+- [x]  기존 2주차 `React`로 제작한 **`ToDoList`**를, **`Context-API`**를 활용하여 **`리팩토링을 진행`**해주세요!
+    
+    todoList를 어떻게 구현했는 지는 몰라도, 저는 전역상태 관리를 추가해서 리팩토링 할 부분은 없었습니다.
+    
+    그래도 그냥 하는 김에 recoil로 해봤습니다.
+    
+    contextAPI나 recoil이나 사용방법은 거의 똑같습니다. 작동 구조가 다를 뿐이고 사용 방법, 목적에 큰 차이가 있진 않습니다.
+    
+    그리고 일반적으로 useState를 통해 만든 state는 직접 수정은 안되지만, 간접 접근을 통한 수정이 됩니다.
+    
+    예를 들어 여기선, todoList 안에 객체의 배열을 가지고 있는데, copyList = todoList;
+    
+    copyList[index].member = “changed”; 로 수정이 가능합니다.
+    
+    recoil은 이런 부분들을 방지해서, state관리를 더 편하고 엄격하게 해줍니다
+    
+- 깃허브 주소
+    
+    https://github.com/RyuDongHo/UmcWeb
+    
+- 실행 영상
+    
+    [20241113-1623-08.7413001.mp4](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/55f199b5-d199-4479-91f9-aa6153651b23/20241113-1623-08.7413001.mp4)
+    
+
+# 🔥 미션 1. 회원가입 / 로그인 API 연결
+
+<aside>
+💡
+
+아래, BE 서버를 활용하여, 아래와 같은 화면을 구현해주세요.
+https://github.com/dydals3440/UMC-7th-YONGCHA-BE
+
+</aside>
+
+https://github.com/dydals3440/UMC-7th-YONGCHA-BE
+
+### 1. 회원가입
+
+![스크린샷 2024-09-30 오전 12.17.05.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/78d333fa-aa22-492f-828f-335b3927525d/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-30_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_12.17.05.png)
+
+- [x]  **`회원가입 API`**를 잘 연결하였는가?
+- [x]  회원가입 후, `login 페이지`로 이동하였는가?
+
+### 2. 로그인
+
+![스크린샷 2024-09-30 오전 12.18.19.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/12e13eac-1a6d-4ea4-8688-970d2283b60f/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-30_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_12.18.19.png)
+
+- [x]  **`로그인 API`**를 잘 연결하였는가?
+- [x]  로그인 후, `메인 페이지`로 이동하였는가?
+- [x]  **`AccessToken`**과, **`RefreshToken`**을 **`로컬스토리지에서 저장`**하였는가?
+
+### 3. 로그인 후 메인 페이지 이동 시
+
+![스크린샷 2024-09-30 오전 12.14.44.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/b095f639-230d-4bb4-9fc4-69cee14ada08/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-30_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_12.14.44.png)
+
+- [x]  **`Navbar`**의 로그인, 회원가입 버튼 대신, **`로그아웃 버튼`**을 보여주었는가?
+- [x]  **`유저 정보 불러오기 API`**를 호출하여, 로그인 한 유저 이메일 **`@ 기준 앞 부분(닉네임)`**을 Navbar에 잘 보여주었는가?
+
+### 4. 로그아웃 시
+
+![스크린샷 2024-09-30 오전 12.21.38.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/219d8a2b-3eac-4149-a144-c36676387d4f/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-30_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_12.21.38.png)
+
+- [x]  로그아웃 후, Navbar에 유저 정보가, 사라지며, **`로그인, 회원가입 버튼이 다시 생겼는가?`**
+- [x]  **`AccessToken`**과, **`RefreshToken`**을 **`로컬스토리지에서 제거`**하였는가?
+
+### 5. 추가로 해보면 좋아요!
+
+- [x]  `refreshToken을 활용`**하여,** `토큰 재발급`**을 진행해보세요.**
+    - [x]  **`Axios Interceptor`**를 활용하여, **`refreshToken`**을 활용하여, **`accessToken`**을 **`재발급`** 받는 로직을 구글 검색을 통해, 직접 해결해보세요!
+        
+        axios는 쓰지 않고 fetch로 하드코딩 해봤습니다.
+        
+        axios만 쓸 때는, 그냥 기능이 편하니까 쓴다 고만 생각했지 구체적으로 어떤 이유로 쓰는 지 감이 안 왔는데,
+        
+        fetch로 하나씩 설계해보니, 폴더 구조에 맞게 응집도 높은 구조를 설계하려면, 신경 쓸 부분이 생각보다 많았습니다.
+        
+    - [x]  **`refreshToken`**을 활용하여, 토큰 재발급을 진행하면, 어떤 부분에서 이점이 있는지 작성해주세요!
+    - 어떤 장점이 있을까요?
+        
+        accessToken의 유효기간을 짧게 함으로서 accessToken이 탈취되어도 보안상의 위협을 낮추기 위함입니다.
+        
+        즉 accessToken이 refreshToken과 다른 방식으로 저장되어, 사용자가 refreshToken에 접근하지 못하도록 방지해야 이 방법이 의미가 있습니다.
+        
+        그래서 저는 accessToken은 쿠키에 저장하고 refreshToken 은 httpOnly옵션을 주고 쿠키에 저장하는 방식을 구현했으나, 백엔드에서 httpOnly형식의 쿠키를 직접 분석해서 사용하는 방식을 구현해주어야 하기 때문에, 과제에선 httpOnly방식을 구현만 해두고 일단 accessToken과 같은 방식으로 저장하고 있습니다.
+        
+
+### 🔥 미션 1. 제출
+
+- 깃허브 주소
+    
+    https://github.com/RyuDongHo/UmcWeb
+    
+- 실행 영상
+    
+    아래에 한번에 올리겠습니다
+    
+
+# 🔥 미션 2. QueryParameter 활용 검색 기능 구현
+
+<aside>
+💡
+
+아래와 같은, 여러 조건에 대하여 활용해서 검색 기능을 구현해주세요.
+단, **`Query-Parmeter`**를 효율적으로 활용해서, 구현해주세요!
+
+</aside>
+
+- [x]  **`Styled-Components`**를 활용해주세요
+- [x]  기존에 만들었던, **`movie-card 컴포넌트`**를 재사용해주세요.
+
+1. 영화 제목 검색어를 입력하지 않는 경우 (`/search` 경로에 처음 온 경우)
+    
+    ![스크린샷 2024-09-25 오후 8.39.03.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/b4deb1da-f975-4254-8e2c-629fead9ec2b/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-25_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_8.39.03.png)
+    
+
+1. 영화 제목 검색어를 입력한 경우
+    
+    ![스크린샷 2024-09-25 오후 8.40.23.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/53f552ef-5ecf-451f-95c3-6c0ce839ab3e/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-25_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_8.40.23.png)
+    
+
+1. 영화 검색어를 입력했으나, 해당 검색어의 영화 데이터가 존재하지 않는 경우.
+    
+    ![스크린샷 2024-09-25 오후 8.48.41.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/5f4401e5-85aa-4ea3-999f-35982279b4a6/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-09-25_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_8.48.41.png)
+    
+
+1. 로딩 중인 경우, 아래와 같은 **`Skeleton UI`**를 만들어주세요!
+
+[화면 기록 2024-09-25 오후 9.49.33.mov](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/acd1e244-c55b-48ea-b5dc-d3df7f22c7e8/%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2024-09-25_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_9.49.33.mov)
+
+1. **`Debounce`**에 대한 키워드를 학습하셨나요?
+    - [x]  **`Debounce`** 가 무엇인지 작성해주세요~!
+        - Debounce는 무엇인가요?
+            
+            Debounce는 함수가 연속적으로 여러번 호출되면, 호출될 때마다 함수를 호출하는 게 아니라, 마지막 함수 호출 시점으로부터 지정한 시간이 지나면 그때 함수를 호출하는 최적화 방식.
+            
+    - [ ]  Debounce를 검색 기능에 적용해주세요!
+        
+        검색어가 변할 때만 api통신이 발생하도록 로직을 구성했기 때문에
+        
+        debounce를 적용할만한 곳이 없어서 커스텀훅으로 만들어만 두고 적용하진 않았습니다.
+        
+        - 실행 영상 첨부
+        
+- [ ]  혹시라도, 구현에 어려움을 느끼신 경우, 아래 영상을 참고해서, 미션을 수행해주세요.
+
+https://www.youtube.com/watch?v=L3eGGsAyd_A
+
+### 🔥 미션 2. 제출
+
+- 깃허브 주소
+    
+    https://github.com/RyuDongHo/UmcWeb
+    
+- 실행 영상
+    
+    [qwe.mp4](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/cd6cf180-4ed4-44cd-b5dc-8fa19e58ad01/qwe.mp4)
+    
+
+# ⚡ 트러블 슈팅
\ No newline at end of file