소파에서 개발하기

레퍼런스 [Redux] 리덕스의 내부 파헤치기 replaceReducer on @reduxjs/toolkit 설명 / 정의 react 페이지의 크기가 커지면서, 모든 페이지를 한 번들로 가져오기 부담스러워 코드 분할을 하였다. 그러다보니 마찬가지로 redux store도 처음부터 모든 state를 들고 있을 것이 아니라, 해당 state가 필요한 곳에서만 동적으로 추가하도록 변경할 필요가 생겼다. 그래서 선배와 이것저것 뒤지다가 발견한 코드가 이것이다. const staticReducers = { counter: counterReducerSlice, }; export const store = configureStore({ reducer: staticReducers, middleware: getDefaul..

레퍼런스 [리액트] 코드 분할(코드 스플리팅) - React lazy, Suspense, Loadable Components React Suspense 소개 (feat. React v18) Speed Up Your React Apps With Code Splitting 코드 분할이 필요한 이유 브라우저에서 자바스크립트를 실행할 때, 각 기능에 대한 스크립트를 전부 읽어온다. 이 스크립트가 많아지면 네트워크 비용도 높아지고 병목현상이 생기게 된다. 따라서 자바스크립트로 작성된 모듈(js+css+img 등 dependancy가 있는 자원들 모두)을 하나의 번들파일로 만들고 tree-shaking, minify 등의 작업을 통해 사이즈를 줄이는 노력을 한다. 단, 하나의 번들파일로 압축한다고 하더라도 만약 앱..

레퍼런스 ESModule을 동적으로 import 하기 Speed Up Your React Apps With Code Splitting 설명 / 정의 대부분의 경우에는 파일 상단에 필요한 모듈들을 static하게 import하는 것이 일반적이지만, 때때로 이를 필요에 따라 조건부로 불러올 수도 있다. dynamic import라고 불리며, 이는 ES2020(ES11)에 포함된 기능이다. // test.js export const sum = (a, b) => a + b // 상단에서 정적으로 import 하는 경우 import { sum } from './test' // 하단에서 동적으로 import 하는 경우 const sum = await import('./test') // default와 그 외 함수들..