chapter 3. 타입스크립트 이해하기 0. 타입스크립트를 이해한다는 것은? 타입스크립트가 어떤 기준으로 타입을 정의하고, 어떤 기준으로 타입들 간 관계를 정의하고, 어떤 기준으로 타입스크립트 코드의 오류를 검사하는지 그 원리와 동작 방식을 이해하는 것. 1. 타입은 집합이다 타입스크립트의 '타입'은 여러 개의 값을 포함하는 '집합'이다. 집합: 동일한 속성을 갖는 요소들을 하나의 그룹으로 묶은 단위 타입스크립트의 모든 타입들은 집합으로써 서로 포함하고 포함되는 관계를 갖는다. 이런 관계에서 다른 타입을 포함하는 타입을 슈퍼 타입(부모 타입)이라 부르며, 반대는 서브 타입(자식 타입)이라고 한다. 타입 간의 이러한 계층 관계를 어떻게 이용할 수 있는지 살펴보는 것이 중요하다. ✅ 타입 호환성 A와 B ..

chapter 2. 타입스크립트 기본 6. any와 unknown ✅ any 타입 타입스크립트에서만 제공되는 특별한 타입 타입검사를 받지 않은 특수 타입 let anyVar: any = 10; anyVar = "hello"; anyVar = true; anyVar = {}; anyVar.toUpperCase(); anyVar.toFixed(); anyVar.a; 어떠한 타입 검사도 받지 않으므로 아무 타입의 값이나 범용적으로 담아 사용 가능하며 다양한 타입의 메서드를 마음대로 호출해도 문제가 되지 않는다. any 타입은 모든 타입스크립트의 문법과 규칙으로부터 자유롭지만, 타입 검사가 이뤄지지 않기 때문에 코드 오류가 발생할 여지가 크다. 따라서 *특수한 경우를 제외하고는 any 타입 사용은 권장되지 않는..

chapter 2. 타입스크립트 기본 3. 객체 ✅ 객체 타입을 정의하는 방법 1️⃣ object로 정의하기 let user: object = { id: 1, name: "kim", }; user.id; //오류 발생 객체 생성과 타입 정의를 잘해주었는데도 `user.id`를 이용해 객체의 프로퍼티에 접근하려 하면 오류가 발생한다. 👉 원인: 타입스크립트의 object 타입은 객체의 프로퍼티에 대한 어떤 정보도 가지고 있지 않기 때문 🤔 변수 user에 저장된 객체의 구조를 그대로 타입으로 만들려면 어떻게 해야 할까? 2️⃣ 객체 리터럴 타입 중괄호를 열고 객체가 갖는 프로퍼티를 직접 내열해 만드는 타입 let user: { id: number; name: string; } = { id: 1, name:..

chapter 2. 타입스크립트 기본 0. 기본 타입(Basic Types) 이란? TS가 자체적으로 제공하는 타입, 내장 타입 TS에서만 제공하는 타입: any, void, never, unknown 타입 계층도: TS가 제공하는 기본 타입들을 계층에 따라 분류한 그림 chapter 2. 실습 환경 설정 { "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "moduleDetection": "force" }, "include": ["./"] } tsc//컴파일 tsx index.ts//실행 1. 원시타입과 리터럴 타입 원시타입 동시에 한 개의 값만 저장할 수 있는 타입들 number,..

2. 타입스크립트의 동작 원리 컴파일: 사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정 AST(추상 문법 트리): 코드 공백, 주석 등 코드 실행에 관계없는 요소를 전부 제거하고 트리 형태의 자료구조에 코드를 저장해 놓은 형태의 트리 타입스크립트의 동작 과정 타입스크립트 코드를 AST로 변환 AST를 확인하면서 코드 상 타입오류가 없는지 점검 타입에 오류가 있었다면 타입 검사 실패 및 컴파일 중단 타입에 오류가 없다면 타입 검사 통과 AST를 자바스크립트 코드로 변환 컴파일 종료 타입에 오류가 있는 경우 컴파일 시 타입 검사를 통과할 수 없음 👉 컴파일로 변환된 자바스크립트는 타입 관련한 에러가 없는 안전한 코드 타입스크립트의 타입 관련 코드는 자바스크립트로 변환될 때 사라짐 👉 실..

0. 타입스크립트를 소개합니다. 🎨 타입스크립트 = 자바스크립트의 확장판 원래 사용하던 자바스크립트 코드에서 타입을 정의하는 문법만 추가하면 타입스크립트 코드가 된다. 🎨 타입스크립트 사용 이유? 자바스크립트는 웹 브라우저에서만 동작하도록 만들어졌으며, 아주 간단한 사용자 상호작용을 처리하도록 만들어진 언어이다.(ex. 웹사이트에서 버튼 클릭 시 경고창 띄워주기 정도의 간단한 작업) 따라서 자바스크립트는 굳이 엄격한 문법을 갖출 필요 없이 유연하게 설계되었다. 그런데 `Node.js`(자바스크립트의 런타임/실행환경)가 등장하면서 웹 브라우저에서만 실행 가능했던 자바스크립트를 어디서든 실행할 수 있게 된다. 이렇게 자바스크립트의 활용성이 늘어나고 자바스크립트를 사용하는 애플리케이션의 규모도 커지게 되었다...

12.1. 함수란? 함수 일련의 과정을 문(statement)으로 구현학 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 매개변수: 함수 내부로 입력을 전달 인수: 입력. 함수 호출 시 사용됨 반환값: 출력 함수는 값이며, 여러 개 존재할 수 있다. 12.2. 함수를 사용하는 이유 함수의 재사용성 유지보수성 편의성 코드의 신뢰성 높임 코드 가독성 향상 12.3. 함수 리터럴 리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기 방식 5.2절 파트 자바스크립트의 함수는 객체타입의 값이다. 따라서 숫자 값을 숫자 리터럴로 생성하고 객체를 객체 리터럴로 생성하는 것처럼 함수도 함수 리터럴로 생성할 수 있다. 함수는 일반 객체와 다르다. 일반 객체는 호출할 수 없지만 함수는 호..

11.1. 원시 값 자바스크립트가 제공하는 7가지 데이터 타입 → 원시 타입 / 객체 타입으로 구분 원시타입의 값(=원시값) 변경 불가능한 값. 원시값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장됨 값에 의한 전달(pass by value): 원시 값을 갖는 변수를 다른 변수에게 할당하면 원본의 원시 값이 복사되어 전달된다. 객체(참조) 타입의 값 (=객체) 변경 가능한 값 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됨 참조에 의한 전달(pass by reference): 객체를 가리키는 변수를 다른 변수에게 할당하면 원본의 참조 값이 복사되어 전달된다. 11.1.1. 변경 불가능한 값 한번 생성된 원시 값은 읽기 전용으로서, 변경이 불가능하다.(=데이터의 신..

10.1. 객체란? js를 구성하는 거의 모든 것 원시 값(=단 하나의 값만 나타냄, 변경 불가능한 값)을 제외한 나머지 값 함수, 배열, 정규 표현식 등 객체 타입: 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조 변경 가능한 값 0개 이상의 프로퍼티로 구성된 집합. (프로퍼티: key-value로 구성됨) 프로퍼티 값이 함수인 경우 메서드라고 부른다. var person = { name: "A", //프로퍼티 age: 20, //프로퍼티 //메서드 getName: function () { console.log(this.name); }, }; //프로퍼티 키: name, age //프로퍼티 값: "A", 20 프로퍼티: 객체의 상태를 나타내는 값(data) 메서드:..