1. 프로젝트 셋업
초보를 위한 리액트js 강의를 다시 보면서 진행하고 있다.
typescript 템플릿으로 리액트앱 만들기
npx create-react-app my-app --template typescript
or
yarn create react-app my-app --template typescript
절대경로 설정하기
조금 난항을 겪은 부분
처음에는 tsconfig.json에서 컴파일러 옵션에"baseUrl": "src"
만 넣어주면 바로 끝날 줄 알았는데, 에러가 발생했다. 알고보니 ts에는 다른 방법이 필요한 듯하다.
처음에는 이곳을 참조했는데, 에러가 계속 떠서 여러가지 방법을 시도하다가 많은 사람들이 추천한 CRACO로 해결되었다.
CRACO는 CRA의 config(설정)들을 override(무시)한다는 의미다.
CRACO 설치
npm install @craco/craco //craco 설치
npm install --save-dev craco-alias // Webpack 및 Jest용 자동 별칭 생성을 위한 craco 플러그인 설치
패키지 설치 후, root 폴더에서 아래의 파일을 생성
//craco.config.js
const CracoAlias = require('craco-alias')
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: 'tsconfig',
baseUrl: './src',
tsConfigPath: './tsconfig.extend.json',
},
},
],
}
Options 설정
- source: default 값은 options로, jsconfig, tsconfig 선택 가능
- baseUrl: default 값은 ./로 root 폴더를 가리킴
- aliases: alias 이름과 경로, default 값은 {}
- tsConfigPath: 만약 source가 tsconfig이라면 해당 파일 이름 작성
- debug: default 값은 false이며, 만약 버그가 생긴다면 해당 값을 true로 바꾸어 console로 내용 확인 가능
//tsconfig.extend.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
// 파일
"@app": ["./App.tsx"],
// 폴더
"@routes/*": ["./Routes/*"],
"@components/*": ["./Components/*"],
"@assets/*": ["./assets/*"]
}
}
}
(나는 자주 쓰게 될 폴더 assets, components, routes 폴더를 넣었다.)
그리고 tsconfig.json, package.json 파일에서 아래의 항목을 추가/수정 한다.
// tsconfig.json
{
"extends": "./tsconfig.extend.json",
"compilerOptions": {
//...
}
}
// package.json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
다 마쳤다면, 다른 곳에서 아래와 같이 import가 가능하다.
import Home from '@components/Home';
Author And Source
이 문제에 관하여(1. 프로젝트 셋업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@unu/TypeScript-with-ReactJS-프로젝트-셋업저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)