전체 글

WCAG를 준수하는 반응형 text 만들기

1. 서론 반응형 텍스트를 구현할 때 과거에는 Media Query 분기점을 하드코딩했으나, 새로 추가된 CSS Comparison Functions(비교 함수)를 활용하면 하나의 수식으로 해결 가능하다. 이때 단순히 Viewport 너비에 따라 Font Size를 가변적으로 계산해서는 안 된다. WCAG를 준수하기 위해 텍스트 렌더링은 다음 두 가지 조건을 통과해야 한다.1. WCAG 1.4.4 Resize Text. 보조 기술 없이 텍스트를 최대 200%까지 크기 조정할 수 있어야 한다. 여기서 Input(입력값)이 브라우저의 Zoom 레벨이라는 점이 중요하다. 사용자가 브라우저를 확대했을 때, 렌더링 된 텍스트는 그에 비례하여 물리적으로 커져야 한다. Smashing Magazine의 'Addres..

함수의 호출과 참조 전달의 차이(feat: React use)

서론React의 use Hook을 공부하던 중 Promise를 cache하는 법에 대해 살펴보다 함수의 호출과 실행에 대해 의문을 가지게 되었다. 함수의 호출과 참조를 구분하는 것은 react application 최적화에 매우 중요하다eg:const [a,seta] = usestate(function())// Below: lazy Initialization(both works same)const [a,seta] = usestate(function)const [a,seta] = usestate(()=>{}) 이 글에서는 함수의 참조와 실행의 차이에 대해 알아보고, use hook Promise cache에 대해 간략하게 알아본다.함수의 호출과 실행의 차이 먼저 JavaScript에서 참조를 전달하는 것과..

transition과 concurrent render

서론 React의 useTransition hook은 React 18에서 도입된 concurrent rendering의 핵심 기능 중 하나로, 상태 업데이트를 우선순위가 낮은 업데이트로 처리할 수 있게 해준다. 이를 통해 UI의 응답성을 유지하면서 백그라운드에서 느린 렌더링 작업을 처리할 수 있다. transition은 lane 시스템을 활용해 time slicing을 가능하게 하며, 사용자 입력 같은 우선순위가 높은 업데이트를 먼저 처리하고 오래된 transition 결과를 폐기함으로써 deferred UI를 가능하게 한다.Concurrent Rendering과 Transition의 동작 원리 React 18에서 도입된 concurrent rendering은 time slicing을 통해 장시간의 렌더..

웹 프론트엔드 성능 지표: RAIL, Core Web Vitals

서론 웹 프론트엔드가 발전함에 따라 성능을 측정하고 기준 또한 정교해지고 있다. 2015년 구글 Chrome 팀은 사용자 중심의 성능 모델인 RAIL을 발표하며 성능의 목표치를 인간의 인지 능력에 기반하여 제안하였다. 이후 2020년 5월, 구글은 웹사이트의 사용자 경험(UX)을 정량적으로 측정하기 위한 가이드라인인 Web Vitals를 발표하였고, 그중 핵심이 되는 지표를 Core Web Vitals로 정의하여 검색 순위에 반영하기 시작했다. 본 글에서는 RAIL 모델의 개념과 현대의 Core Web Vitals(LCP, INP, CLS) 지표에 대해 얘기해보고자 한다.RAIL 모델 RAIL 모델은 사용자가 성능을 인지하는 방식을 기반으로 Response(응답), Animation(애니메이션), Idl..

TypedArray에 대하여

서론 1년 전 Node.js contribution을 하던 중 array를 TypedArray로 변경하여 100% 이상의 성능 향상을 가져온 PR 두 개를 본 적이 있다. 이에 TypedArray와 ArrayBuffer에 대해 자세히 알아보고자 한다.Preliminaries: ArrayBuffer와 일반 배열의 메모리 구조 TypedArray를 이해하기 전에, 먼저 ArrayBuffer에 대해 알아보자. ArrayBuffer는 JavaScript에서 고정 크기의 연속 메모리 블록을 나타내는 객체다. 이는 바이너리 데이터를 효율적으로 저장하고 계산하는 자료 구조로 TypedArray나 DataView 같은 view를 통해 접근할 수 있다. ArrayBuffer 자체는 단순한 메모리 버퍼로, 생성 시 크기가..

Staking Context와 Position, z-index 그리고 React Portal

서론 Fe 개발자라면 한번쯤은 CSS에서 position: fixed 요소가 스크롤을 따라오지 않거나 z-index가 제대로 먹히지 않는 현상을 경험했을 것이다. 대부분의 개발자는 “z-index를 더 높이면 되겠지”라고 생각하지만, 실제로는 해결되지 않는다. 이 문제의 원인은 stacking context이며, 특히 transform, opacity, filter 같은 속성이 새로운 stacking context를 만들기 때문이다.Stacking Context란 Stacking Context는 HTML element들을 3차원적으로 바라보는 개념이다. 우리가 평소 생각하는 X축(가로)과 Y축(세로)에 더해 Z축(깊이)이 추가된다고 이해하면 된다. 이 Z축이 바로 어떤 element가 다른 요소 위에, ..

브라우저에게 양보하기

Intro 브라우저의 main thread를 막으면 안 되는 이유에 대해서 다들 알고 있을 것이다. 브라우저 main thread를 막게 되면 브라우저는 freeze되어 user interaction을 처리 할수도, paint 작업을 할 수 없게 되어 사용자에게 높은 응답성을 제공할 수 없게 된다. 그러나 웹사이트를 만들다 보면 실행하는데 시간이 오래 걸리는 작업이 발생할 수밖에 없다. 이럴 때 어떻게 하면 사용자에게 높은 응답성을 제공할 수 있는지에 대해 말하고자 한다.Preliminaries 먼저 브라우저에게 양보하는 방법에 대해 알기 위해서는 event loop에 대한 명확한 이해가 필요하다. event loop란 자바스크립트가 실행되는 동안 main thread에서 수행할 작업을 관리하고 순차적으..

Redux의 동작 원리

서론 Redux를 사용한 지 1년이 되었다. 회사 입사 전에는 recoil 혹은 useContext만 사용했었는데 회사에서 redux를 사용하면서 redux의 동작원리에 대해 궁금해지게 되었다. 이 글은 회사에서 redux를 사용하면서 공부해 본 redux, react-redux의 동작원리에 대해 간략하게 다루어본다. 코드이해를 돕기 위해 주석과 에러처리 부분, 몇몇 함수들은 제거하였다. 또한 이 글에선 redux store, provider를 최상위 컴포넌트에서 사용하는 경우만 다룬다.Redux 먼저 간단하게 redux의 store부터 보자. // https://github.com/reduxjs/redux/blob/master/src/createStore.tsexport function createS..