우당탕탕 아장아장

1장 자바스크립트에서 타입스크립트로 타입스크립트의 시발점인 자바스크립트에 대하여 1.1 자바스크립트의 역사 - 1995년 넷스케이프의 브레던 아이크가 10일 만에 설계함 - 2015년부터 매년 새로운 버전을 출시하며 임베디드 애플리케이션 그리고 서버 런타임을 포함한 다양한 환경에서 새로운 버전과 이전 버전과의 호환성을 수십 년 동안 유지 1.2 바닐라 자바스크립트의 함정 - 중요한 언어 확장이나 프레임워크 없이 자바스크립트를 사용하는 것을 '바닐라'라고 부름. 즉 순수한 자바스크립트를 의미 1.2.1 값 비싼 자유 - 가장 큰 불만은 핵심 기능 - 코드의 자유는 자바스크립트를 재밌게 만들기도 하지만, 코드를 안전하게 실행하려고 할 때는 상당한 고통을 동반 1.2.2 부족한 문서 - 언어 사양에는 함수의 ..

2.1 타입의 종류 - '타입'은 자바스크립트에서 다루는 값의 형태에 대한 설명 - '형태'란 값에 존재하는 속성과 메서드 그리고 내장되어 있는 typeof 연산가자 설명하는 것을 의미 - 타입스크립트의 가장 기본적인 타입 : ➡ 일곱 가지 원시 타입 null, undefined, boolean, string, number, bigint, symbl 변수의 원시 타입을 잊어버렸다면 타입스크립트 플레이그라운드 혹은 IDE에서 원싯값을 갖는 let 변수를 입력하고 변수 이름 위에 마우스 가져가면 확인 가능 2.1.1 타입 시스템 - 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집함 ➡ 기본적인 작동 1. 코드를 읽고 존재하는 모든 타입과 값을 이해 2. 각 값이 초기 선언에..

9주차 금요일 4. 제네릭 제네릭 타입 함수가 다양한 타입을 전달 받아 처리하기 위해서는 함수 선언부에 해당 타입을 모두 명시해야 함 ➡ 제네릭 타입으로 선언하면 함수 선언부를 간단하게 작성 가능 제네릭 프로그래밍 - 작성된 코드를 다양한 타입의 객체에 대해 재사용하는 객체 지향 기법 (하나의 코드로 숫자, 문자열 등 처리 가능) import React from "react"; const Generic = () => { function printArray(arr: T[]): void { console.log(arr); } const arr1 = [10, 20, 30]; printArray(arr1); const arr2 = ["a", "b", "c"]; printArray(arr2); const arr3..

9주차 목요일 3. 인터페이스 + 클래스 인터페이스 특징 - 코드 재사용성을 높임 - 작성중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해 사용 - 인터페이스는 자바스크립트 코드로 컴파일 되지 않음 이름 규칙 - 첫글자를 대문자로 표기 - 인터페이스 이름 앞에 대문자(I)를 붙이지 않음 ➡ App.tsx const App = () => { interface Language { name: string; level: number; } let p1: Language = { name: "react", level: 5, }; // 에러 발생 let p2: Language = { name: "typescript" }; // level let p3: Language = { level: 5 }; // na..

9주차 수요일 1. TypeScript 2. TypeScript 함수 Type이 필요한 이유 - 개발자는 age 변수에 숫자 값이 저장되길 원함 - 사용자는 age 변수에 숫자 값이 저장되는지 모름 - 숫자 값을 저장하는 변수에 문자열을 저장함 특징 - 변수 값에 데이터 타입 지정 가능(예측 가능, 디버깅 편리) - 객체지향 프로그래밍 가능(클래스 기능 제공) 동작 과정 기존에는 별도의 변환 과정 필요❌ 타입스크립트는 자바스크립트로 변환을 시켜줘야함 *컴파일 : 특정 언어의 코드를 다른 언어로 바꿔주는 과정 TypeScript 문법 유형 자바스크립트 타입 타입스크립트 타입 숫자 타입 Number number 불리언 타입 Boolean boolean 문자열 타입 String string 객체 타입 Obje..