React의 가상 DOM, Vue의 가상 DOM과 비교 가상 DOM이란?DOM (Document Object Model)브라우저가 제공하는 문서 객체 모델HTML 요소를 트리 구조로 표현하며, 브라우저에서 렌더링되는 실제 DOM을 말한다.실제 DOM은 업데이트가 발생할때마다 전체 DOM 구조를 다시 계산하고 렌더링한다. 가상 DOM (Virtual DOM)메모리 상에서 실제 DOM의 경량화된 사본을 만드는 개념으로 DOM 상태를 Javascript 객체로 나타내어 빠르게 연산할수 있다. 실제 DOM 조작 전에 변경 사항을 비교하고 필요한 부분만 실제 DOM에 업데이트 하는 방식으로 성능 최적화를 하기 위하여 생성된다.리액트는 가상 DOM을 업데이트 할때 최소한의 DOM 업데이트를 보장하기 때문에 복잡한 ..
타이머, 숫자 가변폭 폰트를 고정폭 폰트로 font-variant-numeric CSS 타이머 UI에서 숫자 값을 감싼 wrapper이 움직이는 문제가 있었다.이유는 날짜와 시간이 동적으로 들어가기때문에 고정폭을 적용하지 않은 UI였고, 이 때문에 발생했다.동영상을 잘보면 미세하게 끝이 움직인다. 적용 전 왜 이런 이슈가 생기는 걸까?고정폭 폰트, 가변폭 폰트가 각각 존재하기 때문이다.말 그대로 고정폭 폰트는 각 글자가 동일한 폭을 차지하며 가변폭은 글자의 폭이 동일하지 않는 폰트를 말한다. 이때는 어떻게 고정폭으로 적용할까?아래 CSS만 적용하면 바로 해결된다. *물론 사용하는 폰트가 OpenType 포맷이어야함font-variant-numeric: tabular-nums; 적용하고나니 숫자모두 동일한..
원링크 (One Link), 딥 링크(Deep Link), 디퍼드 딥 링크 (Deferred Deep Link) - 웹뷰와의 통신초반에 잘못 이해해서 꽤나 개념을 이해하는데 쉽지 않았다.회사, 사람마다 같은 개념을 다른형식으로 말하기도 해서 헷갈리기도 했고, 마케팅하시는 분들의 블로그에서 잘못된 정보들이 있어 이해하는데 시간이 걸렸다.다시 정리해보자. 원링크 (One Link)하나의 링크를 통해 여러 플랫폼 또는 목적지로 사용자들을 유도하는 기술이나 개념.단일 URL로 여러 목적지를 처리하는 마케팅 기술 플랫폼.(AppsFlyer의 통합 딥링킹 플랫폼으로 하나의 단일 링크만으로도 딥링킹 제공)즉, 사용자가 원링크를 클릭하면, 링크는 사용자의 디바이스나 운영체제(OS)등의 정보를 분석하여 가장 적합한 목적..
Bfcache (Back-Forward Cache)
Bfcache (Back-Forward Cache)브라우저 페이지 이동 시 페이지의 상태를 완전히 캐싱해 사용자가 할때, 빠르게 로드할 수 있도록 하는 매커니즘Bfcache는 페이지를 새로 로드하지 않고 캐시에서 복원하기 때문에 더 빠른 페이지를 탐색하게 하기 때문에 사용자 경험에 중요하다. 주요 특징1. 전체 페이지 상태 저장DOM 상태, Javascript 메모리(힙 메모리 영역까지 포함), 스크롤 위치 등을 완전한 상태로 저장 (페이지를 메모리에 보관, = 스냅샷 보관)새로 데이터를 요청하거나 렌더링하지 않고 (Javascript 재실행하지 않음) 이전 페이지의 상태를 그대로 복원네트워크 요청이 감소되어 서버 부담이 줄어듬Task Queue에서 Timer나 Promise도 일시 정지되었다가, 복원..
자바스크립트 인터프리터가 함수의 선언, 할당, 실행을 나눠해서 모든 선언이 코드의 선두로 끌어올려진 것처럼 동작하는 현상의 개념 즉, 자바스크립트 엔진이 실행컨텍스트가 활성화 될 때 변수정보를 수집하는데 이때 실제 끌어올려지지는 않았지만 수집과정에서 엔진이 수집된 정보를 토대로 변수들을 알고 있기 때문에 끌어올려진 것으로 간주하는 개념 설명보기 Q. var, let 둘 다 호이스팅이 된다? - 정답은 둘 다 호이스팅되나 동작때문에 var만 실행 시 에러가 나지 않는다. 이때문에 var만 호이스팅된다고 착각할 수 있다. 설명 var는 선언과 할당을 동시에 실행하므로 호이스팅되었을때, undefined가 메모리에 저장된다. let은 선언과 할당을 별도로 실행한다. 따라서 호이스팅되었을때, 선언은 되었지만 할..
실행 컨텍스트는 실행한 코드에 제공 할 환경 정보들을 모아놓는 객체라고 생각하자. 콜 스택에 쌓아서 전체 코드를 관리하고 있어서 환경과 순서를 보장한다. 동작 실행 컨텍스트는 크게 3가지 동작을 한다. 내부 환경 정보 기록: 실행컨텍스트가 활성화 되는 시점(실행)에 선언된 변수를 수집한다. 외부 환경 정보를 구성한다. this 값을 설정하는 동작 구성 수집 정보 - 자바스크립트 엔진이 활용할 목적으로 생성할 뿐, 개발자가 코드에 접근 할 수 없다. Variable Environment 선언 시점의 Lexical Environment의 스냅샷이므로 변경사항이 반영되지 않는다. Variable Environment를 생성하여 정보를 담고 복사하여 Lexical Environment를 만든다. Lexical ..