언어 (21) 썸네일형 리스트형 맵의 일부만 구현하고 싶을 때: TypeScript Partial 과목별 문제들을 매핑하는 객체를 만들던 중이었다. import englishQuestions from '../../__fixtures__/questions/starred/english'; import generalQuestions from '../../__fixtures__/questions/starred/general'; import { SubjectName } from './types'; type QuestionsType = { starred: Record; }; const questions: QuestionsType = { starred: { general: generalQuestions, english: englishQuestions, }, }; export default questions; 이런.. 타입 가드란? 타입 가드(Type Guard)를 사용하면 조건문에서 객체의 타입을 좁혀나갈 수 있다. typeof TypeScript는 JavaScript의 instanceof, typeof 연산자를 이해할 수 있다. 즉 조건문에 typeof와 instanceof를 사용하면 TypeScript는 해당 조건문 블록 내에서 해당 변수의 타입이 다르다는 것을 이해한다. 아래 예시를 보면 특정 메소드가 string에 존재하지 않는 다는 사실을 인식해 사용자 오타가 있을 수 있음을 지적한다. function doSomethingx(x: number | string) { if (typeof x === 'string') { // 이 조건문 안에 있는 x는 무조건 string이다. console.log(x.subtr(1)); // .. 타입 표명이란? TypeScript에서는 시스템이 추론 및 분석한 타입 내용을 우리가 원하는 대로 얼마든지 바꿀 수 있다. 이 때 타입 표명(type assertion)이라고 불리는 메커니즘이 사용된다. TypeScript의 타입 표명은 프로그래머가 컴파일러에게 내가 너보다 타입에 더 잘 알고 있고, 나의 주장에 대해 의심하지 말라고 하는 것과 같다. as로 타입 표명을 하는 순간 이건 무슨 일이 있어도 그 타입이라고 단언 한 것이기 때문에 타입 스크립트가 해당 부분의 에러를 잡지 않을 수 있다. 자바스크립트 객체(Object) 객체가 무엇인가요? 서랍장을 상상해보세요. 서랍장 안 파일은 프로퍼티, 파일 각각에 붙어있는 이름표는 객체의 키라고 생각하세요. 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있습니다. 객체의 구성요소는? 중괄호를 이용해 만듭니다. 중괄호 안에는 key: value 쌍으로 구성된 property를 여러개 넣을 수 있습니다. key는 문자형, value엔 모든 자료형이 들어갈 수 있습니다. property key 는 property name이라고도 부릅니다. 객체 어떻게 만들어요? let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 리터럴과 프로퍼티 중괄호 안에는 key: value 쌍으로 구성된 property가 들어갑니다. pro.. 프로토타입 코어자바스크립트를 필사했습니다. 프로토타입 상속 개발을 하다 보면 기존에 있는 기능을 가져와 확장해야 하는 경우가 생깁니다. 사람에 관한 프로터티와 메서드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 admin과 guest 객체를 만들어야 한다고 가정해봅시다. 이때 "user의 메서드를 복사하거나 다시 구현하지 않고 user에 약간의 기능을 얹어 admin과 guest 객체를 만들 수 있지 않을까?"라는 생각이 들겁니다. 자바스크립트 언어의 고유 기능인 프로토타입 상속(prototypal inheritance)을 이용하면 위와 같은 생각을 실현할 수 있습니다. [[Prototype]] 자바스크립트의 객체는 명세서에서 명명한 [[Prototype]]이라는 숨김 프로퍼.. 함수 바인딩 코어자바스크립트를 필사한 것입니다. 사라진 this 객체 메서드를 콜백으로 전달할 때 this 정보가 사라지는 문제가 생긴다. 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라진다. let user = { firstName: "John", sayHi() { alert(`Hello, ${this.firstName}!`); } }; setTimeout(user.sayHi, 1000); // Hello, undefined! this.firstName이 "John"이 되어야 하는데, 얼럿 창엔 undefined가 출력된다 이렇게 된 이유는 setTimeout에 객체에서 분리된 함수인 user.sayHi가 전달되기 때문이다. 위 예시의 마지막 줄은 다음 코드와 같다. let f = us.. DOM 인터페이스와 테스팅 mdn을 필사한 것입니다. DOM interface 이 문서는 objects와 DOM에서 조작가능한 것들에 대해 설명하고 있다. 사람들은 HTML FORM element가 HTMLFormElement interface로부터 name property를 얻고, className property는 HTMLElement interface로 부터 얻는 것에 대해 별로 관심이 없는 것 같다. 두 가지 경우 모두, property는 form object 안에 있는 것이다. 하지만 DOM 안에 구현된 objects와 interfaces 사이의 관계는 혼동될 수 있다. 이 섹션에서는 DOM specification 안의 실제 interfaces와 그들을 어떻게 활용할 수 있는지에 대해 살펴보도록 하자. Interface.. DOM MDN을 필사한 것입니다. DOM 이란? 문서 객체 모델(The Document Object Model, 이하 DOM)은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 구조화된 nodes와 property와 method를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라.. 이전 1 2 3 다음
