전체 글 355

[Node] url.fileURLToPath, path.resolve

url.fileURLToPath와 path.resolve는 각각 다른 방식으로 파일 경로를 처리하며, 서로 다른 목적을 가지고 있습니다.Node.js 환경에서 파일 경로를 다룰 때 유용하지만, 사용하는 상황에 따라 차이가 있습니다. 1. url.fileURLToPathurl.fileURLToPath는 URL 객체나 file URL 문자열을 로컬 파일 경로로 변환합니다.주로 file:// 스킴으로 시작하는 파일 URL을 일반 파일 시스템 경로로 변환할 때 사용됩니다. 예를 들어, URL 객체를 통해 파일 경로를 설정하거나 읽을 때 유용합니다.import { fileURLToPath } from 'url';const fileURL = new URL('file:///Users/example/path/to/fi..

코드/Node 2024.11.14

[Vue] Router History mode & Hash mdode

Vue Router 에는 HTML 5 History mode와 Hash 모드 두 가지가 존재합니다.import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';const router: Router = createRouter({ history: createWebHistory(), //history: createWebHashHistory(), routes: [ {name: 'home', path: '/', component: Home} ]}); 차이는 간단합니다URL 을 보면// web historyhttps://localhost:5173/brazil// hash historyhttps://localhost:5..

코드/Nuxt3 2024.11.12

[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