KassyLog

cosnt foo = () => {}; cosnt bar = () => {}; foo(); bar(); 다음 예제의 foo 함수와 bar 함수는 호출된 순서대로 스택 자료구조인 실행 컨텍스트 스택에 푸시되어 실행된다. 함수가 실행되려면 함수 코드 평가과정에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야한다. 다시 말해, 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸시되는 것은 바로 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출 된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. 이처럼 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다. 자바스크립트 엔진은 단하나의 실행 컨텍스트 스택을 갖는다. 이는 함수를 실행할 수 ..

https://recoiljs.org/ko/ Recoil A state management library for React. recoiljs.org 전역 상태를 관리하는 라이브러리이며 전역 store에서 상태들을 관리하며 컴포넌트가 각 상태를 구독하고 있는 형태로 사용한다. 내부적으로 ref를 통해 상태를 전달하여 리렌더링을 방지할 수 있고, atomic concept를 차용하여 리액트 상태에 가깝게 사용할 수 있다는 장점이 있다. atoms(공유상태)에서 selectors(순수함수)를 거쳐 리액트 컴포넌트로 내려가는 데이터플로우그래프를 만들 수 있다. atoms: 컴포넌트가 구독할 수 있는 상태의 단위 고유한 키, 기본값 필요 atom을 읽고 쓰려면 useRecoilState라는 훅을 사용 React의..

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com 일반적인 연결을 넘어 응답값 캐싱, 무한 스크롤을 위한 메서드등 다양한 기능들을 지원해주고 있는 라이브러리이다. React Query는 서버로부터 데이터를 요청하고 처리하기 위한 라이브러리로, RESTful API, GraphQL 등 다양한 형태의 데이터 요청을 처리할 수 있다. React Query는 캐시와 리패칭 기능을 제공하여 데이터 요청 및 처..

브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. HTML 요소와 노드 객체 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. DOM 트리라고 부르기도 한다. 노드 객체의 상속 구조 DOM은 DOM을 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. DOM을 구성하는 노드 객체는 브라우저 환경에서 제공..

공통점 둘 다 CSS-in-JS 라이브러리로서, JavaScript 코드 안에서 CSS 스타일을 작성할 수 있다. 차이점 //styled-component const Button = styled.button` color: red; background-color: white; `; //emotion import { css } from '@emotion/react'; const Button = styled.button` ${css` color: red; background-color: white; `} `; css 클래스 이름 styled-components - 자동으로 고유한 CSS 클래스 이름을 생성한다. 이를 통해 클래스 이름 충돌을 방지할 수 있다. - CSS 문법을 따른다. emotion - 컴파일..

Documentation - Generics Types which take parameters www.typescriptlang.org 제네릭타입이란이란 데이터의 타입을 일반화한다(generalize)한다는 것을 뜻한다. Generic은 자료형을 정하지 않고 여러 타입을 사용할 수 있게 해준다. 즉, 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 '재사용'이 가능하다는 장점이 있다. 제네릭 타입은 함수, 클래스, 인터페이스 등에서 사용할 수 있다. 제네릭 타입을 사용하면 함수나 클래스를 호출할 때, 인자로 전달된 값의 타입에 따라 타입 추론을 통해 타입이 결정된다. 제네릭 타입은 다음과 같은 형태로 작성..

1개의 타입이 아닌 2개 이상의 타입을 지정하는 타입을 유니온타입이라 한다. //union Type_ 타입 2개 이상 합친 새로운 타입 let member: number | string = 123; let members: (number | string)[] = [1, "2", 3]; let object: { a: string | number } = { a: "123" }; 그렇다면 유니온타입으로 숫자 연산은 가능할까? 정답은 불가능이다. let age: string | number; age + 1; //유니온타입일 땐 불가 타입스크립트는 엄격한 자바스크립트이기에 연산이 가능한 타입을 지정해야한다. 따라서 any와 unknown 타입의 경우에도 당연히 불가능하다. //모든 자료형 허용해줌 let myNam..

지난 면접에서 '리플로우와 리페인트의 차이점'에 대해서 질문을 받은적이 있다. 마침 지난 포스팅 브라우저 렌더링 과정에서 언급했던 기억이 있어서 반가웠지만, 입이 떨어지지 않았다. 왜냐면, 난 잘 모르니까..! 그런 이유로 리플로우와 리페인트에 대해 작성해보고자 한다. 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의(자신, 자식, 부모, 조상(모든 노드) ) 수치를 다시 계산하여(Recalculate), 렌더 트리를 재생성하는 과정이며 또한, Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 이 과정을 Repaint 라 한다. Reflow Reflow는 렌더링 엔진에서 요소를 배치하는 과정을 의미한다. 렌더 트리 구축 단계에서 DOM 트리..