이번 학기 진행하는 두 프로젝트에서 프로젝트 기초 세팅을 진행하였다. 2명 이상의 팀원과 개발하는 것은 처음이었기에, 평소보다 더 꼼꼼하게 세팅을 진행하였고 그 과정을 작성해보았다.
💁🏻♂️ Typescirpt create-react-app
CRA로 ts를 세팅할 수 있다.
$npx create-react-app "프로젝트명" —template typescript추가적으로 ts개발을 위해 필요한 library를 설치해준다.
$npm i --save react react-dom typescript
$npm i --save-dev @types/react @types/react-dom @types/node💡 ESLint & Prettier란
ESlint란 ES(Ecma Script)와 Lint를 합친 것으로 자바스크립트 문법에서 에러를 표시해주는 도구이다.
Prettier는 code formatter로 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 자동으로 변환해주는 도구이다.
ESLint는 오류를, Prettier는 스타일을 형식에 맞춰 교정해주기 때문에 이를 사용하면 협업 시 통일된 코딩 스타일을 가져갈 수 있다.
💨 VScode에 ESLint, Prettier 세팅하기
📌 1. ESLint, Prettier extension 설치
 |  |
|---|
📌 2. 프로젝트에 eslint, prettier 설치
CRA의 경우 기본적으로 eslint가 설치되어 있다고 한다.
npm i -D eslint prettier📌 3. eslint 세팅
npx eslint --init기본 세팅을 위한 옵션을 선택해야 한다.
? How would you like to use ESLint? …
=> To check syntax and find problems (prettier로 포맷팅을 할 것이므로 )
? What type of modules does your project use? …
=> JavaScript modules (import/export) (React는 js 모듈 타입 사용)
? Which framework does your project use? …
=> React (사용하는 프레임워크 선택)
? Does your project use TypeScript? › No / Yes
=> Yes (타입스크립트 기반으로 진행하는 프로젝트)
? Where does your code run? …
=> Browser
? What format do you want your config file to be in? …
=> JSON (eslint의 config file의 형식, 니즈에 맞게 선택한다)
선택을 마치면 .eslintc.json이 생성된 것을 확인할 수 있다.
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended"
],
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint",
"react"
],
"rules": {
"react/no-unknown-property": ["error", { "ignore": ["css"] }]
}
}
📌 4. Prettier 세팅
생성되어 있는 .prettierrc에 설정을 작성한다.
{
"singleQuote": true,
"parser": "typescript",
"semi": true,
"useTabs": true,
"printWidth": 120,
"trailingComma": "all"
}자세한 옵션 속성들은 공식문서를 참고하자
📎 참고
