npm
-
1. 디자인시스템 - Rollup을 사용하여 Storybook npm 배포 및 사용Project/Figma+Storybook 2023. 11. 10. 10:27
이번분기 최대 목표는 디자인 시스템을 어떻게 만들것이가? 개발 및 디자인팀과의 협업을 어떻게 할것인가에 대한 프로토타입 정도가 목적임으로 방향을성을 찾기위한 테스트 정도록만 작업하도록 해보겠다. 작업방향 및 고려사항 npm에 올려 사용할 목적임으로 번들을 최소화 (Create React App 미사용) Storybook을 컴포넌트 관리 및 chromatic 사용 검토 (Storybook 전용 서버 검토) TypeScript 기반의 React 개발환경 구축 및 TypeScript가 아닌것도 사용 가능하도록 Atomic 하게 만들되 각 프로젝트에서는 어떤식으로 사용할 것인가 Page별 Component들은 어떤식으로 관리할 것인가? Figma에서 수작업이 아닌 자동으로 컴포넌트를 쉽게 가져올수 있는 방법 c..
-
npm/yarn 패키지 배포 및 사용해 보기Language/npm,yarn 2023. 10. 31. 17:34
간단히 body의 background색상이 변경되는 샘플코드를 작성하고 npm packages로 배포하는 방법을 알아보자. 1. 샘플코드 작성 1.1. 리액트 프로젝트 생성 # 리액트 프로젝트 생성 $ npx create-react-app test-npm $ cd test-npm $ cd src/npms 1.2. background 변경하는 use hook 생성 export const useClickBgColor = (e) => { const { target: { value } } = e; document.body.style.background = value; } 1.3. 사용코드 작성 import React from 'react'; import ReactDOM from 'react-dom/client'..