[React]리액트 프로젝트 생성 (with Typescript)

리액트와 타입스크립트를 사용해서 포트폴리오 페이지를 만들려고 한다.

리액트 프로젝트 생성

(React Tutorial 페이지 참고)

npx create-react-app portfolio —template typescript

프로젝트 구조

필요한 파일만 남기고 나머지 파일은 지워줬다.

타입스크립트 설정 파일 생성

아래 명령어를 사용해서 tsconfig 파일을 생성할 수 있다.

npx typescript --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", "src/types"]
}

여기까지 리액트 & 타입스크립트 프로젝트를 생성하고 환경을 설정해주었다.