본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다
패스트캠퍼스 환급챌린지란?
(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스
초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!
fastcampus.co.kr
https://fastcampus.info/4n8ztzq
비도 오고 턱도 부어있고 쳐지지만 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!
17일차 공부 시작!
오늘의 강의 주제는 '변수에 타입 작성하기'이다.
(오늘도 마찬가지로 모자이크 처리..)
오늘의 학습 내용
변수에 타입 작성하기
* 타입스크립트와 vscode
vscode는 타입스크립트와의 호환성이 매우 우수하다. 에디터 자체가 타입스크립트로 개발되어 다양한 타입 기능을 자연스럽게 지원한다. 코드를 작성하는 동안 타입 정보를 쉽게 확인할 수 있고, 잘못된 타입 사용은 자동으로 알려준다. 그 덕분에 코드 품질을 높이면서도 실수를 줄일 수 있다.
* 기본 타입과 객체 타입
타입스크립트에서 자주 쓰는 기본 타입에는 문자열, 숫자, 불리언 등이 있다. 이런 프리미티브 타입은 데이터가 기본적으로 가지는 특성에 따라 구분한다. 반면 객체 타입은 매우 다양하게 구성된다. 객체의 형태와 속성은 개발자의 설계나 상황에 따라 달라지기 때문에 타입 역시 때마다 달라진다.
* 함수의 타입 명시
함수에서 인자 뒤에 콜론과 타입을 작성하면 인자의 타입을 명시할 수 있다. 또한 함수에서 반환 타입이 중요할 때는 인자 목록 뒤에 콜론과 함께 반환 타입을 적는다. 이는 함수가 어떤 값을 반환하는지 명확하게 알려주고, 실수로 잘못된 타입을 반환하는 것도 미리 방지할 수 있다.
* 유니온 타입과 선택 속성
파이프 기호를 이용해 유니온 타입을 정의할 수 있다. 유니온 타입은 하나의 변수에 여러 타입이 올 수 있음을 나타내며, 여러 상황을 유연하게 처리할 수 있도록 도와준다. 예를 들어 문자열 또는 숫자 둘 중 하나가 될 수 있는 데이터는 유니온 타입으로 정의할 수 있다.
옵션인 데이터가 필요한 경우도 있다. 이럴 때 속성명 뒤에 물음표를 붙이면 선택 속성이 된다. 선택 속성은 데이터가 있을 때만 처리하게 할 수 있어 불필요한 에러를 방지한다.
* 타입 추론
변수에 타입을 따로 지정하지 않아도 코드의 흐름이나 초기값을 통해 타입이 자동으로 정해질 수 있다. 반복문 안의 i처럼 명확한 상황에서는 타입스크립트가 알아서 타입을 추론한다. 타입 추론 덕분에 직접 타입을 반복적으로 적지 않아도 되지만, 복잡한 데이터에서는 명시적으로 타입을 써주는 것이 좋다.
* null 처리와 타입 가드
HTML 요소를 다루다 보면 변수에 실제 element가 들어오지 않고 null이 할당될 수 있다. 이런 경우 null 여부를 먼저 확인해야 한다. 만약 null 체크 없이 바로 접근하면 런타임 에러가 날 수 있다. 이런 체크 코드를 타입 가드라고 하며, 값이 null이 아니라고 확인된 블록에서만 안전하게 작업할 수 있다. 타입 가드는 안전한 코드 작성을 위한 중요한 패턴이다.
마치며
오늘도 환급 챌린지 19강 공부 완료!!
이번 강의에서는 타입스크립트의 기본인 타입의 종류와 html요소에서의 타입 그리고 타입 가드에 대한 내용을 들을 수 있었다. 간단하면서도 핵심 요소들이 담겨 있어서 좋았다.