리액트34 [React] 리액트에서 코드 스플리팅 1. 코드 스플리팅 code splitting 코드 스플리팅이 무엇인지에 대해서 먼저 알아보겠습니다. 리액트 카테고리에 집어넣긴 했지만, 웹팩(webpack)을 이용한 다른 어플리케이션에서도 모두 사용 가능한 언어입니다. 웹팩도 간단히 설명하자면, 어플리케이션의 모든 파일들을 묶고 압축하여 하나의 결과물을 만들어주는 웹 개발 도구입니다. 자바스크립트로 개발을 하고 배포하는 과정에서 빌드(build) 과정을 거치게 되는데, 이 과정에서 모든 파일들이 하나로 합쳐지게 됩니다. 우리가 index.js, components들로 나눴던 소스 코드들이 하나의 거대한 소스 코드로 합쳐진다는 말입니다. 간단한 프로젝트라면 영향이 적겠지만, 거대한 프로젝트라면(특히 SPA 페이지에서) 길고 많은 자바스크립트 코드(.cs.. 2022. 2. 4. [React/Redux] redux-saga redux-thunk에 이어서 또 다른 비동기 처리를 담당하는 리덕스 미들웨어 redux-saga를 알아보겠습니다. yarn add redux-saga 0. 발생자 Generator redux-saga 미들웨어는 Generator 문법을 사용해서 비동기 처리를 관리해줍니다. 그러므로 미들웨어를 공부하기 전에 발생자에 대한 문법과 개념을 알아두어야합니다. 발생자 문법과 설명은 아래 링크를 참조해주세요. 2022.01.11 - [Programming/Javascript] - [Javascript] Iterator(반복자), Generator(발생자) [Javascript] Iterator(반복자), Generator(발생자) 오늘 소개드릴 자바스크립트 문법은 반복자와 발생자 입니다. 두 문법 모두 es201.. 2022. 2. 3. [React/Redux] redux-thunk 리덕스의 또 다른 미들웨어인 redux-thunk에 대해 알아보겠습니다. redux-thunk는 가장 많이 다운로드된 리덕스 미들웨어입니다. 그 다음으로 많이 사용되는 redux-saga도 꽤 많은 다운로드 수를 보여주고 있지만 redux-thunk에 비하면 1/3가량 밖에 되지 않는 숫자입니다. 1. redux-thunk redux-thunk는 비동기 처리를 관리해주는 리덕스 미들웨어입니다. 비동기 처리에 대해 다시 짚고 넘어가자면 어떤 명령이 실행되는 동안, 다음 코드들은 그 명령이 완료될 때까지 기다리지 않고, 작업을 수행하는 것을 말합니다. thunk의 의미는 공식 깃허브에 올라와있는데, 특정 식을 함수로 래핑해 작업을 지연시키는 것을 의미합니다. 즉, 식은 정의해놓고 나중에 호출하고 계산함으로써.. 2022. 1. 26. [React/Redux] redux-logger 지난번에 소개한 미들웨어 중 로그와 관련한 동작을 하는 redux-logger 미들웨어입니다. 0. 실습 준비 이 코드는 리덕스 미들웨어를 공부하기 위해 만든 코드입니다. 버튼에 따라서 글자와 색상이 변경되는 리액트-리덕스 앱입니다. 미들웨어 포스트에서 이 코드를 가지고 실습을 진행하도록 하겠습니다. 이 프로젝트의 루트 리듀서 코드입니다. // modules/index.js import {combineReducers} from 'redux'; import colorChangerMW from './colorChangerMW'; const rootReducer = combineReducers({colorChangerMW}); export default rootReducer; 다음은 리덕스 모듈(액션 객체, .. 2022. 1. 19. [React/Redux] 리덕스 미들웨어 리덕스 미들웨어 리덕스 미들웨어는 액션과 리듀서 사이에서 동작합니다. 리덕스가 적용된 앱에서, 액션이 발생하면 리듀서가 변화를 발생시킵니다. 이때 미들웨어를 추가하면, 액션이 발생하고 리듀서가 변화를 일으키기 전에 미들웨어가 동작을 하게 됩니다. 따라서 리덕스 미들웨어는 액션과 리듀서 사이에서 동작하는 것이라고 볼 수 있습니다.그렇다면 무엇을 위해 미들웨어를 중간에 끼워넣어서 사용해야 할까요? 언급한대로라면 리덕스는 순서대로 동작합니다. 액션이 발생해야만 리듀서가 동작을 처리하고 그에 따른 상태를 반환하게 됩니다. 이러한 정해진 순서대로 동작하는 것만으로는 해결할 수 없는 일들이 존재합니다. 대표적으로 setTimeout의 역할 같은 시간 지연이나 API를 받아오는 비동기 작업들을 처리하기 위해서 리덕스.. 2022. 1. 18. [React/Redux] 리덕스 활용 2022.01.05 - [Programming/React] - [React/Redux] 리액트 리덕스 사용해보기 이전 포스트에서 리덕스를 활용하는 방법들을 알아보았습니다. 이번에는 지난번에 만든 앱에서 더 편한 코딩을 하도록 만들어주는 리덕스의 편의기능들을 알아보겠습니다. 1. redux-actions yarn add redux-action redux-actions은 action creator를 간결하게 작성할 수 있게 만들어줍니다. 우선 지난번에 작성한 액션과 액션 생성 함수입니다. const INCREASE = 'reduxCounter/INCREASE'; const DECREASE = 'reduxCounter/DECREASE'; export const increase = () => ({ type: I.. 2022. 1. 6. 이전 1 2 3 4 ··· 6 다음 300x250
