유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

React 19 Tutorial - 3 - Project Structure

Codevolution

2025. 11. 3.

0

#frontend
#devops
  • React 19 프로젝트는 package.json을 통해 핵심 의존성(React, React DOM)과 개발 도구(Vite, ESLint)를 정의하며, dev, build 등 주요 스크립트를 포함합니다. 📦
  • npm install react@latest react-dom@latest @types/react@latest @types/react-dom@latest 명령어를 사용하여 React 및 관련 패키지를 최신 버전으로 업데이트할 수 있습니다. ⬆️
  • ESLint는 코드의 잠재적 오류를 찾아내고 더 나은 코드를 작성하도록 돕는 정적 분석 도구로, eslint.config.js 파일에서 규칙을 설정합니다. 🔍
  • index.html은 React 단일 페이지 애플리케이션의 유일한 HTML 파일이며, <div id="root"> 요소를 통해 React가 UI를 제어하는 진입점을 제공합니다. 🌐
  • node_modules 폴더는 npm install 명령으로 다운로드된 모든 프로젝트 의존성 코드를 저장하는 거대한 저장소이며, .gitignore에 의해 Git 추적에서 제외됩니다. 🛠️
  • public 폴더는 Vite에 의해 처리되지 않는 이미지, SVG 등 정적 자산 파일을 보관하는 곳입니다. 🖼️
  • src 폴더는 애플리케이션의 대부분의 코드가 작성되는 핵심 디렉토리로, main.jsx, App.jsx, App.css, index.css 등을 포함합니다. ✍️
  • main.jsx는 React 애플리케이션의 진입점으로, App 컴포넌트를 index.html#root DOM 요소에 렌더링하도록 지시합니다. 🚀
  • App.jsx는 애플리케이션의 주요 UI 로직과 컴포넌트를 포함하며, App.css로 스타일링되고 assets 폴더의 자산을 활용할 수 있습니다. ⚛️
  • npm run dev 실행 시 index.html이 제공되고, main.jsx를 통해 App 컴포넌트가 #root에 렌더링되며, Vite 개발 서버가 코드 변경을 감지하여 브라우저를 자동 업데이트합니다. 🔄
  • 새로운 React 프로젝트를 생성하고 App 컴포넌트의 텍스트를 변경하여 브라우저 업데이트를 직접 확인해보는 실습이 권장됩니다. 💡

Recommanded Videos