레거시 React 프로젝트를 Windows 11에서 안정적으로 개발하기 위한 환경

React 프로젝트를 Windows 11에서 안정적으로 개발하기 위한 환경

• Node.js 14.17.0
• npm 6.14.13
• Yarn 1.22.22
• TypeScript 4.5.x
• React 17.0.2
• AG Grid Community 26.1.0
• Windows 11

유지보수 프로젝트에서 많이 사용

 

Windows 11 개발환경 구축 가이드

1. 개발환경 구성

항목버전

OS	Windows 11 64bit
Node	14.17.0 LTS
npm	6.14.13
Yarn	1.22.22
Git	최신
VS Code	최신
Typescript	4.5.x
React	17.0.2
ag-grid-community	26.1.0

---

2. 설치 순서

추천 순서는 다음과 같습니다.

Windows 11

↓

Git

↓

Node.js 14.17.0

↓

Yarn 1.22.22

↓

VS Code

↓

프로젝트 Clone

↓

npm install
또는
yarn install

---

3. Git 설치

Git 최신버전 설치

설치 시 옵션

Use Git from Windows Command Prompt

Checkout Windows-style

Commit Unix-style

Enable symbolic links

Enable long path

설치 확인

git --version

예)

git version 2.xx.x.windows.x

---

4. Node.js 설치

추천

node-v14.17.0-x64.msi

 

https://nodejs.org/download/release/v14.17.0/

Index of /download/release/v14.17.0/

 

설치 확인

node -v

v14.17.0

npm 확인

npm -v

6.14.13

---

5. Yarn 설치

npm install -g yarn@1.22.22

확인

yarn -v

1.22.22

---

6. VS Code 설치

추천 Extension

ESLint

Prettier

GitLens

Auto Rename Tag

Path Intellisense

Error Lens

Material Icon Theme

npm Intellisense

Reactjs code snippets

JavaScript Booster

Import Cost

Thunder Client

Markdown All in One

EditorConfig

Todo Tree

---

7. Windows 설정

긴 경로 허용

관리자 CMD

git config --system core.longpaths true

Windows

gpedit.msc

Enable Win32 long paths

또는 Registry

LongPathsEnabled=1

---

PowerShell 실행 허용

관리자 PowerShell

Set-ExecutionPolicy RemoteSigned

---

UTF-8

Windows Terminal

chcp 65001

---

8. 프로젝트 Clone

git clone 프로젝트URL

cd 프로젝트

---

9. package.json 확인

예)

{
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "typescript": "4.5.5",
    "@ag-grid-community/core": "26.1.0",
    "@ag-grid-community/react": "26.1.0"
  }
}

---

10. 라이브러리 설치

Yarn 사용 시

yarn install

npm 사용 시

npm install

---

11. TypeScript 설치 확인

npx tsc -v

Version 4.5.5

---

12. React 실행

yarn start

또는

npm start

실행

http://localhost:3000

---

13. React 프로젝트 구조

src
 ├── api
 ├── assets
 ├── common
 ├── components
 ├── config
 ├── hooks
 ├── layouts
 ├── pages
 ├── router
 ├── store
 ├── styles
 ├── types
 ├── utils
 ├── App.tsx
 └── index.tsx

---

14. TypeScript 권장 설정

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  }
}

---

15. AG Grid 설치

yarn add

@ag-grid-community/core@26.1.0

@ag-grid-community/client-side-row-model@26.1.0

@ag-grid-community/react@26.1.0

또는

npm install

@ag-grid-community/core@26.1.0

@ag-grid-community/client-side-row-model@26.1.0

@ag-grid-community/react@26.1.0

---

16. MUI 설치

React17에서는

npm install

@mui/material

@emotion/react

@emotion/styled

또는

yarn add

---

17. ESLint

npm install -D

eslint

eslint-plugin-react

@typescript-eslint/parser

@typescript-eslint/eslint-plugin

---

18. prettier

npm install -D prettier

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 120
}

---

19. npm Scripts

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "lint": "eslint src --ext .ts,.tsx",
    "format": "prettier --write src"
  }
}

---

20. 실행

npm start

또는

yarn start

---

21. Build

npm run build

또는

yarn build

---

22. 권장 VS Code 설정

{
    "editor.fontSize": 15,
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.minimap.enabled": false,
    "files.eol": "\n",
    "typescript.tsdk": "node_modules/typescript/lib",
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

---

23. 개발환경 버전 확인 체크리스트

node -v
# v14.17.0

npm -v
# 6.14.13

yarn -v
# 1.22.22

git --version

npx tsc -v
# 4.5.5

npm list react
# 17.0.2

npm list @ag-grid-community/core
# 26.1.0

---

 

npx create-react-app . --template typescript

 

npm install react@17.0.2 react-dom@17.0.2

 

npm install -D typescript@4.3.5

 

npm install -g yarn@1.22.22

 

npm install \
@ag-grid-community/client-side-row-model@26.1.0
@ag-grid-community/core@26.1.0 \
@ag-grid-community/react@26.1.0 \