원인 storybook 실행 시 빌드 단계에서 컴포넌트의 절대경로를 찾지 못해 발생하는 에러 해결 .storybook 폴더에 webpack.config.js 파일을 만들고 아래 코드를 입력하여 절대경로를 잘 찾아가도록 설정한다. const path = require("path"); module.exports = ({ config }) =&gt...

npm install npm install의 동작은 크게 패키지 설치/의존성 설치로 나뉜다. npm install [package명] 패키지명을 명시해 특정 패키지를 설치 npm install package.json 파일의 의존성을 설치 패키지 설치 플래그 npm install 뒤에 -D와 같은 접미어(플래그)를 붙이면 프로젝트의 de...

onChange={throttle(handleKeyChange, 250)} 이런 식으로 컴포넌트에 리액트 이벤트를 등록하면 throttle이 적용되지 않는다. 하지만 handleKeyChange를 아래와 같이 수정하면 정상 동작한다. const handleKeyChange = throttle(() => {}, 250) 클로저가 생성되지...

CustomEvent() CustomEvent()를 사용하여 이벤트를 만들고, 임의로 발생시킬 수 있다. CustomEvent(typeArg) CustomEvent(typeArg, options) typeArg : 이벤트 이름 options : 이벤트 관련 정보를 나타내는 객체. {"detail": {[key]: value}} 구조 ...

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 ...