FE
-
FE - Rollup Js 성능DevLog 2023. 4. 6. 00:06
Abstract Rollup은 Bundler의 일종이다. (Webpack, Parcel 등이 있다.) 핵심은 ES6 기반의 Bundler (코드 중복 및 unused code 제거에 탁월함), Build Time 하지만 Rollup은 devServer, Configuration 등에서 Parcel과 Webpack의 중간점 (여기서 Wepack은 쌩짜이다. SWC를 적용하지 않은) Tree Shaking Webpack < Rollup 코드를 정적으로 분석하여 필요하지 않은 코드는 제외시키는 것 // cjs - 실제로 aaa만 사용하나, utils 객체 전체를 가져오게 됨 const utils = require("./utils") utils.aaa ~ // esm - aaa 만 가져오게 됨 import { ..
-
FE - 성능 최적화에 대한 고찰(w. LightHouse)DevLog 2023. 3. 7. 20:48
최근에 FE 관련해서 전문가가 되려면 어떻게 해야할까? 라는 주제로 생각에 빠진 적이 있었다. 내가 생각하기에 FE의 주된 역할은 사용자와 서비스 간의 상호작용을 원활하게 하는 것이다. 그렇다면 '사용자와 서비스 간' 상호작용을 원활하게 한다는 것은 무엇일까? 간단하게 '사용자가 서비스를 사용하는데 이해하기 쉽게, 사용하기 쉽게' 만드는 것이다. FE에서 저러한 문제를 하기 위해서는 몇가지 문제점을 해결할 필요가 있다. (Web 의 경우) 1. 사용자가 빠르게 화면을 볼 수 있어야 한다. (FCP) 2. 사용자가 빠르게 서비스와 빠르게 상호작용할 수 있어야 한다. (TTI) 3. 사용자는 화면이 완성되어 가는 모습을 체감할 수 있어야 한다(SI) 4. 사용자는 빠르게 서비스의 주요 콘텐츠를 볼 수 있어야..