Pair-3 (Rin - Kimi - Daniel)

📆 타임라인

날짜	내용
1/11	시간 정하기, TASK 1완료, TASK2 진행
1/12	TASK2 완료 TASK3 완료
1/13	TASK4 완료, TASK5 진행
1/14	TASK5 진행
1/15	TASK5 완료 목표!!!
1/16
1/17

내용

---

task1

Typescript란 Javascript의 슈퍼셋으로 Javascript를 사용할 수 있는 환경이면 어디든 사용이 가능한 언어이다.
동적 타입 언어인 JS에서 일어날 수 있는 타입 관련 에러를 사전에 타입을 지정하거나 자체적으로
추론함으로서 타입 에러를 사전에 예방하는 역할을 한다.
Typescript는 javascript와 달리 타입 에러를 런타임이 아닌 컴파일시에 검출한다.
또한 자동 완성 기능을 지원하기 때문에 개발의 생산성을 높여서 쉽고 직관적인 코드 작성이 가능하며,
타입 정보를 통해 코드를 이해하고 해석할 수 있어 간단한 문서화 만으로 다른 사람과의 협업이 가능하다.

---

task2

1. basic type

   • number : 숫자 타입
   • string : 문자열 타입
   • boolean : 참/거짓
   • any : 모든 타입을 의미.
   • object : 객체와 배열 타입을 의미.
   • array : 배열을 의미.
   • unknown : 어떤 타입인지 알 수 없음을 의미.
   • union : OR연산자 형태로 여러 타입 중 하나를 의미.
   • conditional : 삼항 연산자 형태로 조건에 따라 타입을 선택.
   • intersection : && 연산자 형태로 두 개 이상의 타입을 결합.
   • type alias : 타입에 이름을 부여하여 재사용성을 높임.
   • interface : 객체의 구조를 정의하여 타입을 지정.

2. utility type

   • enum: 열거형, 상수 집합 정의. 같은 개념의 집합을 묶는데 사용하며, 객체 메서드 사용 가능.
   • as const: 리터럴 유형 추론, 불변 객체 생성. 모든 속성을 readonly로 바꿔 수정 불가능하게 만듦.
   • record<keys 타입, value 타입> : key, value의 타입을 각각 지정해서 만드는 타입
   • partial : 객체의 모든 속성을 선택적(optional : ?)으로 만드는 유틸리티 타입
   • omit<T, T에 있는 속성 키> : 첫번째 제네릭 T에서 특정 속성을 제거하여 새 타입을 생성하는 데 사용
   • pick<T, T에 있는 속성 키> : 첫번째 제네릭 T에서 특정 속성을 선택하여 새 타입을 생성하는 데 사용
   • extract<T,U> : 첫 번째 제네릭 타입 T가 두 번째 제네릭 타입 U의 조건을 충족하는 경우에는 T를 반환하고, 그렇지 않으면 never를 반환한다.
   • returnType : 해당 함수의 반환값 타입.
   • optional : 해당 타입에 사용 유무를 선택적으로 만듬.
   • satisfies : 안전한 타입 표명을 위해 사용. satisfies 뒤에 연결된 타입을 만족하는지를 간단하고 유연하게 검사함.
   • generic : 타입을 나중에 지정할 수 있도록 하여 코드 재사용성을 높이는 타입. 변신 로보트처럼 <>안에 넣은 타입으로 내부 코드를 해당 타입에 맞춰 자유롭게 사용할 수 있음.

---

task3

1. 개발 문서화 : TS의 타입 정보를 통해 변수의 구조, 함수의 Props, 반환값 정보등 많은 정보를

   유추하고 해석할 수 있다. 기존에 Js Docs를 통해 기술해야 할 정보의 양이 줄어들었다.

2. 생산성 (자동완성) : 작성된 타입 정보를 기반으로 IDE가 코드 작성 중에 미리 보기 및 자동 완성을 지원한다.

3. 안정적인 개발 환경: tsconfig.json 의 내용을 기반으로 컴파일시 타입 체커를 통해 타입 관련 에러를 잡아낸다.

   그래서 원래 JS라면 런타임시에 일어났을 타입 에러가 사전 예방 됨으로써,

   좀더 안정적인 개발 환경을 만들어준다.

타입스크립트의 단점

TS는 타입을 변수를 사용할 때마다 지정해줘야 하는 번거로움이 있고, 이런 타입들 때문에 코드의 가독성이 떨어지기도 한다.

또한 라이브러리를 설치할 때 타입 정보가 있는 모듈을 추가적으로 설치해야 한다.(라이브러리에 기본 내장되어 있는 경우가 많지만, 아닌 경우도 있으므로..)

JS 기반이지만, any없이 타입스크립트를 완벽하게 쓰는 것은 쉽지 않다. 대충 쓰면 안 쓰느니만 못한다는 이야기가 있을 정도로,

TS를 잘 쓰기 까지 러닝커브가 있다는 점을 감안해야 한다.

---

task4

1. React.FC

   • 18버전 이상에서는 children은 더 이상 props 타입에 암묵적으로 포함되지 않으며 명시적으로 선언해야 한다.
   • React.FC를 사용할 때 컴포넌트가 ReactElement가 아닌 ReactNode를 반환하도록 변경되었다.

2. ReactNode

   • 리액트가 랜더링할 수 있는 모든 것을 허용하는 타입리액트가 랜더링할 수 있는 모든 것을 허용하는 타입.

3. ReactElement

   • 원시 타입을 제외한 jsx만을 허용하는 타입.

4. PropsWithChildren

   • react컴포넌트의 프로퍼티(props) 중에서 children이라는 프로퍼티를 포함하는 경우에 사용되는 generic타입
   • 컴포넌트의 자식 요소에 대한 타입 정보를 명시적으로 다룰 수 있음.

5. PropsWithRef

   • react에 ref를 사용하기 위한 타입
   • forwardRef를 사용해 ref의 타입을 지정하는 것이 더욱 보편적임.

6. RefObject

   • ref의 타입을 안전하게 다루기 위한 인터페이스.
   • 지정 타입과 초기값에 따라 ref사용 목적이 바뀐다.

7. SetStateAction

   • useState의 set함수를 props로 받을 때 지정해주는 타입.
   • set함수의 반환 원리를 담고있다.

8. Dispatch

   • 함수의 동작을 정의하는 타입.

9. MouseEvent

   • click, hover 등과 같은 이벤트를 처리하는 데에 사용

   ChangeEvent

   • 주로 폼 요소의 변화에 대한 이벤트를 처리하는 데에 사용 (ex: input, select, textarea)

   FormEvent

   • 양식이 제출될 때 발생하는 이벤트

   HTML<>Element (HTMLDivElement, ...etc)

   • 특정 HTML요소의 유형을 나타냄
   • DOM의 요소 유형을 지정하는 데에 사용됨