목적 컴포넌트에 ul과 li 구조를 만들고, children을 전달받아 map을 돌려 li를 리턴하려고 한다. 문제 export default function Form(children: JSX.Element[]) { return ( <form> <ul> {children.map((el, i...

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 연결장애)

들어가기에 앞서 debounce와 throttle은 주로 mousemove, scroll 등의 이벤트 쿼리 성능 향상에 사용한다. 이벤트 핸들러를 콜백함수로 전달하여 클로저를 이용해 일정시간 혹은 한번만 핸들러를 실행한다. debounce 발생한 이벤트에 대해 마지막 한 번만 실행 const debounce = (func, delay) =&g...

tabindex html 요소에 tabindex 속성을 추가하면 키보드로 tab 했을 때 요소가 focus 된다. 기본적으로 div 등의 태그는 키보드 tab을 사용하여 요소들을 훑을 때 focus 되지 않는다. tabindex="0" 속성을 추가하면 키보드를 이용해 focus 가능하다. div에 keydown 등의 키보드 이벤트를 등록했는데 ...

bind bind() 메서드가 호출되면 새로운 함수를 생성한다. 바인딩으로 감싼(wrapped) 원본 함수 객체이다. const handleClick = this.handleClick.bind(this) call call() 메서드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다. const openDocument = d...

React Snippets 새 컴퓨터에 VSCode를 설치하고, 이것저것 환경 세팅을 하면서 리액트 스니펫을 설치하게 되었다. 마켓플레이스에서 react만 검색해도 많은 Snippets들이 나온다. 처음에는 가장 상단의, 다운로드수가 가장 많은 ES7 React/Redux/GraphQL/React-Native snippets을 설치했었다. ...