香港居民

도커 이미지의 태그 변경하기# docker tag 이미지명:[기존태그이름] 변경이미지명:[변경태그이름]➜ ~ docker imagesREPOSITORY TAG IMAGE ID CREATED SIZEbongoo 1.0.0 90d1f81f0c97 14 hours ago 267MB c94415d27e2f 8 weeks ago 267MB 63a51fc658ac 3 months ago 1.02GBnode 20.12.2-alpine3.19 3b62bffc0937 5 months ago 133MB➜ ..

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(..

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, } },..

(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"이라는 유니..

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

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 의 가장 큰 차..

실제 서비스에서 YAML 운용하다보면 많아지는 코드 속에 중복되는 부분이 많이 발생한다.그런 부분을 template 을 통해 효율적으로 관리 할수 있다. 다음과 같은 부분이 있다고 가정한다.deploy to stage: stage: deploy staging cache: {} environment: name: staging url: http://$STAGING_URL before_script: - corepack enable - SHELL="$(which bash)" pnpm setup - source /root/.bashrc - pnpm add -g surge allow_failure: false only: - master script: - sur..

YAML 기능 중에 anchor 라는 것이 있다.html 상의 anchor 과는 약간 궤를 달리 한다. 아래와 같은 구조가 있다고 가정하자.person: name: &name KTH_self age: 29 isMale: false hobby: - scuba - swimming - squash friends: - name: Sunhee age: 19 - name: Jiyeon age: 19 stuff: [iphone, ipad] self: *name &name 이라는 앵커와 KTH 라는 값을 선언한다.아래쪽 self 에서 * 와 함께 바로 사용할 수 있다. JSON 변환{ "person": { "name": "KTH_self", "age..

yaml 파일 person: name: KTH # indent 로 하위 속성임을 나타낸다 age: 29 # 숫자 데이터 타입도 저장 가능하다 isMale: false # boolean 데이터 타입 hobby: - scuba # indent 이후 하이픈은 배열 요소로 선언된다 - swimming - squash friends: - name: Sunhee # 배열 요소에서 같은 인덴트의 하위 속성 선언시 object 요소로 선언된다. age: 19 - name: Jiyeon age: 19 stuff: [iphone, ipad] online 컨버터등을 통해  json 으로 그대로 바꿀수도 있다.사용해 볼수록 데이터 선언에 편리하다.

CI pipeline 에서 머지 리퀘스트 발생시마다 테스트 환경을 동적으로 생성할수 있다.반대로 그렇게 테스트된 환경 형상이 마스터 브랜치 혹은 develop 로 머지될때 동적인 환경을 제거할 수 있다. 아래는 deploy review job 이 중지되면 stop review 잡을 시작하는 ci 설정이다.머지 리퀘스트가 생성되면 deploy review 가 활성화되고머지되면 stop review 잡이 활성화 된다.variables: $VITEPRESS_DOC_ROOT=./.vitepress/dist deploy review: stage: deploy only: - merge_requests environment: - name: reviews/$CI_COMMIT_REF_NAME ..