Dev Blog

프론트엔드 웹 성능 최적화 조사 리액트 성능 최적화, 500ms 에서 1.7ms 까지 : 그 여정과 체크리스트 https://ykss.netlify.app/translation/500ms-to-1.7ms-in-react:-a-journey-and-a-checklist/ 퍼포먼스 개선의 중요성 https://web.dev/why-speed-matters/ 토스 UI 성능 최적화 https://ui.toast.com/fe-guide/ko_PERFORMANCE 프론트앤드 웹 성능 최적화 가이드 - 성능 지표, 데이터 로드 최적화 https://www.stevy.dev/frontend-web-performance-guide-1/#:~:text=웹 프론트앤드 성능 개선,의 실적으로도 이어진다. 웹성능 분석 도구 ..

리코일의 핵심 컨셉 - React 내부상태만 이용 - 작은 Atom 단위로 상태관리 - 순수함수 Selector - 상태끼리의 상호의존성 - 읽기전용과 쓰기전용 Basic Concept 1. Atom 이 하나의 상태의 단위이며, 상태를 전역에서 관리할 수 있다. const fontSizeState = atom({ key: 'fontSizeState', default: 14, }); function FontButton() { const [fontSize, setFontSize] = useRecoilState(fontSizeState); return ( setFontSize((size) => size + 1)} style={{fontSize}}> Click to Enlarge ); } 2.Selector S..

semantic versioning Semantic versioning (aka SemVer), is a widely adopted version scheme that uses a sequence of three digits (Major.Minor.Patch), an optional pre-release tag and optional build meta tag. backward-incompatible change increments the major number new functionality that is backwards compatible API additions/changes increments the minor number simple bug fix to existing functionality..

Essential addons There are many third-party addons as well as “official” addons developed by the Storybook core team. Docs Controls Actions Viewport Backgrounds Toolbars & globals Measure Outline Docs Storybook gives you tools to expand this basic documentation with prose and layout that feature your components and stories prominently. Document component usage and properties in Markdown npm inst..

JSON stands for JavaScript Object Notation. A JSON file has .json as its extension and the data inside are represented in a key:value pair, just like a traditional JavaScript object. { "key1": "value1", "key2": "value2", "key3": "value3", "key4": 7, "key5": null, "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"], "favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"} } Accepted JSO..

Storybook은 UI 구성 요소를 위한 사용자 인터페이스 개발 환경으로, 개발자가 독립적으로 구성 요소를 만들고 격리된 개발 환경에서 인터랙티브하게 구성 요소를 보여준다. Storybook is a JavaScript tool that allows developers to create organized UI systems making both the building process and documentation more efficient and easier to use. 4가지의 솔루션 Makes it easy to build components in isolation, outside of your app. Increases developer awareness of existing components..

Why use Storybook? Storybook helps you document components for reuse and automatically visually test your components to prevent bugs. Extend Storybook with an ecosystem of addons that help you do things like fine-tune responsive layouts or verify accessibility. Install Storybook # Add Storybook: npx sb init 📦 Install the required dependencies. 🛠 Setup the necessary scripts to run and build Story..

What is Service Worker: A service worker is a script that runs independently in the browser background. On the user side, it can intercept its network requests and decide what to load (fetch). Service workers mainly serve features like background sync, push notifications and they are commonly used for’offline first’ applications, giving the developers the opportunity to take complete control ove..