Introductionzustand 상태관리 방식을 이해한다는 것은 무엇일까?zustand 상태관리를 이해하기 위해 아래 네 가지 개념들의 유기적 상관관계를 이해해보도록 한다.createStorecreateuseSyncExternalStoreuseStoreOverview전역상태(zustand): StoreApi ( setState, getState, getInitialState, subscribe )로 접근 가능한 캡슐화된 객체👉 "React 렌더링 사이클과 독립적으로 존재. “createStore : 전역상태를 만들고, storeAPI를 반환한다.👉 ”캡슐화된 사용자정의 State 및 Action(메서드)를 만들고, 상태 관리를 위한 핵심 API인 StoreApi ( setState, getStat..
1. VDOM의 정의리액트 legacy 공식문서(https://ko.legacy.reactjs.org/docs/faq-internals.html)에 따르면 VDOM을 다음과같이 정의하고 있습니다.Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.브라우저의 크리티컬 렌더링 패스 수행은 꽤나 무거운 작업입니다. 따라서 보여져야할 모든 UI정보를 메모리상의 자바스크립트 객체로 저장하고, 변경사항을 관리하며, 최적의 브라우저 렌더링을 수행할 수 있는 상태로 커밋하여 UX를 높이는 기술이라 할 수 있습니다.2. VDOM의 구성요소VDOM의 구성요소..
[1] 디펜던시 추가 yarn add -D @babel/runtime @babel/plugin-transform-runtime @babel/runtime Babel 변환 과정에서 사용되는 런타임 헬퍼(helper) 함수와 core-js의 폴리필(polyfill)을 제공하는 코어 패키지의 일종 @babel/plugin-transform-runtime @babel/runtime 패키지가 제공하는 **헬퍼함수와 폴리필(polyfill)**을 재사용할 수 있도록 돕는다. babel이 async-await 문법을 지원하도록 돕는다. *헬퍼 함수: Babel 변환 시 필요한 여러 보조 기능을 제공합니다 (예: 클래스 생성, 스프레드 연산자 확장 등). *폴리필: 구형 브라우저에서 ES6 이상의 기능(예: Promi..
7. Husky로 local 코드 품질 관리하기 Whay is Husky? pre-commit (커밋 전) 단계에서 코드 린팅 및 포매팅 자동화를 통해 코드 품질을 관리하는 도구 팀으로 작업시에 설정한 린팅,포매팅을 자동 적용하기 때문에 일관성 있는 코드를 작성할 수 있다. [1] 디펜던시 설치 yarn add -D husky@4 lint-staged husky husky는 Git 훅(hooks)을 쉽게 관리하고 사용할 수 있게 해주는 도구입니다. ( *Git Hook : 특정한 Git 이벤트(예: 커밋, 푸시)가 발생할 때 자동으로 실행되는 스크립트 ) lint-staged Git의 staged 파일(커밋하기 전에 스테이징된 파일)에 대해 린트(lint)나 다른 자동화된 프로세스를 실행하는 도구 hus..
6. Prettier 적용 ( code beautifier ) Prettier를 통해 코드 서식 지정 스타일 가이드를 적용할 수 있다. [1] VScode Prettier extension 설치 [2] Prettier관련 Dev 디펜던시 설치 yarn add -D prettier eslint-config-prettier eslint-plugin-prettier prettier prettier 코어 라이브러리 eslint-config-pretteir prettier와 충돌할 수 있는 eslint rule을 disable 시켜줌 eslint-plugin-prettier prettier를 eslint rule에 맞게 동작시키는 플러그인 [3] root디렉토리 .prettierrc.js 설정 파일 추가 // ...
5. ESLint 사용하기 [1] ESLint ? JS 코드의 버그를 미리 찾아내고, 코드 스타일과 일관성을 유지하는 데 도움을 줌. [2] ESLint 적용을 위한 패키지 설치하기 (for React with TS) yarn add -D eslint yarn add -D eslint-plugin-react eslint-plugin-react-hooks // react, hooks lint 규칙 지원 yarn add -D @typescript-eslint-parser @typescript-eslint/eslint-plugin // ts parser , ts lint 규칙 지원 yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y // ESModule 사용 ,..
React Refresh 란? 코드가 중간에 수정 되더라도 컴포넌트의 state를 유지시켜주는 기능 Cf.) CRA(Create React App) 환경에서 셋업한 프로젝트는 기본 적용 되어있으므로 별도의 설정이 필요 없다. Why should we use this ? React app 개발을 하다보면 코드가 빈번히 수정되고 이 때마다 컴포넌트의 state가 초기화 되는 문제가 발생, 따라서 코드가 수정되더라도 컴포넌트 상태를 지속시켜주는 기능이 필요하다. Solution 아래의 두 모듈을 설치 yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh react-refresh React의 Fast Refresh 기능을 구현하는 데 사용되는 모듈, 컴..
dev , prod와 같은 다중 환경에서의 웹팩 설정하기. 현재까지의 설정 코드로는 development목적으로는 사용할 수 있지만, production 목적으로 사용할 때는 번들크기 및 환경 구성과 관련해 어느 정도 최적화가 필요하다. 1. dev,prod 환경에 재사용되는 파일로 Rename하기 (webpack.config.js ⇒ webpack.common.js) 기존 파일에서 mode : ‘development’ 옵션 제거 2. webpack.dev.js 추가 module.exports={ mode: 'development', devtool: 'cheap-module-source-map', //원본 소스와 변환된 코드 사이의 매핑을 제공하며, 빌드 속도와 파일 크기 사이에 좋은 균형을 제공, 하지..
