리액트 프로젝트의 스토리북(Storybook)에서 CDN을 이용해서 부트스트랩 CSS 모듈 가져오기
대부분 공부를 하게 되었다. Page/Components와 기본동작까지 금주 목표였지만 UI(CSS)실력이 아직 부족해 캐치업 후에 마무리 지어야겠다 한일 * Layout * Storybook * Ant-design 알게된 것 * flexbox * CSS Flex 완벽가이드 * flexbox로 만들수 있는 10가지 레이아웃 * Storyb...
react (CRA) + typescript + ESLint + Prettier + Husky + lint-staged + Storybook + polyfill 세팅
2019년 12월 26일0개의 댓글
항상 눈팅만 하고 있는 velog에서... 여러정보를 받아온 1인으로써 작은 공유가 되길 바라며 이 글 하나를 적고 갑니다 :) 제(목은) 곧 내(용)... 제.곧.내! 모든 세팅은 2019년 12월 13일을 기준으로 최신을 반영했습니다. 아, react-script만 3.2.0으로 바꿨습니다. 열심히 삽질해본 결과 3.3.0에선 react-app-...
프론트엔드에서는 UI 변경이 자주 이루어지며 결과가 어떤 값이 아닌 시각적 요소로 나타납니다. 따라서 이를 어떻게 테스트 해야할 지 쉽지 않았습니다.
이 글에서는 실용적인 리액트 테스트를 위해 어떻게 테스트를 작성해야 할 지에 대한 고민을 담아봤습니다.
6. CRA로 만든 프로젝트에 storybook 적용 우리가 디자인 시스템을 만들때만 스토리북을 사용 할 수 있는건 아닙니다. 꼭 디자인 시스템이 아니여도, 기존에 존재하던 웹 프런트엔드 프로젝트에 스토리북을 적용하면 컴포넌트 문서화를 할 때 편하므로 매우 유용합니다. 디자인 시스템을 만들기 위하여 프로젝트를 아예 분리하는것이 번거로운 상황이라면, 기존...
스토리북을 쓰는 방법을 어느정도 배웠으니, 이제 Hello 컴포넌트 말고 정말 디자인 시스템에 있어서 유의미한 컴포넌트들을 만들어봅시다. 그런데, 어떤 컴포넌트를 만들어야 할까요? 사실 가장 이상적인것은 프로젝트를 만드는 과정에서 처음부터 디자인 시스템을 구축하고 재사용이 자주 될 것 같은 컴포넌트를 만들게 될 때마다 디자인 시스템에 컴포넌트를 하나씩 ...
TypeScript 를 사용하면 JavaScript의 불편함을 해결해줄 수 있고, IDE를 더욱 적극적으로 활용 할 수 있게 해줍니다. 특히, 리액트 컴포넌트를 TypeScript 로 작성하면, PropTypes 를 완전히 대체 할 수 있고 훨씬 유용하고 편합니다. 아직 TypeScript 를 사용해본적이 없다면, 타입스크립트 기초 연습 블로그 포스트를 ...
Storybook의 기본적인 사용법을 알아보고, 또 다양한 Addons 들을 활용하는 방법을 알아봅시다.
TypeScript와 Storybook을 사용하여 나만의 디자인 시스템을 구축해봅시다! 우선, 디자인 시스템이 무엇인지부터 알아보도록 합시다.
지난 포스트에 이어 이번 글에서는 Storybook에서 스냅샷을 이용하여 컴포넌트 테스트 자동화를 해보겠습니다. 🖼️ Snapshot Testing? snapshot 테스트 케이스는 UI component를 렌더링한 뒤, 스크린샷을 찍고, 테스트 부근에 저장된 레퍼런스 이미지와 찍은 것들을 비교합니다. 만약 이전에 찍었던 이미지와 테스트했을 때와의...
지난 글에서 간단하게 Storybook이 무엇이고 어떤 기능을 제공하는지 알아보았습니다. 이번글에서는 React.js에서 Storybook을 어떻게 적용하고 사용하는지 간단한 투두리스트를 만들면서 알아보려고 합니다. 📙 Storybook-cli 설치 및 시작 먼저 간단하게 create-react-app을 이용하여 프로젝트를 생성하겠습니다. 이제 ...
이번 포스트에서는 Storybook 이라는 것을 알아볼까 합니다. Storybook은 UI 구성 요소(컴포넌트)를 개발하기위한 오픈 소스 도구입니다. 예전에는 페이지 단위의 개발을 하였다면 요즘에는 컴포넌트 단위로 프론트엔드를 개발하고, 많은 분들이 React, Vue나 Angular를 이용하여 개발합니다. 여기서 컴포넌트는 외부에 영향을 받지 않고 ...