[리액트 딥 다이브]02-2 가상 DOM과 리액트 파이버

🚀 가상 DOM과 리액트 파이버 리액트의 특징은 바로 가상DOM이다. 이 가상DOM이 왜 만들어졌는지, 실제 DOM과 어떤 차이가 있는지 알아보도록 하자. 1️⃣ DOM과 브라우저 렌더링 과정 브라우저는 Navigation과정을 통해 주소에 해당하는 서버에 HTML파일을 요청하고 다운로드 한다. 브라우저의 렌더링 엔진에 의해 DOM과 CSSOM이 만들어지고, 자바스크립트 엔진을 통해 AST가 만들어진다. AST는 DOM과 CSSOM에 적용되고, 이 DOM과 CSSOM은 결합하여 RenderTree가 만들어진다. 브라우저의 렌더링 엔진에 의해 레이아웃과 페인트 과정을 통해서 픽셀 단위로 화면에 뿌려지게 된다. 2️⃣ 가상 DOM의 탄생 배경 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이..

• format_list_bulleted 개발관련/리액트 딥 다이브
• · 2024. 4. 20.
• textsms

[모던 리액트 Deep Dive] 02-1 JSX란 무엇인가?

JSX란 무엇인가? 리액트의 등장과 함께 메타에서 선보인 구문이지만, 반드시 리액트에서 사용하리란 법은 없다. xml과 유사한 내장형 구문이다. ECMA 자바스크립트 표준은 아니다. 즉 V8이나 Deno와 같은 JS엔진에서 실행되거나 표현된다면 에러가 발생한다 따라서 JSX는 반드시 트랜스파일러를 거처야 비로소 JS엔진이 이해할 수 있는 언어가 된다. 1️⃣ JSX의 정의 JSXElement JSXOpeningElement : JSXClosingElement : JSXSelfClosingElement : JSXFragment : → 요소의 이름은 대문자로 시작해야한다. 이는 JSXElement의 표준은 아니다. html태그명과 구분하기 위한 React의 규칙이다. JSXElementName JSXIden..

• format_list_bulleted 개발관련/리액트 딥 다이브
• · 2024. 4. 20.
• textsms

React에서의 MSW 기본 사용법

❤️‍🔥MSW 소개 MSW(mocking service worker)는 API를 mocking할 수 있는 라이브러리 입니다. mocking의 장점 테스트 코드의 의존성을 덜어내 독립적인 테스트 코드를 작성할 수 있습니다. 실제 응답을 기다리지 않기 때문에, 속도 측면에서 비용절감이 될 수 있습니다. ❗️MSW를 React에서 사용해보자. 우선 msw를 설치해줍니다. npm install msw@latest --save-dev 그 다음 msw를 실행해줍시다. npx msw init public/ --save "msw": { "workerDirectory": [ "public" ] } 이 결과로 package.json에 다음과 같은 스크립트가 추가됩니다. 세팅이 완료되었습니다. 이제 mocking 모듈을 만..

• format_list_bulleted 개발관련/React
• · 2024. 4. 14.
• textsms

옵저버 패턴(Observer Pattern)과 React Query

우아한 테크코스 Level1을 하면서, 바닐라 JS에 대한 이해도가 조금 생긴 것 같다. 이 과정에서 웹을 구성하는 핵심이 무엇일까?, 바닐라JS로 웹을 구현하는데 핵심이 무엇일까? 생각해 보았을때, 나는 ‘비동기로 실행되는 이벤트’라고 생각했다. 즉, 상태가 계속해서 변할 때 이벤트를 어떻게 효율적으로 실행하는가? 이다. 리액트에서는 useEffect 와 useState 와 더불어, Redux React Query등을 사용하며, ‘상태를 감지하는 시스템’을 통해 간편하게 관리를 하지만, 바닐라에서는 어떻게 구현하면 좋을까? 생각을 많이 했다. 그 중에서 눈에 띄었던 기능은 ‘웹 컴포넌트’에서의 observedAttributes 메서드, 그리고 Mutation Observer를 통해서 DOM에 있는 요소..

• format_list_bulleted 개발관련/React
• · 2024. 4. 8.
• textsms

[JS] Element 함수 matches()를 이용한 이벤트 추가

❗matches 함수의 기본적인 사용방법 matches 함수는 Element의 내장 메서드입니다. CSS 선택 문자열로 요소의 일치 여부를 판단할 수 있습니다. const element = document.getElementById('myElement'); if (element.matches('.myClass')) { console.log('The element matches the selector'); } else { console.log('The element does not match the selector'); } ❗matches를 이용한 버튼 이벤트 추가 다음과 같이 버튼이 있다고 했을 때, 이벤트를 어떻게 부여할 수 있을까요? btn1 btn2 btn3 기본적으로 순회를 통해서 addEvent..

• format_list_bulleted 개발관련/Javascript
• · 2024. 3. 7.
• textsms

[개발 상식] CDN은 무엇일까?

CDN이란? CDN은 Content Delivery Network의 약자로 웹 페이지의 로드 속도를 높혀주는 서버 네트워크입니다. 웹 페이지에서 이미지와 같은 대용량 데이터를 읽어오는데, 서버와의 물리적 거리가 멀다면 로딩되는 속도가 느릴 수 있습니다. 이와 같은 상황에서 물리적으로 가까운 CDN서버에 대용량 데이터를 저장해 빠른 웹페이지 로딩을 기대할 수 있습니다. CDN의 장점? CDN은 컨텐츠 사용자와의 물리적 위치가 가까운 서버에 데이터를 캐싱하여 빠르게 웹페이지를 보여줄 수 있습니다. 서버를 분산시키기 때문에 하나의 서버에 과도한 요청을 보내는 것을 방지해줍니다. 이로써 DDoS 완화를 할 수 있고, 대역폭을 줄여 비용을 절감할 수 있습니다.

• format_list_bulleted 개발관련/개발 상식
• · 2024. 3. 2.
• textsms