[Dev_Log] 8/13 (금) 김정빈

## 오늘의 프로젝트에서 기여한 점 및 배운 점

- **eslint와 prettier를 프로젝트 단위로 적용하기**

이번에 TypeScript로 언어를 변경하면서 고민할 부분이 es-lint를 적용하는 것이였다. 사실 'TypeScript자체에서 타입을 정의하기 때문에 lint까지 써야할까?' 였지만, 이를 자세히 찾아보니 es-lint가 있으면 더 엄격한 코드작성을 할 수 있는 것을 알았다.
es-lint를 사용하면 타입스크립트 프로젝트 내의 변수 타입을 any를 사용하는 것을 지양하고, ==, != 연산자 사용을 지양하는 등 타입스크립트가 잡아주지 못하는 부분까지 잡아주어 더 엄격하게 사용할 수 있다.
처음에는 많이 어렵고 에러가 많이 나겠지만, 코드작성부터 에러를 잡아주기 때문에 프로젝트가 진행되면서 의문의 에러가 나는 것을 막아줄 것이라고 생각하니 한편으로는 다행이라는 생각도 든다.
아래 코드는 es-lint와 prettier를 프로젝트에 적용하는 과정을 정리했다.

```bash
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier
```

```json
// 위 코드를 작성하면 아래의 패키지들을 깔 수 있음.

"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.29.1",
"@typescript-eslint/parser": "^4.29.1",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"prettier": "^2.3.2"
}
```

위의 패키지들을 설치하고 prettier와 eslint 설정파일을 **프로젝트 최상단에** 위치시켜주면 프로젝트에 prettier와 eslint를 적용할 수 있다.

우리팀이 만났던 에러는, 이를 클라이언트와 서버 둘다 적용하기 위해 최상단 폴더에 만들었더니 es-lint가 동작하지 않는 에러를 마주했다.
그래서 여러 방법을 시도해보던 중, prettier는 최상단에 위치시켜야 하지만 클라이언트와 서버는 es-lint의 패키지가 조금 다르기도 하고, rule도 react에만 적용되는 것이 있어서 둘이 따로 만들어 줘야함을 알았다.

```jsx
// .prettierrc
{
"printWidth": 120,
"tabWidth": 2,
"singleQuote": false,
"trailingComma": "all",
"bracketSpacing": true,
"semi": true,
"useTabs": true,
"arrowParens": "avoid"
}

// Client >> .eslintrc.js
module.exports = {
parser: '@typescript-eslint/parser',
extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
rules: {
'no-empty': 'error', // 빈 블록문을 지양한다.
'default-case': 'error', // switch 문에 default가 포함되어야 한다.
'default-case-last': 'error', // switch 문에 default가 항상 마지막에 작성되어야 한다.
eqeqeq: ['error', 'always'], // '==' 밎 '!=' 사용을 지양한다.
'prefer-template': 'error', // 문자열 연결 연산자를 지양하고 템플릿 리터럴을 사용한다.
// "react/prop-types": "off",
},
settings: {
react: {
version: 'detect',
},
},
};

// Server >> .eslintrc.js
module.exports = {
env: {
node: true,
es2021: true,
},
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: 12,
sourceType: "module",
},
plugins: ["@typescript-eslint"],
rules: {
"no-empty": "error", // 빈 블록문을 지양한다.
"default-case": "error", // switch 문에 default가 포함되어야 한다.
"default-case-last": "error", // switch 문에 default가 항상 마지막에 작성되어야 한다.
eqeqeq: ["error", "always"], // '==' 밎 '!=' 사용을 지양한다.
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/explicit-function-return-type": "off",
},
};
```

# 내일 할 일

- [ ] 로그인 및 회원가입 기능 구현하기
- 다른 프로젝트를 참고하여 token 저장하는 법을 배우기
- [ ] palette page 구현하기