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 로 시작하는 공급자가 ..

아일랜드 컴포넌트를 렌더링할 때 아일랜드 컴포넌트의 콘텐츠는 정적이므로 JS가 클라이언트 측에 다운로드되지 않는다. 속성을 변경하면 아일랜트 컴포넌트를 다시 가져와 다시 렌더링하게 된다. 참고) 이 컴포넌트는 실험적이기 때문에, 사용하려면 nuxt.config 에서 experimental.componentIsland 활성화 시켜야한다. 어플리케이션의 전역스타일이 응답으로 전송된다. 서버 전용 컴포넌트는 를 내부적으로 사용한다. Props name : 렌더링한 컴포넌트의 이름 type : string 필수 lazy : 컴포넌트를 Non-blocking 으로 만든다. type : boolean default : false props : 렌더링할 컴포넌트의 속성 type : Recode source : 렌더링..

Nuxt 문서, 소스 코드 및 소셜 미디어 계정에 대한 링크가 포함되어 있다. 참고) 이 컴포넌트는 nuxt/assets 에 포함되어 있다.

컴포넌트는 onErrorCaptured 를 내부적으로 사용한다. Events @error : 컴포넌트의 기본 슬롯에서 오류가 발생할 때 생기는 이벤트 Slots #error : 오류 발생 시 표시할 대체 컨텐츠를 지정한다. An error occurred: {{ error }} 참고) Docs > Getting Started > Error Handling

사용방법 app.vue 혹은 layouts/ 디렉토리에 를 추가한다. 참고) Docs > Examples > Routing > Pages Props color : 로딩바의 색상, false 로 설정하면 색상이 안나온다. height : 로딩바의 높이(픽셀단위, 기본값 3) duration : 로딩 바의 지속시간 (밀리초, 기본값 2000) throttle : 표시 및 숨기기를 밀리초 단위로 조절 (기본값 200)

이번 장부터는 Apache nifi 표현 언어 가이드 1장에 이어 docs 내용의 함수부터 번역하여 기술하겠습니다. 함수 함수는 속성 값들을 조작하고 비교하는 편리한 방법을 제공합니다. 표현 언어는 자동화된 데이터 흐름의 요구를 충족하기 위해 다양한 함수를 제공합니다. 각 함수는 0개 이상의 인자를 받고 하나의 값을 반환합니다. 이러한 함수들은 연결되어 강력한 표현식을 만들어 조건을 평가하고 값들을 조작하는 데 사용될 수 있습니다. 데이터 유형 함수의 인자와 반환되는 값은 특정한 데이터 유형을 가지고 있습니다. 표현 언어는 여러가지 다른 데이터 유형을 지원합니다. 문자열(String) : 문자열은 숫자, 문자, 공백 및 특수문자로 구성된 문자의 연속입니다. 숫자(Number) : Number는 하나 이상..

는 Vue Router의 컴포넌트와 HTML 태그를 대체할 수 있다. 링크가 내부 인지 외부 인지 지능적으로 결정하고 그에 따라 사용 가능한 최적화(프리페칭, 기본 속성 등)를 사용하여 링크를 렌더링한다. 내부 라우팅 이 예에서는 를 사용하여 애플리케이션의 다른 페이지에 연결한다. About page 외부 라우팅 이 예에서는 컴포넌트를 사용하여 웹 사이트에 연결한다. Nuxt website target 및 rel 속성 이 예에서는 를 target, rel 및 noRel 속성과 같이 사용한다. Nuxt Twitter Nuxt Discord Nuxt GitHub Contact page opens in another tab Props to: Vue Router의 모든 URL 또는 경로 위치 객체. href: ..

컴포넌트를 이용하여 app.vue 혹은 error.vue 의 기본 레이아웃을 활성화할 수 있다. some page content 참고) Nuxt-Directory> layouts Props name : 렌더링할 레이아웃 이름을 지정한다. 문자열, 리액티브 참조 또는 계산된 속성일 수 있다. 이는 layouts/ 디렉터리에 있는 해당 레이아웃 파일의 이름과 일치 해야한다. type : string default : default 레이아웃 이름은 kebab-case로 정규화되므로 레이아웃 파일 이름이 errorLayout.vue 이면 의 name 속성은 error-layout 이된다. 참고) Nuxt-Directory> layouts 추가 Props NuxtLayout 은 레이아웃에 전달해야 할 추가 pro..

는 Nuxt와 함께 제공되는 빌트인 컴포넌트이다. pages/ 디렉토리에 있는 최상위 페이지 또는 중첩 페이지를 표시할 수 있다 는 Vue Router의 컴포넌트를 감싼 래퍼이다. 동일한 name 과 route 속성을 갖는다. Props name : 일치하는 경로 레코드의 컴포넌트 옵션에 해당 이름으로 컴포넌를 렌더링하도록 RouterView 에게 지시한다. type : string route : 모든 컴포넌트가 위치할 경로 위치 type : RouteLocationNormalized pageKey : NuxtPage 컴포넌트가 다시 렌더링되는 시기를 제어한다. type : string 또는 function transition : NuxtPage 컴포넌트로 렌더링된 모든 페이지에 대한 전역 트랜지션을 정..

하위 항목이 SSR에서 오류를 트리거하는 경우 클라이언트에 컨텐츠를 렌더링하기 위해 컴포넌트를 제공한다. 이 컴포넌트는 실험적이므로 사용하려면 nuxt.config 에서 experimental.clientFallback 옵션을 활성화해야한다. Events @ssr-error : 하위 항목이 SSR에서 오류를 트리거할 때 발생하는 이벤트다. 서버에서만 트리거된다. Props placeholderTag | fallbackTag : 슬롯이 렌더링되지 않는 경우 렌더링할 대체 태그를 지정한다. type : string default : div placeholder | fallback : 슬롯이 렌더링되지 않는 경우 렌더링할 대체 컨텐츠를 지정한다. type : string keepFallback : 서버측 렌더..

이번 장부터는 Apache nifi 표현 언어 가이드 docs 내용을 번역하여 기술하겠습니다. 개요 아파치 nifi의 모든 데이터는 플로우파일이라는 추상화로 표현됩니다. 플로우파일은 두 가지 주요 요소로 구성됩니다. 내용(content)과 속성(attributes)으로. 플로우 파일의 내용 부분은 작업 대상인 데이터를 나타내고, 속성 부분은 데이터 자체 또는 메타데이터에 관한 정보를 나타냅니다. 속성은 데이터에 대해 알려진 정보와 데이터를 적절하게 라우팅 하고 처리하는데 유용한 정보를 나타내는 키-값 쌍입니다. 로컬 파일 시스템에서 가져온 파일의 예를들면, 플로우파일에는 파일 시스템의 파일 이름을 의미하는 filename이라는 속성이 있습니다. 또한 플로우파일에는 이 파일이 위치한 디렉토리를 반영하는 p..

컴포넌트는 클라이언트 측에서만 슬롯을 렌더링한다. 클라이언트에서만 컴포넌트를 가져오려면 클라이언트 측 전용 플러그인에 컴포넌트를 등록한다. Props placeholderTag | fallbackTag : 서버사이드에서 렌더링될 태그를 특정한다. placeholder | fallback :서버사이드에서 렌더링될 컨텐츠를 특정한다. Slots #falllback : 서버사이드에서 출력될 컨텐츠를 특정한다. Loading comments...

Nuxt 앱은 Node.js 서버, 사전 렌더링된 스태틱 호스팅, 혹은 서버리스 또는 엣지(CDN) 환경에 배포될 수 있다. 참고) 호스트 제공자들 Node.js 서버 모든 Node 호스팅에 배포할 수 있도록 Nitro가 포함된 Node.js 서버는... 아무것도 지정되지 않거나 자동 감지되는 경우 기본 출력 형식 최적의 콜드 스타트 타이밍에 대한 요청을 렌더링하는데 필요한 청크만 로드한다. 모든 Node.js 호스팅에 Nuxt 앱을 배포하는 데 유용. 진입 지점 노드 서버 사전 설정을 사용 하여 실행하면 nuxt build 결과는 즉시 실행 가능한 노드 서버를 시작하는 진입점이 된다. 터미널) node .output/server/index.mjs 위 명령은 3000번 포트를 기본으로 Nuxt 서버를 기..