서론

리액트와 타입스크립트로 프로젝트를 시작할 때, 사용하는 세팅에 대해 간단하게 정리합니다.

본론

1. 프로젝트 생성

npx create-react-app my-app --template=typescript

2. 컴포넌트 절대 경로 추가

// tsconfig.json
{
	"compilerOptions": {
    	...
        "jsx": "react-jsx",
		"baseUrl": "src"
        
    }
}

3. emotion, prettier, lint 설치

npm install --save @emotion/react @emotion/styled
npm install --save-dev prettier eslint

4. .prettier.js 생성 수정

// .prettier.js
module.exports = {
	singleQuote: true,
	trailingComma: 'all',
	printWidth: 100,
}

5. ESLint 설정

npx eslint --init

// .eslint.js
	...
	"rules": {
			'react/react-in-jsx-scope': 'off',
    }

추가)

.src/App.tsx 파일 수정

import React from 'react';

제거

6. package.json 수정

// package.json
	...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
		"format": "prettier --check ./src",
		"format:fix": "prettier --write ./src",
		"lint": "eslint ./src",
		"lint:fix": "eslint --fix ./src"
  },

7. 룰에 맞게 파일들을 수정

npm run format:fix
npm run lint:fix

8. 룰 검사

npm run format
npm run lint

9. 프로젝트 실행

npm start

결론

프로젝트는 그 목적에 따라서 얼마든지 세팅 값이 달라질 수 있습니다. 다만 일반적으로 프로젝트를 시작할 때, 위와 같이 설정 해놓으면 문제 없이 시작할 수 있습니다.