[comento] React실무PT 2주차 - 회고와 TypeScript 기본 타입

1. 지난주 회고
2. Typescript 알기
3. TypeScript 기본 타입
4. 자바스크립트에서 클린 코드란?
5. 모던 자바스크립트
6. 과제 Flow

1.  지난주 회고

🐟 1주차 회고 🐟
잘한 것은 무엇인가?	- 깃헙 프로젝트 이슈 자동 연결을 검색을 통해 해결하였다.  - 블로그를 티스토리로 이전하여 작성하기로 하였다. - 클래스 이전 보다 학습 시간의 집중력 더 높아졌다.
잘못한 것은 무엇인가?	- 강의 필기 등을 노션에만 작성하고 블로그로 그 날 그 날 올리지 못했다.
무엇을 배웠는가?	- git, github에 대하여 다시 살펴 볼 수 있었다.  - github project가 직관적으로 느껴져서 프로젝트 진행하면서 사용 시 ToDo    관리에 도움이 될 수 있을 것 같다.
아직도 안풀린 궁금증은 무엇인가?	- 브렌치 main을 사용 시 초기셋팅 시 master를 삭제해도 되는가? - 작업에 따른 커밋 컨벤션이 아직 헷갈린다.	🧩 헤이딜러PR관리
지난주와 어떻게 다르게 할 것인가?	- 코드를 직접 치면서 연습할 수 있도록 해야겠다. - 학습하면서 작성할 것이 있다면 블로그를 꾸준히 작성해야겠다.

 

2.  TypeScript 알기 🧩

   2-1.  JavaScript VS TypeScript

JavaScript	TypeScript
동적타입 언어	정적타입 언어
타입 오류 -> 런타임	타입 오류 -> 컴파일
코드양 적을때 생산성 높음	코드양 많을때 비교적 생산성 높음	타입스크립트가 생산성이 높은 이유 - 타입스크립트는 코드들이 타입으로 연결되어 있어서   연관된 코드 간의 이동이 쉽다. - 변수명/함수명을 변경하는 리팩토링이 쉽다. - 호출하는 함수의 parameter와 return value타입을 확인 할 수     있다.

   2-2. TypeScript의 장점

   Microsoft에서 개발

• 꾸준한 업데이트 버전이 나오는 중이다.
• VS Code 툴과의 궁합이 잘 맞는다.
• 자바스크립트의 표준이 업데이트되면 타입 스크립트에도 빠르게 추가된다.

   튜토리얼이 잘 되어 있음

• 한글화도 잘 되어 있다.
• TypeScript를 처음 접하는 사람들에게도 어렵지 않다.
• 기본기부터 수준 있는 스킬들까지 잘 정리되어 있으며 활용도가 높다. 

3.  TypeScript 기본 타입 🧩

12가지의 기본 타입

Boolean	Number	String	Object	Array	Tuple
Enum	Any	Void	Null	Undefined	Never

 1)  Any 타입

• JS에서 TS로 점진적으로 적용할 때 활용하기 좋다.
• 단어 그대로 모든 타입이 허용된다는 의미다.
• 알지 못하는 타입을 표현해야 할 때 사용된다.

let arr: any = ["a", 2, true];

   2) Array 타입

let arr: number[] = [1,2,3];

   3)  Union 타입 (연산자를 이용한 타입)

• 변수에 설정 가능한 타입 값을 number, string 모두 가능하게 하려면 ' | ' 파이브를 사용해서 설정한다.

let userAge: number | string;
userAge = 13;
userAge = "24";

function setInfo(id: number | string , name: string){
   return {id, name};
}
console.log(userAge, setInfo);

   4)  Void 타입

• 변수에는 undefined와 null만 할당한다.
• 함수에는 반환 값을 설정할 수 없는 타입이다.

let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

   4)  null과 undefined 타입

• undefined는 변수를 선언하고 값을 할당하지 않은 상태 / 명시적 타입으로는 쓰지 않는 편.
• null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체) / 데이터 없음을 표현, 유니온 타입으로 많이 쓰임.

let var1: undefined = undefined; // 자료형이 없는 상태
let var2: null = null; // 빈 값을 할당한 상태, 데이터 없음을 표현하기 위해 사용

expect(typeOf var1).tobe("undefined") // 자료형 없음
expect(typeOF var2).tobe("object") // 자료형 object

const userName: string | null;

 

 

------- 다음편에 계속 -------