들어가기에 앞서 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을 설치했었다. ...

문제 github 블로그에 포스트를 push 했는데 몇 시간이 지나도 블로그가 업데이트 되지 않았다. github 서버 문제인 줄 알고 기다렸지만 며칠 뒤 확인해도 포스트가 올라오지 않았다..;; 메일함을 보니 블로그에 push할 때마다 ‘Page build failure’ 라는 메일이 와 있었다. jekyll 관련 파일을 수정한 적도 없고, ...

clearfix 요소에 float 속성을 사용하면 height 영역이 생기지 않기 때문에 뒤에 float이 아닌 요소가 오면 겹쳐지게 된다. float 요소들의 부모 요소의 가상선택자에 아래 clearfix 속성을 설정하면 요소들만큼의 height 영역을 차지하게 된다. content: ""; clear: both; display: block...

BEM이란? 블록 내 블록 중첩을 위한 구조로 HTML에서 수행하는 역할에 따라 CSS 클래스의 이름을 지정하는 방법이다. Block, Element, Modifier로 구성된다. Block 블록의 기준은 무엇인가? 독립적으로 재사용 가능한 컴포넌트 단위, html 기준으로 특정 기능을 감싼 부분 (wrapper)을 Block으로 이해할 ...

클래스형 컴포넌트 state, 라이프 사이클 기능이 있다. render 함수를 반드시 사용해야 한다. 함수형 컴포넌트 state, 라이프 사이클 기능이 없다. 리액트 16.8부터 hook을 이용해 위 기능을 구현할 수 있다. 클래스형 컴포넌트보다 메모리를 적...

설치 새로운 앱 만들기 npx create-react-app learn-redux redux 설치 yarn add redux 파일 만들기 테스트 파일 생성 src 경로에 test.js 파일 생성 상태 정의 const initialState = { counter: 0, text: "", list: [], }; 액션 타입...

구성 Action 상태를 변경시킬 때 객체 타입의 액션을 발생시킨다. 액션 객체는 type 필드를 필수적으로 포함해야 하며, type은 작업을 설명하는 이름을 제공하는 문자열이어야 한다. ex) todos/todoAdded 일반적으로 슬래시 기준 첫 번째 값은 이 작업이 속한 기능 또는 범주이고 두 번째 부분은 발생한 특정 일이다. 이 외에 ...