24.11.22

🛼 type? : string

🖥️ interface LabeledInputProps {
  id: string;
  name: string;
  label: string;
  type: string;
  placeholder?: string;
  required: true;
}

여기서 type: string과 type?:string의 차이는 type 속성을
선택적으로 설정할 수 없느냐 있느냐이다.

1. 기본값 처리
type을 필수로 지정하면 항상 값을 전달해야 하지만, 선택적으로 지정하면 특정 값이 없을 때 기본값(text)을 설정할 수 있다.
예를 들어, LabeledInput 내부에서 type = "text"로 기본값을 설정해 편의성을 제공합니다.

2.유연성
모든 <input> 필드가 ype="text"로 제한되지 않는다.
예를 들어, type="date", type="email" 같은 다양한 값으로 확장 가능성을 염두에 둡니다.

3. textarea 때문은 아님
textarea는 <input>이 아니라 별도의 태그이며,
type 속성을 가지지 않으므로 관련이 없다.

➡️ type?: string은 기본값 처리와 유연성을 위해 사용하며,
다양한 type 값을 지원하기 위한 설계이다.
(date나 text 등의 다양한 타입을 유연하게 받아서 쓰기 위해서라는 것)

---

🛼 ? : 옵셔널 프로퍼티

type?에서 물음표(?)는 TypeScript의 선택적 속성(optional property)을 나타낸다.
이 문법은 해당 속성이 반드시 포함될 필요는 없으며,
있을 수도 있고 없을 수도 있음을 의미한다.

🖥️ typescript

interface Example {
  requiredProp: string; // 반드시 포함
  optionalProp?: string; // 선택적으로 포함
}

requiredProp: 인터페이스를 구현할 때 반드시 포함해야 하는 속성.
optionalProp?: 선택적인 속성으로, 구현할 때 생략 가능.

🖥️ typescript

interface User {
  name: string; // 필수 속성
  age?: number; // 선택 속성
}

const user1: User = { name: "Alice" }; // 정상 (age 생략 가능)
const user2: User = { name: "Bob", age: 25 }; // 정상 (age 포함 가능)

➡️ ?는 선택적 속성을 나타내며, 해당 속성을 생략 가능하게 만든다.

---

🛼 옵셔널 체이닝 (?.)

옵셔널 체이닝은 ?. 연산자를 사용.

옵셔널 체이닝(Optional Chaining)은 JavaScript에서 객체 속성에 안전하게 접근하기 위한 문법. 객체의 특정 속성이나 중첩된 속성에 접근할 때, 해당 속성이 null 또는 undefined일 경우 에러 없이 undefined를 반환한다.

🖥️ javascript
코드 복사
const result = object?.property;

객체가 null 또는 undefined인 경우, 에러 없이 undefined 반환.
객체가 존재하면 속성에 정상적으로 접근.

사용 예시

1. 기본 사용

🖥️ javascript
코드 복사
const user = { name: "Alice", address: { city: "Wonderland" } };
console.log(user?.name); // "Alice"
console.log(user?.address?.city); // "Wonderland"
console.log(user?.address?.street); // undefined

2. 없는 객체에 접근

🖥️ javascript

const user = null;
console.log(user?.name); // undefined (에러 발생 X)

3. 함수 호출

🖥️ javascript

const user = {
  greet: () => "Hello!",
};

console.log(user.greet?.()); // "Hello!"
console.log(user.nonExistentMethod?.()); // undefined

➡️ 옵셔널 체이닝은 안전하게 속성에 접근하거나 함수 호출을 할 수 있게 도와주는 문법으로, 객체가 존재하지 않을 때 에러 없이 undefined를 반환한다.

---

• ✅ 지난 회의 내용 정리
• 인간 JS 엔진 되기 🍒ing
  • ✅ 1-1. 함수와 함수의 호출
  • ✅ 1-2. 스펙 외우지 마세요
  • ✅ 1-3. 호출 스택 분석
  • ✅ 1-4. 스코프 체인
  • ✅ 1-5. 호이스팅
  • 1-6. this는 호출 때 결정
  • 1-7. this를 분석할 수 없는 케이스
  • 1-8. 블록 스코프와 매개변수
• 자바스크립트 딥다이브 스코프 마저 읽기
• 자바스크립트 딥다이브 스코프 타이핑
• 자바스크립트 딥다이브 실행 컨텍스트 타이핑
• 자바스크립트 딥다이브 실행 컨텍스트 마저 읽기
• ✅ 자바스크립트 딥다이브 클로저 읽기
• 실행컨텍스트, 클로저 영상 보기
  • ✅ 생활코딩 JS Execute Context ➡️ 봤는데 이해 못 함🥲
  • 생활코딩 JS Closure

---

• checkbox 제출 구현
• date or checkbox 제출 구현
• date 기본 vs date null 제출 시 required 처리 고민
• image 제출 구현

---

• cva 강의 보기
• 깃헙 잔디 오류 해결
• 플홀 기획서 텍스트 보강
• 무한스크롤 코드

---

• 9로 나눈 나머지 ➡️ 레벨0 문제 한 개로 2주째🥹
• 쿠키, 세션, 토큰 영상 10:21~ 보기
• 쿠키, 세션, 토큰 후반 딕테이션
• 자바 스크립트 딥다이브 - 프로토타입 마저 읽기
• 자바 스크립트 딥다이브 - 이벤트 마저 읽기

---

• useEffect 실행 순서 읽기
  🎋 useEffect 실행 순서
  🩷 렌더링, 마운트 차이점 + 언마운트, useEffect, 클린업함수

• Redux 실전 7-1 영상
  https://www.youtube.com/watch?v=MqdUNIWMhbc&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=11

• contextAPI, useContext 정리
  🥡 contextAPI와 useContext