Front/React

    [React] 서버 사이드 렌더링

    1. 서버 사이드 렌더링의 이해 UI를 서버에서 렌더링하는 것 CRA로 프로젝트를 생성하고 개발 서버를 실행해 본다. $ yarn create react-app ssr-recipe $ cd ssr-recipe $ yarn start root 엘리먼트가 비어있다. 즉, 이 페이지는 처음에 빈 페이지 그 이후에 자바스크립트가 실행되고 리액트 컴포넌트가 렌더링되면서 우리에게 보이는 것 서버사이드 렌더링을 구현하면 사용자가 웹 서비스에 방문했을 때 서버 쪽에서 초기 렌더링을 대신해 준다. 그리고 사용자가 html을 전달받을 때 그 내부에 렌더링된 결과물이 보인다. 1.1. 서버 사이드 렌더링의 장점 구글, 네이버, 다음 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있다. 리액트로..

    [React] 코드 스플리팅

    코드 스플리팅이란 리액트 프로젝트 : 빌드 거친 뒤 배포 주석, 경고 메시지, 공백 등을 제거하여 파일 크기 최소화 브라우저에서 JSX 문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업 정적 파일 존재 -> 경로 설정됨 -> 웹팩담당 웹팩에서 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일이 하나의 파일로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합쳐진다. CRA로 프로젝트를 빌드할 경우 최소 두 개 이상의 자바스크립트 파일 생성 CRA의 기본 웹팩 설정에는 SplitChunks라는 기능이 적용되어 node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파일을 자동으로 따로 분리시켜 캐싱의 효과 극대화 파일 이..

    [React] 리덕스 미들웨어를 통한 비동기 작업 관리

    리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있다. 1. 작업 환경 준비 $ yarn create react-app learn-redux-middleware $ yarn add redux react-redux redux-actions [modules/counter.js] import {createAction, handleActions} from 'redux-actions'; const INCREASE = 'counter/INCREASE'; const DECREASE = 'counter/DECREASE'; export const increase = createAction(INCREASE); export..

    [React] 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기

    리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수 하는데 도움이 된다. 여러 컴포넌트에서 동일한 상태를 공유해야할 때 매우 유용 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수 있다. 리액트 애플리케이션에서 리덕스를 사용할 때는 store인스턴스를 직접 사용하기보다는 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용하여 리덕스 관련 작업을 처리 1. 작업 환경 설정 프로젝트 생성 미치 라이브러리 설치 $ yarn create react-app react-redux-tutorial $ cd react-redux-tut..

    [React] 리덕스 라이브러리

    가장 많이 사용하는 리액트 관련 상태 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 컴포넌트끼리 똑같은 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 전역 상태를 관리할 때 효과적 미들웨어 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있다. 1. 개념 1.1. 액션 상태에 어떠한 변화가 필요하면 액션이란 것이 발생 다음과 같은 형식으로 이루어져 있다. { type: 'TOGGLE_VALUE' } 액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라 생각하면 된다. 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 ..

    [React] Context API

    전역적으로 사용할 데이터가 있을 때 유용한 기능 ex) 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 리액트 관련 라이브러리에서도 많이 사용 ex) 리덕스, 리액트 라우터, styled-components등 1. Context API를 사용한 전역 상태 관리 흐름 이해하기 컴포넌트 간에 데이터를 props로 전달하기 때문에 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어 관리 기존엔 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한 번에 원하는 값을 받아 와서 사용할 수 있다. 2. Context API 사용법 익히기 2.1. 새 Context 만들기 [co..

    [React] 외부 API를 연동하여 뉴스 뷰어 만들기

    1. 비동기 작업의 이해 동시에 여러 가지 요청을 처리할 수 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. 서버API를 호출할 때 외에도 작업을 비동기적으로 처리할 때가 있는데, 바로 setTimeout함수를 사용하여 특정 작업을 예약할 때 이다. 콜백함수 자바스크립트에서 비동기 작업을 할 때 가장 흔히 사용하는 방법 콜백 안에 콜백을 넣어 구현할 수 있는데, 너무 여러 번 중첩 되면 '콜백 지옥' 이라 한다. Promise 콜백 지옥 같은 코드가 형성되지 않게 하는 방안으로 ES6에 도입된 기능 여러 작업을 연달아 처리한다고 해서 여러 번 감싸는 것이 아니라, then을 사용하여 그다음 작업을 설정하기 때문에 콜백 지옥이 형성되지 않는다. async/await Promise를 더욱 쉽게 사용할..

    [React] 리액트 라우터 부가 기능

    1. history 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props중 하나 이 객체를 통해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출할 수 있다. 예) 특정 버튼을 눌렀을 때 뒤로 가거나, 로그인 후 화면을 전환하거나, 다른 페이지로 이탈하는 것을 방지해야할 때 [HistorySample.js] import React, {Component} from 'react' class HistorySample extends Component{ // 뒤로가기 handleGoBack = () => { this.props.history.goBack(); }; // 홈으로 이동 handleGoHome = () => { this.props.history.push('/'); };..