본문 바로가기
개발/Spring

[SpringBoot] Intellij + React + TypeScript 프로젝트 생성하기

by 코딩하는 흰둥이 2024. 10. 22.

이전글

https://greed-yb.tistory.com/300

 

[SpringBoot] Intellij + React 생성 및 한번에 빌드하기

node.js 설치하기https://nodejs.org/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgReact , vue 는 node.js 가 설치되어 있어야 실행된다      프로젝트 생성

greed-yb.tistory.com

 

 

node.js 설치 및 프로젝트 생성이전글을 참고하길 바란다

 

 

 

 

React + TypeScript 설치하기

cd src/main
npx create-react-app frontend --template typescript

React 를 설치하려는 경로로 이동 후 명령어를 실행한다

(tsconfig.json 은 자동으로 생성된다)

 

 

ts , tsx 파일이 생성되었다

 

cd frontend
npm start

TypeScript 를 적용한 React 를 실행시키면 정상적으로 동작한다

 

 

 


 

 

 

기존 React 프로젝트에 TypeScript 적용하기

이전글에서 React 로 생성한 프로젝트의 package.json

 

 

 

React 경로에서 해당 명령어를 실행시킨다

 

npm install typescript @types/node @types/react @types/react-dom @types/jest

 

 

 

package.json 에 추가되었다

 

 

 

 

tsconfig.json 을 생성한다

npx tsc --init

 

파일 생성

 

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

해당 코드로 변경한다

"jsx" : "react-jsx" 로 인하여 tsx 확장자를 인식한다

(16 이하의 버전일 경우 "jsx" : "react")

 

 

 

 

js 확장자를 모두 tsx 확장자로 변경해준다

 

 

 

index.tsx 의 코드를 수정한다

 

 

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals(() =>{});

 

 

그 외에 실행 시 오류가 나는 부분은 거진 import 하는 식으로 해서 해결 가능하다

 

 

 

 

 

npm error   node_modules/react-scripts
npm error     react-scripts@"5.0.1" from the root project

React 를 실행시키니 해당 오류가 발생하여 typescript 버전을 다운그레이드하였다

npm install typescript@4.9.5

 

 

 

 

 

정상적으로 실행 되고 있다

 

댓글