Loading...
잠시만 기다려 주세요.
code . 명령어로 프로젝트를 쉽게 열 수 있습니다. 💻npm create vite@latest 명령어로 리액트 프로젝트를 빠르게 생성하고, TypeScript를 선택하여 개발 환경을 설정합니다. 🚀npm install로 의존성을 설치하고 npm run dev로 개발 서버를 실행하여 웹 애플리케이션을 브라우저에서 확인할 수 있습니다. 🌐index.html은 리액트 앱이 렌더링되는 <div id="root"></div>를 포함하는 기본 웹 페이지이며, 타이틀과 파비콘을 설정할 수 있습니다. 📄main.tsx는 index.html의 root 엘리먼트에 App 컴포넌트를 렌더링하는 리액트 애플리케이션의 진입점입니다. ➡️export default 또는 export를 통해 다른 파일에서 재사용할 수 있습니다. 🧩display: flex로 컨테이너를 플렉스 컨테이너로 만들고, flex-direction으로 주축 방향(가로/세로)을 설정합니다. ↔️justify-content는 주축 방향으로 아이템을 정렬(시작, 중앙, 끝, 공간 분배 등)하며, align-items는 교차축 방향으로 아이템을 정렬합니다. 🎯style={{...}}) 또는 외부 CSS 파일을 임포트하여 적용할 수 있으며, 스타일 객체는 카멜케이스 속성을 사용합니다. 🎨* { margin: 0; padding: 0; }와 같은 전역 CSS 리셋을 통해 브라우저 기본 마진/패딩을 제거하여 일관된 UI를 구현할 수 있습니다. 🧹VW (viewport width) 및 (viewport height) 단위를 사용하여 뷰포트 크기에 비례하는 반응형 UI를 구현할 수 있습니다. 📏VH