20240304 TIL #48

[1] TypeScript 1주차 강의 정리

 

1. TS vs JS

(1) TypeScript : JavaScript + type system

(2) JavaScript => 웹 페이지에 동적인 효과

 V8 엔진 + Node.js => 백엔드 개발이 가능해짐 : full stack

 JS : 동적 타입 언어

 Node.js의 잠재적 위험성 : 백엔드의 경우 프론트엔드보다 side effect가 크게 나타남

 

2. JS의 단점 : 알 수 없는 undefined 에러

(1) 실행 시간에 결정되는 변수 타입 

 let, const => 선언만 하는 것

 개발자의 실수로 인한 오류가 발생하기 쉽고 찾기가 까다로움

(2) 약한 타입 체크

  변수, 상수만 구분

(3) 객체의 성질을 수시로 변화시킬 수 있음. 

 오류가 생긴 경우 컴파일러가 잡아주지 못 하고, 전혀 다른 결과가 나올 수 있음.

 

3. TypeScript의 특징 : JavaScript의 모든 기능 + 추가적인 기능

(1) 컴파일 시간에 변수의 타입을 체크

 컴파일러가 문법적인 오류 잡아주고 코드를 최적화해주기도 함.

  =>  VS code에서 자동으로 오류를 캐치

(2) 타입 체크

  =>  VS code에 입력하는 순간 애러 메시지 발생

(3) 객체

 휴먼 에러로 이름이 정의되지 않은 프로퍼티를 연산하면, NaN으로 나오는 것이 아니라 에러 메시지를 발생

 

4. TypeScript의 장점

(1) 객체 지향 프로그래밍 (OOP, Object-oriented programming)

 객체 지향 프로그래밍 언어(C++, Java, C#..) : public, protected, private 등의 접근 제어자들

=> 이를 통해 property의 캡슐화를 보장하고 함수의 호출 범위를 조정할 수 있음. 

 class를 설계하고 만든 사람의 의도에 맞게 사용되어야 함.

private로 명명된 property에 접근하려면 getter 함수를 만들어야만 함

(2) d.ts

  이 확장자를 가진 선언 파일을 통해 외부 모듈 타입 정보를 제공

 

5. TypeScript를 사용하게 된다면

(1) 취업 시장에서 필수적인 기술 스택 => 익혀야 함!

(2) 생산성, 안전성이 향상됨.

(3) 가독성 높아짐. => 타입이 명시되어 있기 때문에 유지 보수 과정이 수월함.

(4) 정적 타입 시스템, 객체 지향 프로그래밍, 디자인 패턴 등의 고급 개념을 학습할 수 있음.

(5) 전문성이 높은 개발자!

(6) 테스트 코드가 줄어들고 비지니스 로직 작성에 집중할 수 있음.

 

[2] TypeScript 2주차 강의 정리

1. 컴파일러 

(1) 특정 프로그래밍 언어가 정적 언어로서의 정체성을 유지하게 만드는 도구

(2) 프로그래밍 언어로 작성된 소스 코드 => 다른 프로그래밍 언어로 변환

(3) 등장 배경

  1) 컴퓨터는 기계어로 작성된 프로그램만 이해할 수 있는데, 이를 사람이 직접 작성하기는 힘듦

  2) C 언어로 작성된 코드를 컴퓨터로 이해하려면 컴파일러가 필요함.

(4) JS

  1) JS는 동적 언어(인터프리터 언어) => 엔진이 코드를 한 줄식 실행하면서 동적으로 해석함.

  2) 미리 수정하기가 힘들고 runtime error가 발생하기 쉬움

 

2. TSC

(1) 타입 검사를 수행

  1) 소스 코드의 구문과 구조를 검사

  2) 타입 관련 오류를 미리 발견해서 runtime error가 발생하기 전에 수정할 수 있음

(2) 코드 변환

  tsc : TS -> JS 코드 변환

(3) 최적화

 비효율적으로 작성된 코드를 효율적으로 실행될 수 있도록 내부적으로 바꿔주기 때문에 전반적인 어플리케이션 실행 시간이 빨라짐.

 

3. 명령어

(1) tsc -- init : tsconfig.json 파일 생성

(2) tsc index.ts : index.ts 컴파일

(3) tsc src/*.ts : src 안에 있는 모든 ts 파일을 컴파일

(4) tsc index.js --declaration —emitDeclarationOnly  : .d.ts 파일 생성

 

4. tsconfig.json

(1) JS의 package.json처럼 TS 프로젝트의 핵심인 설정 파일 

(2) options

  1) compilerOptions - strict 

    - 개발 및 프로덕션 환경에서 “true”로

    - 엄격한 타입 검사 옵션을 모두 활성화

    - noImplicitAny : 타입이 명시적으로 선언되지 않았을 때, 자동으로 부여하지 않도록

  2) compilerOptions - sourceMap 

    - 개발 환경에서 “true”로

    - debugging할 때 sourceMap으로 에러 위치를 알 수 있음. 

    - 프로덕션 환경에서는 용량, 성능상의 이유로 안 하는 것이 나을 수도

  3) compilerOptions - target 

    - 어떤 JS 버젼으로 변환할지

    - es5 : CommonJS

    - es2016(es7) => es6나 es7으로

  4) compilerOptions - module

     : module을 가져오고 내보내는 방식을 결정

  5) compilerOptions - outDir

     : JS 파일이 저장될 디렉터리 지정 => dist, bin  

 

5. .d.ts 파일 

(1) TS에서 JS 라이브러리의 타입을 정의한 파일 

  1)  JS 라이브러리를 TS에서 사용할 수 있게 만들어주는 파일

  2) 함수, 클래스, 객체의 타입 정보가 있음.

  3)  @types

    여러 패키지들, 외부 라이브러리의 타입 정보를 제공함

(2) 이 파일만 제공하면 JS 라이브러리를 온전히 사용 가능

  1) 레거시한 JS 라이브러리 => 호환성이 유지

(3) JSDoc : JS API를 문서화해주는 html 문서 편집기 ex) Javadoc, 스웨거

 

[3] TypeScript 3주차 강의 정리

1. 타입

(1) 변수 : 데이터를 저장하는 공간

(2) 데이터 타입 : 숫자, 문자열, boolean, 배열, 객체 

(3) 타입 안정성

  1) 코드가 예상한 타입대로 동작함을 보장할 수 있는 것 

  2) 발생할 수 있는 runtime error를 줄일 수 있음.

 

2. 타입의 중요성

(1) 타입을 이해하고 잘 활용하면 코드의 가독성과 안정성이 향상됨

(2) 품질과 유지 보수성이 향상됨.

(3) 협업이 원활해짐.

  1) 타입을 올바르게 명시하고 사용하고 있다면 다른 사람이 그 코드를 이해하고 온보딩하는 시간이 줄어듦

 

3. 기본 타입

(1) boolean 

  1) true or false 

  2) 조건문, 비교 연산

  3) 2가지 상태 : enable/disable, activate/deactivate, valid/invalid 등 => boolean

  4) 3가지 이상의 상태 => enum, string

(2) number 

  1) typescript에서 사용하는 모든 숫자를 나타냄 

  2) 정수, 실수, 진수  

  3) 모든 수치 연산은 number 타입으로 명시하면 됨.

(3) string

  1) 텍스트 data

  2) 템플릿 리터럴 : 백틱(백 쿼트) `${변수명}`

(4) 배열 

  1) 타입 [ ] : 리스트

(5) 튜플(tuple)

  1) 서로 다른 타입의 원소를, 특정 순서에 가질 수 있는 배열

  2) 정의된 데이터 타입의 개수와 순서에 맞춰 저장해야함.

  3) 튜플의 구조가 변경되도록 데이터를 삽입하면 typescript를 쓰는 의미가 없어지기 때문에 지양

(6) enum (enumeration)

  1) 열거형 데이터 타입

  2) 명확하게 관련 있는 상수 값들을 그룹화할 때 사용

  3) 값이 설정되어 있지 않으면 0으로 시작

  4) number, string 타입의 값만 할당할 수 있음.

 

4. let, const, readonly

(1) let 

  1) 변수 선언, 변수는 값을 변경할 수 있음.

(2) const 

  1) 상수 선언, 상수는 값을 변경할 수 없음

  2) = 연산자로 재할당할 수 없음

  3) 배열에 데이터를 추가/삭제하는 것은 문제되지 않음

(3) readonly 

  1) TypeScript에서 사용되는 키워드

  2) 객체의 속성을 불변으로 만드는 데 사용됨,

  3) 클래스의 속성이나 인터페이스의 속성을 변경할 수 없게 만듦

  4) 생성자(constructor)에서만 초기화할 수 있음

(4) 불변성의 중요성 

  1) const, readonly를 사용하면 변수와 객체 속성의 불변성이 보장됨. 

  2) 바뀌어야 하는 값과 속성 vs 바뀌면 안 되는 값과 속성 => 이를 명확하게 정의하고 구분할 수 있음.

 

5. any, unknown, union

(1) any

  1) number, string, JSON 등 어떤 타입의 값이든 저장할 수 있는 슈퍼 타입

  2) JS의 object처럼 최상위 타입 

  3) TypeScript에서는 가급적 사용하지 말기

(2) unknown 

  1) any처럼 모든 타입의 값을 저장할 수 있음.

  2) 단, 그 값을 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 함. 

  3) 타입을 단언 (type assertion) : unknownValue as string => 명시적으로 언급하고 넘어가야 함. 

  4) typeof : 타입 체크한 후 unknown을 다른 타입의 변수에 할당

(3) union 

  1) 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때

  2) 합(or), 여러 타입의 결합 : A | B => A 이거나 B