# storybook
[Storybook] React Native iOS emulator에 storybook 띄우기
iOS 또는 android에서 storybook을 띄우는 방법을 알아보겠습니다.아래 코드를 보면 STORYBOOK_START이라는 flag가 있습니다. 참인 경우에는 storybook/index.js에 있는 설정 파일을 내보내며, 거짓인 경우에는 App 컴포넌트를 내보
짤막한 if(kakao)2020 세션 정리 1
일반적으로 블록체인에서 카드(NFT)를 만들 때는 기본정보(받은 시간, 받은 사람)와 속성정보(이미지, 장문의 글 등)를 분리하여 저장한다. 모든 정보를 블록체인에 저장하게 되면 네트워크에 부담이 커지고, 높은 비용이 발생하기 때문이다. 속성정보에 대한 URI는 기본정
[What's Dat?] React & Firebase 2주 프로젝트 후기 (feat. 코드스테이츠)
(언제나 그렇듯 아무말 주의, 격식없음 주의) 드디어 코드스테이츠에서의 첫 프로젝트(2주 프로젝트)가 끝났다! 망낳머머아허ㅏㅇ너ㅏㅇ나ㅇ 만감이 교차하는데 일단은 엄청 후련하고 엄청 뿌듯하다는 말이 절로 나온다. 코딩을 시작한지 3개월밖에 안됐다는
[Storybook] StoryBook을 이용한 컴포넌트 단위 개발 - 사용하면서 느낀 장단점들
Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized
.png?w=768)
컴포넌트 조립(확장)하기
원문링크원문의 제목은 'Assemble a composite component' 인데, 작은 컴포넌트를 엮어서 복합 컴포넌트를 만드는것을 칭하는 듯 하다.이 글에서는 Task 컴포넌트로 TaskList 컴포넌트를 작성한다.컴포넌트를 결합하고, 더 복잡해질 때 어떤 일이
Storybook 테스트 자동화
스토리북은 손쉽게 UI 시각 테스트가 가능하게 해준다. 개발을 진행하면서 UI 테스트를 위해 개발 작업을 중단하는 일이 발생하지 않게 도와주는데,이 단계가 완전히 '수동적'으로 진행되는 프로세스를 가졌기 때문에 결국 누군가는 일일히 각 테스트 단위를 클릭하며 오류
React 적응기 - 8
비주얼 테스트: 화면을 구성하는 컴포넌트들을 독립적으로 관리하고 변화를 관찰하고 테스트하기 위한 방법. -> 컴포넌트 문서화를 편리하게 한다.수정 및 재활용하기 쉬워진다.예시에 사용한 코드는 교재와 해당 레포 에서 참조.create-react-app 보일러플레이트로 리
모바일 프로젝트 개발을 시작하면서 고려했던 사항들
배경 새로운 모바일 프로젝트를 개발 예정 작은 규모는 아니지만 차세대에 도입할만한 기술을 시도해볼 수 있을 것 같다. 기술들은 리스크가 적은 것들로 시도 고려대상 Quasar Framework TDD TypeScript Storybook Vue Compone
React Storybook에서 CDN을 이용해서 부트스트랩 CSS 모듈 가져오기
리액트 프로젝트의 스토리북(Storybook)에서 CDN을 이용해서 부트스트랩 CSS 모듈 가져오기
실용적인 리액트 테스트 전략
프론트엔드에서는 UI 변경이 자주 이루어지며 결과가 어떤 값이 아닌 시각적 요소로 나타납니다. 따라서 이를 어떻게 테스트 해야할 지 쉽지 않았습니다. 이 글에서는 실용적인 리액트 테스트를 위해 어떻게 테스트를 작성해야 할 지에 대한 고민을 담아봤습니다.
CRA로 만든 프로젝트에 Storybook 적용 / 유용한 팁 / 강의를 마치면서..
6. CRA로 만든 프로젝트에 storybook 적용 우리가 디자인 시스템을 만들때만 스토리북을 사용 할 수 있는건 아닙니다. 꼭 디자인 시스템이 아니여도, 기존에 존재하던 웹 프런트엔드 프로젝트에 스토리북을 적용하면 컴포넌트 문서화를 할 때 편하므로 매우 유용합니다. 디자인 시스템을 만들기 위하여 프로젝트를 아예 분리하는것이 번거로운 상황이라면, 기존...
Storybook을 활용하여 본격적으로 디자인 시스템 구축하기
스토리북을 쓰는 방법을 어느정도 배웠으니, 이제 Hello 컴포넌트 말고 정말 디자인 시스템에 있어서 유의미한 컴포넌트들을 만들어봅시다. 그런데, 어떤 컴포넌트를 만들어야 할까요? 사실 가장 이상적인것은 프로젝트를 만드는 과정에서 처음부터 디자인 시스템을 구축하고 재사용이 자주 될 것 같은 컴포넌트를 만들게 될 때마다 디자인 시스템에 컴포넌트를 하나씩 ...
Storybook 프로젝트에서 TypeScript로 컴포넌트의 props 문서화 편하게 하기
TypeScript 를 사용하면 JavaScript의 불편함을 해결해줄 수 있고, IDE를 더욱 적극적으로 활용 할 수 있게 해줍니다. 특히, 리액트 컴포넌트를 TypeScript 로 작성하면, PropTypes 를 완전히 대체 할 수 있고 훨씬 유용하고 편합니다. 아직 TypeScript 를 사용해본적이 없다면, 타입스크립트 기초 연습 블로그 포스트를 ...
Storybook을 다양한 Addon과 함께 활용해보면서 사용법 정복하기
Storybook의 기본적인 사용법을 알아보고, 또 다양한 Addons 들을 활용하는 방법을 알아봅시다.
TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기
TypeScript와 Storybook을 사용하여 나만의 디자인 시스템을 구축해봅시다! 우선, 디자인 시스템이 무엇인지부터 알아보도록 합시다.
Storybook 작성하기 #3 - 스냅샷 테스팅
지난 포스트에 이어 이번 글에서는 Storybook에서 스냅샷을 이용하여 컴포넌트 테스트 자동화를 해보겠습니다. 🖼️ Snapshot Testing? snapshot 테스트 케이스는 UI component를 렌더링한 뒤, 스크린샷을 찍고, 테스트 부근에 저장된 레퍼런스 이미지와 찍은 것들을 비교합니다. 만약 이전에 찍었던 이미지와 테스트했을 때와의...