milliwonkim의 블로그

const 키워드로 만든 리액트 컴포넌트는 각 컴포넌트마다 독립적인 인스턴스가 생성되므로, 해당 컴포넌트의 내부에서 window 객체를 사용하더라도 전역 스코프의 window 객체와는 별개로 새로운 window 객체가 생성됩니다. 여기서 독립적인 인스턴스라는 것을 어떻게 아냐? 로 할당하면 새로운 인스턴스를 생성합니다. Object.is()를 통해서 a와 b의 인스턴스가 서로 다른 독립적인 인스턴스라는 것을 말해줍니다. import React from "react"; const Example1 = () => { var count = 0; function handleClick() { count++; console.log(`Count is now ${count}`); } return ( Count: {cou..

let과 const 키워드로 선언된 변수는 전역 객체의 프로퍼티로 등록되지 않습니다. 따라서, 이들 변수는 window 객체에서 찾을 수 없습니다. 예를 들어, 다음과 같이 let 키워드로 선언된 변수 myVariable을 사용할 때 window.myVariable을 출력해보면 undefined이 반환됩니다. let myVariable = 42; console.log(window.myVariable); // undefined 마찬가지로, const 키워드로 선언된 변수 myConstant를 사용할 때도 window.myConstant를 출력하면 undefined이 반환됩니다. const myConstant = "Hello, world!"; console.log(window.myConstant); // u..

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 내의 태그 등을 가져올 경우 => 렌더링 비용이 큼 렌더링 = '스타일 => 레이아웃 => 페인트 => 합성'의 과정 중 스타일 이후의 과정(레이아웃, 페인트, 합성) 리렌더링 반복 시 => 돔 추가 삭제 등 계산이 계속 발생 => 안좋음 가상돔을 이용한 리액트의 렌더링 - '변화 전 가상돔 변화 후 가상돔' 끼리 비교 => 바뀐 부분만 실제 돔에 적용 레이아웃 계산은 한 번 뿐(일괄 돔 업데이트 방식) 작은 규모의 레이아웃이 여러번 발생(리플로우)보..