vue+typescript 3/27 3/29 기록

3/27

처음 세팅시 estlint 오류
3 errors and 0 warnings potentially fixable with the '--fix' option

말그대로 npm run lint -- --fix 로 해결가능

3/29

https://medium.com/@su_bak/vscode%EC%97%90%EC%84%9C-prettier%EC%9D%98-format-on-save%EA%B0%80-%EB%8F%99%EC%9E%91%ED%95%98%EC%A7%80-%EC%95%8A%EC%9D%84-%EB%95%8C-%ED%95%B4%EA%B2%B0%EB%B2%95-7556ef28e01a

를 참고하여
format on Save를 체크하고 default formatter를 prettier로 선택하여 프로젝트를 저장했더니
자동으로 문법이 맞게 설정되면서 빨간 줄이 와구와구 뜨던 오류가 해결되었다.

https://jbee.io/react/testing-4-react-testing/

스토리북을 통한 UI testing

04.02

   <span
     class="item"
     :class="todoItem.done ? 'complete' : null"
     @click="toggleItem"
     >{{ todoItem.title }}</span
   >

   <span class="item" :class="todoItemClass" @click="toggleItem">{{
      todoItem.title
    }}</span>

  computed: {
    todoItemClass(): string | null {
      return this.todoItem.done ? "complete" : null;
    },
  },


class 삼항연상자로 인해 html코드가 더러워질 경우, computed로 뺄 수 있다.
필히 반환타입을 지정해주어야한다.

vue에 typescript 덧대기

• dedicated config 파일의 중요성

의문점 - babel이란?

multi-word-component-names 에러도 떠서
eslint에 추가해줌

"vue/multi-word-component-names": [
    "error",
    {
      ignores: ["Spinner"],
    },
  ],
    

https://webpack.js.org/configuration/dev-server/#overlay

error시 overlay관련 설정.

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    client: {
      overlay: false,
    },
  }, //https://webpack.js.org/configuration/dev-server/#overlay
});

overlay:false 추가

<캡틴판교님의 vsc 설정>
캡틴판교님은 설정에 exclude를 검색했을때,
파일 및 폴더 제외를 위해 glob 패턴을 구성합니다. 예를 들어 파일 탐색기는 이 설정에 따라 표시하거나 숨길 파일 및 폴더를 결정합니다. 검색별 제외를 정의하려면 Search: Exclude 설정을 참조하세요.
에 node_modules를 평소 추가해 작업속도를 빨리 한다고 하심.. 꿀팁이다 ~~~새겨듣자!

<axiosPromise타입>

난 분명 AxiosPromise<NewsItem[]>을 리턴하도록 선언했는데
const respone에서 결과를 받고 response 타입을 보니
AxiosPromise<NewsItem[],any>로 되어있었다.
왜 그런가 했더니

axios 내부 타입이
이렇게 되어있어서 그렇다는 것을 알았다.