1. 개발환경 세팅 (React + TypeScript)

1. visual studio code 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

2. node js 설치

https://nodejs.org/ko/

Node.js

항상 오른쪽의 최신 버전을 설치하도록 합니다

 

 

3. react 개발에 사용할 폴더 만들고 vscode에서 선택

파일 - 폴더열기

 

3. CRA(Create-React-App)으로 React 프로젝트 생성

npx create-react-app {PROJECT_NAME} --template typescript

 

4. vscode에서 방금 생성한 프로잭트 폴더 선택

파일 - 폴더열기 - {PROJECT_NAME}

 

5. 파일 세팅

public 폴더에서

favicon.ico, index.html, manifest.json, robots.txt 제외하고 모두 삭제

 

src 폴더에서

App.css, App.tsx, index.css, index.tsx, react-app-env.d.ts 제외하고 모두 삭제

 

 

 

6. src 폴더의 index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

7. src 폴더의 App.tsx

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      this is new project
    </div>
  );
}

export default App;

8. 프로잭트 실행

터미널 - 새 터미널 - npm start 입력

 

➜  sample_project git:(master) $ npm start

> sample_project@0.1.0 start
> react-scripts start

You can now view sample_project in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.0.0.0:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

 

9. 페이지 확인

10. 필요한 라이브러리 확인

package.json

만약 설치되지 않았다면 터미널에서 npm으로 설치

* package.json에서 따로 설치할 필요 없을 경우 넘어가셔도 됩니다

 

ex) react-scripts 설치되지 않았다면

npm i react-scripts

ex) @types/react-dom 설치되지 않았다면

npm i @types/react @types/react-dom @types/node

 

11. javascript ES6 사용

tsconfig의 es5로 된 부분을 es6으로 수정

ES6란?

https://hongdroid.tistory.com/62

ES5, ES6, 호이스팅(hoisting)

 

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./src",
    "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"
  ]
}

 

12. vscode 툴 설치

 

12-1. 왼쪽 하단의 vscode market place 선택

 

12-2. ESLint, Prettier - Code formatter 검색하여 설치

- ESLint는 Javascript 문법 검사

- Prettier는 vscode 코드를 보기 편하게 자동으로 변경해준다

 

 

12-3. 프로잭트에 ESLint 설치 & 적용

npm i -D eslint eslint-plugin-prettier eslint-config-prettier
npx eslint --init

(설정은 나중에 다시 또 바꾸면 된다 너무 걱정하지 말자)

$ npx eslint --init

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard-with-typescript@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^5.0.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 typescript@*
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · pnpm
Installing eslint-plugin-react@latest, eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^5.0.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0, eslint-plugin-promise@^6.0.0, typescript@*
Could not execute pnpm. Please install the following packages with a package manager of your choice: eslint-plugin-react@latest, eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^5.0.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0, eslint-plugin-promise@^6.0.0, typescript@*

Successfully created .eslintrc.js file in /Users/sample_project

 

설치가 완료되면 .eslintrc.js 파일이 생성되며, 개발하면서 필요한 내용은 변경하도록 한다

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "plugin:@typescript-eslint/recommended",
    "google",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint",
    "prettier/react",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json"],
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    "linebreak-style": 0,
    "import/prefer-default-export": 0,
    "import/extensions": 0,
    "no-use-before-define": 0,
    "import/no-unresolved": 0,
    "react/react-in-jsx-scope": 0,
    "import/no-extraneous-dependencies": 0,
    "no-shadow": 0,
    "react/prop-types": 0,
    "react/jsx-filename-extension": [
      2,
      { extensions: [".js", ".jsx", ".ts", ".tsx"] },
    ],
    "jsx-a11y/no-noninteractive-element-interactions": 0,
    "@typescript-eslint/explicit-module-boundary-types": 0,
  },
  settings: {
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"],
      },
    },
  },
};

 

12-4. 프로잭트에 Prettier ESLint 설치 & 적용

npm install -D prettier

 

12-5. 프로잭트에 prettierrc.js 파일 생성 후 아래 내용으로 저장

module.exports = {
    endOfLine: "lf",
    tabWidth: 4,
    semi: true,
    singleQuote: false,
    trailingComma: "all",
    printWidth: 120,
};

 

13. setting.json 파일에 아래 내용을 추가

vscode - 기본 설정 - 설정 - 오른쪽 상단의 설정 열기(JSON)

다음 내용을 추가 또는 수정

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true

 

setting.json 전체 코드

{
  "workbench.colorTheme": "Default Dark+",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}