nvm alias default v22.11.0
default -> v22.11.0

npx create-react-app youtube_player_react

src 폴더에 있는 다음 파일들을 삭제합니다:

• App.css
• App.test.js
• logo.svg
• reportWebVitals.js
• setupTests.js

Material UI 설치하기

아래 명령어를 사용해 Material UI와 관련 패키지를 설치할 수 있습니다:

npm install @mui/material @emotion/react @emotion/styled

TypeScript 설정 및 기본 컴포넌트 구현

npm install typescript @types/node @types/react @types/react-dom @types/jest

• npm install typescript@4.9.5 다운그레이드 하여 설치해야 router 설치시 오류가 없다.
• 아니면 yarn으로 설치하자... npm install -g yarn

• tsconfig.json 파일 생성

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

파일 확장자 변경:

• src 폴더 안에 있는 **JavaScript 파일(.js)**들을 **TypeScript 파일(.tsx)**로 변경합니다. 특히 index.js와 App.js를 각각 index.tsx, App.tsx로 이름을 변경해 주세요.

4단계: 기본 페이지와 라우팅 설정

이번 단계에서는 각 페이지 파일을 생성하고, React Router를 사용해 페이지 이동이 가능하도록 설정하겠습니다. React Router는 여러 페이지로 구성된 애플리케이션에서 페이지 간의 이동을 쉽게 관리할 수 있도록 도와줍니다.

1. React Router 설치

React Router를 설치하여 페이지 간의 이동을 설정할 수 있도록 준비합니다.

npm install react-router-dom