React.js

개요 이 글에서는 React.js의 장단점에 대해 정리해보겠습니다. React.js는 웹 애플리케이션을 구축하는 데 널리 사용되는 자바스크립트 라이브러리입니다. 유연성, 재사용성, 사용 편의성으로 널리 인정받고 있습니다. 그러나 다른 기술과 마찬가지로 React.js에도 고유한 장단점이 있습니다. 이 글에서는 다음 프로젝트에 사용할지 여부를 결정하는 데 도움이 되도록 React.js의 장단점에 대한 포괄적인 개요를 제공합니다. React.js의 장점 1. 코드 재사용성 React.js는 재사용 가능한 컴포넌트 개념을 기반으로 합니다. 즉, 컴포넌트를 한 번 생성하면 애플리케이션 전체에서 재사용할 수 있습니다. 코드 재사용성을 통해 애플리케이션을 더 쉽게 유지 관리하고 시간을 절약할 수 있습니다.가상 DO..

이 글은 super tokens 블로그의 "Why is redux state immutable?" 이라는 글을 한글로 번역하여 작성하였습니다. 원문 링크는 글 하단에 기재하였습니다. Redux가 올바르게 동작하기 위해서 state는 불변(immutable) 객체여야 합니다. 이것은 우리가 redux state를 업데이트할 때마다, 전체 state의 복제본을 생성하고 변경하기 원하는 필드를 변경해야 한다는 것을 의미합니다. 코드로 보면 아래와 같습니다. let newState = { ...oldState, field1: { ...oldState.field1, field2: 'some new value' }, } 위 코드에서, 우리는 oldState의 field2 값을 새로운 state를 생성하고 field..

저는 최근에 리액트 앱의 성능을 향상시켜야 하는 업무를 담당하게 되었습니다. 이 글은 제가 그 리액트 성능 최적화를 진행하고 기록한 글입니다. 1단계 - 성능이 저하되기 시작하는 시나리오 찾기 성능이 저하되는 모든 시나리오를 파악하려면 앱에서 다양한 작업을 엄격하게 수행하고 성능이 저하되기 시작하는 시기를 계속 모니터링해야 합니다. 이를 위한 직접적인 방법은 없고, 유일한 방법은 많은 사람들이 앱을 사용하고 자신의 경험을 보고하는 것입니다. 또 다른 방법은 충분히 많은 더미 데이터를 생성하고 UI에 모든 데이터를 로드하여 어떻게 작동하는지 확인하는 것입니다. 또한 모든 시나리오를 한 번에 파악할 수는 없습니다. 시나리오를 계속 검색한 후 아래 단계를 수행하여 각 시나리오의 성능을 향상시킬 수 있습니다. ..

들어가며 Yarn berry (yarn pnp)에 대해 알게 되어 리액트 프로젝트를 yarn berry 환경으로 세팅해보게 되었습니다. 이 과정에서 여러가지 삽질을 하게 되었는데, yarn berry를 이용하여 리액트 프로젝트를 세팅하고자 하는 분들에게 도움이 되고자 세팅 방법을 공유하고자 합니다. (현 시점 22년 3월 1일 기준으로는 잘 동작합니다 ㅎ;) 문서 하단에 해당 환경으로 세팅 할 수 있는 쉘 스크립트도 공유 드렸으니, 해당 쉘 스크립트를 복사해서 사용하셔도 좋습니다. Yarn Berry란? yarn berry는 node_modules 사용 시 생기는 여러가지 문제점 (비효율적인 의존성 검색, 비효율적인 설치, Phantom dependency 등) 을 PnP(Plug n Play) 방식으로..

해당 포스트는 React Libraries To Use In 2021: 17 Top Picks 를 번역하였습니다. React는 모바일 및 웹 애플리케이션 모두를 위한 주요 UI를 만들 수 있는 JavaScript 라이브러리입니다. 다른 JavaScript 프레임워크 및 라이브러리와 원활하게 통합되며 구성 요소라고 하는 재사용 가능한 작은 코드 조각이 포함됩니다. 높은 모듈성으로 인해 React 구성 요소 라이브러리는 UI 개발을 최적화할 뿐만 아니라 극도의 유연성을 제공합니다. React 라이브러리는 기능적이고 인상적으로 보이는 응용 프로그램을 만드는 데 도움이 될 뿐만 아니라 다른 라이브러리보다 더 빠르고 쉽고 적은 코드로 만들 수 있습니다. 여기에서는 이러한 각 라이브러리를 처음부터 프로젝트에 통합하..

이 글은 저자의 허락을 받고 "State Management Battle in React 2021: Hooks, Redux, and Recoil" 이란 제목의 글을 번역하여 작성한 글입니다. 원문 링크 : https://dev.to/workshub/state-management-battle-in-react-2021-hooks-redux-and-recoil-2am0 State Management Battle in React 2021: Hooks, Redux, and Recoil Introduction: Over the years, the massive growth of React.JS has given birth to different... dev.to 소개 수 년간 리액트의 거대한 성장은 무엇보다도 다양..