데이터 로딩은 서버 사이드 렌더링을 구현할 때 까다로운 문제 중 하나이다. 이때 데이터 로딩은 API 요청을 의미한다. 서버의 경우 문자열 형태로 렌더링하는 것이므로 state나 리덕스 스토어의 상태가 바뀐다고 해서 자동으로 리렌더링 되지 않는다. 그 대신 renderToString 함수를 한 번 더 호출해야 한다. 거기다 서버에서는 componentDidMount 같은 라이프 사이클 API도 사용 불가능 하다. SSR의 데이터 로딩을 해결할 수 있는 방법은 많지만, 이번에는 redux-thunk와 redux-saga를 사용해 보자. 1) redux-thunk 코드 준비 여기에서 thunk와 saga, axios를 설치해 주자 npm add redux-thunk redux-saga axios 이번 프로젝..
FE개발자
SSR (Server Side Rendering)이란? 말 그대로 이다. 사용자에게 제공할 UI를 서버에서 미리 렌더링 하는 것 이다. 반대로, CSR (Client Side Rendering)은 브라우저에서 UI를 렌더링 하는 것 이다. 각 방식의 장단점 Server Side Rendering Client Side Rendering 장점 1. 검색 엔진이 웹 애플리케이션의 페이지를 원할하게 수집할 수 있다. 2. 초기 헨더링 성능을 개선할 수 있다. 1. SSR에 비해 속도가 빠르다. 2. 서버의 부하가 낮다. 단점 1. 브라우저 대신 서버가 처리하므로 서버 리소스가 사용된다. 2. 프로젝트 구조가 복잡해지고, 개발이 어려워질 수도 있다. 1. 검색 엔진이 페이지의 정보를 수집하기 어렵다. 2. 모든 ..
코드 스필리팅? 정의 : 싱글 페이지 에플리케이션(SPA)와 같이 용량이 커지면 페이지 로딩 속도가 느려지는 환경에서 특정 상황에서 특정 코드를 불러오기 위해 미리 코드를 분리하는 작업 코드 스플리팅으로 얻는 이점은 다음과 같다. 불필요한 주석, 경고 메시지, 공백등을 제거하여 파일을 최소화 브라우저에서 JSX 문법이나 다른 최신 JS 문법이 원활히 실행되도록 트랜스 파일 작업을 함 이미지와 같은 정적 파일이 있다면 해당 파일을 위한 경로 설정 →위의 이점을 얻는 작업은 webpack이 해준다. 웹팩에 별도 설정을 하지 않으면 프로젝트에서 사용중인 모든 JS와 CSS파일이 하나의 파일로 합쳐진다. 또한, 파일을 빌드하면 파일명에 해시(hash) 값이 포함되어있다. 이 값은 빌드 과정에서 해당 파일의 내용..
redux-saga redux-thunk 다음으로 많이 사용하는 비동기 작업 관련 미들웨어이다. 사용하기 좋은 상황 기존 요청을 취소 처리해야 할때 ( 불필요한 중복 요청 방지 ) 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계없는 코드를 실행했을 때 웹소켓을 사용할 때 API 요청 실패 시 재요청해야 할 때 제너레이터 함수 redux-saga 에서는 ES6의 제너레이터 함수를 사용한다. (처음 다뤄봐서 이해하기 힘들었다....) 제너레이터 함수를 사용하면 함수에 값을 순차적으로 반환할 수 있다. 또한 함수의 흐름을 도중에 멈춰 눻았다가 이어 진행할 수 있다. function* generatorFunction() { console.log(`11`); yield 1; co..
redux-thunk redux-thunk는 리덕스를 사용하는 프로젝트에서 비동기 작업을 처리할 때 가장 기본적으로 사용하는 라이브러리이다. Thunk란? 특정 잡업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미한다. const addOne = x => x + 1; const addOneThunk = x => () => addOne(); const fn = addOneThunk(1); setTimeout(() => { const value = fn(); // fn이 실행되는 시점에 연산 console.log(value); }, 1000); redux-thunk 라이브러리를 사용하면 thunk 함수를 만들어서 디스패치할 수 있다. 리덕스 미들웨어가 그 함수를 전달받아 store의 disp..
미들웨어란? 액션 디스패치를 했을 때 리듀서에 이를 처리하기 앞서 사전에 지정된 작업을 실행한다. 미들웨어는 액션과 리듀서 사이의 중간자라 생각하면 쉽다. 미들웨어의 용도 특정 조건에 따라 액션을 무시 특정 조건에 따라 액션 정보를 가로채 변경한 후 리듀서에 전달 특정 액션에 기반하여 새로운 액션을 여러번 디스패치 전달받은 액션을 콘솔에 기록 전달받은 액션 정보를 기반으로 액션을 취소 다른 종류의 액션을 추가로 디스패치 미들웨어의 기본 구조 const loggerMiddleWare = store => next => action{ // 미들웨어 기본 구조 }; export default loggerMiddleWare; store는 리덕스 스토어 인스턴스를 가르키고, action은 디스패치된 액션을 가르킨다..
