Vue.js + Typescript

Vue.js 중급 강의 보고 학습하면서 디버깅에 생각보다 엄청 많은 시간을 쓰게되었습니다.

 

엄청 간단한 ToDo List 앱인데도 불구하고요.

 

Vue 객체의 data와 metods에 액세스 할 때, 오타로 인하여 선언하지 않은 프로퍼티에 접근하는 경우에 Vue Lint가 발견하지 못 하였고 v-on 지시자로 호출할 이벤트 함수명을 오타로 인하여 잘못 작성하였을 때도 Vue Lint는 이를 발견하지 못 했습니다.

• v-on:'이벤트 이름:'="addOneItem"
  • 위 처럼 이벤트 이름에 실수로 ":"을 넣은 것 만으로 이 문제를 찾는 데 몇 십분이나 낭비했습니다 ㅠ
•  Vue 객체의 data 중 ToDo List 리스트를 가지는 todoItems 프로퍼티에 접근하여 각 항목 별 completed에 액세스하여 true 또는 false로 바꾸는 작업을 할 때, completed를 compl"a"ted로 잘못 명시하는 바람에 찾는데 몇 몇 십분이나 낭비했습니다.
  • Console.log를 열심히 찍어보고 설마 e를 a로 잘못 적었으리라고는 생각도 못 하고 다른 부분에 문제가 있는 거 아닌가 싶어서 계속 찾게 되더군요.

이런 일이 소규모 앱이 아닌 일반적인 앱에 발생한다고 생각했을 때, 정말 끔찍합니다 ㅠ 이런 일은 미연에 방지하고 싶습니다.

 

자바스크립트

• 애플리케이션이 실행되었을 때만 에러를 검출할 수 있다.
  • JS Lint가 있지만 어디까지나 에디터 내에서 보여주는 것 뿐이다.
  • 문제 있는 로직이 실행되지 않는 다면 에러가 있는 지 알 수 없다.
    • 사용자의 이벤트로 발생하는 로직
  • 특히 오타로 인한 액세스 에러 발생시에 문제가 크다.

Typescript + Vue.js 프로젝트 생성

- vue cli에서 지원한다.

 

으아~~~~ Vue, Vuex에도 안 익숙한데 Typescript까지 하려니 정신이 없네.

 

일시중지!

 

정신차리고 점프하지 말고 계단하나 하나 밟고 가자.