Intersection Observer API

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

Progressive Web App

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

ECMAScript 2021

Mar 13, 2021
1. String.prototype.replaceAll 2. Promise.any() Promise.all()이 모든 promise들이 resolve 되면 resolve 되는 함수라면, Promise.any()는 하나라도 resolve 된다면 resolve 된다. 3…

Web Worker와 Service Worker

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

웹사이트 성능 메트릭

Mar 8, 2021
주요 metrics(지표) 항목 ⭐️ 표시는 Web Vital에서 중점적으로 체크하는 항목이다. LCP : 로딩 성능 FID : 상호 작용력 CLS : 시각적 안정성 TTFB (Time To First Byte) 페이지를 요청했을 때 서버에서 데이터의 첫 번째 바이트…

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

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

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

Feb 12, 2021

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

Webpack 보다 더 빠른 빌드툴, Snowpack

Feb 10, 2021

스노우팩은 unbundled during development 즉 개발중에 번들링을 하지 않겠다는 컨셉의 프론트엔트 빌드툴이다.

imported constant를 mock 하는 법

Feb 7, 2021
함수를 mock 하는 법은 많은데 의외로 import 된 상수를 mock 하는 방법을 찾기 어려웠다. (아니면 그냥 내가 검색을 못하는 걸 수도...) 예를 들면 아래와 같은 코드에서 modeToText 함수를 테스트 하는 경우 isProduction를 mock 해야…
Copyright © 2022nana