rexondex's blog

리액트의 가상 DOM(Virtual DOM)에 대한 핵심 개념을 리액트 레퍼런스 문서 링크와 함께 3가지로 정리해보았습니다. 1.성능 향상 ■ 요소 비교하기 (Reconciliation)리액트의 "조정(reconciliation)" 과정은 가상 DOM의 변경 사항을 비교하는 Diffing 알고리즘을 사용하여 실제 DOM에 최소한의 변경 사항만 적용하는 핵심 과정입니다.이 과정에서 리액트는 변경된 부분만 효율적으로 업데이트하여 성능을 향상시킵니다.- https://ko.legacy.reactjs.org/docs/reconciliation.html또한, 리액트 18이후 동시성 렌더링 도입으로 인해서 렌더링의 과정이 많이 변경되었으므로 참고할 수 있습니다.- https://react.dev/blog/2022/..

리액트 렌더링 과정 순서에 따라 간단한 설명을 공식 문서와 함께 덧붙였습니다.총 1~8 단계로 정리했습니다. 1. 컴포넌트와 JSX ■ 컴포넌트 : 레고 블록처럼 UI를 구성하는 작은 단위입니다. 재사용 가능한 코드로, 웹 페이지의 특정 부분을 담당합니다. (예: 버튼, 입력창, 메뉴 등)- https://react.dev/reference/react/Component ■ JSX : HTML처럼 생긴 문법으로, JavaScript 코드 안에서 UI를 쉽게 작성할 수 있게 도와줍니다. 브라우저는 JSX를 이해하지 못하므로, JavaScript 코드로 변환해야 합니다.- https://react.dev/learn/writing-markup-with-jsx ■ React.createElement() : JSX..

items.json은 깃허브에 배포한 제 블로그의 게시물 데이터 파일입니다. 제 items.json 또한 공개된 장소에 누구나 접근할 수 있으므로 Nest.js에서 Axios로 데이터를 요청해 보았습니다. -- Next.js 설치npx create-next-app@latest-- 프로젝트 디렉토리로 이동cd my-nextjs-project-- 프로젝트 실행npm run dev   Next.js에서는 `/app` 하위에 있는 `page.tsx`가 기본 화면으로 동작합니다. 그래서 `/app/page.tsx`가 `localhost:3000/` 에 접속했을때 보이는 기본 화면이 됩니다. 저는 `/app` 하위에 `/request` 를 생성한 후, `page.tsx`를 생성했습니다. 이 `/reqeust/pag..