Jun's TID

SSR(서버 사이드 렌더링)과 같이 React 에서 웹팩 설정을 커스터마이징 해야할 때가 있는데, Create React App 으로 만들 프로젝트에서는 웹팩 관련 설정 파일이 기본적으로 보이지 않는다. 그렇기 때문에 아래와 같이 eject 기능을 실행하여, 해당 파일들을 자유롭게 Config 할 수 있게 해야 한다. 사용법은 매우 간단하다. npn run eject 명령어를 프로젝트 파일이 있는 경로에서 실행해주기만 하면 되는데, 숨겨져 있던 파일들을 불러오는 작업이기 때문에 git에 연동된 프로젝트라면 반드시 이전에 커밋을 하고 실행해야 한다. git add . get commit -m 'commit before eject' npm run eject 를 실행하고 나면, 아래와 같이 웹팩 Config ..

프로젝트를 배포하기 위해서는 반드시 빌드를 해야한다. 이 빌드 작업은 Webpack이라는 도구가 처리하는데, 웹팩에서 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일을 하나의 파일로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합쳐진다. 리액트에서는 이 빌드 과정에서 화면에 보여지지 않거나 당장 사용하지 않는 기능이 들어간 파일들을 미리 빌드하지 않고, 필요한 시점에 동적으로 불러와서 사용할 수 있게끔 해주는 기능을 구현할 수 있다. 이를 코드 스플리팅이라고 하며, 바로 한번 알아보도록 하자. 자바스크립트 함수 비동기 로딩 컴포넌트 코드를 스플리팅하기에 앞서 일반 자바스크립트 함수를 스플리팅 해보면서 어떤 개념인지 익혀보자. 우선, 아래와 같은 코드가 있을 때 ◎notify.js..

대부분의 경우에는 직전에 다룬 redux-thunk로도 충분히 기능을 구현할 수 있지만, redux-saga 는 좀 더 까다로운 상황에서 유용하게 쓸 수 있다. 아래와 같은 상황에서 redux-saga 를 주로 사용한다. - 기존 요청을 취소 처리해야 할 때(불필요한 중복 요청 방지) - 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계없는 코드를 실행할 때 - 웹소켓을 사용할 때 - API 요청 실패 시 재요청해야 할 때 redux-saga 에서는 ES6의 제너레이터 함수 문법을 사용하는데 보통 일반적인 상황에서는 많이 사용되지 않기 때문에 먼저 다뤄보고 들어가자. generator function 제너레이터 함수의 핵심 기능은 함수를 작성할 때 함수를 특정 구간에 멈춰..

리액트 웹 App에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다. 예를 들어, 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 한다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 한다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, 미들웨어를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있다. 우선, 미들웨어를 사용해보기 전에 간단한 작업 환경을 만들어주자. 작업 환경 준비 리덕스로 상태를 관리하는 간단한 카운터 예제를 우선 만들고, 그 위에 미들웨어를 적용해보자. ◎modules/counter.js imp..

이번에는 리덕스를 사용하여 리액트 App의 상태를 관리하는 방법을 알아보려고 한다. 리액트 App에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지보수 하는데 큰 도움이 된다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화할 수도 있다. 리액트 프로젝트에서 리덕스를 사용하기 위해서는 npm install react-redux npm install redux 를 사용하여 라이브러리를 설치하고 사용한다. 리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것이다. 여기서 프레젠테..

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한 컴포넌트끼리 똑같은 상태를 관리할 때 굉장히 효과적이다. 물론 전역 상태 관리만 한다면 Context API를 사용하는 것으로도 충분하지만, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다. 추가로 아주 편리한 개발자 도구도 지원하며, 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해 준다. 이번 포스팅은 리덕스를 리액트에 적용하기 전에 알아야 할 개념들을 먼저 훑어볼 예정이다. - 액션 상태에 어떠한 변화가 필요하면 액션이..

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야 할 때는 어떻게 해야할까? 리액트 App은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리한다. 하지만 최상위 컴포넌트부터 데이터를 전달하는 방식은 다뤄야할 컴포넌트 / 데이터의 수가 많아지면 많아질 수록 사람이 일일이 관리하기가 거의 불가능한 수준까지 갈 수 있다. 그렇기 때문에 리덕스나 MobX와 같은 상태 관리 라이브러리를 사용하여 전역 상태 관리 작업을 더 편하게 처리할 수 있다. 리액트 v16.3 업데이트 이후에는..

이번에는 지금까지 배운 내용을 활용하여 카테고리 별로 최신 뉴스 목록을 보여 주는 News Viewer를 만들어보려고 한다. https://newsapi.org/ 에서 제공하는 API를 사용하여 데이터를 받아 오고, CSS의 경우 styled-components를 활용하여 스타일링해보려고 한다. 바로 한번 들어가보자. api는 HTTP 요청을 Promise 기반으로 처리하는, 현재 자바스크립트에서 가장 많이 사용된다는 axios를 사용한다. npm install axios axios의 사용법부터 알아보자. 우선, App.js 에서 버튼을 클릭하여 get 요청을 보내고, 응답을 그대로 페이지에 나타도록 구현한다. ◎App.js import { useState } from 'react'; import axi..

웹 App에서 Routing이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다. Todo List의 경우에는 하나의 페이지만 사용해도 충분히 구현이 가능했지만, 블로그와 같은 경우에는 여러 페이지로 구성해야 제 기능을 모두 구현할 수 있을 것이다. 이렇게 여러 페이지로 구성된 웹 App을 만들 때, 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템이다. 일반적으로 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 선택지는 두 가지이다. 1. 리액트 라우터(React Router): 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있는 라이브러리이다. 컴포넌트 기반으로 라우팅 시..

직전 포스팅에서 내용을 좀 다루기는 했는데, 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다는 걸 알았다. 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘들다. 아래 예제 코드를 보면 확실하게 이해할 수 있다. const object = { somewhere: { deep: { inside: 3, array: [1, 2, 3, 4] }, bar: 2 }, foo: 1 }; // somewhere.deep.inside 값을 4로 바꾸기 let nextObject = { ...object, somewhere: { ...object.somewhere, deep: { ...object.somewhere.dee..