⚡리액트 핵심 요소 깊게 살펴보기 - 2.2 가상 DOM과 리액트 파이버2.2.1 DOM과 브라우저 렌더링 과정🌚 DOM(Document Object Model)웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있음💡브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정1. 브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드한다. 2. 브라우저의 렌더링 엔진은 HTML을 파싱(해석)해 DOM 노드로 구성된 트리(DOM)를 만든다. 3. 2번 과정에서 CSS 파일을 만나면 해당 CSS 파일도 다운로드한다. 4. 브라우저의 렌더링 엔진은 이 CSS도 파싱해 CSS 노드로 구성된 트리(CSSOM)을 만든다. 5. 브라우저는 2번에서 만든 ..

⚡리액트 핵심 요소 깊게 살펴보기 - 2.1 JSX란?javaScript XML의 줄임말로, 리액트(React)에서 주로 사용하는 JavaScript 확장 문법JavaScript 코드 안에서 HTML 태그처럼 보이는 코드를 쓸 수 있게 해주는 문법2.1.1 JSX의 정의JSX는 JSXElement, JSXAttributes, JSXChildren, JSXStrings 4가지 컴포넌트로 구성되어 있음.1. JSXElementJSX를 구성하는 가장 기본요소, HTML의 요소와 비슷한 역할을 함JSXOpeningElement : 일반적인 요소 ex) JSXClosingElement : JSXOpeningElement 가 종료되었음을 알리는 요소ex) JSXSelfClosingElement : 요소가 시작되..

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.7 타입스크립트1.7.1 타입스크립트란TypeScript is JavaScript with syntax for types기존 자바스크립트 문법에 타입을 가미한 것자바스크립트는 동적 타입의 언어이기 때문에 대부분의 에러를 코드를 실행했을 때만 확인할 수 있다는 문제점동적 타입 언어라는 점은 개발자에게 자유를 주기도 하지만 코드의 규모가 커질수록 오히려 발목을 잡는 경우도 많음타입스크립트는 타입 체크를 정적으로 런타임이 아닌 빌드 타입에 수행할 수 있게 해줌모든 함수와 변수에 타입 확인 연산자인 typeof를 적용해서 체크하는 것은 너무 번거롭고 코드의 크기를 과도하게 키움function test(a,b) { return a/b}test(5,2) // 2..