전체 글

블로그를 새롭게 단장 했습니다! https://developertap.github.io/dev-tap/

지난번 브라우저 최적화라는 주제로 [브라우저 최적화(1)] CRP의 이해와 브라우저 리소스 식별 방법 글로 잠깐 소개한 적이 있다. 오늘은 그보다 딥 다이브할 수 있는 주제를 가져왔다.개요우리가 자주 마주하는 브라우저 렌더링 프로세스의 내용은 위 그림 처럼 자주 접해왔다.요약: HTML에서 DOM 트리 생성하고, CSS 받아서 CSSOM 생성하고, 이를 합져서 자바스크립트를 실행해서 렌더 트리를 구성하고, 레이아웃 실행 후 페인트 처리가 되고 마지막에 디스플레이에 짜잔~! 하지만 우리는 이론적으로 렌더링 플로우가 위 이미지처럼 흘러가고 있다 정도만 이해하는 경우가 대다수다. 실제로 브라우저라는 애플리케이션에선 저 플로우를 수행하기 위해 엄청나게 많은 컴퓨터 내부 작업들이 이루어진다.프론트엔드 개발을 하면..

지난 Typescript 모듈 해석 방식 - tsconfig 설정과 실행 환경에 따른 차이 포스팅 다음 글로, Typescript의 중요한 옵션 중 하나인 Moduel Resolution에 대해서 알아보려고한다. 먼저 Module Resolution이 무엇인지, 이를 해석하는 방식이 어떻게 되고, 다양한 모듈에 대한 대응 방식 등에 대해 정리해보았다. Module Resolution이란 무엇일까?Typescript는 import한 파일을 실제로 어디서 찾는지 결정하는 과정이 어떻게 될까?import sayHello from "greetings";sayHello("world"); greetings는 어디에 있을까?node_modules/greetings/index.js일까?./greetings.ts일까?...

이번 글에선 타입 스크립트에서 modules의 기초가 되는 Module Resolution이 어떠한 배경으로 나오게 되는지 알기 위해 CommonJS(CJS)와 ECMAScript 모듈(ESM)의 차이, 그리고 타입스크립트가 모듈을 어떻게 해석하고 변환하는지 상세 다룰 예정이다. 자바스크립트에서의 모듈 개념의 발전을 시작으로, 타입스크립트가 모듈을 해석하는 과정과 트랜스파일링(컴파일 시점 변환) 시 고려해야 할 사항을 설명한다. 또한 Node.js와 번들러(Webpack 등)에서의 모듈 실행 환경의 차이점, 그리고 타입스크립트에서 사용할 수 있는 다양한 모듈 설정 값들(module 옵션) 에 대해서도 분석해보자. 배경자바스크립트는 브라우저에서만 실행되던 초기에는 모듈이 없었지만 HTML에서 스크립트 태..

창립이래 최초의 디자인시스템 구축하기(feat. 30년만에!)의 2편인 이번에는 시스템 구축을 위한 설계 과정, 사용법 그리고 시스템의 확장에 대한 부분에 대해 소개한다. 시스템 설계에 있어서 가장 기반이 되는 Foundation을 지정하게 되는데, 그중 디자인 토큰은 디자인 시스템 구축에 있어서 기반이 되고 공수가 많이 드는 작업 중 하나다. 다음으로는 설계한 토큰을 실제 컴포넌트에 어떻게 적용하고 피그마에도 활용할 수 있는지 확인하고 마지막으로 컴포넌트의 다형성(Polymorphism)을 위해 Type-Safe한 인터페이스를 만들어 더 확장성 있는 디자인 시스템을 구축하는 단계를 살펴보자. Foundation디자인 토큰 설계 시 아래 4가지를 고민하여 설계한다.브랜드 컨셉을 따르는 컬러와 폰트에 대한..

이번 포스팅은 회사 창립 이래 30년 만에 최초로 디자인 시스템을 본격적으로 구축하고, 사내 시스템으로 배포하기까지의 과정과 기술적으로 어떻게 구상하고 적용했는지에 대해 두개의 포스팅으로 공유하고자 한다.사실 최초라고 작성하긴 했지만, 재작년에 작성했던 "Storybook으로 퍼블리셔, 디자이너와 협업 그리고 디자인 시스템 구축까지"라는 글의 주제로 포스팅한 적이 있었다. 하지만 이때는 사내 시스템으로 배포에는 실패하고, 제품의 공통 컴포넌트로 사용하는 수준에서 그쳤다. 왜냐하면 사내에서 디자인 시스템을 구축하고 왜 이걸 하는지 타당한 이유가 부족했다.그래서 지난번의 디자인 시스템 구축에 실패했던 이유와, 이번에는 성공했던 이유 그리고 소통의 장애를 극복한 이야기에 대해 풀어보고자 한다. 최초의 디자인 ..