분류 전체보기

[프론트엔드] 코드 스플리팅 [1]

1.서장 먼저 코드 스플리팅에 대하여 알아 보겠습니다. 1.1 코드 스플리팅이란? 코드 분할(Code Splitting) 해석하자면 말 그대로 코드를 분할하는 작업을 말합니다. 여기서 코드를 왜 분할해야 할까? 이런 의문이 생기게 됩니다. 배경 React 즉 javascript로 개발을 하게되면 build를 통해서 하나의 파일에 모든 로직을 구겨 넣어서 개발을 하게 됩니다. 다만 이런경우 프로젝트 규모가 커질수록 당연히 파일용량도 같이 증가하게 됩니다. 특히 SPA(Single Page Application)로 되어있는 프로젝트의 경우 그 용량은 훨신 더 커집니다. 용량이 커진 js파일을 웹 브라우저에서 불러오게 되면 인터넷 환경에 따라 더 큰 로딩시간을 필요로 하게 됩니다. 즉 "코드 스플리팅" -> ..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[10]

1. redux-saga 1. 4 코드 리펙토링 이번에는 반복되는 코드를 함수화하여 리펙토링을 진행 하겠습니다. 이전에 thunk 함수를 위해 만든 createRequestThunk 함수처럼 createRequestSaga를 만들겠습니다. - lib/createRequestSaga.js import { call, put } from "redux-saga/effects"; import { startLoading, finishLoading } from "../modules/loading"; export default function createRequestSaga(type, request) { const SUCCESS = `${type}_SUCCESS`; const FAILURE = `${type}_FAIL..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[9]

1. redux-saga 1. 3 API 요청 상태 관리하기 이번에는 redux-saga를 사용하여 API 요청을 해 보겠습니다. 기존에 thunk로 관리하던 액션 생성 함수를 제거하고, saga를 사용하여 처리합니다. sample 리덕스 모듈을 아래와 같이 수정합니다. - modules/sample.js import { createAction, handleActions } from "redux-actions"; import { call, put, takeLatest } from "redux-saga/effects"; import * as api from "../lib/api"; import { startLoading, finishLoading } from "./loading"; // 액션 타입을 선언합..

[프론트엔드] 리덕스 미들웨어를 통한 비동기 작업 관리[8]

1. redux-saga 1.2 비동기 카운터 만들기 기존의 thunk 함수로 구현했던 비동기 카운터를 이번에는 redux-saga를 사용하여 구현해 보겠습니다. 우선 아래의 redux-saga 라이브러리를 설치해 주세요. yarn add redux-saga 그리고 counter 리덕스 모듈을 열고 기존 thunk 함수를 제거합니다. INCREMENT_ASYNC라는 액션 타입을 선언하세요. 해당 액션에 대한 액션 생성 함수를 만들고, 제너레이터 함수를 같이 만들어 줍니다. 이 제너레이터 함수를 사가(saga)라고 부르고 있습니다. - modules/counter.js import { createAction, handleActions } from "redux-actions"; import { delay, ..