react + typescript 개발환경 세팅하기

먼저 Copilot에 물어보자

물론입니다! React와 TypeScript를 함께 사용하는 개발 환경을 구축하는 방법을 순차적으로 안내해 드리겠습니다. 😊

1. 프로젝트 생성하기:
o 먼저, 터미널에서 원하는 프로젝트 경로로 이동합니다.
o 아래 명령어를 실행하여 React 프로젝트를 생성합니다. 이때 TypeScript 템플릿을 사용하도록 합니다.

2. npx create-react-app my-app --template typescript
또는 yarn을 사용하시는 경우:
yarn create react-app my-app --template typescript

3. Prettier와 ESLint 설치하기:
o VSCode에서 Prettier와 ESLint를 찾아 설치합니다. 이 도구들은 코드 스타일링과 정적 분석을 도와줍니다.

이제 위 단계를 따라가시면 React와 TypeScript를 사용하는 개발 환경을 구축하실 수 있습니다. 성공적인 프로젝트 개발을 기대해 봅니다! 🚀

 

1. VSCODE 설치

https://code.visualstudio.com/download 에서 다운받아 VSCODE를 설치한다. (현재 버전 1.89.1)

 

2. nodejs 설치

https://nodejs.org/en 에서 LTS 버전 다운받아 설치한다. (현재 LTS 버전 v20.13.1) 

설치 시 중간에 Native Modules을 위한 툴을 설치할 것인지 물어보는데 일단 체크하고 설치한다.(오래 걸린다. 괜히 한 듯)

설치 완료 후 Path 지정 잘 됐는지 아래 명령어로 확인한다.

node -v
npm -v

 

3. yarn 설치

아래 명령어로 yarn을 설치한다. 

npm install --global yarn

npm notice
npm notice New minor version of npm available! 10.5.2 -> 10.8.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.0
npm notice Run npm install -g npm@10.8.0 to update!
npm notice

 

바로 업데이트 해 준다. 

npm install -g npm@10.8.0

 

항상 정상 설치 됐는지 확인한다.

yarn --version

 

4. react + typescript 프로젝트 생성

개발할 경로를 정하고 아래 명령어를 실행한다.

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

 

이제 my-app로 가서 아래 명령어를 실행한다. 

cd my-app
yarn start

You can now view my-app in the browser.

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

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

webpack compiled successfully

 

자동으로 http://localhost:3000/ 열리면 정상이다. 

 

5. Prettier와 ESLint 설치

좀 더 상세한 정보를 얻기 위해 Copilot에 물어본다.

물론입니다! VSCode에서 TypeScript와 ESLint을 함께 사용하기 위해 몇 가지 설정을 해보겠습니다. 😊

1. VSCode 확장 프로그램 설치:
o 먼저, VSCode에서 ESLint와 Prettier를 함께 사용하려면 각각의 확장 프로그램을 설치해야 합니다.
o ESLint 확장 프로그램 설치: 여기에서 설치합니다.
o Prettier 확장 프로그램 설치: 여기에서 설치합니다.

2. TypeScript 설정:
o VSCode에서 TypeScript를 사용하기 위해 다음 설정을 추가합니다:
1. 프로젝트 루트 디렉토리에 .eslintrc.js 파일을 생성합니다.
2. 아래 코드를 .eslintrc.js 파일에 붙여넣습니다:
JavaScript
module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    rules: {
        semi: ['error', 'never'],
        quotes: [2, 'single']
    }
};
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. 

FAQ의 자세한 정보.
 @typescript-eslint/parser는 TypeScript 파일을 분석하여 ESLint가 정확하게 이해할 수 있도록 합니다.
 @typescript-eslint 플러그인은 TypeScript 코드에 특정한 규칙을 추가할 수 있도록 합니다.
 위 설정은 세미콜론을 사용하지 않도록 하고, 단일 따옴표를 사용하도록 합니다.

3. TypeScript 의존성 설치:
o 프로젝트 루트 디렉토리에서 다음 명령어를 실행하여 TypeScript와 관련 의존성을 설치합니다:
o yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
 @typescript-eslint/parser는 TypeScript 파일을 분석하는 데 사용됩니다.
 @typescript-eslint/eslint-plugin은 TypeScript 코드에 특정한 규칙을 추가할 수 있도록 합니다.

이제 위 단계를 따라가시면 VSCode에서 TypeScript와 ESLint을 함께 사용할 수 있습니다. 성공적인 프로젝트 개발을 기대해 봅니다! 🚀

 

위 순서대로 우선 VSCODE MARKETPLACE에서 ESLint와 Prettier를 설치한다. Settings > Workspace > Editor: Default Formatter : Prettier - Code fommatter 를 선택한다.

 

그리고 .eslintrc.js 를 프로젝트 루트에 추가한다.

module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    rules: {
        semi: ['error', 'never'],
        quotes: [2, 'single']
    }
}

 

그리고 아래 명령어를 실행하여 추가로 의존성을 설치한다.

yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

 

이제 기존 App.tsx 에서 PROBLEMS에 오류가 나타나면 정상동작하는 것이다.

 

6. CRA 없이 세팅하는 이유

검색을 하면서 진행을 하다가 보니 CRA  없이 세팅하는 방법이 많이 있어서 CRA 없이 세팅하려는 이유를 Copilot에 물어보았다.

 

CRA 없이 React 프로젝트를 설정하는 이유는 다양합니다. 여러 가지 이유 중에서 몇 가지를 살펴보겠습니다:

1. 개인화된 설정:
o CRA(Create React App)는 React 프로젝트를 빠르게 설정할 수 있도록 도와줍니다. 그러나 CRA를 사용하면 기본 설정 값들이 자동으로 적용되기 때문에 추가적인 설정을 하려면 CRA를 'eject’해야 합니다.
o CRA 없이 직접 설정하면 개인적인 요구사항에 맞게 설정을 변경할 수 있습니다.

2. 커스텀 환경 구축:
o CRA 없이 React 프로젝트를 설정하면 웹팩(Webpack), 바벨(Babel), ESLint, Prettier 등을 직접 구성할 수 있습니다.
o 이를 통해 프로젝트에 필요한 환경을 정확하게 제어할 수 있습니다.

3. 프로젝트 유형에 따른 선택:
o CRA는 간단한 프로토타입부터 복잡한 애플리케이션까지 다양한 프로젝트에 적합합니다.
o 그러나 CRA 없이 설정하면 프로젝트의 특성에 따라 원하는 도구와 라이브러리를 선택할 수 있습니다.

4. 학습 목적:
o CRA 없이 설정하는 과정은 React, 웹팩, 바벨 등의 도구에 대한 이해를 높일 수 있습니다.
o 개발자로서 필요한 기술 스택을 더 깊게 이해하고자 할 때 유용합니다.

요약하자면, CRA 없이 React 프로젝트를 설정하는 이유는 개인화된 설정, 커스텀 환경 구축, 프로젝트 유형에 따른 선택, 그리고 학습 목적 때문입니다. 😊