지금부터가 반전

※ 해당 내용은 유투브 채널 '가장 쉬운 웹개발 with Boaz' 의 React 까보기 시리즈를 듣고 정리한 내용입니다. 1. VDOM 프로그래밍 컨셉으로 메모리 상에 UI 관련된 정보를 띄우고, react-dom과 같은 라이브러리에 의해 실제 DOM이랑 띄워놓은 정보랑 sync를 맞춘다. 이 과정을 reconciliation(재조정)이라고 하며 이때 reconciler가 관여한다. 왜 가상(virtual)이야?! 실제 DOM을 조작하는 일은 브라우저가 paint 해서 보여줘야하는 과정이 비용이 크다. 가상으로 하는 게 더 빠르고 비용이 적음. VDOM 어떻게 구현되어 있지? - DOM node들이 fiber node (js 객체) 대체되어 구성된 tree 형태 - 더블 버퍼링 구조로 current t..

※ 해당 내용은 유투브 채널 '가장 쉬운 웹개발 with Boaz' 의 React 까보기 시리즈를 듣고 정리한 내용입니다. 🍏 0. Intro 리액트 아키텍쳐의 변화가 있었다. 16v 이전에는 stack 아키텍쳐를 사용하다가 fiber로 변경되었고, 18v에서 본격적으로 사용하게 되었다. stack은 후입선출의 자료구조이지만, fiber는 들어간 순서와는 무관하게 꺼낼 수 있다는 점이 가장 큰 차이점이다. React에서 '꺼낸다'라는 의미는 'DOM 에 변화를 적용한다'라고 이해할 수 있는데, stack을 사용하면 순서가 고정되게 되고, 이렇게 되면 렌더링 할 때의 순서를 유연하게 가져갈 수 없다. 그래서 보다 렌더링 순서를 조정하기 위해서 fiber라는 아키텍쳐로 변화했다. 🍎 1. 패키지 구성 요소 ..

이번 글에서는 JavaScript의 클로저(closure)에 대해서 알아보고, 자바스트립트 라이브러리인 리액트에서의 클로저 활용에 대해 정리해보았습니다. "A closure is the combination of a function and the lexical environment within which that function was declared." 클로저는 함수와 그 함수가 선언되었을 때의 렉시컬 환경(lexical environment)의 조합이다. 출처 : MDN 클로저(Closure)란? 클로저는 자바스크립트에만 국한되지 않고, 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 특성이다. 🔆 일급 객체(First Class Object) 인 함수 : 함수를 변수에 할당할 수 있..

이 글에서는 컴포넌트의 re-evaluation과 re-rendering의 차이에 대해서 알아보고, 최적화 방법의 대표격인 React.memo 와 useCallback을 이용해서 최적화 하는 방법에 대해 말해보려고 한다. 리액트의 작동원리와 re-evaluation, re-rendering, 최적화에 대해서 순차적으로 알아보자. 1️⃣ 리액트의 작동 원리 알다시피 React는 UI 를 구축하기 위한 JS 라이브러리이다. 그런데 사실 React는 web을 알지 못한다. React는 오직 component, state, data, context, props 등에 대해서만 신경쓰고, UI 를 바꾸거나 업데이트 하는 건 ReactDOM이 처리한다. 즉, ReactDOM은 React 와 web 간의 interfa..

CS 스터디에서 sorting에 대해서 얘기를 하던 중, java에서는 sort 내장 메서드가 merge sort를 사용한다는 얘기를 들었다. JavaScript에서도 sort는 매우 자주 사용하는 메서드라, 어떤 정렬 알고리즘을 사용하는지 궁금해져 찾아보았다. 그 결과 JavaScript는 놀랍게도, 엔진에 따라서 다른 정렬 알고리즘을 사용한다는 사실을 알게되었다. ECMAscript 에 어떤 알고리즘을 써야하는지 특정하지 않았기 때문에, 브라우저마다 다른 정렬 알고리즘을 사용하는 것이다. 그래서 각 엔진은 어떤 정렬 알고리즘을 사용하는지 궁금해져 정리해보고자 했다. 1️⃣ V8 엔진 출처 - v8 기술 블로그 제일 먼저 알아볼 것은 Chrome 브라우저와 nodeJS 의 V8 엔진이다. v8 엔진은 ..

🤔 1. redux-persist를 사용한 이유 프로젝트 중 로그인 기능을 구현하는데, 서버로부터 받아온 회원정보를 저장해야했다. 예를 들어 로그인한 유저의 username, email 등은 프로젝트 전반에 필요한 정보이다. 그렇다는 말은 데이터를 전역적으로 관리할 필요가 있다는 뜻이기도 하다. 이번 프로젝트에서는 Redux-toolkit을 사용하기로 정했기 때문에 Redux의 store에 유저정보를 저장하여 전역적으로 값을 관리하기로 하였다. 그런데 하나 문제가 생겼다. 로그인 API request에 대한 response에 담겨있는 유저 정보를 store에 저장했을 때, 직후에는 값이 관찰되지만, 새로고침을 하거나 다른 페이지로 이동했을 때 값이 사라지는 걸 확인했다. 이때 redux-persist를 ..