🚀 가상 DOM과 리액트 파이버 리액트의 특징은 바로 가상DOM이다. 이 가상DOM이 왜 만들어졌는지, 실제 DOM과 어떤 차이가 있는지 알아보도록 하자. 1️⃣ DOM과 브라우저 렌더링 과정 브라우저는 Navigation과정을 통해 주소에 해당하는 서버에 HTML파일을 요청하고 다운로드 한다. 브라우저의 렌더링 엔진에 의해 DOM과 CSSOM이 만들어지고, 자바스크립트 엔진을 통해 AST가 만들어진다. AST는 DOM과 CSSOM에 적용되고, 이 DOM과 CSSOM은 결합하여 RenderTree가 만들어진다. 브라우저의 렌더링 엔진에 의해 레이아웃과 페인트 과정을 통해서 픽셀 단위로 화면에 뿌려지게 된다. 2️⃣ 가상 DOM의 탄생 배경 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이..
JSX란 무엇인가? 리액트의 등장과 함께 메타에서 선보인 구문이지만, 반드시 리액트에서 사용하리란 법은 없다. xml과 유사한 내장형 구문이다. ECMA 자바스크립트 표준은 아니다. 즉 V8이나 Deno와 같은 JS엔진에서 실행되거나 표현된다면 에러가 발생한다 따라서 JSX는 반드시 트랜스파일러를 거처야 비로소 JS엔진이 이해할 수 있는 언어가 된다. 1️⃣ JSX의 정의 JSXElement JSXOpeningElement : JSXClosingElement : JSXSelfClosingElement : JSXFragment : → 요소의 이름은 대문자로 시작해야한다. 이는 JSXElement의 표준은 아니다. html태그명과 구분하기 위한 React의 규칙이다. JSXElementName JSXIden..
"한빛미디어 서평단 활동을 위해서 책을 제공 받아 작성된 서평입니다." You Don’t Know JS (YDKJS) 책은 익히 들어봤습니다. JS 개발자라면 누구나 한 권쯤 가지고 있을 모던 자바스크립트 Deep Dive 책이 기초적인 JS의 개념을 다룬다면, YDKJS책은 닌자 비급이라 불리는 JS Ninja 라는 책과 더불어 자바스크립트의 조금 더 깊은 이해를 도와주는 필독서로 알고 있었습니다. 하지만 이 두 책은 출판 된지 꽤 시간이 흘렀고, 급격히 변하는 웹 프론트 생태계를 공부하는 와중에 7년이 지난 책을 챙겨 읽을 겨를은 없었습니다. 이번에 그 YDKJS의 두 번째 버전의 책이 나왔다는 소식을 들었을 때 명성 있는 책인 만큼 꼭 읽어보겠노라 다짐했고, 정말 감사하게도 ‘한빛 미디어’에서 책을..
✨ 선언 파일 타입 선언은 파일 이름이 .d.ts확장자로 끝나는 선언 파일에 작성됩니다. .d.ts 파일에는 사용 가능한 런타임 값, 인터페이스, 모듈, 일반적인 타입 설명만 포함됩니다. 선언 파일은 값이 아닌 타입만 선언할 수 있는 코드 영역을 의미하는 앰비언트 컨텍스트를 생성합니다. ✨ 런타임 값 선언 declare 키워드를 사용해 구조체가 존재한다고 선언할 수 있습니다. 이는 script 태그 같이 외부 작업을 통해 가져온 구조체에 특정 타입의 값을 생성할 수 있습니다. 함수와 클래스도 일반적인 형식과 유사하게 선언되지만, 본문이 없습니다. declare function get() { // ... } // ERROR An implementation cannot be declared in ambien..
제네릭을 통해 호출하는 방식에 따라 다양한 타입으로 작동하도록 의도할 수 있습니다. ✨ 제네릭 함수 function identity(input: T){ return input } const identity2 = (input: T) => input; 화살표 함수의 제네릭은 .tsx 파일에서 JSX 구문과 충돌합니다. 명시적 제네릭 호출 타입 function logWrapper(callback: (input: Input) => void) { return (input: Input) => { console.log("Input:", input); callback(input) } } logWrapper((input: string) => { console.log(input.length); }) logWrapper((..
✨ top 타입 top 타입은 시스템에서 가능한 모든 값을 나타내는 타입입니다. any any 타입은 top 타입처럼 작동할 수 있지만, 타입 검사를 수행하지 않도록 명시적으로 지시합니다. 즉 타입 오류를 보고하지 않습니다. let anyValue: any; anyValue = "ABC" // OK anyValue = 123 // OK function greet(name: any){ console.log(`hi ${name.toUpperCase()}!`) } greet({name: "ABC"}) // OK unknown unknown 타입은 진정한 top타입 입니다. 타입의 값을 제한적으로 취급합니다. function greet(name: unknown){ console.log(`hi ${name.toU..