본문 바로가기

웹 프로그래밍/JavaScript | TypeScript41

[한 입 크기로 잘라먹는 TypeScript] CH3. 타입스크립트 이해하기 1(1. 타입은 집합이다, 2. 타입 계층도와 함께 기본타입 살펴보기) chapter 3. 타입스크립트 이해하기 0. 타입스크립트를 이해한다는 것은? 타입스크립트가 어떤 기준으로 타입을 정의하고, 어떤 기준으로 타입들 간 관계를 정의하고, 어떤 기준으로 타입스크립트 코드의 오류를 검사하는지 그 원리와 동작 방식을 이해하는 것. 1. 타입은 집합이다 타입스크립트의 '타입'은 여러 개의 값을 포함하는 '집합'이다. 집합: 동일한 속성을 갖는 요소들을 하나의 그룹으로 묶은 단위 타입스크립트의 모든 타입들은 집합으로써 서로 포함하고 포함되는 관계를 갖는다. 이런 관계에서 다른 타입을 포함하는 타입을 슈퍼 타입(부모 타입)이라 부르며, 반대는 서브 타입(자식 타입)이라고 한다. 타입 간의 이러한 계층 관계를 어떻게 이용할 수 있는지 살펴보는 것이 중요하다. ✅ 타입 호환성 A와 B .. 2024. 4. 15.
[한 입 크기로 잘라먹는 TypeScript] CH2. 타입스크립트 기본 3(6.any와 unknown, 7.void와 never) chapter 2. 타입스크립트 기본 6. any와 unknown ✅ any 타입 타입스크립트에서만 제공되는 특별한 타입 타입검사를 받지 않은 특수 타입 let anyVar: any = 10; anyVar = "hello"; anyVar = true; anyVar = {}; anyVar.toUpperCase(); anyVar.toFixed(); anyVar.a; 어떠한 타입 검사도 받지 않으므로 아무 타입의 값이나 범용적으로 담아 사용 가능하며 다양한 타입의 메서드를 마음대로 호출해도 문제가 되지 않는다. any 타입은 모든 타입스크립트의 문법과 규칙으로부터 자유롭지만, 타입 검사가 이뤄지지 않기 때문에 코드 오류가 발생할 여지가 크다. 따라서 *특수한 경우를 제외하고는 any 타입 사용은 권장되지 않는.. 2024. 4. 11.
[한 입 크기로 잘라먹는 TypeScript] CH2. 타입스크립트 기본 2(3.객체, 4.타입 별칭과 인덱스 시그니쳐, 5.열거형 타입) 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:.. 2024. 4. 10.
[한 입 크기로 잘라먹는 TypeScript] CH2. 타입스크립트 기본 1(0. 기본타입의 정의, 1.원시타입과 리터럴타입, 2.배열과 튜플) 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,.. 2024. 4. 5.
[한 입 크기로 잘라먹는 TypeScript] CH1. 타입스크립트 개론 2(2. TS 동작원리, 3. 설치와 실습, 4. 컴파일러 옵션 설정하기) 2. 타입스크립트의 동작 원리 컴파일: 사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정 AST(추상 문법 트리): 코드 공백, 주석 등 코드 실행에 관계없는 요소를 전부 제거하고 트리 형태의 자료구조에 코드를 저장해 놓은 형태의 트리 타입스크립트의 동작 과정 타입스크립트 코드를 AST로 변환 AST를 확인하면서 코드 상 타입오류가 없는지 점검 타입에 오류가 있었다면 타입 검사 실패 및 컴파일 중단 타입에 오류가 없다면 타입 검사 통과 AST를 자바스크립트 코드로 변환 컴파일 종료 타입에 오류가 있는 경우 컴파일 시 타입 검사를 통과할 수 없음 👉 컴파일로 변환된 자바스크립트는 타입 관련한 에러가 없는 안전한 코드 타입스크립트의 타입 관련 코드는 자바스크립트로 변환될 때 사라짐 👉 실.. 2024. 4. 3.
[한 입 크기로 잘라먹는 TypeScript] CH1. 타입스크립트 개론 1(0. 타입스크립트 소개, 1. JS 단점/TS 장점) 0. 타입스크립트를 소개합니다. 🎨 타입스크립트 = 자바스크립트의 확장판 원래 사용하던 자바스크립트 코드에서 타입을 정의하는 문법만 추가하면 타입스크립트 코드가 된다. 🎨 타입스크립트 사용 이유? 자바스크립트는 웹 브라우저에서만 동작하도록 만들어졌으며, 아주 간단한 사용자 상호작용을 처리하도록 만들어진 언어이다.(ex. 웹사이트에서 버튼 클릭 시 경고창 띄워주기 정도의 간단한 작업) 따라서 자바스크립트는 굳이 엄격한 문법을 갖출 필요 없이 유연하게 설계되었다. 그런데 `Node.js`(자바스크립트의 런타임/실행환경)가 등장하면서 웹 브라우저에서만 실행 가능했던 자바스크립트를 어디서든 실행할 수 있게 된다. 이렇게 자바스크립트의 활용성이 늘어나고 자바스크립트를 사용하는 애플리케이션의 규모도 커지게 되었다... 2024. 4. 2.
[모던 자바스크립트 Deep Dive] 12장. 함수1 (12.1. 함수란? ~ 12.4. 함수 정의) 12.1. 함수란? 함수 일련의 과정을 문(statement)으로 구현학 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 매개변수: 함수 내부로 입력을 전달 인수: 입력. 함수 호출 시 사용됨 반환값: 출력 함수는 값이며, 여러 개 존재할 수 있다. 12.2. 함수를 사용하는 이유 함수의 재사용성 유지보수성 편의성 코드의 신뢰성 높임 코드 가독성 향상 12.3. 함수 리터럴 리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기 방식 5.2절 파트 자바스크립트의 함수는 객체타입의 값이다. 따라서 숫자 값을 숫자 리터럴로 생성하고 객체를 객체 리터럴로 생성하는 것처럼 함수도 함수 리터럴로 생성할 수 있다. 함수는 일반 객체와 다르다. 일반 객체는 호출할 수 없지만 함수는 호.. 2024. 3. 29.
[모던 자바스크립트 Deep Dive] 11장. 원시 값과 객체의 비교 11.1. 원시 값 자바스크립트가 제공하는 7가지 데이터 타입 → 원시 타입 / 객체 타입으로 구분 원시타입의 값(=원시값) 변경 불가능한 값. 원시값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장됨 값에 의한 전달(pass by value): 원시 값을 갖는 변수를 다른 변수에게 할당하면 원본의 원시 값이 복사되어 전달된다. 객체(참조) 타입의 값 (=객체) 변경 가능한 값 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됨 참조에 의한 전달(pass by reference): 객체를 가리키는 변수를 다른 변수에게 할당하면 원본의 참조 값이 복사되어 전달된다. 11.1.1. 변경 불가능한 값 한번 생성된 원시 값은 읽기 전용으로서, 변경이 불가능하다.(=데이터의 신.. 2024. 3. 27.
[모던 자바스크립트 Deep Dive] 10장. 객체 리터럴 10.1. 객체란? js를 구성하는 거의 모든 것 원시 값(=단 하나의 값만 나타냄, 변경 불가능한 값)을 제외한 나머지 값 함수, 배열, 정규 표현식 등 객체 타입: 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조 변경 가능한 값 0개 이상의 프로퍼티로 구성된 집합. (프로퍼티: key-value로 구성됨) 프로퍼티 값이 함수인 경우 메서드라고 부른다. var person = { name: "A", //프로퍼티 age: 20, //프로퍼티 //메서드 getName: function () { console.log(this.name); }, }; //프로퍼티 키: name, age //프로퍼티 값: "A", 20 프로퍼티: 객체의 상태를 나타내는 값(data) 메서드:.. 2024. 3. 27.
[모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가2 (단축 평가) 9.4. 단축 평가 9.4.1. 논리 연산자를 사용한 단축 평가 논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. -7.5. 논리연산자 파트- 논리곱 연산자 'Cat' && 'Dog' //'Dog' 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 또한 논리곱 연산자의 평가 진행 방향은 왼쪽에서 오른쪽이다. 위 예제의 경우 첫번재 피연산자 'Cat'은 Truthy 값이므로 true로 평가된다. 따라서 최종 평가 결과를 내리기 위해서는 두 번째 피연산자까지 평가해 보아야 한다. (=두 번째 피연산자가 위 예제의 평가 결과를 결정한.. 2024. 3. 25.
[모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가1 (타입 변환) 9.1. 타입 변환이란? 개발자의 의도대로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 한다. // 명시적 타입 변환 // 숫자를 문자열로 타입 캐스팅한다. var str = x.toString(); console.log(typeof str, str); //string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x);//number 10 반면 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스립트 엔진에 의해 암묵적으로 타입이 변환되기도 하는데, 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다. 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하지 않으며, 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다. // 암묵적.. 2024. 3. 22.
[모던 자바스크립트 Deep Dive] 8장. 제어문 제어문 제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 그러나 코드의 실행 순서 변경 시 코드의 흐름을 직관적으로 이해하는 데 방해가 되고 가독성을 해칠 수도 있다. 가독성이 좋지 않은 코드는 오류를 발생시키는 원인이 된다. 👉 forEach, map, filter, reduce와 같은 고차함수는 제어문의 사용을 억제해 복잡성을 해결할 수 있다. 8.1. 블록문 블록문 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. js는 블록문을 하나의 실행 단위로 취급한다. 8.2. 조건문 8.2.2. switch문 if ... else문은 논리적 참, 거짓으로 실행할 코드 .. 2024. 3. 22.
반응형

티스토리툴바