Redux 배우기
정리가 다 되었다면 다음과 같이 폴더를 만들어 줍니다. src ├── modules └── counter ├── action ├── types.js └── index.js └── index.js └── index.js ├── App.js └── index.js 그리고 action/types.js에 reducer에서 사용할 type을 정해줍니다. // modules/counter/action/types.js export const INCREMENTED = "counter/incremented" export const DECREMENTED = "counter/decremented" action/index.js에는 action 함수와 action의 타입을 만듭니다. // modules/counter/actio..
React LifeCycle & Hook
LifeCycle과 Hook이란 LifeCycle이란 컴포넌트의 생명주기를 뜻하고, 이 메서드를 오버라이딩해서 특정 시점에 코드가 실행되도록 설정할 수 있습니다. Hook은 React 버전 16.8에서 추가되었고 class를 사용하지 않고 생명주기를 사용할 수 있게 해줍니다. 이 생명주기를 잘 사용한다면 빠르고 최적화된 웹 페이지를 경험할 수 있습니다. LifeCycle constructor() constructor(props) { super(props) this.state = { count: 0 } } React 컴포넌트의 생성자는 해당 컴포넌트가 생성되기 전에 실행됩니다. 이 메서드를 구현할 때 super(props)를 해주어야 합니다. 그렇지 않으면 this.props가 생성자 내에서 정의되지 않아..
Webpack 기본 사용법
Webpack이란 Webpack은 Module Bundler이다. 주요 목적은 브라우저에서 사용하기 위해 자바스크립트 파일을 하나로 묶는 것이고 다른 파일들도 변환하고 묶을 수 있다. Module이란 다른 코드에서도 쉽게 접근할 수 있도록 캡슐화해놓은 재사용가능한 코드 조각이고, Webpack은 이러한 코드 조각을 하나로 통합시켜주는 작업을 한다. Module Bundler를 사용하는 이유 Module Bundler를 사용하는 이유는 여러 개의 파일을 하나로 묶어주기 때문에 파일의 크기를 줄일 수 있어 페이지의 로딩 속도가 빨라진다. 그리고 Babel을 사용하여 ES6 버전 이상의 문법을 사용할 수 있게 해준다. 또한, HTML에서 태그를 사용하면 여러 파일을 불러오는데 오래 걸리고, 아래의 코드처럼 다..