loplat ui 썸네일형 리스트형 UI library에서 spacing system props 구현하기 프로젝트: loplat UI 키워드: system props, spacing props, typescript 상황 컴포넌트 종류와 상관없이 모든 컴포넌트가 공유하면 좋은 prop이 있다. UI component에 margin이나 padding 값만 추가하고 싶은 경우가 많은데, 사소한 spacing css 때문에 class를 부여하거나 styled API를 사용하는 것은 수고롭다. loplat UI를 사내 프로젝트에 적용하면서 spacing(margin, padding) prop이 필요함을 느꼈기 때문에 spacing system prop을 만들고 적용하고자 한다. 해결방법 spacing system prop은 아래와 같이 사용 가능하다. // margin-top: 8px; margin-bottom: 8.. 더보기 Storybook에서 user interactions 테스트하기 프로젝트: loplat UI 키워드: storybook addon interactions, Storybook test runner, mdx story, csf story, jest 상황 loplat UI에 있던 기존 jest test file들은 cli를 통해서 동작하며 테스트의 진행 과정을 눈으로 확인하기 힘들다는 단점이 있다. loplat UI는 말 그대로 비지니스 로직보다는 ui 자체가 중심이므로, 스토리북과 연동된 테스트를 실행하면서 테스트 진행 상황을 스토리북에서도 확인할 수 있으면 좋을 것이다. 새로 알게된 'Storybook Addon Interactions'와 'Storybook Test Runner'를 도입하는 과정을 소개하고자한다. 해결 과정 1 (storybook addon inter.. 더보기 JS library에서 cjs, esm format 모두 지원하기 프로젝트: loplat UI 키워드: CommonJS, ES Modules, loplat UI, package.json, npm, babel, jest, rollup 상황 loplat UI는 tree shaking을 지원하기 위해 cjs format을 버리고 esm format의 빌드 결과를 채택했었다.(번들링 최적화를 통해 import cost 줄이기(1)) 때문에 es6 문법을 기본적으로 이해하지 못하는 환경(Jest test, Next/SSR build)에서는 라이브러리를 es5 문법으로 transpile해야하는 번거로움이 있다. (Next.js는 'next-transpile-modules' https://www.npmjs.com/package/next-transpile-modules를 사용해야하고.. 더보기 이미지 용량 최적화하기(feat. picture tag, sprite image) 프로젝트: loplat UI, 채식 지도 키워드: picture tag, source tag, WebP, sprite image, naver map marker, image optimization 상황 1 loplat UI의 Spinner 컴포넌트는 용량이 큰 sprite image와 css 애니메이션을 통해 구현했다. (참고: css animation steps로 Spinner 구현하기) gif를 사용하지 않고 png로 구현했음에도 아직 이미지 용량이 크다는 생각이 들었다. WebP 형식을 사용하려다가 safari 브라우저에서 지원하지않아 보류했는데, 크롬에서라도 WebP 이미지를 지원하고자 한다. 해결방법 1 picture tag를 사용하면 browser/display마다 최적의 이미지를 제공할 수 .. 더보기 선언형 Portal, Modal 컴포넌트 구현하기 프로젝트: loplat UI 키워드: portal, createPortal, modal, createElement 상황 여러 프로젝트에서 Modal을 사용할 일이 많아 loplat UI에서 컴포넌트를 제공해주고자 한다. 렌더링부에서 container DOM과 children content만 선언하여 쉽게 react portal 기능을 사용할 수 있도록 하고자 한다. // 원하는 형태 children children 해결 과정 먼저 container와 chlidren을 prop으로 받아 createPortal을 실행하는 Portal 컴포넌트를 만든다. import React from 'react'; import ReactDOM from 'react-dom'; export interface PortalPro.. 더보기 storybook에서 웹접근성 검사하기(feat. storybook-addon-a11y) 프로젝트: loplat UI 키워드: storybook-addon-a11y, accessibility 상황 loplat ui의 컴포넌트들이 웹접근성을 잘 고려하고 있는지 확인하고 싶었다. 팀원의 도움으로 storybook a11y 관련 addon을 알게되었다.(https://storybook.js.org/addons/@storybook/addon-a11y) 각 컴포넌트의 웹접근성을 파악하고 개선하고자 한다. 해결방법 먼저 addon을 설치하고 addon 관련 global config를 설정한다. yarn add -D @storybook/addon-a11y 이 때, color-contrast(명암비)는 디자이너의 판단 하에 rule을 무시하기로 한다. 또한 a11y 속성과 관련된 'aria-*'과 'rol.. 더보기 Toast 컴포넌트 구현하기 프로젝트: loplat UI 키워드: Toast, class, setTimeout 상황 기존 loplat UI의 Toast 컴포넌트는 react-hot-toast 라는 라이브러리를 fork 한 후, 사내 디자인에 맞게 변형하여 사용하고 있었다. Toast 컴포넌트의 변경사항이나 버그가 있을 때 코드의 흐름을 이해하기 어려웠고, 필요한 기능에 비해 용량이 매우 컸다.(20Kb) 직접 Toast를 구현하는 것이 유지보수, 용량, 성능 모든 면에서 더 좋을 것이다. 해결 방법 아래의 예시 코드와 같이 Toast 를 App에서 렌더링하고, toast 인스턴스를 통해 함수를 트리거하는 것으로 설계했다. 'Toast' 컴포넌트와 'toast' 인스턴스를 연결하는 것이 구현의 핵심이다. ... toast.succes.. 더보기 svg mask fill 속성은 white로 지정하기 프로젝트: loplat UI 키워드: svg, mask, fill 상황 팀원분께서 IconButton이라는 컴포넌트를 개발하셨는데, 이상한 점이 있다고 하셨다. "svg에 border와 동일한 색상을 설정했는데 svg의 색상이 border색상보다 좀더 밝게 나타납니다." 실제로 확인해보니 border color와 svg fill 에 동일한 색상을 전달하지만, storybook 상에는 색상이 다르게 보이는 것을 확인했다. border-color: ${({ border }) => border.default}; svg path { fill: ${({ text }) => text.default}; } 해결 과정 개발자도구로 확인한 결과, svg path에는 정상적으로 fill 속성이 채워져있었다. fill의 색.. 더보기 이전 1 2 다음
