융융이'Blog

webpack에서 프로젝트를 번들링 할 때 파일 하나가 아니라 파일 여러개로 분리시켜서 결과물을 만들 수 있습니다. 하지만 프로젝트 단위가 커지면 불러오는 module의 크기도 커진다. 그렇기 때문에 불러오는 module도 필요에 따라 분할 하고 필요한 module만 불러온다면 속도가 향상될 것입니다. 이를 위해서 코드스플리팅을 통하여 캐쉬에 저장된 모듈은 제외하거나 필요한 모듈만 불러올 수 있도록 설정해주면 좋습니다. 라이브러리 분리하기 >> 비동기 렌더링하기 >> 빌드후 확인하기 현재 프로젝트를 git 푸시를 완료한 후 yarn eject 명령어를 치면 ![image-20200128152117885](/Users/huiyung/Library/Application Support/typora-user-i..

match,location,history 리액트에서 각 컴포넌트에서 props처럼 받는 데이터가 match, location,history에 들어 있다. import React from 'react'; import queryString from 'query-string'; const About = ({location, match, history}) => { const query = queryString.parse(location.search); console.log(location); console.log(match); console.log(history); ... location {pathname: "/about", search: "?key=value&key2=value2"..

react-router-dom 리액트 경로 설정을 도와주는 패키지입니다. NODE_PATH 설정 import의 경로 설정을 절대경로로 변경을 해준다. package.json "scripts": { "start": "NODE_PATH=src react-scripts start", "build": "NODE_PATH=src react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, BrowserRouter BrowserRouter는 HTML5의 history API를 사용하여 새로고침하지 않고도 페이지 주소를 교체할 수 있게 합니다. import React from 'react'; import { B..

##Redux-thunk와 axios 사용 Action(module)에서 사용하는 API 를 정의(리덕하고 필요한 정보를 리덕스에 저장하고 화면에 뿌려준다. redux-promise-middleware redux-promise-middleware는 Promise 기반의 비동기 작업을 좀더 편하게 해주는 미들웨어 입니다. 현재 createAction을 이용하여 커스텀하도록 이용하는 것만 되는거 같다... 저만 에러뜨나요? ㅠㅠ yarn add redux-promise-middleware store.js import promiseMiddleware from 'redux-promise-middleware'; const pm = promiseMiddleware({ promiseTypeSuffixe..

##redux-logger yarn add redux-logger src/store.js import { createStore } from 'redux'; import modules from './modules'; import { applyMiddleware } from 'redux'; //미들웨어 적용하는 함수 이다. import { createLogger } from 'redux-logger'; const logger = createLogger(); const store = createStore(modules, applyMiddleware(logger)); export default store; createLogger를 통하여 미들웨어의 상태를..

immutable.js는 자바스크립트에서 불변성 데이터를 다룰 수 있도록 도와줍니다. immutable은 페이스북에서 json형태의 데이터를 변형하거나 값을 바꿀 때 유용하게 사용하기 위해서 만든 라이브러리이다. const { Map } =Immutable; let data = Map({ a: 1, b: 2, c: Map({ d: 3, e: 4, f: 5 }) }); let object1 = data.setIn(['c','d'], 10); console.log(object1.get('c').get('d')); // 10 console.log(data.get('c').get('d')); // 3 Map을 이용하여 데이터를..

리덕스는 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태관리 라이브러리입니다. 리액트는 다양한 컴포넌트의 집합체이며 상하위 관계를 유지하면서 앱을 구성하게 된다. 만약 child단에서 handling이나 state변화가 일어나면 최상위 APP을 거쳐서 child까지 전달하는 구조이기 때문에 앱의 효율성이 떨어진다. 리덕스를 이용한다면 위 그림과 처리하기 때문에 보다 효율적으로 프로젝트 관리가 편리하다. 스토어 : 애플리케이션의 상태 값들을 내장하고 있습니다. 액션 : 상태 변화를 일으킬 때 참조하는 객체입니다. 디스패치 : 액션을 스토어에 전달하는 것을 의미합니다. 리듀서 : 상태를 변화시키는 로직이 있는 함수입니다. 구독 : 스토어값이 필요한 컴포넌트는 스토어를 구독합니다.

yarn add styled-components 컴포넌트 스타일링하는 데 제일 각광받고 있는 패키지 styled-components가 있다. import React from "react"; import styled from "styled-components"; import PropTypes from "prop-types"; const Container = styled.button` width: 100%; border: 0; border-radius: ${props => props.theme.borderRadius}; color: white; font-weight: 600; background-color: ${props => props.theme.blueColor}; text-align: center; p..