전체 글 353

[Vite] Cannot find type definition file for 'vite/client'. The file is in the program because: Entry point of type library 'vite/client' specified in compilerOptions

Vite 의 경우 typeRoots 의 설정이 조금 더 필요합니다.Vite 의 타입파일은 node_modules/vite 아래에 존재합니다.node_modules/vite/types node_modules/vite 는 일반적인 경우와 다르게 node_modules/@types 가 타입 루트가 아님으로 별도로 설정을 해줘야 합니다.tsconfig.js 파일에서 아래와 같이 추가 합니다.{ // https://nuxt.com/docs/guide/concepts/typescript "extends": "./.nuxt/tsconfig.json", "compilerOptions": { "types": [ "@pinia/nuxt", "vite/client", "./types/..

코드/Npm 2024.10.25

[Docker] Image pull

hub.docker.com 에 업로드된 이미지를 다운로드한다.# 로컬에 있는 도커 이미지를 모두 삭제한다> docker image prune -aWARNING! This will remove all images without at least one container associated to them.Are you sure you want to continue? [y/N] yDeleted Images:deleted: sha256:c94415d27e2f87f98f11e047e6b5b4b0bfd5e3b9fb2326eba8f2e8080cf39b09deleted: sha256:63a51fc658aca7e1cd40d8bc21c9db3f7eec153486b583a2682ef11cb9ebf950> docker imag..

코드/CI-CD-Docker 2024.09.13

[Vite] import.meta interface

vite 에서는 import.meta 를 통해 환경변수에 접근할수 있도록 제공한다.이 import.meta 가 타입 추론이 되지 않는 경우가 있다(특히 hot 속성)별도로 인터페이스를 선언해주어야 한다.interface ViteHotContext { readonly data: any accept(): void accept(cb: (mod: ModuleNamespace | undefined) => void): void accept(dep: string, cb: (mod: ModuleNamespace | undefined) => void): void accept( deps: readonly string[], cb: (mods: Array) => void, ): void dispose(..

[Nuxt3] auto import 설정

pinia 의 사용시 특정 pinia 함수들은 별도 import 선언문 없이 사용할수 있도록 처리한다.nuxt.config.ts 파일의 모듈 옵션을 변경export default defineNuxtConfig({ modules: [ ['@pinia/nuxt', {autoImports: ['defineStore', 'acceptHMRUpdate']}] ]}이런 식으로 선언 해주면 된다.autoImports 안의 함수명들에 대한 코드 제안을 보고 싶은데 뭔가 설정이 제대로 안되었는지 동작하지 않는다. 설정되고 나면export const useUser = defineStore('user', { state: () => { return { isLoggedIn: false, } },..

코드/Nuxt3 2024.09.03

[TS] keyof, unionType

(keyof ApiData)[]는 TypeScript에서 타입을 정의할 때 사용되는 구문으로, 이를 이해하기 위해 keyof 키워드와 배열 타입에 대해 알아보겠습니다.1. keyof 키워드keyof 키워드는 TypeScript에서 객체 타입의 키들을 유니언 타입(union type)으로 반환합니다. 예를 들어, 특정 인터페이스나 객체 타입이 있을 때, 그 타입의 모든 키를 나열하는 데 사용됩니다.interface ApiData { id: number; name: string; email: string;}type ApiDataKeys = keyof ApiData; // "id" | "name" | "email"위 예제에서 keyof ApiData는 "id" | "name" | "email"이라는 유니..

코드/JS 2024.08.28

[Nuxt3] useAsyncData, useFetch (feat, ofetch)

Nuxt3 의 useAsyncDAta와 useFetch 는 내부적으로 ofetch 라이브러리를 사용한다 unjs 라고 Nuxt 만의 JS 라이브러리 생태계를 만들어놨다...라이브러리들은 많지만 특별히 대단할건 없다. 하지만 알아 두면 좋을 것들이 많다. 이러나 저러나 Nuxt 내부적으로 사용되는 애들이니까. useAsyncData 나 useFetch 를 이용해서 비동기 통신을 할때 발생한 response error 를 처리해야하는 경우는 빈번하다.그럴경우 useAsyncData 와 useFetch 의 코드 작성 케이스는 다르다. const { data } = useAsyncData ( `${query}/{new Date().toString()}`, (): Promise => { ret..

코드/Nuxt3 2024.08.15

[Vue3] reactive fundamental

vue3 에는 ref 라는 함수를 제공하며 반응형 객체를 반환한다.reactive 라는 함수가 있다.마찬가지로 반응형 객체를 반환하지만 ref와는 다른 점이 존재한다.매개변수로 primitive 객체가 아닌 Object 혹은 Array 객체를 받는다Reqctive Count = {{ state.count }}Increase CountRef Count = {{ count }}Increase Count ref 함수로 생성된 반응형 객체와의 차이점은 script 영역내에서 직접 속성 접근이 가능하다는 점.ref 함수로 생성된 객체는 counrt.value , 즉 .value 를 통해 접근해야하나 reactive 를 통해 생성된 객체는 해당 속성을 바로 접근할수 있다. reactive 와 ref 의 가장 큰 차..

코드/JS 2024.08.08