🚀 create-react-app

작업 폴더에서 mkdir 하지 않고 상위 폴더에서 create-react-app (이하 CRA)에 폴더명을 입력한다. 현재 프로젝트 폴더에서 CRA를 한다면 npx create-react-app .으로 설치한다.

# 터미널
cd devina

# npx <CRA> <프로젝트명> --template typescript
npx create-react-app my-app --template typescript

# or
yarn create react-app my-app --template typescript

CRA된 현재 프로젝트 폴더에서 typescript를 추가한다면,

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

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

그리고 현재 typescript로 작성할 파일의 확장자를 .tsx, .ts로 설정하고, dev 서버를 다시 시작해 준다.

---

🛤 git add remote

CRA은 git init이 생성되어 있기 때문에 원격 저장소와 연결만 하면 된다. 이하 github 가이드와 동일하다.

git remote add origin <본인의 Repo SSH>
git branch -M main
git push -u origin main

---

📎 typescript config

typescript 컴파일러 옵션에 baseUrl을 설정해 준다.

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

---

• yarn pkg는 여기 npm pkg는 여기
• github pages 배포가 필요하면 여기 참고
• heroku 배포가 필요하면 여기 참고