export const Button = styled.button( { borderRadius: 1, }, { variant: { primary: { backgroundColor: "red", }, muted: { backgroundColor: "gray", opacity: 0.5, }, }, size: { small: { fontSize: 2, }, big: { fontSize: 4, }, }, } ); 흥미로운 css in js 인터페이스 첫번째 인자에는 공통 속성을 정의하며 두번째 속성에는 키 밸류 형태로 사용할 수 있는 동적 속성을 제공하고 있다. 사용 방법은 아래와 같다. ​ https://github.com/christianalfoni/stitches/tree/master/packages/sty..

엔터프라이즈 레벨에서 UI 구성요소 공유 서로 더 개방적이고 효율적으로 작업하고 혁신 속도를 가속 중복된 작업, 불필요한 커뮤니케이션을 제거 조직이 성공할 수 있는 기능을 생산 조직에 공헌할 수 있도록 유도 service worker 생명주기 RTL 사용법 - using msw instead of fetch mock (feat. msw) - 핵심은 fetch에 대한 테스트 코드와 expect 구문을 작성할 필요없고 fetch 세부스펙에 대해서 그다지 신경쓰지 않도록 만드는 것. recoil 소개 Jamstack 5가지 오해 Super Linter - github action (훌륭한)DX 개발자 경험이란 - 시간과 인지력을 본질적인 문제 해결에 더 집중할 수 있도록 만드는 개발자 경험 - 쉽고 장황하지 ..

조직이 더 빠르게 움직이기 위해서 많은 것들을 생각해봐야 한다. 애자일하지 못하게 만드는 수 많은 장애요소들이 존재할 것이다. 가장 먼저해야 할 일은 장애요소들이 무엇인지 인지하는 것. 장애요소 중 대표적으로 커뮤니케이션 미스가 있다. 조직의 구성원이 많아지고 당연한 직군들이 존재한다면 커뮤니케이션 미스는 자연스레 증가할 수 밖에 없다. 미스를 줄일 수 있는 방법은 사람들을 줄인다. 물론 일도 줄여야 한다. 우리가 인지할 수 있는 것들을 줄여 나간다면 집중도와 업무 진행 속도는 높아진다. 도구 업무를 진행하면서 사용하는 도구의 수가 10개보다 3개인 경우 우리는 더욱 집중하기 쉽다는 것을 생각해 볼 수 있다. 구글 닥스, 캘린더, 지라, 콘플루언스, 스프레드 시트, 피그마, 깃허브 등등... 각각의 도구..

갯츠비를 이용하여 SSG 통해서 웹 서비스중 클라이언트에서만 작동하는 페이지를 구현하였다. 문제는 여기서 발생 웹서버 없이 정적 파일 호스팅으로만 웹을 서비스하므로 정적 파일이 없으면 클라이언트 사이드에서만 작동하는 URL로는 접근할 수 없다. 예를 들어 /app/admin 같은 경우 /app/admin/index.html 파일이 존재한다. 그 안에서 Router를 통해서 하위 패스를 서비스한다면 /app/admin/users 같은 경우는 직접 브라우저를 통해서 바로 접근할 수 없다. /app/admin/users/index.html 파일은 갯츠비가 만들어주지 않기 때문이다. src/pages/app/admin/index.js // pages 폴더 안에 작성되지 않은 오직 클라이언트 사이드 경로 : 브라..

일하면서 연구원 같이 집중력 있게 제품을 개선하고 향상시킬 방법들을 찾아보고 적용하는 시스템으로 일하고 싶다. 일종의 연구원처럼. 하지만 실상은 공장의 생산라인에서 제품을 만들고 있는 일개 노동자 처럼 느껴질 때가 있다. 개인적으로는 연구원으로써 일하고 싶지만 제품 라인의 노동자 위치에서도 일하며 이 두 포지션을 스위칭 하면서 일할수 밖에 없다고 생각한다. 문제는 이 두 가지 위치중 제품 라인에 들어설 때가 많다는 것이다(비즈니스를 처리해야하기 때문에? 다른 팀이나 직군에서 무언가를 요구하기 바빠서?). 그렇다면 개발자 스스로의 역량이 저하될 뿐만 아니라 제품도 품질이 저하된다. 실험실에서 제품 질을 향상시키기 위해서 어떤 기술들을 걷어내고 도입해야 하는지 분석하고 실험해 보는 반복적인 행위가 필요하다...

웹 스토리지 사용에 관한 지침 - 앱 및 파일 기반 컨텐츠를 저장하려면 cache storage API 사용 - 그 외의 데이터는 indexedDB with idb - session/local storage, cookie 등은 특수성에 맞게 사용되어야 하며 일반적인 data 저장용으로는 권장하지 않음 Chromatic 2.0 - UI를 위한 코드 검토 with storybook useWorker for React webworker redux-toolkit - react redux의 더 쉬운 작성 react concurrent mode - 마이그레이션을 위한 strict mode, createRoot 사용... 그리고 이해를 도와주는 예제 코드 React Testing Library 일반적인 실수 maje..