FrontEnd/React.js37 [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. [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. [React.js] redux-thunk vs redux-saga redux-thunk와 redux-saga는 리덕스에서 비동기 작업을 돕는 미들웨어이다. redux-thunk 리덕스에서 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어로 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치할 수 있다. 함수를 디스패치할 때는, 해당 함수에서 dispatch와 getState를 파라미터로 받아와야하고, 이 함수를 만들어주는 함수를 thunk라고 부른다. 따라서 리덕스 스토어의 상태에 접근하거나 또 다른 액션을 디스패치하는 것이 가능하다. thunk 미들웨어의 문제점은 action에서 너무 많은 일을 한다는 점이다. 액션 생성자는 type과 payload가 담긴 객체를 생성해서 반환하는 역할을 수행하기로 했는데, thunk 미들웨어에서는 API 요청이나 비동기 처.. 2022. 3. 28. [React.js] 상태 관리 라이브러리 비교 1 - Redux 리액트 프로젝트의 규모가 커질수록 상태관리 라이브러리 도입이 필수적이라는 생각이 들었다. 정말 다양한 상태관리 라이브러리들이 존재하고, 의견도 다양해서 정리해보고자 한다. Redux 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 글로벌 상태 관리도 용이하게 만드는 상태관리용 라이브러리이다. 리액트뿐만 아니라 일반 JavaScript 환경에서 사용할 수도 있고, Angular와 같은 다른 프레임워크에서 사용되기도 한다. Redux는 Context API가 지금의 형태로 사용방식이 개선되기도 전에, 그리고 useReduxer라는 Hook이 존재하기 전부터 만들어진 라이브러리이다. 개선되기 전의 Context API는 프로젝트에서 글로벌 상태관리를 하는 것이 굉장히 까다로웠기 .. 2022. 3. 20. 이전 1 2 3 4 5 ··· 7 다음 반응형
