본문 바로가기

분류 전체보기340

[React.js] Uncaught ReferenceError: process is not defined 오류 설명 이 오류는 react-error-overlay(react-scripts의 dependency이기 때문에 많은 사람들에게 생소함)의 결과로, 이 패키지의 종속성이 webpack v5를 지원하도록 업데이트되었다. 해결 방법 첫 번째 방법, update react-scripts v5 npm install react-scripts@latest # or yarn upgrade --latest react-scripts 하지만 webpack 버전 5이상은 폴리필을 수동으로 구성해야하기 때문에 아래와 같은 에러가 발생할 수 있다. [Webpack] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.. 2022. 4. 12.
[React.js] React Hook의 등장 배경 React Hook이란? React 16.8v부터 추가된 기능으로, 클래스 형식의 리액트 컴포넌트에서만 할 수 있었던 state 관리 및 라이프사이클등을 함수형 컴포넌트에서도 사용할 수 있다. 기존 클래스 컴포넌트에 대한 불만 사항 extends와 super(props)를 매번 작성해야 하는가? 클래스형 리액트 컴포넌트 사용을 위해서는 extends 키워드를 사용해 React.Component를 상속 받아야한다. 또한 state를 사용하기 위해서는 constructor 내부 최상단에 super(props)를 해야한다. (자바스크립트 상속 클래스의 규칙) 이렇게 반복되는 코드 작성을 줄일 수는 없을까? 다른 언어와는 다른 자바스크립트의 this class Foo extends Component { cons.. 2022. 4. 5.
HTTP/1.1과 HTTP/2 HTTP/1.1 HTTP/1.1의 동작방식 - 기본적으로 Connection당 하나의 요청을 처리하도록 설계 - 동시전송이 불가능하고 요청과 응답이 순차적으로 진행 - HTTP 문서 안에 포함된 다수의 리소스(Images, CSS, Script)를 처리하려면 요청할 리소스 개수에 비례해서 Latency(대기 시간) 증가 HTTP1.1의 단점 HOL(Head Of Line) Blocking : 특정 응답의 지연 HTTP/1.1의 connection당 하나의 요청처리를 개선할 수 있는 기법 중 pipelining이 존재한다. 이것은 하나의 connection을 통해 다수 개의 파일을 요청/응답 받을 수 있는 기법을 말하는데 이 기법을 통해서 어느 정도의 성능 향상이 가능하나 큰 문제점이 하나 있다. 하나의 .. 2022. 4. 4.
MSA 핵심 디자인 패턴-saga, event sourcing, CQRS, BFF, Api Gateway Two Phase Commit 분산 DB 환경에서 쓰는 방법으로 주로 RDBMS에서 기능을 제공한다. Two-Phase Commit은 말 그대로 2 단계에 거쳐서 데이터를 영속화 하는 작업이다. 위 그림과 같이 여러 DB가 분산되었을 때, 트랜잭션을 조율하는 조정자(Cooredinator)가 존재한다. 조정자의 역할은 트랜잭션 요청이 들어왔을 때 두 단계를 거쳐 트랜잭션 진행을 담당하는 것이다. 첫 번째 단계는 Prepare이며, 이는 쉽게 말해 연관된 DB에게 데이터를 저장할 수 있는 상태인지 묻는 과정이다. 메시지를 받은 DB에서는 Commit 작업을 위한 준비를 진행한다. 이후 데이터를 영속할 수 있는 준비가 완료되면 조정자에게 준비가 완료되었음을 알리고, 반대로 Commit 할 수 없다면 불가하다.. 2022. 4. 3.
[React.js] 상태 관리 라이브러리 비교 3 - Recoil Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 좋으나 내장 상태 관리 기능은 다음과 같은 한계를 가진다. 컴포넌트의 상태는 공통된 상위요소까지 끌어올림으로써 공유될 수 있지만, 상위요소의 변경은 하위요소를 재렌더링 시키므로, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 일으키기도 한다. Context는 단일 값만 저장할 수 있으며, 자체 consumer를 가지는 여러 값들의 집합을 담을 수는 없다. 이 두 가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의 잎(state가 사용되는 곳)까지의 코드 분할을 어렵게 한다. Facebook의 Dave McCabe가 개발한 React용 상태 관리 라이브러리.. 2022. 4. 1.
[React.js] 상태 관리 라이브러리 비교 2 - Mobx Mobx란? MobX의 README는 MobX를 다음과 같이 정의하고 있다. Anything that can be derived from the application state, should be derived. Automatically. -> 어플리케이션의 상태에서 파생(derived)될 수 있는 모든 것은 자동으로 파생되어야 한다. MobX는 전역 상태 라이브러리이다. 모든 상태변화를 일어나는 부분으로 자동으로 추적해주는 역할을 한다. 상태관리는 왜 필요할까? 첫 번째로 유지보수가 쉬워지도록 상태 로직을 분리하여 모듈화 할 수 있고, 두번째로 상태관리의 단계를 간결하게 해준다. MobX는 간단하고 확장 가능한 상태 관리 라이브러리를 철학으로 하고있다. MobX Overview MobX는 다음과 같은 .. 2022. 3. 30.
반응형

티스토리툴바