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

저장소에 push한 commit 되돌리기 git 커밋을 되돌리는 방법으로 reset과 revert가 있다. reset --hard 를 사용하면 원하는 커밋 시점으로 강제로 돌려놓을 수 있다. 이 때 저장소에 push하기 위해서는 강제 push를 해야하는데, 협업하는 브랜치에서는 push -f를 되도록 사용해선 안되고 원격 저장소에서도 권한을 막아...

문제 Fiddler를 켜면 https 페이지가 아래와 같이 연결되지 않았다. 해결 Fiddler에서 https 인증서를 새로 발급받는다. (Tools - Options - HTTPS - Actions - Reset All Certificates) 참고사이트 연결이 비공개로 설정되어 있지 않습니다. (https 연결장애)