7 첫 번째 프로젝트 요약

source: categories/study/vue-beginner-lv5/vue-beginner-lv5_7.md

7.1 첫 번째 프로젝트 요약 정리

Vue Todo With TypeScript

학습한 내용

  • Vue + TypeScript 프로젝트 생성 방법

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? No

# class-style component 는 안 쓰는 것이 좋다고 말씀드렸었습니다.
# 기존에 class-style component로 쓰여진 프로젝트를 하시는 분들이 고민 많이 되실 수도 있는데, 
# 그렇다고 해서 기존 class-style component 코드를 다 버리시기보다는 점진적으로 개선해 나갈 수 있게 ..
# Vue3 부터는 단순히 저희가 사용했던 Vue.extend() 문법으로 변환하는 것이 아니라
# Composition API가 나와서 재사용성을 훨씬 더 높여주면서 타입스크립트 지원을 빵빵하게 해줄 수 있는 Vue 3가 나와있기 때문에 
# Vue3 쓰시면서 Composition도 쓰시고 그러면서 자연스럽게 다른 새로운 기능들도 쓰시고 그러면 됩니다.

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

# dedicated config files가 아니라 package.json을 선택하시면 나중에 확장하기 굉장히 어려워지실 수 있다.
# 가급적이면 설정 파일들을 따로 분리할 수 있게 하면 좋다.

? Save this as a preset for future projects? No
  • 뷰 타입스크립트 프로젝트 기본 구조
    • main.ts
    • shims-tsx.d.ts
    • shims-vue.d.ts
    • tsconfig.json
  • 재활용성을 고려한 공통 컴포넌트 설계 방법(인풋, 목록 아이템)
    • 인풋 태그의 한글 입력 처리 방법
  • .vue 파일에서의 타입스크립트 정의 방식
    • data
      • todoItems: [] as Todo[]
    • methods
      • return 값이 있을 땐 return 값의 타입에 대해 정의
      • return 값이 없으면 기본 리턴 값으로 void가 설정되어 있음
      • 따로 리턴 값에 대해 정의하지 않고 코드 내에 return 'hi' 이런식으로 되어있다면 해당 메소드의 return 값을 string이라고 추론
      • 다른데서 string 유형이 아닌 다른 유형으로 쓰이면 에러로 잡힘
      • 메소드에서는 파라미터의 타입을 정의하는 것이 가장 중요
      • 원하지 않은 파라미터 타입이 들어가는 것을 방지
    • props
      • todoItem: Object as PropType<Todo>
      • 더 이상 Vue에서 제공하는 validation을 사용하지 않아도 됨
      • 물론 todoItem: { type: Object as PropType<Todo> } 이렇게 써도됨. 이렇게 쓰는 것이 더 좋을 거 같기도..
    • computed
      • 메소드와 다르게 반드시 리턴값 필요
      • 즉, 리턴 값의 유형을 반드시 설정해줘야됨
  • 타입스크립트를 사용했을 때의 이점
    • 안전한 코딩(secure coding)
    • 의도하지 않은 동작에 대해 미리 예방 가능