잠시만 기다려 주세요.
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.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.cssassetsnpm run dev 실행 시 index.html이 제공되고, main.jsx를 통해 App 컴포넌트가 #root에 렌더링되며, Vite 개발 서버가 코드 변경을 감지하여 브라우저를 자동 업데이트합니다. 🔄App 컴포넌트의 텍스트를 변경하여 브라우저 업데이트를 직접 확인해보는 실습이 권장됩니다. 💡Recommanded Videos
2024. 10. 11.
2024. 11. 23.
2024. 10. 1.
2025. 5. 26.
2025. 12. 15.
2025. 12. 22.