1.2 React 원도우 환경 설정

1. 아래의 Nodejs 사이트에 접속하여 LTS라고 써있는 버전을 다운받아 설치합니다.

https://nodejs.org/ko/

– 설치 경로는 C드라이브를 권장합니다.

2. 아래의 Visual Studio Code 사이트에 접속하여 최신 버전을 다운받아 설치합니다.

https://code.visualstudio.com/

리액트 프로젝트 생성

C 드라이브에 FRONT 폴더를 생성합니다.

FRONT 폴더를 선택하고 Shift키를 누르고 오른쪽 마우스 클릭하여 “여기에 PowerShell 창 열기”를 선택합니다.

아래와 같이 입력하여 프로젝트를 선택합니다.

※ aboutw3는 자신의 프로젝트명으로 바꾸어 생성해도 됩니다.

- React Typescript 프로젝트 생성

npx create-react-app aboutw3 --template typescript

-  Ract 일반 프로젝트 생성

PS C:\FRONT> npx create-react-app vsp_front

생성된 프로젝트로 이동하여 npm start를 하면 크롬 브라우저 열고 localhost:3000 입력하면 웹에서 확인 할 수 있습니다.

yarn 설치

npm install --global yarn

cd vsp_front
npm start

Visual Studio Code를 실행해서 React Code 수정하기

Visual Studio Code 실행하고 File > Open Folder

C:\FRONT\aboutw3 선택

src 폴더 안에 있는 App.js 이게 메인페이지 입니다.

해당 파일 오픈해서 코드 수정해 보면 됩니다. 

VS Code에서 Prettier – Code formatter 추가 추천드립니다.

TypeScript 설치

npm i typescript

npm i –save react react-dom typescript

npm i –save-dev @types/react @types/react-dom @types/node

ts-Node 설치

npm i ts-node –save-dev

tsconfig.json 생성

{

    “compilerOptions”:{

        “strict”:true,

        “module”:”commonjs”,

        “moduleResolution”:”node”,

        “lib”:[“es2015″,”es2016″,”es2017″,”es2018″,”es2019″,”es2020”],

        “target”:”ES5″,

        “outDir”:”./dist”,

        “esModuleInterop”:true

    },

    “exclude”: [“node_modules”],

    “include”: [“src/**/*”]

}

— 정리

npx create-react-app viw_kml_front –typescript

cd viw_kml_front

{

“compilerOptions”: {

  “outDir”: “./dist/”,

  “noImplicitAny”: true,

  “module”: “es6”,

  “target”: “es5”,

  “jsx”: “react”,

  “allowJs”: true,

  “skipLibCheck”: true,

  “esModuleInterop”: true,

  “strict”: true,

  “moduleResolution”: “node”

}

}

npm install webpack webpack-cli ts-loader

.jsx 파일을 .tsx 파일로 변경합니다.