Project
-
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..
-
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..
-
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..
-
리액트 & 스토리북 설치Project/Figma+Storybook 2023. 10. 26. 15:05
https://storybook.js.org/docs/react/get-started/install?ref=chromaticblog.ghost.io Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 리액트 프로젝트 생성 $ npx create-react-app test-design-system --template ko 스토리북 등록 $ cd test-design-sy..
-
디자인 시스템 & 스토리북 & 피그마란?Project/Figma+Storybook 2023. 10. 25. 17:16
제일 많이 쓰이는 `스토리북`+`피그마` 조합으로 리액트 컴포넌트용 디자인 시스템 구축 과정을 기록해 보자! 아자아자! Bard. 디자인 시스템 디자인 시스템은 재사용 가능한 UI 컴포넌트, 스타일 가이드, 디자인 원칙 등을 포함하는 시스템입니다. 디자인 시스템을 사용하면 개발자는 일관되고 품질이 높은 사용자 인터페이스를 보다 쉽게 구축할 수 있습니다. Bard. 스토리북 https://storybook.js.org/ Storybook: Frontend workshop for UI development Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for ..
-
iOS/WebView/Project - Firebase 푸시 알림#15Project/Swift+WebView 2023. 2. 3. 10:40
Swift 기반에 FCM(Firebase Cloud Messaging) 푸시 알림을 설정해 보자! 1. 파이어 베이스 설정 https://dchkang83.tistory.com/132 iOS/Xcode 14X - Firebase 푸시 알림 설정#1 Swift 기반에 FCM(Firebase Cloud Messaging) 푸시 알림을 설정해 보자! App Store 개발자 계정 생성 안드로이드는 상관 없지만 IOS는 App Store 개발자 계정이 없으면 진행이 불가하다고 한다. 먼저 https://firebase. dchkang83.tistory.com 2. 애플 개발자 & Xcode 설정 및 발송 https://dchkang83.tistory.com/133 iOS/Xcode 14X - Firebase 푸..
-
iOS/WebView/Project - 웹뷰 localhost 표시#14Project/Swift+WebView 2023. 2. 1. 19:18
IOS/Xcode 14X Swift5.7.2 WKWebView 에서 작업 진행 맥북 로컬호스트 아이피 확인 https://dchkang83.tistory.com/148 MacOS/맥북 ip 주소 확인 방법 방법1. 시스템 환경설정 맥북 -> 시스템 설정 네트워크 USB ~~ LAN 2 영역 클릭 방법2. 터미널 $ ipconfig getifaddr en0 $ ifconfig | grep inet dchkang83.tistory.com Const에 확인 한 로컬 아이피 주소로 변경해 준다. 로컬 웹서버 URL을 웹뷰에 노출되도록 해준다. 로컬 서버로 정상으로 나오는것이 확인 된다.
-
iOS/WebView/Project - 웹뷰 JS 양방향 통신#13Project/Swift+WebView 2023. 1. 20. 11:14
웹뷰를 이용한 하이브리드앱을 개발할 시 네이티브와 웹의 상호 작용하는 부분들이 생각보다 많습니다. 팝업 & 로그인 세션 & JWT 토큰 등 이벤트를 캐치해서 처리하는 경우 인터페이스를 정의해서 일련의 규칙을 정하여 개발하지 않으면 개발이 산으로 갈 수밖에 없고 유지보수도 상당히 어려울 것입니다. 이러한 부분들을 가능하게 해주는 부분들에 대해서 처리해 볼 것입니다. 기본적으로 WKUserContentController을 사용하여서 가능하며 코드로서 생성하는 것이 좋다고 합니다. 웹뷰 초기화 함수의 configuration속성을 사용해야 하는데 스토리 보드로는 해당 속성을 사용 못하기 때문입니다. 여러 사이트를 참조하여 아래 코드를 완성였습니다. 참조 블로그 님들 감사드립니다. MainViewControll..