리액트 초기 설정

1. 디버깅을 위한 크롬 브라우저 확장 프로그램 설치

크롬 웹 스토어

 로 접속해서 

React Developer Tools, Redux DevTools 를 브라우저에 설치한다.

 

설치를 완료하고 크롬 개발자모드(F12)를 확인하면 Redux, Components, Profiler 탭이 추가된 것을 볼 수 있다.

 

Redux 탭에서는 어플리케이션에 적용된 Redux의 상태정보를 실시간으로 확인할 수 있다.

 

Components 탭에서는 컴포넌트의 트리구조를 확인할 수 있다.

 

Profiler 탭을 통해 프로파일링을 해볼 수 있다.

 

추가로 이벤트에 따라 리렌더링 되는 컴포넌트 영역을 실시간으로 확인하려면 아래 설정을 추가해 진행해야 한다.

위 설정을 하면 아래와 같이 리렌더링 되는 컴포넌트를 화면상에서 실시간으로 확인할 수 있다.

 

2. 추가 모듈 설치

리액트 자체는 렌더링만 지원하는 라이브러리 이기 때문에

우리가 필요한 비동기통신(api호출), 상태관리 등은 기본적으로 직접 구현해야 한다.

순수 자바스크립트로도 구현은 가능하겠지만 일반적으로 이를 위해 제공되는 

별도 라이브러리를 사용하기 때문에 그것을 먼저 설치해야 한다.

 

기본적으로 로컬 pc에 node, yarn 이 설치되어 있고

create-react-app으로 프로젝트를 생성했다는 가정하에

프로젝트 root 로 이동해서 아래 yarn 명령으로 라이브러리를 추가로 설치하도록 한다.

 

크롬 브라우저 디버깅 관련 라이브러리 설치

yarn add redux-devtools-extension   #Redux DevTools 과 연동됨
yarn add redux-logger    #console에 리덕스 상태변경 히스토리 출력

 

테스트용 api서버 구축을 위한 라이브러리 설치

yarn global add json-server   #어플리케이션에 포함할게 아니기 때문에 global로 설치한다.

 

상태 관리를 위한 리덕스 라이브러리 설치

yarn add redux react-redux
yarn add redux-actions
yarn add immer

 

restApi 비동기처리를 위한 리덕스 사가 등의 라이브러리 설치

yarn add redux-saga
yarn add axios
yarn add qs
yarn add react-loading

 

라우팅 처리를 위한 라이브러리 설치

yarn add react-router-dom

 

컴포넌트 코드 스플리팅을 위한 라이브러리 설치

yarn add @loadable/component

 

CSS-in-JS를 위한 라이브러리 설치

yarn add styled-components

 

3. import 시 절대경로로 지정가능하도록 설정

findmypiece.tistory.com/23

import 절대경로로 지정하기