ALL

3. 객체라는 추상화, 타입은 추상화 도구 | 객체지향의 사실과 오해 3장

추상화는 불필요한 부분을 무시함으로써 단순하게 만드는 것이다. 객체지향에서는 객체라는 추상화를 통해 복잡성을 극복한다. 객체들을 분류하는 것 또한 추상화다. 이 때 분류 장치가 되는 것이 개념(컨셉)이다. 타입은 개념이다. 불필요한 요소를 배제하여 정적인 모델을 다룰 수 있게 하는 추상화 도구다. 객체를 분류하는 기준은 타입(즉, 개념)이며, 이 타입을 나누는 기준은 객체의 행동이다. 타입을 구현하는 한 가지 대표적인 방법이 클래스다. (타입 != 클래스) 추상화를 통한 복잡성 극복 우리는 지하철을 편리하게 이용할 수 있다. 바로 단순하고 직관적인 지하철 노선도가 있기 때문이다. 우리는 지하철 노선도를 볼 때 사실적인 지형을 보진 않는다. 출발점과 환승점, 그리고 그 연결을 본다. 해리 벡은 이러한 목적..

5. 타입 추론(2/2) | 이펙티브 타입스크립트 3장

24. 일관성 있는 별칭 사용하기 별칭은 타입스크립트가 타입을 좁히는 것을 방해한다. 따라서 별칭은 일관되게 사용해야 한다. 별칭을 남발하면 제어 흐름을 분석하기 어렵다. interface Coordinate { x: number; y: number; } interface BoundingBox { x: [number, number]; y: [number, number]; } interface Polygon { exterior: Coordinate[]; holes: Coordinate[]; bbox?: BoundingBox; } function isPointInpolygon(polygon: Polygon) { const box = polygon.bbox; if (polygon.bbox) { polygon...

SPA의 가상돔(virtual DOM)이란? 리액트의 휴리스틱 디핑 알고리즘

DOM이란? DOM(Document Object Model)이란, 웹 페이지를 이루는 태그들을 브라우저가 트리 구조로 만든 객체 모델입니다. HTML과 자바스크립트를 이어주는 역할로 볼 수 있습니다. 자바스크립트로는 Document라는 전역 객체를 통해 HTML 태그들을 조종할 수 있습니다. 기존의 웹 애플리케이션은 자바스크립트로 직접 DOM을 제어했습니다. 이렇게 돔을 직접 제어하는 방식이 아닌, 리얼 돔을 추상화한 자바스크립트 객체를 구성하여 사용하는 방식이 가상 돔의 개념입니다. SPA의 등장 전통적인 웹 사이트는 인터렉션이 발생할 때마다 완전히 새로운 페이지를 서버에서 전송해 주었습니다. 그러나 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 ..

브라우저 렌더링 과정 및 사이드 이펙트 살펴보기

렌더링이란? HTML, CSS, JS 문서가 브라우저에 출력되는 과정을 말합니다. 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있는데, 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용합니다. 렌더링 순서는 다음과 같습니다. HTML 파일과 CSS 파일을 파싱해서 각각 Dom Tree와 CSSOM Tree를 만든다. (Parsing) 두 Tree를 결합하여 Render Tree를 만든다. (Style) Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다. (Paint) 레이어를 합성하여 실제 화면에 나타낸다. (Composite) Par..

4. 타입 추론(1/2) | 이펙티브 타입스크립트 3장

타입스크립트는 타입 추론을 적극적으로 수행한다. 숙련된 타입스크립트 개발자는 비교적 적은 수의 구문을 사용한다. 19. 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입스크립트가 타입을 추론할 수 있다면 타입 구문을 작성하지 않는 게 좋다. 오히려 방해가 될 뿐이다. // 비생산적이며 형편없는 스타일 let x: number = 12; let x = 12; // 로 충분하다. 타입스크립트는 예상보다 더 정확하게 추론하기도 한다. const axis1: string = 'x'; // 타입은 string const axis2 = 'y'; // 타입은 "y" 불필요한 명시적 타입 구문은 리팩터링을 더 번거롭게 한다. 비구조화 할당문은 모든 지역 변수의 타입이 추론되도록 하기 때문에 명시적 타입 구문을 넣는..

2. 객체의 행동이 상태를 결정한다 | 객체지향의 사실과 오해 2장

이상한 나라의 앨리스 객체 앨리스는 작은 문 너머 아름다운 정원으로 이동하고 싶다. 작은 문의 높이는 40cm이며, 현재 앨리스는 이보다 크다. 작은 문은 열쇠로 열 수 있는데, 너무 작은 사람은 이 열쇠를 사용할 수 없다. 앨리스는 케이크/버섯/음료를 먹거나, 부채질을 하는 행동을 통해 자신의 키를 변화시킬 수 있다. 여기서 앨리스를 객체로 생각해보자. 앨리스는 문을 통과하기에 적당한 상태로 자신의 키를 계속해서 변화시킨다. 특정 시점의 앨리스의 상태란 특정 시점에서의 앨리스의 키를 의미한다. 앨리스는 무언가를 먹거나 부채질을 하면서 키를 변화시킨다. 앨리스의 키를 변화시키는 것은 앨리스의 행동이다. 앨리스가 하는 행동에 따라 앨리스의 상태가 변하게 된다. 앨리스의 상태를 결정하는 것은 행동이지만, 행..

1. 객체지향이란? | 객체지향의 사실과 오해 1장

객체지향의 목표는 실세계의 모방이 아니다. 하지만 실세계의 모방이라는 개념은 객체지향을 이해하는 데는 효과적이다. 역할, 책임, 협력 객체지향 패러다임의 핵심은 자율적인 객체들의 협력이다. 손님: 커피 주문하기 캐셔: 주문 받기 바리스타: 커피 제조하기 const customer = { order: () => { return casher.takeOrder("아메리카노"); }, }; const casher = { takeOrder: (coffee: string) => { return barista.makeCoffee(coffee); }, }; const barista = { makeCoffee: (coffee: string) => { return coffee; }, }; 커피를 주문하고 제조하는 과정은 ..

3. 타입스크립트의 타입시스템(2/2) | 이펙티브 타입스크립트 2장

12. 함수 표현식에 타입 적용하기 js/ts에서는 함수 선언식과 표현식을 다르게 인식한다. 타입스크립트에서는 함수 표현식을 사용하는 것이 좋다. 매개변수나 반환 값에 타입을 명시하기보다는 함수 표현식 전체에 타입 구문을 적용하는 것이 좋다. 더 간결하고 안전하다. 만약 같은 타입 시그니처를 반복적으로 작성한 코드가 있다면 함수 타입을 분리해 내자. type BinaryFn = (a: number, b: number) => number; const add: BinaryFn = (a, b) => a + b; const sub: BinaryFn = (a, b) => a - b; const mul: BinaryFn = (a, b) => a * b; const div: BinaryFn = (a, b) => a ..