Back Ground

React Project 생성 - 타입스크립트를 사용할 리액트 프레적트를 만들때 $ npx create-react-app [프로젝트 명] --typescript --typescript 가 있으면 타입스크립트 설정이 적용된 프로젝트가 생성된다. - 만약, 이미 만든 프로젝트에 타입스크립트를 적용하기 싶다면 타입 정의 파일을 다운받는다. $ npm install --save @types/react @types/react-dom 타입스크립트 코드를 작성하기 위해 typescript 패키지도 설치한다. $ npm install --save-dev typescript 다운로드한 typescript명령어를 이용하면 타입스크립트 설정 파일을 생성 할 수 있다. $ npx typescript --init 초기화를 의미..

create-react-app으로 만들때 버전에 따라 가능한지는 모르겠지만최신버전으로서는 쉽게 css Module을 설정 할 수 있다. CSS ModuleCSS Module 은 CSS 클래스를 불러와서 사용 할 때 [파일이름]_[클래스이름]__[해쉬값] 형태로 클래스네임을 자동으로 고유한 값으로 만들어주어서 컴포넌트 스타일 중첩현상을 방지해주는 기술입니다. 이를 사용하기 위해선, [파일이름].module.css 이런식으로 파일을 저장하셔야 합니다.한번, CSSModule.module.css 라는 스타일을 먼저 작성해봅시다.src/CSSModule.module.css/* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용가능*/ .wrapper { background: black..

긴 설명 보다 내가 보고 쓰기 편하게 단순하게 이해 할 수 있게 쓰겠다. 먼저 보일러 플레이트 중 create-react-app을 통해서 프로젝트를 생성 해 줄 것이다. redux-setting 이라는 디렉토리로 만들었다create-react-app redux-setting 이제 redux를 사용하기 위해 몇가지 모듈을 받아준다.npm install redux react-redux 이제 불필요한 부분을 지워준다.(기존 index 코드 부분이나 App 부분) 시작하기 전 리덕스의 구조를 생각해 둔다. src 안에 디렉터로리를 나눠서 구조를 갖춰준다.actionscomponentscontainersreducers 이제리덕스 구조 그림을 참고하고 순서 대로 만들어 준다.그러면 헤깔리지 않고 만들 수 있게 된다..

VSCODE - Debugger for chrome VSCODE에서 확장 프로그램중 Debugger for chrome 를 설치 해준다.크롬에서 JS 코드를 Debugger할 수 있게 할 수 있다. 그 후 디버깅 탭으로 들어간 후 설정을 누른다, 그런 후 이렇게 바꿔주면 되는데 { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "..

redux-actions를 이용한 더 쉬운 액션 관리 redux-actions 패키지에는 리덕스 액션들을 관리할 때 유용한 createAction과 handleActions 함수가 있다. 이 함수들은 다음과 같이 yarn으로 설치한다. yarn add redux-acitons이렇게 불러와 사용 할 수 있다. 1import {createAction, handleActions } from 'redux-actions';cs 각 함수의 용도와 사용법createAction을 이용한 액션 생성 자동화 리덕스에서 액션을 만들다 보면 모든 액션에게 일일이 액션 생성자를 만드는 것이 번거로울 수 있다. 123456789export const increment = (index) => ({ type: types.INCREM..

리덕스에서 사용하는 파일들은 일반적으로 액션 타입, 액션 생성 함수, 리듀서 이렇게 세 종류로 분류하여 관리한다. 리덕스 공식 문서에서도 기초를 다룰 때는 이 방식으로 설명한다. 하지만 파일들을 어떻게 구조화할지 정해진 방식은 없다. 이렇게 파을을 세 종류 나누어 리덕스 관련 코드를 작성하다 보면 액션을 하나 만들때마다 파일 세개를 수정해야 한다.그렇게까지 번거로운 작업은 아니지만, 몇몇 개발자는 귀찮았던 모양이다.이 처럼 '액션 타입, 액션 생성 함수, 리듀서를 모두 한 파일에서 모듈화하여 관리하면 어떨까?' 라는 아이디어로 만든 파일 구조가 바로 Ducks파일 구조이다. 이 파일 구조는 개발자인 erikras(Erik Rasmussen)가 처음으로 제시했는데(https://gtihub.com/erik..

Immutable.js 익히기 Immutable.js는 자바스크립트에서 불변성 데이터를 다룰 수 있도록 도와준다. Immutable.js를 알기전에 객체 불변성을 알아야 한다. 객체 불변성Immutable.js 객체 불변성을 이해하려면 간단한 자바스크립트 코드를 실행해 보아야 한다. 크롬 웹 브라우저에서 개발자 도구를 열고 다음 코드를 입력해보자 1234let a = 7;let b = 7;let object1 = {a: 1, b:2 };let object2 = {a: 1, b:2 };cs 보다시피 a 값과 b값은 같다.둘은 === 연산자로 비교해 보면 당연히 true를 반환할 것이다.하지만 object1과 object2가 가진 값이 같더라도 서로 다른 객체이기 때문에 둘을 비교하면 false를 반환한다 ..

React.PureComponent는 React.Component와 매우 유사하다. 하지만 한 가지 다른 점이 있다면, React의 생명주기 메소드 중 하나인 shouldComponentUpdate를 다루는 방식이 다르다는 것이다. React.PureComponent는 shouldComponentUpdate가 이미 구현되어 있는데, props와 state를 얕은 비교를 통해 비교한 뒤 변경된 것이 있을 때만 리렌더링한다. 즉, React.PureComponent를 사용하면 React애플리케이션 성능을 향상시키는 데 가장 중요한 것 중 하나인 shouldComponentUpdate를 신경쓰지 않아도 된다. 하지만 props나 state가 복잡한 데이터 구조를 포함하고 있다면, props와 state를 비교..