도저히 안되겠다에요 ㅠㅠㅠㅠㅠ

서론

혼자서 vue3 + typescript를 통해서 간단한 포트폴리오 사이트를 개발하려고 머리를 박았으나 우선 vue3에 대한 정보는 차고 넘칩니다.

하지만, vue3 + typescript에 대한 정보가 많지않아서 에러가 발생해도 검색해도 안나옵니다.... 그래서 유튜브를 뒤져보다 vue3 + typescript강의가 있어서 이것을 보고 다시 공부를해서 만들어 볼 생각입니다. ㅠㅠㅠㅠ

 

본론

import에러

import vue를 할때마다 에러가 발생했습니다. 사실 vue 뿐만 아니라 다른 컴포넌트를 import할 때마다 에러가 발생했습니다.

그런데 이런저런 플러그인을 설치하고도 에러가 발생했지만 vscode를 껏다 키니깐 에러가 해결이 되었습니다. 왜 아직도 에러가 발생했는지는 의문입니다...

(@builtin typescript를 재 설치하면 에러가 해결됩니다. 다만, 이런 에러가 갑자기 또 다시 발생하니 재 설치를 또 해주면 됩니다...)

 

Array Type에러

객체를 배열로 만들었고 해당 interface도 

<!-- 대략적인 타입선언 -->
interface Test {
  id: number
  text: string
  isOk: boolean
}[]

이렇게 선언을 했지만

ts(2740)에러가 발생하고 해당 배열에 속성을 만들 수 없다고 해서 GPT, stackoverflow를 다 찾아봤지만 해결을 할 수 없었습니다....

다음 블로그 글에서 확인 가능

 

자바스크립트는 vetur, 타입스크립트는 volar

자바스크립트를 사용할 때는 vetur 플러그인을 사용하라더만 새롭게 typescript를 할때는 volar를 사용하라고 합니다..

그래도 이거는 해결을 해서 다행입니다..

 

정리

사실 기존 리액트에서 사용가능한 애니메이션 효과도 여기서는 안됐습니다.... 마크업에 [data-set]="true" 이런것도 안먹힙니다.....

조금 더 공부를하고 vuetify를 사용해서 해결해야겠습니다... 전역으로 전처리기 관리하는 법을 알고 :style="조건 or props"를 받아서 추가 스타일 생성이 가능합니다.