개발새발

React 앱은 어떻게 작동할까?우리는 npm run dev 한 줄로 앱을 실행하지만, 그 내부에서는 많은 일이 일어난다.React 앱이 브라우저에 렌더링되기까지의 흐름을 따라가보자 1. 브라우저는 어디부터 읽을까?React 앱은 결국 HTML, CSS, JavaScript로 동작한다.npm run dev를 실행하면 개발 서버가 열리고, 브라우저는 루트 HTML 파일인 index.html을 불러온다. 여기서 핵심은 두 가지다:div#root : React가 실제 DOM에 렌더링될 자리main.jsx : 앱의 진입점 (entry point)2. 진입점(main.jsx) 에서는 무슨 일이?main.jsx 는 App.jsx 를 ReactDOM 을 통해 #root에 렌더링한다.import React fr..

리액트로 프론트엔드 개발을 시작하기 위해서는 React 앱을 생성하는 것이 선행되어야 하는데,어떻게 리액트 앱을 생성해야 하는지 그리고 어떻게 구동해야하는지 단계별로 살펴보자 1. 왜 리액트 앱(애플리케이션)이라고 부를까?웹 페이지는 보통 하나의 HTML로 구성되어 있지만,리액트는 여러 개의 컴포넌트로 구성된 SPA(Single Page Application)이다.각 컴포넌트가 하나의 기능 단위로 묶여 있고, 이를 조합해서 하나의 애플리케이션을 만든다.즉, 단순한 HTML 페이지가 아니라 구조화된 프로그램에 가깝기 때문에 앱(App)혹은 애플리케이션이라고 부른다 2. 리액트 앱을 생성하는 방법Node.js 패키지 생성 -> React 라이브러리 설치 -> 기타 도구 설치 및 설정 기타 도구 설치하고 설정..