KBennyCC

React.js 01.18. 리액트 코드 스플리팅 싱글 페이지 애플리케이션 의 단점 은 페이지 로딩 속도 가 지연 될 수 있다는 것이다. 로딩 속도가 지연되는 이유는 자바스크립트 번들 파일에 모든 애플리케이션 의 로직 을 불러오므로 규모가 커지면서 용량도 커지기 때문 이다. 하지만 이 문제는 코드 스플리팅(code splitting) 을 하면 해결할 수 있다. 코드 스플리팅(code splitting) 은 말 그대로 코드를 분할한다 는 의미이다. webpack에서 프로젝트를 번들링할 때 파일 하나라 아니라 여러 개로 분리시켜서 결과물을 만들 수 있다. 또 페이지를 로딩할 때 한꺼번에 불러오는 것이 아니라 필요한 시점에 불러올 수도 있다. 01.18.1. 코드 스플리팅의 기본 webpack4 이전의 버전에서는 vendor 를 직접 설정해야 했지만, webpack4 부터는 자동으로 생성해주기 때문에 별도의 설정은 하지 않아도 된다. 01.18.1.1. 비동기적 코드 불러오기: 청크생성 페이지에서 필요한 코드들만 불러오려면, 청크(chunk)를 생성해야한다. 청크를 생성하면 페이지를 로딩할 때 필요한 파일만 불러올 수 있고, 아직 불러오지 않은 청크 파일들은 나중에 필요할 때 비동기적으로 불러와 사용하라 수 있다. // src/components/SplitMe.js import React from 'react' ; const SplitMe = () => { return ( < h3 > 청크 < /h3> ); }; export default SplitMe; 청크를 생성할 컴포넌트 자체는 특별히 하는 것이 없다. 다만 이 컴포넌트를 불러오는 것이 평상시와는 조금 다르다. 비동기적으로 파일을 불러오려면 import 를 코드 최상단에 적는 것이 아니라, 특정 함수 내부에서 작성한다. LifeCycle 메서드 안에 넣을 수도 있고, 별도

React.js 01.17. React Router 01.17.1. SPA SPA 는 Single Page Application , 말 그대로 페이지가 하나인 애플리케이션 이라는 의미이다. 전통적인 페이지는 여러 페이지로 구성되어 있다. 유저가 요청할 때 마다 페이지를 새로고침하며, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 후 렌더링한다. HTML 파일 또는 템플릿 엔진 등을 사용해서 애플리케이션 뷰를 어떻게 보일지도 서버에서 담당한다. 웹에서 제공하는 정보가 점점 많아지면서 속도 문제가 발생했는데, 이를 해소하려고 캐싱과 압축을 해서 서비스를 제공한다. 그러나 이 방법은 사용자와 상호작용(interaction)이 많은 모던 웹 애플리케이션에선느 충분하지 않을 수 이다. 서버에서 렌더링을 담당한다는 것은 그만큼 서버 사줭늘 렌더링하는데 사용한다는 의미로, 불필요한 트래픽이 낭비가 되기 때문이다. 리액트 같은 라이브러리 또는 프레임워크를 사용해서 뷰 렌더링을 유저의 웹 브라우저가 담당하도록 하고, 애플리케이션을 우선 웹 브라우저에 로드시킨 후 필요한 데이터만 전달받아 보여 줄 것이다. 싱글 페이지 애플리케이션 은 서버에서 제공하는 페이지가 하나이지만, 로딩을 한 번 하고 나면 웹 브라우저에서 나머지 페이지들을 정의한다. 페이지에 들어온 후 다른 페이지로 이동할 때는 서버에 새로운 페이지를 요청하는 것이 아니라, 새 페이지에서 필요한 데이터만 받아 와 그에 따라 웹 브라우저가 다른 종류의 뷰를 만들어 주는 것이다. SPA 단점 은 앱 규모가 커지면 자바스크립트 파일 크기도 너무 커진다는 것이다. 페이지를 로딩할 때, 유저가 실제로 방문하지 않을 수도 있는 페이지와 관련된 컴포넌트 코드도 함께 불러오기 때문이다. 하지만 코드 스플리팅(code splitting)을 사용하면 라우트별로 파일을 나누어 트래픽과 로딩 속도를 개선할 수 있다. 01.17.2. React Router 리액트 라우터를 사용한 클

React.js 01.16. 리덕스 미들웨어와 외부데이터 연동 웹 애플리케이션을 만들 때는 대부분 서버와 데이터를 연동해야한다. 데이터를 연동하려면 일반적으로 서버에 구현된 REST API에 Ajax를 요청하여 데이터를 가져오거나 입력해야한다.  01.16.1. 리덕스 미들웨어(middleware)란? 액션을 디스패치했을 때 리듀서 에서 이를 처리하기 전 에 사전에 지정된 작업 들을 실행한다.  (미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있다.) 미들웨어가 할 수 있는 작업은 여러 가지가 있다. 단순히 전달받은 액션을 콘솔에 기록할 수도 있고, 전달받은 액션 정보를 기반으로 액션을 취소해 버리거나 다른 종류의 액션을 추가로 디스패치할 수도 있다. 01.16.1.1. 미들웨어 생성 // src/lib/middlewareTest.js const middlewareTest = store => next => action => { // 현재 스토어 상태 값 기록 console.log( '현재 상태' , store.getState()); // 액션 기록 console.log( '액션' ,action); // 액션을 다음 미들웨어 또는 리듀서에 전달 const result = next(action) ; // 액션 처리 후 스토어의 상태를 기록 console.log( '다음 상태' , store.getState()); return result; // 여기에서 반환하는 값은 store.dispatch(ACTION_TYPE)했을 때 결과로 설정한다. } export default middlewareTest; // 내보내기 store 와 action 은 익숙하지만, next 는 익숙하지 않다. next는 store.dispatch 와 비슷한 역할이다. 차이점은