전체 글

* 이 글은 How the browser renders a webpage? - DOM, CSSOM and Rendering을 번역하였습니다. How the browser renders a web page? — DOM, CSSOM and Rendering In this article, we will deep dive into DOM and CSSOM to understand how the browser renders a webpage. Brower blocks some rendering of a… medium.com 브라우저의 Rendering (1) - construction에서는 DOM, CSSOM, Render Tree에 대해서 살펴봅니다. 여기서는 어떻게 브라우저가 페이지를 렌더하는지 이해하기 위해..

* 이 글은 How to understand a component's lifecycle methods in ReactJs 번역하였습니다. How to understand a component’s lifecycle methods in ReactJS In this part, we are going to explore about lifecycle methods of ReactJS. But, before moving ahead to react’s different lifecycle methods… medium.com 이 글에서 우리는 React의 생명주기 메서드에 대해 알아볼 것입니다. 하지만 React의 다양한 생명주기 메서드를 알아보기 앞서 일단 이게 뭔지에 대해 이해하는 것이 중요합니다. 알다시피, 이 세..

* 이 글은 드림코딩 by 엘리님 강의를 참고하여 만들었습니다. 😡 = 지양해야하는 코드 😍 = 지향해야하는 코드 1. Function { // 😡 function checkNotNullBad(arg: number | null): number { if (arg == null) { throw new Error("not valid number!"); } return arg; } //😡 function checkNotNullAnyBad(arg: any | null): any { if (arg == null) { throw new Error("not valid number!"); } return arg; } //😍 function checkNotNull(arg: T | null): T { if (arg == n..

* 이 글은 드림코딩 by 엘리님 강의를 참고하여 만들었습니다. 오스트랄로피테쿠스가 크로마뇽인(?)이 되는 것처럼 코드가 진화하는 내용을 이곳에서 담았습니다. 절차지향적인 코드가 객체지향적으로 변모하는 모습을 기록하기 위해 이번 글을 쓰게되었습니다. 주제는 커피머신입니다. 다양한 커피를 만들기 위한 머신과 이를 통해 추출할 수 있는 여러 커피들을 TypeScript + OOP로 구현했습니다. 코드는 순차적으로 보시면 좋을 것 같습니다. 그럼 시작하겠습니다 1. without-oop (절차지향 코드) { type CoffeeCup = { shots: number; hasMilk: boolean; }; const BEANS_GRAMM_PER_SHOT: number = 7; let coffeeBeans: nu..