Frontend

React 재조정 🌱

React의 재조정(Reconciliation)에 대해 정리해보려 합니다. 여기서 말하는 재조정에서는 diffing 알고리즘을 어떻게 정의했는지에 관한 것입니다. diffing 알고리즘에에 따라 가상 DOM과 실제 DOM의 차이를 판단합니다. 그리고 변경이 필요한 부분만 대체가 되는 것입니다. 두개의 가정을 먼저 인지하여야 합니다. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 어떤 자식 element가 변경되지 않아야 하는지를 표시해 줄 수 있다. diffing 알고리즘 엘리먼트의 타입이 다른경우 리액트에서는 두 개의 트리를 비교할때, 두 엘리먼트의 root 엘리먼트부터 비교를 하게 됩니다. 이 root 엘리먼트가 다르다면 root 엘리먼트를 포함한 트..

Javascript Promise, async/await MicroTask queue 동작차이 🖇

Javascript 내에서 callback를 더 효율적으로 사용하기 위해 promise가 등장하였고 promise를 더 효율적으로 사용하기 위해 es8에서 async/await 이 등장하였습니다. promise와 async/await이 브라우저에서 어떻게 구현되는지 동작의 차이를 알게되었고 이를 글로 적어보려 합니다. promise, async/await은 둘다 promise를 return하거나 throw하므로 micro task queue에서 다루어집니다. callback queue에는 3종류가 있습니다. macro task queue, micro task queue, animationFrame 우선순위는 micro task queue > animationFrame > macro task queue 순..

Javascript Prototype 🤢

프로토타입(prototype)이란 한글로 원래의 형태 또는 전형적인 예라는 뜻을 가지고 있습니다. javascript는 프로토타입 기반의 언어입니다. 그래서 javascript에서 프로토타입 개념을 이해하는 것은 매우 중요합니다. 클래스 기반언어 에서는 클래스를 먼저 선언하고 새로운 객체(인스턴스)를 생성합니다. 하지만 javascript에서는 프로토타입(prototpe)을 원형으로 삼고 이를 이용하여 객체를 생성합니다. var jade = { name: 'jade' } jade.toString() // '[object Object]' function Person(name) { this.name = name } var wade = new Person('wade') wade.name // 'wade' wa..

React hook 🌱

React Hook이란? React Hook은 자바스크립트 함수 입니다. Hook은 class를 작성하지 않고도 state와 React의 기능들을 사용할 수 있게 해줍니다 Hook이 등장한 이유는 다음과 같습니다. 컴포넌트 사이에서 상태로직을 재사용하기 어렵습니다. -> Custom hook의 등장배경 - Render Props와 HOC 같은 패턴은 코드의 파악이 어렵다 - 상태 관련 로직을 추상화 하기가 어렵다 (이 내용은 클래스형 컴포넌트 공부후에 이해가 더 될듯) Class는 사람과 기계를 혼동시킵니다. - this가 동적으로 결정되기 때문에 클래스 내부에서 파악하기가 어렵다 - class는 코드의 최소화를 힘들게 만들고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다. 복잡한 컴포넌트들은 이해..

웹팩이란????(간략히) 🔥

웹팩이란 웹팩은 모듈 번들러 입니다. entry point, 즉 진입파일을 명시해주고 이 진입 파일로 부터 필요한 모듈들을 모두 긁어모아 하나의 파일로 만들어 줍니다. 클라이언트에서는 여러 파일을 요청하지 않고 하나의 파일만 요청함으로써 어플리케이션을 활성화 시킬수 있습니다. 웹팩은 js파일만 인식하고 다룰수 있습니다. 다른 형식의 파일을 load해야할때는 loader를 추가해주어야 합니다. 그래서 html, css, img 등을 처리할때는 각각의 loader를 추가해주어야 합니다. 이 loader들은 비js 파일들을 웹팩내에서 다룰수 있게 해줍니다. minify, ugilify등을 수행하기 위해서는 terserPlugin과 같은 여러 plugin도 추가할 수 있습니다. 플러그인은 웹팩으로 변환한 파일에..

React 연속된 요청 useEffect 내에서 처리하기 (useEffect, suspense)

이 포스트는 React 공식문서의 Suspense 관련 부분을 보던중 아래의 내용을 실행해보기 위한 포스트 입니다. Suspense를 사용하여 효율적으로 제어할 수 있는 race condition을 useEffect내에서도 처리하기 위한 방법입니다. 클로저, 스코프 체인와 cleanUp function을 이용하였습니다. 여기서 정의하는 경쟁상태란 코드가 실행되는 순서에 대한 부정확한 가정에서 비롯되는 버그 입니다. 위의 이미지는 useEffect 내에서 promise를 통해 데이터를 불러온후에 컴포넌트의 상태를 업데이트하는 동작 화면입니다. promise의 응답 시간은 무작위로 설정되어 있습니다. next 버튼을 클릭하면 id를 변경해주고 변경된 id로 각 컴포넌트에서 promise로 요청을 보내줍니다..

React suspense

React에 Suspense 컴포넌트가 추가되었습니다. 기존의 명령형으로 loading 상태를 지정해 주어야 했던 것을 Suspense 컴포넌트를 이용하면 선언형으로 코드를 작성할 수 있습니다. React의 experimental에서 사용이 가능했었지만 3월 24일 정식 출시된 18버전에서 사용이 가능합니다. Concurrent 모드에서 사용이 가능합니다. 기존에 ReactDom.render => ReactDom.createRoot().render 형식으로 사용하여야 Suspense 컴포넌트를 사용할 수 있습니다. // 기존 import ReactDOM from 'react-dom' ReactDOM.render( , document.getElementById("root") ) // 변경된 모습 impor..

React 상태관리의 과거, 현재 그리고 미래 (번역글)

이 포스트는 아래 출처의 블로그 글을 번역한 내용입니다. React는 2013년 5월에 소개되었습니다. 이것은 패러다임은 UI가 상태에 따라 동작하는것으로 전환되었습니다. 컴포넌트의 상태가 주어지면 React는 어떻게 컴포넌트가 보여야 하는지 결정할 수 있습니다. React는 상태라는 아이디어 위에서 조직되었습니다. 그러나 상태는 React 어플리케이션을 만드는데 있어 가장 어려운 부분으로 여겨지고 있습니다. React의 상태 관리를 견고한 벨트로 상상해봅시다. 수년동안 이 벨트를 사용해왔고 느리게 새로운 도구들이 추가됩니다. 각각의 도구들은 각각의 목적을 수행합니다. 당신은 볼트를 조일때 망치를 사용하지 않습니다. 장인으로서 각각의 도구를 적절한 상황에 사용해야 합니다. 리액트의 상태관리 도구는 견고한..

React-query 🌱

react-query는 서버의 상태를 다루기에 정말 좋은 라이브러리라고 생각합니다. react-query의 공식 홈페이지에서도 서버의 상태를 위한 라이브러리로 설명되어있습니다. * React Query는 서버 상태 라이브러리입니다. 서버와 클라이언트의 비동기적인 동작을 관리하기에 적합합니다. * Redux, MobX, Zustand, etc 는 클라이언트 상태 라이브러리 입니다. 비동기 데이터를 저장할수는 있지만 React Query에 비해서는 비효율적입니다. 이러한 점을 염두에 두고 React Query는 클라이언트 상태에 위치한 캐시데이터를 관리하기 위한 boiler plate코드와 관련 로직들을 코드 몇 줄 만으로 대체한다는 것입니다! Redux에서 서버의 api요청 응답을 저장해두고 있을때는 아..

Recoil 🌱

리액트에서 전역 상태관리를 위해 Redux는 널리쓰입니다. 비동기 action을 지원하기 위해 redux-thunk, redux-saga등이 추가되어 미들웨어로서의 동작으로 비동기 동작을 이용할 수 있게 해줍니다. Redux에서는 전역 컴포넌트 상태와 서버 상태의 분리를 위해 Redux-thunk query또한 추가 되었습니다. Redux는 리액트를 비롯하여 다른 라이브러리, 프레임워크에서 사용이 가능합니다. React-Redux는 Redux를 React만을 위해 사용하려고 등장한 라이브러리 입니다. 불필요한 리렌더링을 방지하고 동작을 최적화 하기위해 등장한 것으로 알고 있습니다. 이러한 서드파티 라이브러리 들이 사용되던 시기에 Recoil이 등장합니다. Recoil은 리액트 만을 위해 생겨난 first..