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

Development

• 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
• DT_TOOLCHAIN_DIR cannot be used to evaluate LIBRARY_SEARCH_PATHS, use TOOLCHAIN_DIR instead

  Language/iOS,AOS 2023. 11. 3. 12:21

  Xcode Version 15.0.1 업데이트 이후에 앱이 실행이 되지 않고 오류가 발생하였다. DT_TOOLCHAIN_DIR cannot be used to evaluate LIBRARY_SEARCH_PATHS, use TOOLCHAIN_DIR instead 코코아팟 업데이트 xcode에서 업데이트 된 대응코드가 들어가 버전으로 코코아팟 버전을 올려 주어야 한다. $ sudo gem install cocoapods 개발중인 프로젝트에서 라이브러리 업데이트 $ pod update 버전 확인 https://github.com/CocoaPods/CocoaPods/issues/12012 "Error 'DT_TOOLCHAIN_DIR cannot be used to evaluate LIBRARY_SEARCH_PA..

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

  Read More
• chromatic에 git action 설정

  Project/Figma+Storybook 2023. 10. 30. 15:36

  push 후 chromatic에 자동 배포되도록 설정해보자! 작업 흐름은 commit을 push한다던가 풀 리퀘스트를 만드는 것 같은 이벤트에 의해 트리거된다. 상호작용 테스트와 접근성 검사를 Jest로 수행합니다. 시각적 요소 그리고 구성 테스트를 크로마틱(Chromatic)으로 수행합니다. 사용자 흐름(user flow) 테스트를 사이프레스(Cypress)로 수행합니다. 1. chromatic.yml 파일 생성 https://www.chromatic.com/docs/github-actions/ Introduction • Chromatic docs Chromatic is a cloud based toolchain built around Storybook to help teams develop robus..

  Read More
• Storybook Webpack5 오류

  Project/Figma+Storybook 2023. 10. 27. 16:26

  깃에 있는 문서를 보면 create-react-app는 webpack5와 호환되지 않는다. (현재는) Storybook의 webpack5 지원을 시도하기 전에 프로젝트가 Webpack 5에서 작동하는지 확인하십시오. 예를 들어 create-react-app v4(CRA v4)는 webpack5와 호환되지 않으므로 CRA 프로젝트가 있는 경우 다음이 필요합니다. webpack5를 사용하는 CRA v5로 업그레이드합니다. 프로젝트에서 webpack5를 확인한 후에는 새로 설치하거나 업그레이드를 수행할 수 있습니다. 필자는 아래와 같이 webpack5의 종속성을 추가하였다. SB에도 webpack4 종속성이 포함되어 있으므로 webpack@5 dev 종속성은 webpack5를 끌어올리도록 강제한다. $ npm..

  Read More
• chromatic 배포 세팅

  Project/Figma+Storybook 2023. 10. 26. 17:46

  https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community. storybook.js.org chromatic 회원가입 아래 사이트 접속 후 회원가입을 진행한다. https://www.chromatic.com/ Automatically review, test, and document Storyboo..

  Read More