웹브라우저의 랜더링은 'DOM, CSSOM 생성 -> DOM, CSSOM을 가지고 랜더링 트리(청사진, blue print) 생성 -> 레이아웃 -> 페인트' 과정을 거친다. 여기서 일반 js로 돔을 수정하면 위 4단계가 다시 실행된다. 그런데 랜더링 과정 중 마지막 두단계 ReFlow(=ReLayout), RePaint에서 리소스가 많이 든다. 그래서 일반 js로 돔을 조작할때 돔 조작을 최소화해야한다. 하지만 프로젝트 규모가 커질수록 그 작업은 어려워진다. 이것을 해결하기 위해 리액트가 나왔다. 리액트는 돔 조작을 최소화하는 작업을 추상화해서 개발자 대신 해준다. 그 결과 대부분의 상황에서 업데이트 속도가 더 빨라진다. 리액트에서는 Render phase, Commit phase가 있다. Render..

플레이그라운드에서 테스트해보며 썼던 코드이다. 함수를 쓸때 제네릭을 사용하면 좋다. 리턴 타입을 T로 두고 여기에 다양한 타입을 쓸 수 있음 interface UserInfo { userId: number; id: number; title: string; body: string; } const getUserByUserId = async (arg: number): Promise => { return await (await fetch(`https://jsonplaceholder.typicode.com/posts/${arg}`)).json(); } (async function (){ console.log(await getUserByUserId(23)); })();

타입스크립트는 유용한 유틸리티 타입이 많다. 공부하고 숙지해두자. 아는만큼 개발에 쓰일 것이다. /** 1. keyof : interface의 key값들을 유니언 형태로 뽑아냄 */ interface User { id: number; name: string; age: number; gender: 'm' | 'f'; } type UserKey = keyof User; // UserKey : 'id | name | age | gender'; const uk: UserKey = 'gender'; /** 2. Partial : property를 optional로 만듬 */ let admin: Partial = { id: 1, name: 'Bob', } /** 3. Required : 모든 property를 필수..

a || b a ?? b 둘다 a와 b를 비교하여 하나를 반환하는 연산자이다. 차이점을 보자. || 는 0, "", false, undefined, null 과 같은 falsy 값을 검사하는 연산자이다. 즉, 첫번째 참인(truthy) 값을 반환한다. +) 자바스크립트에서 null도 falsy 값이다. 그리고 모두 falsy 값이면 마지막 값을 반환한다. ?? 는 null, undefined 와 같은 nullish 값을 검사하는 연산자이다. 즉, 첫번째 정의된(defined) 값을 반환한다. let a = "" || '야호'; console.log(a); // 야호 let b = null || 1; console.log(b); // 1 let c = undefined || null || 0; consol..

?. 이 문법은 객체의 값에 접근할 때 사용한다. 간단하다. ?. 왼쪽이 null, undefined이면 ?. 오른쪽을 실행하지 않고 undefined를 리턴한다. 반대로 ?. 왼쪽이 null, undefined가 아니면 ?. 오른쪽을 실행한다. let human = { age: 30, address: "korea", name: { lastName: "park", } } console.log(human.job); // undefined console.log(human.job.salary); // error: Cannot read properties of undefined console.log(human.job?.salary); //undefined console.log(human.name?.lastNam..

버튼을 누르면 숫자가 변경되는(+/-) 프로그램을 리덕스를 이용해 바닐라 자바스크립트로 구현했다. 1. html Add Minus 2. javascript import { createStore } from "redux"; const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.querySelector("span"); number.innerText = 0; const ADD = "ADD"; const MINUS = "MINUS"; const countModifier = (count = 0, action) => { switch (action.type) { c..