노력하는 개발자 노력하는 개발자

전체 글

• 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 "@..

  Read More
• npm deprecat 상태를 다시 살리는 방법

  Language/npm,yarn 2023. 11. 13. 15:25

  package.json 수정 { ... "name": "my-package", "version": "1.0.0", "deprecated": false ... } 게시 $ yarn publish --access public $ npm undeprecate my-package

  Read More
• 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. 확인..

  Read More
• 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 ..

  Read More
• 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..

  Read More
• yarn storybook error const stringWidth = require('string-width')

  Project/Figma+Storybook 2023. 11. 9. 17:47

  react에 rollup.js를 설정하고 storybook을 설치하고 $ yarn storybook 했더니 에러가 발생하였고, 해결방식을 정리해 본다. 이슈 URL https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 [Bug]: string-width dependency stops storybook from executing · Issue #22431 · storybookjs/storybook Describe the bug I am using Storybook 7 with the automatically generated vite-react setup. When installing Storybook 7, yarn yi..

  Read More
• plist 여러개 일때 Podfile 설정

  Language/iOS,AOS 2023. 11. 3. 18:03

  plist는 분리했는데 pod update 하면 메인 plist 파일에만 Embed Pods Frameworks 등이 생성되는 문제를 발견 하였다.처음에 몰라서 복사해서 다시 생성했는데 시간이 어마무시하게 걸린다.찾아보니 pod update 할때 Targets에 맞게 라이브러리를 설치하는 방법을 찾아서 정리해 놓는다.  PodfilePodfile을 설정 해 두고 pod update하면 각각의 프로젝트에 pod 라이브러리들이 추가된다.use_frameworks!def sharepods pod 'FirebaseAnalytics' pod 'FirebaseMessaging' pod 'ReachabilitySwift' # Gif pod 'Gifu' # 카카오 pod 'KakaoSDKComm..

  Read More
• Ruby 버전 업데이트

  ETC/MacOS,Rancher 2023. 11. 3. 12:29

  Homebrew 설치 $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" $ brew --version Homebrew 4.1.18 Homebrew/homebrew-core (git revision 58de0d98e4e; last commit 2023-11-03) Homebrew/homebrew-cask (git revision e52e8a2e21; last commit 2023-11-02) Homebrew 최신버전 업데이트 $ brew update rbenv 설치 $ brew install rbenv ruby-build rbenv Ruby 설치 및 관리 Ruby 설치 가능한 버전 ..

  Read More