milliwonkim의 블로그

import React from "react"; import { Switch, Route } from "react-router-dom"; import "./App.css"; import ListPage from "./pages/ListPage/index"; import ViewPage from "./pages/ViewPage/index"; function App() { return ( ); } export default App; 다음과 같은 코드를 렌더링 하면 크롬에서의 퍼포먼스와 fetching하는 파일들은 다음과 같습니다. 퍼포먼스 앱이 로드 되자마자 ListPage, ViewPage에 관련된 모든 js 파일이 다 업로드 됐습니다. 0.chunk.js의 로딩 시간이 22ms 다음의 상황에서 퍼포먼스 ..

webpack5에서부터는 worker-plugin을 설치하지 않아도 worker-plugin을 이용할 수 있습니다.(자동으로 컴파일) 따라서 직접 worker-plugin을 설치해서 webpack에 적용하면 다음과 같은 에러를 만납니다 Module parse failed: ParserHelpers.addParsedVariableToModule is not a function 따라서 다음과 같이 해줍니다. // 이 라이브러리는 원하는 RPC와 같은 경험을 제공한다. // worker-plugin에 wrap해서 사용 yarn add comlink // App.css body { margin: 0; overflow: hidden; font-size: 3rem; } button { font-size: 1.2re..

https://mine-it-record.tistory.com/577 DOM(Document Object Model) 생성 - 생명주기: DOMContentLoaded, load, beforeunload, unload 1. DOMContentLoaded => DOM 트리 완성 즉시 발생함. => img 및 CSS 등 외부 자원 기다리지 않음 => 여러 스크립트 태그가 존재한다면 => 모든 스크립트가 실행된 이후 DOMContentLoaded가 실행됨 (이유: DOMContentLoaded에 DOM 조작 관련 로직이 있을 수 있기 때문) // a // b // c // 실행순서 b => c => a => document.createElement('script')로 동적으로 생성되고 웹페이지에 추가된 스크립..

DOM(Document Object Model = 문서객체모델) - 자바스크립트가 p, a 태그 등을 조작할 수 있게 만든 트리구조 객체모델 - HTML/CSS DOM JavaScript 가상돔이 필요한 이유 - 매번 document 객체를 이용해서 DOM 내의 태그 등을 가져올 경우 => 렌더링 비용이 큼 렌더링 = '스타일 => 레이아웃 => 페인트 => 합성'의 과정 중 스타일 이후의 과정(레이아웃, 페인트, 합성) 리렌더링 반복 시 => 돔 추가 삭제 등 계산이 계속 발생 => 안좋음 가상돔을 이용한 리액트의 렌더링 - '변화 전 가상돔 변화 후 가상돔' 끼리 비교 => 바뀐 부분만 실제 돔에 적용 레이아웃 계산은 한 번 뿐(일괄 돔 업데이트 방식) 작은 규모의 레이아웃이 여러번 발생(리플로우)보..

// package.json { "name": "esbuild-react", "version": "1.0.0", "main": "index.js", "author": "김기원", "license": "MIT", "scripts": { "build": "rm -rf build && node build.js", "start": "node start.js -w && open http://localhost:3000" }, "devDependencies": { "esbuild": "^0.15.8", "esbuild-plugin-inline-image": "^0.0.8" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" } } // build.js c..

// react-monorepo라는 폴더를 만들고 yarn init mkdir react-monorepo && yarn init // react-monorepo안에서 packages 폴더를 만든다 cd react-monorepo && mkdir packages // packages 폴더 안에서 이용할 패키지들을 구성한다 // 예시로 CRA로 web, common 패키지를 구성한다 cd packages && npx create-react-app web && npx create-react-app common packages /web: 페이지를 렌더링 할 프로젝트(이걸 deploy 해야함) /common: web에 사용할 컴포넌트 제공 // react-monorepo 맨 상위 루트로 돌아온다 cd react-..