Topic. AI model Fine-tune 을 위하여 GPU를 활용하기 위해 CUDA kit를 설치해봅시다. 1. 개요 CUDA("Compute Unified Device Architecture", 쿠다)는 그래픽 처리 장치(GPU)에서 수행하는 (병렬 처리) 알고리즘을 C 프로그래밍 언어를 비롯한 산업 표준 언어를 사용하여 작성할 수 있도록 하는 GPGPU 기술입니다. 주로 AI model 개발시에 사용합니다. 2. 설치환경 OS : Windows11 CPU : AMD Ryzen 9 7950X3D 16-Core Processor GPU : NVIDIA GeForce RTX 4090 24GB RAM : 128GB 3. 설치 1. CUDA 버전확인 CUDA 버전은 Power Shell 에서 nvidia..

개요 Next.js 14 주요 업데이트 4가지 중 하나는 공식문서에서 교육과정을 제공해준다는 것입니다. Next.js framework의 이해는 공식문서 Learn Next.js 를 참조해주시길 바랍니다. Prerequisites node : 현재 기준 최신 Next.js 14.0.4는 node version 18.17이상만 지원하므로 버전 20 설치를 추천함. (현재 LTS 최신 버전은 20.10.0) Set up app 이름을 정하고 폴더를 만든다. 예: app 이름 : x2bee-fo-dev $ mkdir x2bee-fo $ cd x2bee-fo $ code . // 자신이 쓰는 IDE 열기 package.json 파일 생성하고 아래 입력 { "name": "x2bee-fo", "private": ..

useNuxtApp 은 클라이언트 측과 서버 측 모두에서 사용할 수 있는 Nuxt의 공유 런타임 컨텍스트에 액세스하는 방법을 제공하는 내장 컴포저블이다. Vue 앱 인스턴스, 런타임 후크, 런타임 구성 변수 및 내부 상태(예: ssrContext 및 payload) 에 액세스하는 데 도움이 됩니다. Method provide(name, value) nuxtApp 은 Nuxt 플러그인을 사용하여 확장할 수 있는 런타임 컨텍스트이다. 이 provide 함수를 사용하여 Nuxt 플러그인을 생성하면 모든 컴포저블과 구성요소에서 Nuxt 애플리케이션에서 사용할 수 있는 값과 도우미 메서드를 만들 수 있다. const nuxtApp = useNuxtApp() nuxtApp.provide('hello', (name)..

useFetch 는 기본적으로 비동기 처리기가 해결될 때까지 탐색을 차단한다. lazy 옵션을 true 로 설정하여 핸들러가 리졸브되기 전에 탐색을 시도할 수 있는 useFetch 래퍼를 제공한다. 참고) Nuxt-Composable > useFetch Example Loading ... 참고) Nuxt-개요 > 데이터 가져오기

useAsyncData 는 기본적으로 비동기 처리기가 리졸브될 때까지 탐색을 차단한다. lazy 옵션을 true로 설정하여 핸들러가 리졸브되기 전에 탐색을 트리거하는 useAsyncData 래퍼를 제공한다. 참고) Nuxt-Composable > useAsyncData {{ pending ? 'Loading' : count }}

useHydration 은새로운 HTTP 요청이 이루어질 때마다 서버 측에서 데이터를 설정하고 클라이언트 측에서 해당 데이터를 수신하는 방법을 제공하는 내장형 컴포저블이다. useHydration 을 사용하면 하이드레이션 주기를 완전히 제어할 수 있다. 고급 컴포저블이며 대부분 내부적으로(useAsyncData) 또는 Nuxt 모듈에서 사용된다. Type (Signature) useHydration (key: string, get: () => T, set: (value: T) => void) => {} 컴포저블, 플러그인, 컴포넌트 내에서 useHydration() 을 사용할 수 있다. useHydration 세 가지 매개변수를 허용한다: key : Nuxt 애플리케이션의 데이터를 식별하는 고유 키 ty..

useHead 컴포저블 함수를 사용하면 Unhead 에서 제공하는 프로그래밍 방식 및 반응형 방식으로 헤드 태그를 관리할 수 있습니다. 데이터가 사용자 또는 기타 신뢰할 수 없는 소스에서 가져온 경우 useHeadSafe 를 쓰는 것이 좋다. 참고) SEO 와 Meta Type useHead(meta: MaybeComputedRef): void 다음은 useHead 에 대한 비반응형(non-reactive) 유형이다. interface MetaObject { title?: string titleTemplate?: string | ((title?: string) => string) base?: Base link?: Link[] meta?: Meta[] style?: Style[] script?: Scrip..

useHeadSafe 컴포저블은 안전한 값만 허용하도록 입력을 제한하는 useHead 래퍼 컴포저블이다. 사용법 useHead 와 동일한 값을 전달할 수 있다. useHeadSafe({ script: [ { id: 'xss-script', innerHTML: 'alert("xss")' } ], meta: [ { 'http-equiv': 'refresh', content: '0;javascript:alert(1)' } ] }) // Will safely generate // // Type useHeadSafe(input: MaybeComputedRef): void 안전한 값 의 허용 목록은 아래와 같다. export default { htmlAttrs: ['id', 'class', 'lang', 'dir'..

이 컴포저블은 useAsyncData 및 $fetch 를 감싼 형태며, URL 및 가져오기 옵션을 기반으로 자동으로 키를 생성하고, 서버 경로를 기반으로 요청 URL의 유형에 대한 힌트를 제공하고, API 응답 유형을 추론한다. useFetch 는 setup 함수, 플러그인 또는 경로 미들웨어에서 직접 호출되는 컴포저블이다. 반응형 컴포저블을 반환하고 Nuxt 페이로드에 응답을 추가하므로 페이지가 하이드레이션될 때 클라이언트 측에서 데이터를 다시 가져오지 않고도 서버에서 클라이언트로 응답이 전달될 수 있다. 사용법 // pages/index.vue query 옵션을 사용하면 쿼리에 검색 매개변수를 추가할 수 있습니다. 이 옵션은 unjs/ofetch 에서 확장되었으며 unjs/ufo를 사용하여 URL을 ..

컴포저블은 처리 중인 전역 Nuxt 오류를 반환할 수 있으며 클라이언트와 서버 모두에서 사용할 수 있다. const error = useError() useError상태에 오류를 설정하고 구성 요소 전반에 걸쳐 반응적이고 SSR 친화적인 전역 Nuxt 오류를 생성한다. Nuxt 오류에는 다음과 같은 속성이 있다: interface { // HTTP response status code statusCode: number // HTTP response status message statusMessage: string // Error message message: string } 참고) Nuxt-개요 > 오류처리

페이지, 구성요소 및 플러그인 내에서 SSR 친화적인 컴포저블인 useCookie 을 사용하여 쿠키를 읽고 쓸 수 있다. const cookie = useCookie(name, options) useCookie ref는 쿠키 값을 JSON으로 자동으로 직렬화 및 역직렬화한다. Example 아래 예에서는 counter 라는 쿠키를 생성한다 . 쿠키가 존재하지 않으면 처음에는 임의의 값으로 설정된다. 변수 counter 를 업데이트할 때마다 그에 따라 쿠키도 업데이트된다. Counter: {{ counter || '-' }} reset - + 아래 예는 useCookie API를 사용하여 클라이언트와 서버 모두 사용할 수 있는 소량의 데이터를 유지하는 방법을 보여준다. Welcome, {{ user.nam..

재사용의 이유 Tailwind CSS는 uility class를 html에 markup 형태로 쓰는 방식이다. 그러나 보통 좀 제대로 된 간단한 버튼 하나를 구현하려고 해도 코드과 다음과 같아 길어진다. Hello 위 코드를 반복해서 쓰고 싶다면 가독성이 더욱 더 떨어질 것이다. 이 코드를 My Button 의 형태로 재정의해서 사용하면 .jsx (.tsx) 파일의 가독성이 훨씬 올라갈 것이다. 재사용 방법 Utility class를 재사용하는 방법은 기본적으로 3가지가 있다. 1. tailwind.config.js 이미 정의되어있는 utility class를 재정의하거나, 새로운 utility class를 정의할 때 사용 예시: theme: { extend: { colors: { primary: '#F..

Topic. 윈도우즈 10 이후 환경에서 리눅스환경이 필요한 상황을 위하여 wsl 환경 설정에 대해 설명합니다. 1. 개요 WSL이란 Windows Subsystem for Linux 의 약어로 리눅스용 윈도우 하위 시스템을 말합니다. 윈도우에서 실제 리눅스와 같이 사용할 수 있습니다. * 일부 어플리케이션 (웹서비스 성능측정) 은 WSL환경에서 구동시 정확한 결과가 나오지 않을 수도 있습니다. 2. 설치 1. Windows Power Shell 관리자 권한으로 실행 2. wsl 설치 WSL을 설치합니다. PS C:\Users\user> wsl --install Ubuntu 18.04 version 은 wsl 1 version 에서 정상동작하므로 아래와 같이 입력합니다. PS C:\Users\user> ..

useAsyncData는 SSR 친화적인 컴포저블에서 비동기적으로 확인되는 데이터에 대한 액세스를 제공한다. 페이지, 구성 요소 및 플러그인 내에서 useAsyncData를 사용하여 비동기적으로 확인되는 데이터에 액세스할 수 있다. useAsyncData 는 설정 함수, 플러그인 또는 라우팅 미들웨어에서 직접 호출되는 컴포저블이다. 반응형 컴포저블을 반환하고 Nuxt 페이로드에 응답을 추가 하므로 페이지가 하이드레이션될 때 클라이언트 측에서 데이터를 다시 가져오지 않고도 서버에서 클라이언트로 응답이 전달될 수 있다. 사용법 Watch Params 내장 watch옵션을 사용하면 변경 사항이 감지될 때 fetcher기능을 자동으로 다시 실행할 수 있다. 주의) useAsyncData은 컴파일러에 의해 변환된..

프로젝트에 설정된 app config 를 불러온다. Nuxt 3는 app.config 파일을 통해서 라이프사이클 내에서 런타임에 업데이트하거나 nuxt 플러그인을 사용하여 HMR(핫 모듈 교체)로 편집할 수 있는 기능 등의, 애플리케이션 구성을 노출할 수 있다. app.config.ts 파일을 사용하여 런타임 앱 구성을 쉽게 제공할 수 있다. .ts, .js 또는 .mjs 확장자를 가질 수 있다 . 사용예 export default defineAppConfig({ theme: { primaryColor: '#ababab' } }) 주의) 파일안에 비밀번호 등의 값을 넣으면 안된다. app.config 는 사용자 클라이언트 번들에 노출된다. app.config 에 theme 를 추가할 때 Nuxt는 Vit..

개요 Vercel Next.js의 공식 github 레포지스티에 가면 example 소스코드가 있는데 schema validation을 위해 zod라는 패키지를 쓰고 있다. 이전 글에서 소개한 ajv가 압도적으로 다운로드 수가 많지만 legacy한 부분도 없지않고, Next.js 공식 코드에서 사용하는 만큼 zod가 장점이 꽤 많다. 아래 보는 것 처럼 올해 들어 다운로드수도 폭발적으로 증가 중이다. schema validation이 필요한 이유 1. api request 하나만 실패해도 web app 전체가 다운되는 현상을 방지 물론 optional chaining을 이용해 어느 정도 web app 전체가 다운되는 현상을 방지할 수는 있지만 원인을 찾을 수는 없다. 2. Typescript에만 의존할 ..

컴포넌트는 DOM의 다른 위치로 순간 이동한다. Vue 3는 Vue 애플리케이션 외부 DOM의 다른 곳에서 콘텐츠를 렌더링할 수 있는 컴포넌트를 제공한다. 주의) 의 to 에는 CSS 선택기 문자열 또는 실제 DOM 노드가 필요합니다. Nuxt는 현재 body 에 대해서만 텔레포트를 위한 SSR을 지원하며 래퍼 를 사용하는 다른 대상에 대해서는 클라이언트 측 지원을 제공한다. BodyTeleport Open Modal Hello from the modal! Close Client-side Teleport Example 아래 예는 SSR 텔레포트로 body 를 렌더링하고, ClientOnly 를 이용해 body 위에 모달창을 CSR 하는 예제이다. SSR Teleport Hello from a client..

Topic. LLaMA 2 모델 NousResearch/Llama-2-13b-chat-hf 을 LoRA 방식으로 미세조정해봅시다. 1. 실습환경 구성 아래 글을 참조하여 실습환경을 구성합니다. [실습] A.I. Pre-trained Model Fine-tuning 을 위한 환경설정(Linux Ubuntu) 2. Pretrained Model, Datasets Information model_pretrained_name NousResearch/Llama-2-13b-chat-hf https://huggingface.co/NousResearch/Llama-2-13b-chat-hf data_path b-mc2/sql-create-context https://huggingface.co/datasets/b-mc2/..

컴포넌트는 태그를 대체할 수 있다. 사용법은 와 거의 동일 하지만 가능한 경우 webp 와 같은 최신 형식을 제공할 수도 있다. 설정 를 쓰기위해서는 Image 모듈을 추가 설치해야한다. npx nuxi@latest module add image

컴포넌트는 기본 태그를 대체할 수 있다. 내장 공급자를 사용하여 로컬 및 원격 이미지 최적화 src 공급자에 최적화된 URL로 변환 width, height 을 기준으로 이미지 크기를 자동으로 조정 sizes 옵션 제공 시 반응형 크기 생성 기본 지연 로딩 및 기타 속성을 지원 설정 를 사용하려면 Nuxt Image 모듈을 설치하고 활성화해야 한다: npx nuxi@latest module add image 사용법 는 (주변 래퍼 없이) 네이티브 img 태그를 직접 출력한다 . 태그를 사용하는 것처럼 사용한다. 아래 결과로 변한다. Props src : 이미지 파일 경로 src 는 public/ 디렉터리의 정적 이미지에 대한 절대 경로 형식이어야 한다 . 그렇지 않으면 또는 URL 로 시작하는 공급자가 ..