React + TypeScript 프로젝트 세팅 처음부터 해보자!
🎉 리액트와 타입스크립트 설치
npx create-react-app my-app --template typescriptReact app 초기세팅을 편리하게 해주기 위한 node 라이브러리이다. 일일이 모듈이나 환경을 설치하거나 세팅하지 않아도 설치와 세팅을 한 번에 해주는 명령어이다.
🔍 ESLint 설치
ESLint 설치
npm install eslint --save-dev--save-dev 대신 -g 를 붙이면 글로벌 루트에 설치된다.
구성 초기화
npx eslint --initESLint를 설치한 후 구성 파일을 초기화해야 한다.
위에 질문에 대해서 답변을 다 하고 나면 .eslintrc 파일이 생성되고, 현재 ESLint 패키지는 내가 선택한 형식으로 설정된다.
플러그인 설치
이제 ESLint와 관련된 TypeScript 플러그인을 설치해야 한다.
yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript갑분 yarn? Yarn은 페이스북이 발표한 자바스크립트 패키지 매니저로, npm 보다 조금 더 빠른 성능을 보인다고 한다. 장점 중 하나가 패키지를 병렬로 설치한다는 것!
npm 은 여러 패키지를 설치할 때, 각각의 패키지가 완전히 설치된 다음 순차적으로 설치 되는 반면,
Yarn은 병렬로 처리되서 성능과 속도가 빠르다!
yarn 설치는 간단하다. npm install -g yarn 해주면 끝!
모든 설치가 잘 되었다면 .eslintrc 파일은 아래와 같은 형식이어야 한다.
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
}
}✨ Prettier 설치
Prettier 설치
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooksyarn으로 prettier 설치와 플러그인을 설치해준다.
touch .prettierrc그 다음에 prettierrc 파일을 생성한다.
🔨 eslintrc / prettierrc / package
.eslintrc 세팅
• Jest 사용하려면 추가
{
"env": {
"browser": true,
"es2021": true,
"jest": true // 이 줄을 추가
},
...
}• eslint와 prettier 사용
{
...
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier" // 이 줄을 추가
],
...
}• ESLint 규칙
{
...
"rules": {
"react/react-in-jsx-scope": "off",
"camelcase": "error",
"spaced-comment": "error",
"quotes": ["error", "single"],
"no-duplicate-imports": "error"
},
...
}• 설치한 플러그인 사용
"plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],• eslint-import-resolver-typescrip 설정
{
...
"settings": {
"import/resolver": {
"typescript": {}
}
}
}.prettierrc 세팅
{
"semi": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "all",
"jsxSingleQuote": true,
"bracketSpacing": true
}package.json 세팅
{
"scripts": {
...
"lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
"lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
"format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
},
}마지막으로 package.json에 위 3줄의 스크립트를 추가한다.
- lint: 문제를 검색하지만 수정하지는 않는다.
- lint fix: 문제를 검색하고 수정하려고 시도한다.
- format: prettier를 호출하여 코드 스타일을 수정한다.
🔥 그 외 설치
styled-reset 설치
npm install styled-resetstyled-components 설치
npm install styled-components
npm i --save-dev @types/styled-componentsreact-router-dom 설치
npm install react-router-domaxios 설치
npm install axios📝 커밋 메세지 템플릿 설정
### 제목
# 커밋 타입: 작업내용 (제목과 본문은 한 줄 띄워주세요)
### 본문 - 한 줄에 최대 72 글자까지만 입력하기
# 무엇을, 왜, 어떻게 했는지
# 꼬리말
# (선택) 이슈번호 작성
# [커밋 타입] 리스트
# ✨ Feat : 새로운 기능 추가
# 💄 Design : CSS, 사용자 UI 디자인 변경
# 📝 Docs : 문서 수정
# 🎨 Style : 코드포맷, 세미콜론, 개행, 코드 구조, 형태 등
# 🤔 Test : 테스트
# ♻️ Refactor : 코드 리팩토링
# 🐛 Fix : 버그 및 오류 수정
# 🔥 Remove : 불필요한 파일 삭제
# 🔨 Chore : 빌드 업무, 패키지매니저, 폴더트리, 세팅 수정
# 💡 Comment : 필요한 주석 추가 및 변경
# ------------------
# [체크리스트]
# 제목 첫 글자는 대문자로 작성했나요?
# 제목은 명령문으로 작성했나요?
# 제목 끝에 마침표(.) 금지
# 제목과 본문을 한 줄 띄워 분리하기
# 본문에 여러줄의 메시지를 작성할 땐 "-"로 구분했나요?
# ------------------개인적으로 이모지로 커밋 메세지를 남기는 게 한 눈에 잘 보이고 깔끔하다!
프로젝트 폴더의 루트 위치에 위의 컨벤션을 복붙하여 .gitmessage.txt 로 저장한다. 그 다음에 아래의 설명을 보고 진행하면 된다!
# .git이 있는 레포 파일 루트 위치에서
git config --global commit.template .gitmessage.txt
git add .
git commit
# 만약 템플릿이 안뜨고 오류 메세지가 뜬다면
git config --global core.editor "vim"
# 템플릿 뜨면 커밋 메시지 작성 (vim 환경)
# 1. 복사하고자 하는 커밋 타입 앞 부분에서 v키를 누른 후 화살표로 선택
# 2. y키로 복사
# 3. 제목 작성란에 p키로 붙여넣기
# 4. i키를 눌러 insert 모드로 변경 후 메세지 작성
# 5. 모두 작성 후 esc를 눌러 모드 변경 후 :wq 입력 (w:저장 + q:나가기)
git push⭐️ 유용한 vim 단축키
- i : 입력
- v : 선택
- shift + v : 한 줄 선택
- y : 복사
- yy : 한 줄 복사
- p : 붙여넣기
- shift + c : 자르기
- dd : 한 줄 자르기
- u : 되돌리기
- ctrl + r : 되돌리기
위의 단축키만 외워도 커밋 컨벤션 작성할 때 매우 유용하다!
