이전글
https://greed-yb.tistory.com/300
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 적용하기
npm install typescript @types/node @types/react @types/react-dom @types/jest
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")
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
'개발 > Spring' 카테고리의 다른 글
[SpringBoot] React + TypeScript + JPA 프로젝트 (2) - Bootstrap 적용 (1) | 2024.10.25 |
---|---|
[SpringBoot] React + TypeScript + JPA 프로젝트 (1) - 생성 (0) | 2024.10.24 |
[SpringBoot] Intellij + React + Bootstrap + Router 적용하기 (1) | 2024.10.21 |
[SpringBoot] Intellij + React 생성 및 한번에 빌드하기 (0) | 2024.10.21 |
[Mybatis + Pageable] 게시판 페이징 처리 (0) | 2024.10.18 |
댓글