지금부터가 반전

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

프로젝트에서 이미지 파일을 다뤄야 하는 경우가 많았다. 기본적으로 유저 프로필뿐만 아니라, 포스트나 리뷰 등에서도 사진을 업로드하고 수정하는 기능을 제공하기 때문이다. 백에서 이미지 업로드 용 api 를 따로 제공해주셨다. 이미지 파일을 동반하는 모든 요청은 우선적으로 이미지업로드api로 formData 형식의 이미지 파일을 보내고, 이 응답에 담겨오는 이미지 string 값을 본 요청에 포함하여 보낸다. 너무 큰 용량의 이미지를 그대로 받아들일 경우 서버 비용이 많이 든다... 그래서 초반에는 특정 용량을 초과하는 이미지 파일의 경우 입력을 할 수 없게 막아두었다. 하지만 보통의 유저들은 용량까지 생각하면서 이미지 파일을 관리하고 업로드 하지 않기 때문에... 나도 다른 서비스를 이용하다 이런 경우를 ..

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

개발 시작 전에 폴더구조에 대한 회의를 진행했어야 했지만, 내가 프로젝트의 중간에 합류하기도 했고, 기존에 계획되어있던 개발 일정이 있었기 때문에 충분한 논의를 거치지 못한 채 개발을 진행하였다. 그래서 폴더트리가 엉망이었고, 이를 리팩토링 하기로 하였다. 📌 전체적인 구조 ./src ├── app ├── assets ├── components ├── features ├── hooks ├── layout ├── pages ├── styles ├── types └── utils 1. app ├── app │ └── api 프로젝트의 기능과 관련된 여러 파일을 배치하는 폴더입니다. api 하위폴더를 두어 api 호출과 관련된 파일을 위치시켰습니다. 2. assets 이미지 파일들이 위치하는 폴더입니다. 이미..

이번 글에서는 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..