부산대 FE_ 이민경 4주차 과제 Step3, 4

README.md

@@ -1 +1,89 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+
+
+---
+
+# 구현 목록
+
+## step 1
+
+- 결과 링크를 참고하여 상세 페이지 및 상품 결제 페이지의 UI를 구현한다.
+	- [x] 이 과정에서 UI를 chakra-ui 사용해서 구현한다. (단, 직접 구현해도 무방하나 다른 UI 라이브러리 사용은 금지)
+	- [x] 이번 과제는 Form을 다루는 것이 중점이기 때문에 UI 구현에 어려움을 겪는다면 임의로 변경해도 됨
+- [x] 상세 페이지에서 첨부된 oas.yaml 파일의 /api/v1/products/{productId}/detail, /api/v1/products/{productId}/options를 참고하여 API를 구현한다.
+- [x] 없는 상품의 경우 메인 페이지로 연결되도록 한다.
+- [x] 나에게 선물하기 버튼 클릭 시 로그인이 되어있지 않다면 로그인 페이지로 이동한다.
+- [x] React Hook Form 등의 라이브러리를 사용하지 않으며 React의 form, ref, state만 사용하여 구현한다.
+
+
+## step 2
+
+- [x] 상품 상세 페이지에서 상품의 개수를 option API의 giftOrderLimit을 초과한 경우 선택이 불가하게 해요.
+- 결제 페이지의 Form을 validation 해요. (4주차 미션 결과물 참고)
+	- [x] 카드 메시지를 입력하지 않으면 메시지를 입력하라고 안내해요.
+	- [x] 카드 메시지가 100글자가 넘어가면 100자 이내로 입력하라고 안내해요.
+	- [x] 현금 영수증 checkbox 클릭 시 현금영수증 번호가 입력되었는지 확인해요.
+	- [x] 현금 영수증 입력은 숫자만 입력하도록 안내해요.
+
+
+## step 3
+
+- [x] 기존에 만든 form / input을 react-hook-form으로 변경해요.
+- [x] validate 또한 react-hook-form 기능을 적극적으로 활용해요. (이 과정에서 zod를 사용해도 좋아요.)
+
+---
+
+# 질문 답변
+
+## **질문 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 Form을 만들어야 하는 경우가 있다면 어떤 경우인지 예시와 함께 설명해주세요.**
+
+### 제어 컴포넌트
+
+- 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 한다.
+    - 사용자의 입력을 받는 컴포넌트에 event 객체를 이용해 `setState()` 로 값을 저장하는 방식
+- React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 된다.
+- 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트라고 한다.
+- 제어 컴포넌트는 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화 된다.
+- 사용자가 입력을 하는 액션을 취할 때 마다 리렌더링을 발생
+
+### 비제어 컴포넌트
+
+- 폼을 제출할 때 요소 내부의 값을 얻어온다.
+- `useRef()` 를 사용해서 값을 얻는다.
+    - useRef()는 heap영역에 저장되는 일반적인 자바스크립트 객체, 매번 렌더링 할 때 동일한 객체를 제공한다. → 어플리케이션이 종료되거나 가비지 컬렉팅 될 때 까지, 참조할 때마다 같은 메모리값 → 자바스크립트의 === 연산이 항상 true를 반환한다. → 변경사항을 감지할 수 없다.
+- 값이 실시간으로 동기화 되지 않는다.
+- 사용자가 직접 트리거 하기 전 까지는 리렌더링을 발생시키지도 않고 값을 동기화 시키지도 않는다.
+
+### 제어 컴포넌트는 언제 사용할까?
+
+- 제어 컴포넌트를 사용하기 좋은 방식은 `유효성 검사`  , `유효한 데이터가 없는 경우 전송 버튼의 상태를 disabled로 표시`  , `특정 입력 방식 적용`  에 유용하다 → 실시간으로 유효성 검사가 필요할 경우
+
+### 궁금한 점
+
+- 과제의 상황에서는 폼을 제출 할 때 alert을 띄우니까 비제어 컴포넌트가 더 맞지 않을까?
+- 공식 문서에서는 폼을 구현할 때 제어 컴포넌트를 활용할 것을 권장하고 있음
+
+## **질문 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요.**
+
+- `text` : 한 줄의 텍스트 입력 받기
+- `textarea` : 문장 입력 받기 (여러 줄 가능)
+- `password` : 비밀번호 입력 받기 (입력 문자는 별표나 작은 원으로 표시된다.)
+- `radio` : 여러 개의 라디오 버튼 옵션 중에서 단 하나만의 값을 받을 수 있다.
+- `checkbox` : 사용자로부터 여러 개의 체크 박스 중에서 여러 개의 옵션 값을 받을 수 있음
+- `file` : 사용자로부터 파일을 받을 수 있음
+- `select` : 여러 개의 드롭다운 리스트 중에서 한 개의 옵션을 입력받을 수 있다.
+- `button` : 버튼을 나타낸다.
+- `submit` : 입력 받은 데이터를 폼 핸들러로 제출하는 버튼을 생성
+- `fieldset` : form 요소와 관련된 데이터를 하나로 묶어준다.
+    - `legend` : fieldset 요소의 제목
+
+## **질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요.**
+
+### <label> 태그는?
+
+- 폼 요소에 이름표를 붙이기 위한 것, 사용자에게 입력 필드가 무엇을 의미하는지 설명하는 역할을 한다.
+
+### label로 input 필드를 감싸면?
+
+1. 사용자가 폼 요소의 용도를 쉽게 이해할 수 있도록 한다.
+2. label 태그 클릭 → 연결된 입력 필드가 포커스 ⇒ 사용자가 입력 필드를 쉽게 선택할 수 있도록 도와준다.