SOSOLOG

📝 소소하게 끄적이는 개발로그

렌더링 성능 개선(2) — 합성 애니메이션 사용

이번 글에서는 성능 개선의 관점에서 렌더링을 다시 살펴보려 한다. 렌더링 성능 최적화는 어떻게 접근해야 할까? 웹 성능 최적화는 가장 빠른 렌더링 패스를 구현하는 것이 아니다. 렌더링 과정은 전적으로 브라우저에서 진행되는 것으로, 렌더링 과정 자체를 개선할 수는 없다. 따라서, 성능 ‘개선’의 접근 방식은 렌더링 과정 자체의 개선이 아니라 과정 중 병목이…

렌더링 성능 개선(1) — 렌더링 과정 이해하기

들어가며 최근 개인 프로젝트의 렌더링 성능을 개선하며 브라우저 렌더링 과정에 대해 정리하고 정확히 무엇이 성능 저하의 원인인지, 어떻게 개선될 수 있었는지 정리해봤다. 렌더링 파이프라인 렌더링 성능을 개선하려면 먼저 렌더링 과정과 이에 관여하는 요소를 대해 알아야 한다. 이 글에서 다룰 내용은 Blink엔진 기준이며, RenderingNG 글과 2020년…

Deploy 2022

매년 회고 글에서 ‘올해는 특별했다.’라고 적는 것 같지만, 이번 해는 좀 더 그렇다. 일(work)과 커리어, 개인의 삶에서 크고 작은 변화가 있었다. 여러 가지 변화 중 기억에 남는 몇 가지 키워드들로 회고를 작성했다. flex 2.0과 협업에 대한 고민 현재 flex 제품은 팀에 합류했던 시점과 다르다. 2021년 8월부터 ‘2.0 프로젝트’라는 이…

Design System Decision Record

이 글은 FEConf2022 디자인 시스템, 형태를 넘어서 발표에서 다루지 않은 linear라는 Design System에 대한 고민과 결정에 대한 글입니다. Table of Contents Principle Problem from Principle Interface Compound Component Headless 예시 1. Trigger 예시 2. 다…

Scoped Context

React Context API는 React 컴포넌트 트리 내의 전역적(global)인 데이터를 공유할 수 있는 방법이다. Provider가 선언된 컴포넌트 기준으로 하위 컴포넌트에서는 해당 Context의 값을 사용할 수 있다. Provider 하위컴포넌트에서 Context를 사용할 수 있다는 것은, “Consumer는 가장 가까운 Provider기준으…

Select 컴포넌트

Intro 어떤 디자인 시스템에서 컴포넌트를 제공한다면, 어떤 기능들을 기대하시나요? 이 글에서는 Select컴포넌트에게 바라는 기능을 중심으로 구현 방법과 예제 코드를 설명합니다. ⚠️ 이 글에서 소개되는 코드는 모두 수도코드(pseudo code)입니다. 동작여부보다는 소개하고자하는 맥락을 중심으로 작성되었습니다. Table of Contents Wh…

그 많던 import React from ‘react’는 어디로 갔을까

이 글에서는 React 17릴리즈에 포함되었던 JSX Transform의 RFC문서를 살펴보며 이 변경사항이 어떤 의미를 가지고 있는지 정리해 보았습니다. 중간중간 내용에 대한 첨언과 약간의 추측을 덧붙였습니다. 관련하여 피드백이 있으시다면 댓글로 남겨 주시면 감사하겠습니다. 발단 React17은 2020년 10월 20일에 릴리즈되었다. 이 글이 릴리…

Deploy 2021

작년에 썼던 이야기 올해를 돌아보니 작년 회고를 쓸 때 생각했던 방향과는 꽤 다른 방향으로 걸었다. 작년에 생각했던 큰 목표 중 하나는 Infra관련 공부였는데 올해 새로운 곳으로 이직하고 정신없이 보내다 보니 회고를 쓸 즘에야 이 단어를 다시 떠올리는 걸 보면 여러 가지 우선순위 뒤쪽에서 오래 방치해뒀다는 뜻이겠다. 새로운 곳은 당연히 시스템이 다르고,…

Tree Shaking과 Module System

들어가며 어플리케이션은 개발자가 직접 작성한 코드, 외부 라이브러리 등 다양한 코드조각들로 이루어져 있습니다. 어플리케이션이 복잡해질수록 번들 사이즈에 신경을 쓰게 되는데요, 이때 필요한 코드만 남기기 위한 작업, 흔히 Tree Shaking이라고 불리는 과정이 수반되어야 합니다. 이 글에서는 Tree Shaking에 대한 기본 개념과 Tree Shak…

immutable.wedding 개발후기

2021년 10월 23일 결혼을 앞두고 개인적으로 사용할 모바일 청첩장과 함께 immutable.wedding이라는 모바일 청첩장 템플릿을 만들었습니다. COVID-19상황이 악화되면서 결혼식은 취소했지만, 청첩장 개발 후기를 적으며 아쉬운 마음을 달래봅니다. 🔗 GitHub Repository 🐝 나의 immutable.wedding 진행방식 같이 사…