profile
Frontend Developer@Kakaopay

useImperativeHandle & forwardedRef 활용하기

useImperativeHandle와 forwardedRef를 활용하면 부모 컴포넌트가 자식 컴포넌트의 함수를 호출하거나 값을 가져올 수 있다.

3일 전
·
0개의 댓글

React Query에서 staleTime과 cacheTime의 차이

A 쿼리 인스턴스가 mount 됨네트워크에서 데이터 fetch 하고 A라는 쿼리키로 캐싱함이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경됨A 쿼리 인스턴스가 unmount 됨캐시는 cacheTime(기본값 5min) 만큼 유지

2021년 4월 10일
·
0개의 댓글

비슷한 라이브러리 비교해보는 글

2021년 3월 25일
·
0개의 댓글

OffsetTop을 읽으면 reflow가 발생한다?

offsetTop을 읽는 것 자체가 무조건 reflow를 발생시키지는 않는다. 하지만 offsetTop을 읽기 위해서 브라우저가 렌더링 큐에 쌓인 모든 작업을 수행하면서 reflow를 발생시킬 수 있다고 한다.

2021년 3월 25일
·
0개의 댓글

Table Of Contents using Intersection Observer API

Table Of Contents는 목차를 의미하고, Intersection Observer API는 타겟요소가 상위요소(또는 viewport)와 Intersect 하는지 관찰하는 기능을 제공하는 Web API다.

2021년 3월 24일
·
0개의 댓글

prettier와 eslint를 구분해서 사용하자

결론부터 말하자면 오류를 잡으려면 린터, 스타일을 교정하려면 포맷터를 사용하자.

2021년 3월 21일
·
0개의 댓글

Code Spell Checker

Code Spell Checker는 맞춤법 검사기 for vscode이다. 과제를 평가하다보면 가끔 코드에 오타가 보이곤 한다. 이런 오타들은 코드의 신뢰성을 떨어트리고, typescript를 사용하지 않는 경우 오타 때문에 헤메는 경우가 있다.

2021년 3월 21일
·
0개의 댓글

void(0)

드물게 보이는 void(0)은 뭘까 검색해보니라고 한다.재밌는건 void 0(6 bytes)이 undefined(9 bytes)보다 바이트를 덜 먹기 때문에 uglifyjs같은 minifier에서 undefined를 void 0으로 바꾸는 경우가 있는 것 같다.화살표

2021년 3월 14일
·
0개의 댓글
post-thumbnail

Finite State Machine

Finite State Machine(FSM)은 유한한 개수의 상태를 가질 수 있는 automata이다. 이런 오토마타는 한 번에 오로지 하나의 상태만을 가지고, 어떠한 event에 의해 한 상태에서 다른 상태로 변경될 수 있으며 이를 Transition이라고 한다.

2021년 3월 14일
·
0개의 댓글

Screen Capture API

Screen Capture API를 통해 화면 또는 화면의 일부를 선택하고 미디어 스트림으로 캡쳐할 수 있다.getDisplayMedia의 옵션은 MediaStreamConstraints 객체로 audio, video 옵션을 각각 지정할 수 있다. audio, vide

2021년 3월 13일
·
0개의 댓글

Resize Observer API

Resize Observer API는 요소의 크기 변화를 감지하고 콜백을 실행한다. 기존에는 Viewport 크기 변화는 window의 resize 이벤트 또는 window.matchMedia로 감지할 수 있지만 요소의 크기 변화를 직접적으로 감지할 수 있는 방법은 없

2021년 3월 13일
·
0개의 댓글

MutationObserver

MutationObserver는 DOM 변경 감시를 제공한다. DOM을 감시하다가 child 노드들이나 attributes, data 등이 변경되면 콜백을 실행한다. 예를 들면 prefers-color-scheme 미디어쿼리가 안 먹는 브라우저 에서 다크모드를 적용하려

2021년 3월 13일
·
0개의 댓글
post-thumbnail

Intersection Observer API

Intersection Observer API는 타겟 요소와 상위 요소 or 최상위 Document의 Viewport 사이의 교차점 내의 변화를 비동기적으로 관찰하는 방법이다. 페이지 스크롤에 의한 lazy loading, 무한 스크롤, 스크롤에 따라 강조되는 tabl

2021년 3월 13일
·
0개의 댓글

Progressive Web App

웹 앱 : 모든 사람들, 모든 장소, 모든 디바이스에서 접속이 가능하다.플랫폼 네이티브 앱 : 하드웨어에 접근할 수 있고 기기 데이터와 상호작용할 수 있는 등 장치의 기능을 활용할 수 있다. 설치할 수 있으므로 오프라인에서도 동작한다.PWA (Progressive We

2021년 3월 13일
·
0개의 댓글

ECMAScript 2021

Promise.all()이 모든 promise들이 resolve 되면 resolve 되는 함수라면, Promise.any()는 하나라도 resolve 된다면 resolve 된다.WeakRef 인스턴스는 등록한 객체가 메모리에 있으면 해당 객체를 반환하고, 가비지 콜렉터

2021년 3월 13일
·
0개의 댓글

Web Worker와 Service Worker

브라우저는 자바스크립트를 실행하기 위해서 싱글 스레드를 사용하므로 거대한 자바스크립트 코드를 돌리면 메인 스레드가 block 되고 사용자 경험이 악화될 것이다. 앱에서 다중 스레딩 모델을 사용하는 것 처럼, 웹에서는 Worker를 사용해서 백그라운드 스레드에서 스크립트

2021년 3월 9일
·
0개의 댓글
post-thumbnail

웹사이트 성능 메트릭

⭐️ 표시는 Web Vital에서 중점적으로 체크하는 항목이다. LCP : 로딩 성능 FID : 상호 작용력 CLS : 시각적 안정성

2021년 3월 8일
·
0개의 댓글
post-thumbnail

브라우저 렌더링에 대한 이해와 최적화

브라우저 아키텍처 브라우저 엔진 : 유저 인터페이스와 렌더링 엔진 사이의 중개자로, 유저 인터페이스에서 받은 입력에 따라 렌더링 엔진을 쿼리하고 처리한다. 렌더링 엔진 : HTML/CSS를 파싱해서 사용자가 요청한 특정 웹 페이지를 화면에 렌더링하는 역할을 한다.

2021년 3월 7일
·
0개의 댓글
post-thumbnail

framer-motion : react를 위한 motion & gesture 라이브러리

framer-motion는 리액트에서 애니메이션과 제스쳐를 쉽게 다룰 수 해주는 라이브러리다.

2021년 2월 12일
·
2개의 댓글
post-thumbnail

Webpack 보다 더 빠른 빌드툴, Snowpack

스노우팩은 unbundled during development 즉 개발중에 번들링을 하지 않겠다는 컨셉의 프론트엔트 빌드툴이다.예를들면 현재 빌드툴로 가장 많이 사용되는 webpack 같은 경우, 파일 하나가 변경될 경우 연관된 모든 파일을 다시 빌드하고 다시 번들링

2021년 2월 10일
·
0개의 댓글