CRA를 이용해 프로젝트 시작하기
CRA 란?
CRA는 페이스북에서 지원해주는 보일러플레이트를 이용해 리액트 앱을 만들어주는 아주 유용한 도구임 (CRA가 나오기 이전에는 웹팩과 바벨등의 설정을 해주는 것에 많은 시간을 소비했다고 함)
※ But, 웹팩이나 바벨 설정이 추가적으로 필요한 경우에는 프로젝트를 eject하거나 craco(Create React App Configuration Override)와 같은 라이브러리를 사용해 설정을 추가해줘야함
CRA로 프로젝트 시작하기
// npx를 이용
npx create-react-app --template typescript .
// yarn을 이용
yarn create react-app --template typescript .위의 방법으로 프로젝트 시작시 typescript를 사용하는 리액트 앱이 만들어짐 (뒤의 '.'은 현재 경로를 의미함, 원하는 경로 입력시 그 경로에 프로젝트 생성)
ES Lint 적용하기
ES lint 란?
ESLint는 ES 와 Lint의 합성어
ES는 Ecma Script로서, 표준 Javascript를 의미하고 Lint는 에러 표시를 의미함.
따라서, ESLint는 자바스크립트 문법에서 에러를 표시해주는 도구
(버그를 사전에 방지, tab이나 줄바꿈 등의 코딩 스타일 정의함으로써 협업시 도움이 됨)
--init 옵션을 이용한 ES lint 설정
npx eslint --init위의 명령어를 입력하면 eslint 라이브러리에서 지원하는 기본 세팅을 사용할 수 있음
// ESlint 설정 범위 : 코드 스타일까지
? How would you like to configure ESLint? · style
// 프로젝트의 모듈 방식 : import/export(esm)
? What type of modules does your project use? · esm
// 프로젝트에서 사용하는 프레임워크 또는 라이브러리 : react
? Which framework does your project use? · react
// 타입 스크립트 사용여부 : Yes
? Does your project use TypeScript? · Yes
// 프로젝트 환경 : 브라우저
? Where does your code run? · browser
// 스타일 가이드 설정 : 주로사용하는 가이드를 이용
? How would you like to define a style for your project? · guide
// 주로 사용하는 가이드 설정 : 에어비엔비
? Which style guide do you want to follow? · airbnb
// eslint 설정 파일 형식 : JS
? What format do you want your config file to be in? · JavaScript
위 처럼 설정하여 진행하면 설정관련 npm을 다운로드 받아 자동으로 설정 파일인 '.eslintrc.js'를 생성해줌
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['plugin:react/recommended', 'airbnb'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint'],
rules: {
},
};
[1] ESLint: JSX not allowed in files with extension '.tsx'(react/jsx-filename-extension) 에러
이 에러는 lint의 rules 중 react/jsx-filename-extension 옵션이 기본적으로 타입스크립트 파일을 포함하지 않고 있어서 발생하는 것으로 보임
Solution
// rules에 react/jsx-filename-extension 옵션값의 설정으로 타입스크립트를 넣어줌
rules: {
'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
}[2] ESLint: Unable to resolve path to module './app'.(import/no-unresolved)
이 에러는 eslint에서 tsconfig.json 파일을 읽어 오지 못해 경로에 대한 정보를 받지 못해 발생하는것으로 보임
Solution
// settings 속성에 import/resolver에 대한 설정을 해줌
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
moduleDirectory: ['node_modules', '@types'],
},
typescript: {}, // 프로젝트 Root의 tsconfig.json을 찾는다.
},
},
}[3] ESLint: Missing file extension "tsx" for "./app"(import/extensions)
이 에러는 eslint ruels에서 import/extensions 가능한 확장자로 타입스크립트 확장자가 포함되어 있지 않아서 발생하는것으로 보임
Solution
// rules에서 js, jsx, ts, tsx의 확장자일경우 에러 처리에서 제외
rules: {
'import/extensions': [
2,
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],Prettier 적용하기
Preettier 란?
정해진 규칙에 따라 자동으로 코드 스타일을 정리 해주는 도구로, 여러 규칙들을 쉽게 커스터마이징 할 수도 있음 (코드를 저장 시 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일시켜줌)
prettier 설치하기
// npm을 이용해 개발용 라이브러리로 prettier 설치
npm i -D prettier
// npm을 이용해 개발용 라이브러리로 eslint관련 prettier 설정파일 설치
yarn add -D eslint-config-prettier eslint-plugin-prettierprettier 설정 추가하기
// eslint 설정파일에 extends와 rules에 prettier 추가
extends: [
'plugin:react/recommended',
'airbnb',
'plugin:prettier/recommended', // 순서가 중요함 가장 뒤에
],
rules: {
'prettier/prettier': 'error',
},위 처럼 eslint의 설정을 추가해주고, prettier 설정파일을 만들어서 기본 세팅을 진행 (자세한 옵션은 https://prettier.io/docs/en/options.html 참고)
module.exports = {
singleQuote: true, // ' '(작은 따옴표) 사용
semi: true, // 코드의 끝에 세미콜론 사용
useTabs: true, // 들여쓰기 사용
tabWidth: 2, // 들여쓰기 공백 수
trailingComma: 'all', // 모든 문법 끝에 ,(콤마) 사용
printWidth: 80, // 한줄 최대 글자수
arrowParens: 'always', // 화살표함수 () => 괄호 항상 사용
};Web Storm 사용시 추가 설정
preferences(settings) 환경설정에서 eslint와 prettier 설정을 해줄수 있음
eslint 설정
- Automatic ESLint configuration 을 선택해야 적용 됨
- Run eslint --fix on save 체크 후 저장시 자동으로 --fix옵션을 사용해 수정 가능한 코드를 수정함
prettier 설정
- prettier package로 설치한 prettier 라이브러리 선택(기본 설정)
- On save 체크 후 저장시 자동으로 스타일을 수정해줌
