[TypeScript] React,TypeScript 프로젝트 생성&초기세팅

---

프로젝트 생성하기

1. cmd 명령 프롬프트

cmd 명령 프롬프트에 프로젝트를 생성할 폴더 경로에 들어가준다. 나는 준비해놓은 폴더 이름을 SAMPLE로 해줬다.

• ex> cd C:\Users\PC_1M\OneDrive\바탕 화면\SAMPLE

npx create-react-app [프로젝트 이름] --template typescript

그러면 아래와 같이 뭔가 막 진행중이다.

초기 세팅

명령 프롬프트에서 진행중이던게 끝나면 이제 sample 프로젝트가 생성이 끝난 것 이다. 아래는 막 생성된 프로젝트 구조

문제가 있다.... 지금 있어야할 파일 2개가 없다 바로 react-app-env.d.ts 파일과 tsconfig.json 파일이다. 남들은 npm start를 하고나면 생기거나 프로젝트 생성 하자마자 생겨있다고도 하지만 난 그런거 없었다. 그러니 직접 만든다.

src/react-app-env.d.ts 파일생성

ts,tsx 파일에서 import 할 확장자를 알려주는 것 이다. 보통 안하면 경로가 맞음에도 아래 같이 에러가 난다.

declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "react-dom/client";

tsconfig.json 파일생성

터미널에 아래 명령어 실행

tsc --init

그러면 프로젝트 최상단에 tsconfig.json 파일이 생긴다 내용을 아래와 같이 바꿔준다.

{
  "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"
  },
  "include": [
    "src"
  ]
}

지워도 되는 파일

• App.test.tsx
• index.css
• logo.svg
• reportWebVitals.ts

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.