크롬 디버깅 콘솔창에서 levels 선택이 안되고 default levels로 고정되어 있을 때 F1(설정) 눌러서 맨 밑으로 내린 다음 ‘Restore defaults and reload’ 버튼을 클릭한다.

아토믹 디자인이란? 아토믹 디자인은 컴포넌트를 생물학적 개념에 적용하여 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 5가지 레벨로 패턴화하는 방법론이다. Brad Frost가 제시한 design system 관점의 방법론이며 Atomic Design라는 제목의 책도...

편집기 탭이 하나밖에 안열림 당황하지 말고 설정에서 Editor> Show Tabs ‘열려 있는 편집기를 탭에서 열지 여부를 제어합니다.’ 에 체크해준다. (왜 해제되었는지 모르겠네)

prevState 함수형 컴포넌트는 생명주기가 없기 때문에 클래스형 컴포넌트의 componentDidUpdate 같이 prevProps, prevState를 제공하는 메서드가 없다. 함수형 컴포넌트를 만들다 보면, 이전 상태값과 현재 상태값을 특정지어서 비교해야 될 때가 생기는데 (ex. prevState는 false, currentState는 t...

static 프로퍼티/메서드 static 프로퍼티/메서드는 생성자 함수나 클래스의 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드를 말한다. 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 생성자 함수에서의 static // 생성자 함수 function Person(name) { this.name = ...

this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. javascript에서 this는 어디서든지 참조 가능하다. 전역이나 일반 함수 내부에서 this는 전역객체인 window를 가리킨다. console.log(this) // window function square(number) { consol...

Racing Effects redux-saga에서 여러 태스크를 병렬로 실행할 때, 태스크 결과를 전부 기다리지 않고 먼저 들어온 태스크만 처리한다. import { race, call, put, delay } from 'redux-saga/effects' function* fetchPostsWithTimeout() { const { post...

Using Hooks in a React Redux App 클래스형 컴포넌트에서 connect()로 감싼 것처럼, 함수형 컴포넌트에서는 먼저 App을 <Provider>로 감싸주어야 한다. const store = createStore(rootReducer); // As of React 18 const root = ReactDOM.cr...

네이밍 규칙 카멜 케이스(Camel Case) 일반적인 변수와 함수의 네이밍에는 카멜 케이스를 사용한다. 이름의 제일 첫 문자는 소문자이며, 각 단어의 첫 문자를 대문자로 표시한다. var elapsedTimeInDays; var daysSinceCreation; var daysSinsceModification; var fileAgeInDays...

설치 yarn add enzyme enzyme-adapter-react-16 17은 아직 React 17과 호환되지 않는다고 한다. 그래서 enzyme-adapter-react-16을 설치하였고, 리액트 버전을 16으로 다운그레이드 시켜줘야 했다. .babelrc { "presets": [ "@babel/preset-rea...