2021 03 11 목요일 TIL - 30

Today I Learned

• React
• Typescript
• eslint/prettier

Today Review

• 타입스크립트 + 리액트에 eslint + prettier를 적용했다. 적용하자마자 뽜 .. 에러가 터져나와서 적용하는데까지도 시간이 많이 걸렸는데 에러 하나씩 잡느라 힘들었다.

• 일단 타입스크립트 + 리액트 + eslint + prettier 세팅 과정에서 yarn run prettier 로 자동화는 .prettierrc 뒤에 확장다 .json을 지우면서 해결할 수 있었다.
  설치에 도움이 많이 됐던 글 링크

• cra는 이미 airbnb 세팅이 되어있어서 yarn add eslint-config-airbnb 만 해주면 된다. 이걸 안하고 npx install-peerdeps --dev eslint-config-airbnb 를 하면서 시간이 참 많이도 갔다.

• 그 외에도 vscode에서 자동화 옵션들을 적용해주고 자바스크립트 별도 json파일에서 옵션을 설정해주었다. 아래와 같은 옵션이라고 할 수 있겠다.

"[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "files.autoSave": "onFocusChange",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "prettier.useTabs": false,
  "eslint.workingDirectories": [
    { "directory": "./client", "changeProcessCWD": true }
  ],
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact"
  ],
  "prettier.requireConfig": true

• 그 다음으로 정말 타입스크립트에서 난 오류들을 잡아주었다. 불필요하게 잡아주는 옵션들에 대해서 하나씩 찾아보며 오류 처리를 무시할 수 있도록 해주었다. 예를들면 리액트 선언했을 뿐인데 뜨는 에러같은것들.. "no-use-before-define": "off", 로 처리 그 밖에 등등의 처리를 해주었다.
• 오늘 오류를 하도 많이 봐서 오류에 면역력이 생길것만 같다.. 오류,, 무섭지 않다 ⭐️