Development
-
5. 디자인시스템 - ESLint와 Prettier 설정Project/Figma+Storybook 2023. 11. 17. 16:46
중복되는 글인듯 하여 링크로 대체한다. https://dchkang83.tistory.com/226 ESLint와 Prettier 설정하기 1. ESLint 설치 및 사용방법 1.1. ESLint 설치 $ yarn add -D \ eslint \ @typescript-eslint/eslint-plugin \ @typescript-eslint/parser \ eslint-config-airbnb \ eslint-plugin-import \ eslint-plugin-jsx-a11y \ eslint-plugin-react \ eslint-plugin-react-ho dchkang83.tistory.com
-
yarn berry (yarn V2) VSCode 설정Language/npm,yarn 2023. 11. 17. 11:15
yarn berry를 설치하고 VSCode에서 프로젝트를 열게되면 아래와 같이 react등 import 해오는 모든 module들에서 에러를 접하게 되는데 VSCode에서 Extention을 설치해 주면된다. 1. ZipFS - a zip file system extension 설치 (참조) yarn PnP 모드에서는 패키지를 zip형태로 관리한다. 따라서 사용한 패키지의 원래 코드를 보기위해서는 (go-to-definitions 기능을 사용하기 위해서는) ZipFS와 같이 zip 저장소에 저장된 파일들을 바로 읽을 수 있는 extension을 설치해주어야 한다. 아래 extention을 설치하면 .vscode/extensions.json 파일 생성된다. 2. @yarnpkg/sdks 설치 (참조) ya..
-
yarn berry 도입 (yarn 1 -> yarn 2+)Language/npm,yarn 2023. 11. 16. 14:03
필자는 react + storybook + chromatic + typescript + scss + rollup 등으로 구성되어 있고 라이브러리를 npm까지 올리는 디자인시스템 프로젝트를 yarn berry로 변경해 보았다. yarn 버전 우선순위 순위 1 작업 디렉토리에 .yarnrc.yml 있을경우 ({project}/.yarnrc.yml 2 global yarnrc.yml yarn 버전 변경 (참조) yarn set version berry yarn set version classic yarn berry 버전으로 변경 1.1. 기존 의존성 제거 $ rm -rf node_modules $ rm -rf yarn.lock 2.2. yarn berry 변경 $ yarn set version berry 2...
-
4. 디자인시스템 - Storybook 및 Rollup scss 설정Project/Figma+Storybook 2023. 11. 15. 16:48
1. storybook에 scss 설정 Storybook은 Sass를 기본적으로 지원하지 않는고 실행 하거나 스크립트를 작성할 때 webpack을 사용하여 모든 코드를 묶는다. sass를 추가하려면 몇 가지 패키지를 추가하고 webpack 구성을 확장해야한다. 1.1. Sass 지원 추가를 위한 개발 종속성 추가 (참고) $ yarn add --dev css-loader style-loader resolve-url-loader sass sass-loader 1.2. addon-styling-webpack 추가 (참고) $ yarn add --dev @storybook/addon-styling-webpack 1.3. main.ts 설정 import type { StorybookConfig } from "@..
-
3. 디자인시스템 - npm에서 받아서 활용해보기Project/Figma+Storybook 2023. 11. 13. 10:46
앞서 설정한 디자인 시스템의 npm을 storybook 문서를 활용하여 테스트를 진행해 보자. 1. 디자인시스템 - Rollup을 사용하여 Storybook npm 배포 및 사용 2. 디자인시스템 - Storybook chromatic 배포 및 git 연동 3. 디자인시스템 - npm에서 받아서 활용해보기 3.1. 리액트 설치 $ npx create-react-app design-system-test-app --template typescript $ yarn create react-app design-system-test-app --template typescript 3.2. npm 라이브러리 설치 $ yarn add @djgundam/react-storybook-rollup-starter 3.3. 확인..
-
2. 디자인시스템 - Storybook chromatic 배포 및 git 연동Project/Figma+Storybook 2023. 11. 13. 10:30
1. GitHub에 소스 배포 (참고) 1.1. 원격저장소 만들기 1.2. 로컬 저장소 -> 원격 저장소 푸시 # gitignore 파일 생성 $ npx add-gitignore storybookjs,react,yarn # 저장소 초기화 $ git init # git이 관리할 대상으로 파일 등록 $ git add . # 파일상태 확인 $ git status # 변경 내역에 대한 메모와 함께 커밋 $ git commit -m "init commit" # 원격 저장소 추가 $ git remote add origin [원격저장소 주소] # 연결된 저장소 확인 $ git remote -v # 현재 브랜치 이름 확인 $ git branch # 원격 저장소 origin에 master 브랜치를 푸시한다. $ git ..
-
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..