Storybook 설치 npm i storybook@latest --save-dev init package.json에 아래와 같은 CLI가 생기며, .storybook 폴더가 생성된다. "scripts": { // ... "storybook": "storybook dev -p 6006", "build-storybook"...

create-react-app install npm install -g create-react-app Creating an App npx create-react-app my-app npm init react-app my-app yarn create react-app my-app Output my-app ├── README.md...

Intersection Observer API Intersection Observer API는 타겟 요소와 와 설정한 요소(Element)의 교차점을 비동기적으로 관찰하는 방법이다. scroll 이벤트와 다른점 scroll 이벤트는 사용자가 스크롤할 때마다 끊임없이 호출된다. Intersection Observer는 debounce/th...

params 리액트에서 Router를 통해 설정한 path 값을 해당 페이지(컴포넌트)에서 불러오기 위해 params를 사용한다. 라우트 path 설정하기 <Switch> <Route exact path="/blog/:categoryId/:postId" component={Post} /> </Switch> ...

cherry-pick 다른 브랜치의 특정 커밋을 가져오는 명령어 브랜치의 모든 커밋을 merge하지 않고 특정 커밋만 가져오고 싶을 때 사용 사용법 git cherry-pick [commit id] // 커밋 내용을 가져온 후 새로운 커밋 생성 git cherry-pick -n [commit id] // 커밋 내용만 가져옴 참고사이트 gi...

When 한 엘리먼트에 여러개의 css 애니메이션을 각각 적용해야 할 경우 (각각 적용할 필요가 없다면 하나의 애니메이션 안에서 모든 효과를 적용하면 된다.) How , 쉼표를 사용하여 여러개의 애니메이션을 적용할 수 있다. 주의할 점은 하나의 애니메이션을 실행할 때와 멀티 애니메이션의 css 프로퍼티 순서가 다르다는 것이다. Single ...

npm & yarn npm과 yarn은 대표적인 Node.js 패키지 관리 툴이다. package.json이란? 프로젝트 정보와 의존성(dependencies)을 관리하는 문서 패키지, 버전 등을 기록하여 다른 PC에서도 동일한 개발 환경을 구축 npm vs yarn   npm ...

Transition 속도, 타이밍 함수, 딜레이 등을 사용자 지정하여 CSS 속성을 변경할 때 애니메이션처럼 보이게 함 자동으로 작동하지 않음 (hover나 onclick 같은 이벤트에 의해 동작) #delay1 { position: relative; transition-property: font-size; transition...

Redux-Saga 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 Redux 미들웨어. Generator 문법을 사용하여 비동기 흐름을 쉽게(?) 읽고, 쓰고, 테스트할 수 있다. Saga를 실행하려면 아래 작업이 필요하다. Saga 만들기 Saga 미들웨어 만들기 Saga 미들웨어를 Redux 스토...

현상 구글 폰트를 @import로 css에서 로드했는데, 다른 페이지로 넘어갈때마다 아래와 같은 에러가 떴다. @import rules can’t be after other rules. Please put your @import rules before your other rules. 해결 @import 를 사용하지 않고 next/head...