React
1.번들링 & 웹팩
사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음1) 사용자가 브라우저를 열고 주
2.웹팩의 핵심 개념
Webpack은 다양한 환경과 target을 컴파일한다. Browser Compatibility와 연관된 속성기본값은 web (적용하지 않으면 기본값으로 적용됨)web 외에도 다양한 환경을 컴파일 할 수 있다.esX를 넣으면 지정된 ECMAScript 버전으로 컴파일할
3.웹팩 이용해 빌드하기 1 - Entry, Output, Bundle
딱 한 번만 Lorem ipsum을 출력하는 애플리케이션을 만들어보자!package.json 기본값으로 바로 생성loadish 라이브러리의 once 메소드를 직접 구현한 것\-는 함수(func)를 인자로 받아 익명함수를 리턴하는 함수(once)가 들어있는 객체under
4.웹팩 이용해 빌드하기 2 - Loader
👉🏽 아무것도 뜨지 않고 아래 에러가 난다. src/index.js에서 사용한 require 문법은 Node.js 문법으로, 브라우저에서는 지원하지 않기 때문.index.html 파일을 dist 디렉토리로 옮기고번들 파일(app.bundle.js)과 연결시킨다. 웹
5.웹팩 이용해 빌드하기 3 - Plugins
HTML도 번들에 포함시켜 보자!dist 디렉토리에 있던 index.html 파일을 src 디렉토리로 옮긴다. HTML 파일을 원하는 형태로 가공해 번들에 포함할 수 있게 돕는 html-webpack-plugin 플러그인 설치번들링 과정 중에 개발자가 원하는 다양한 작
6.웹팩 이용해 빌드하기 (바닐라 JS)
없으면 🦄 npm init -y로 생성npm run build로 webpack이 실행되도록 추가보통 ./src/index.js (기본값)(여기서는 ./script.js)디펜던시 파일에서 export 해주고entry 파일(script.js)에서 불러오기devDepend
7.웹팩 이용해 빌드하기 (React)
client와 server가 같이 있는 레포지토리.server 디렉토리 쪽은 신경 안 써도 됨. 실제 작업에서는 없을 디렉토리..없으면 🦄 npm init -y로 생성npm run build로 webpack이 실행되도록 추가보통 ./src/index.js (기본값)디
8.useMemo : 값을 재사용 하는 Hook
리액트 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링된다. 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다. 렌더링 최적화를 위한 Hook : useMemo와 useCallback특정 연산의 결과값(value)을 재사용하고자 할
9.useCallback : 함수를 재사용 하는 Hook
메모이제이션 기법을 이용한 HookuseMemo가 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook이다. 컴포넌트가 리렌더링 되더라도 함수가 의존하고 있는 값들이 바뀌지 않았다면, 함수를 메모리 어딘가에 저장해뒀
10.코드 분할 (Code Spliting)
React 앱들은 대부분 Webpack, Rollup 등을 이용해 번들링(Bundling)번들된 앱은 모든 JavaScript가 한 곳에 있기 때문에 링크 태그 하나만으로도 전달 가능but 브라우저(JavaScript 엔진)이 해석해야 하는 자바스크립트 코드의 양이 많
11.React.lazy()와 React.Suspense
React.lazy 함수를 사용해 컴포넌트를 동적으로 import(dynamic import)할 수 있다. 이를 사용해 초기 렌더링 지연시간을 어느정도 줄일 수 있다. React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의
12.json-server 라이브러리
json 파일을 이용하여 REST API 서버를 구축해주는 라이브러리.json 파일로 Mock 데이터를 만들고 json-server 라이브러링 연결해주면 서버가 구축된 것처럼 API 요청과 응답을 주고받을 수 있다. REST API의 기본적인 성능은 전부 갖추고 있으나
13.React가 VirtualDOM을 활용하는 방법
원티드 프리온보딩 프론트엔드 챌린지 4월 - 리액트 해부학VirtualDOM, Reconciliation, FibercreateRoot()과 render()의 역할React가 Reconciliation을 통해 화면을 그리는 방법Fiber Reconciler의 rende
14.리액트 렌더링 (trigger, render, commit)
Triggering a render (주문을 주방에 배달)Rendering the component (주방에서 주문대로 요리)Committing to the DOM (손님에게 서빙)render가 일어나는 두 가지 원인(trigger)1) initial render (컴
15.렌더링 최적화를 위한 Automatic Batching (React 18)
하나의 이벤트 핸들러 안의 state 업데이트들을 \*일괄적으로 처리\[](https://yceffort.kr/2022/04/deep-dive-in-react-renderingevent queue에 저장되고, 16ms마다 실행하게 되는, 비동기적 처리??upd