[React.js] 설명이 필요없는 React + TypeScript 개발 환경 구성 (withOut CRA)

yarn init --yes
yarn add next react react-dom
yarn add @zeit/next-typescript @types/next @types/react @zeit/next-typescript @types/next @types/react

// next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

// babelrc
{
  "presets": ["next/babel", "@zeit/next-typescript/babel"]
}

//tsconfig
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  }
}

5. eslint setting

npm i eslint -D
npm i @typescript-eslint/parser -D
npm i @typescript-eslint/eslint-plugin -D
npx eslint --init

//.eslinrc.js
module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        project: './tsconfig.json',   //추가
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {}
};

package.json 추가
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }

// pages/index.tsx 추가
import React from "react";
export default () => {
  return <div>hello</div>;
};

yarn add --dev typescript @types/node