일단해보는거지

[UI 컴포넌트 라이브러리] 1. Typescript로 React 컴포넌트 만들고 Rollup으로 빌드하기 💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예제로 사용할 소스코드가 있을 것입니다. 해당 코드들 위에서 아주 간단한 Input 컴 mitchellglobal.tistory.com 이번에는 1편에 이어서 빌드한 소스를 만들어둔 소스를 필요한 곳에서 사용할 수 있도록 NPM registry에 배포하고 프로젝트에서 불러와 사용하는 방법을 공유하겠습니다. 전체적으로 다음과 같은 내용을 학습하게 되겠습니다. 오픈소스로 라이브러리 배포하기 Private으로 라이브러리 배포하기 Github Action으로 배포 자동화하기 Docker 환경에서 Privat..

💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예제로 사용할 소스코드가 있을 것입니다. 해당 코드들 위에서 아주 간단한 Input 컴포넌트를 타입스크립트로 작성하고 Rollup으로 빌드하도록 하겠습니다. 01. Typescript 셋팅하기 (tsconfig) 먼저 타입스크립트 패키지를 설치합니다. npm install -D typescript​ tsconfig.json 파일을 루트에 생성합니다. // tsconfig.json { "target": "ES5", "lib": [ "DOM", "DOM.Iterable", "ESNext" ], "jsx": "react-jsx", "jsxImportSource": "@emotion/react", "module"..

회사에서 운영하는 서비스가 늘어갈수록 UI에 대한 반복작업은 점차 많아지게 됩니다. 곧 디자인시스템의 필요성이 나타는데요. 여러가지를 아우르는 디자인시스템에서 개발자들은 특히 UI 컴포넌트 라이브러리에 책임을 두고 있습니다. 도입하게 된다면 각 서비스에서 UI에 관한 코드를 작성하는 효율도 높아지고 유지보수도 간단해질 것입니다. 다음 기술들과 함께 시작해보겠습니다. Typescript, React Emotion: CSS in JS 라이브러리로 컴포넌트의 모든 스타일에 적용합니다. Rollup: 모듈 빌드와 트리쉐이킹에 특화된 빌드툴을 사용합니다. NPM: 빌드된 코드를 어디서든 사용할 수 있게 배포합니다. Storybook: 테스팅, 협업, 문서화 등의 기능으로 디자인시스템 구축을 쉽게 시작할 수 있습니..