useSeoMeta 컴포저블을 사용하면 사이트의 SEO 메타 태그를 TypeScript가 완전히 지원되는 플랫 객체로 정의할 수 있다. useSeoMeta 를 사용하면 property 대신 name 을 사용하는 것과 같은 일반적인 실수와 오타를 방지할 수 있다. 100개가 넘는 메타 태그가 완전히 입력되어 있기 때문이다. 이는 XSS에 안전하고 TypeScript를 완벽하게 지원하므로 사이트에 메타 태그를 추가하는데 권장되는 방법이다. 참고) Nuxt-개요 > SEO 와 Meta 사용 예 반응형 태그를 삽입할 때는 계산된 getter 구문(() => value)을 사용해야한다. 100개가 넘는 매개변수가 있다. 아래 소스 코드의 전체 매개변수 목록을 참고하자.

useRuntimeConfig 컴포저블을 사용하여 런타임 구성 변수에 액세스한다. // server/api/foo.ts export default defineEventHandler((event) => { const config = useRuntimeConfig(event) }) 참고) Docs > Guide > Going Further > Runtime Config 런타임 구성 정의 아래 예에서는 공개 API 기본 URL과 서버에서만 액세스할 수 있는 비밀 API 토큰을 설정하는 방법을 보여준다. runtimeConfig 변수를 nuxt.config 내부에 정의해야 한다. // nuxt.config.ts export default defineNuxtConfig({ runtimeConfig: { // Pr..

Data fetching 이란? Data fetching이란 API등을 이용하여 데이터를 가져오는 과정을 의미하며, 대표적으로 자바스크립트에서 네이티브로 제공해주는XMLHttpRequest, Fetch API 그리고 jQuery의 AJAX, Axios 통신 라이브러리를 이용하여 처리 합니다. Next JS 13 이전 버전에서는 getStaticProps이나 getServerSideProps라는 메소드 또는 Component 로직내에서 사용자 행위로 일어나는 이벤트 동작 내에서 data fetching을 사용하였습니다. 하지만 Next 13 부터는 Server Component 및 Client Component라는 구분이 생겨났고, 이로 인하여 data fetching에도 영향을 주었는데 기존에는 Axio..

useRouter 컴포저블은 라우터 인스턴스를 반환한다. 템플릿 내에 라우터 인스턴스만 필요한 경우 $router 을 사용하세요. Back pages/ 디렉토리가 있는 경우 useRouter는 에서 vue-router 제공하는 것과 동작이 동일합니다. 기본기능 addRoute() : 라우터 인스턴스에 새 경로를 추가합니다. parentName 기존 경로의 하위 경로로 새 경로를 추가하도록 제공될 수 있다. removeRoute() : 이름으로 기존 경로를 제거한다. getRoutes() : 모든 경로 기록의 전체 목록을 가져온다. hasRoutes() : 해당 이름의 경로가 존재하는지 확인한다. resolve() : 경로 위치의 정규화된 버전을 반환한다. 기존 기반을 포함하는 href 속성도 포함된다. ..

Local font files src/app/assets/fonts 폴더를 생성하고 local font 파일을 복사한다. ( public/assets/fonts 폴더를 생성하여도 무관 ) font.ts src/app/assets/ 폴더에 font.ts 파일 생성 다음 코드 입력 import localFont from 'next/font/local'; export const familyMont = localFont({ src: [ { path: './fonts/Montserrat-Bold.woff2', weight: '700', style: 'bold', }, { path: './fonts/Montserrat-Medium.woff2', weight: '500', style: 'medium', }, { pa..

Environment variables 참조: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#environment-variable-load-order npm run dev에서 실행되는 .env.development.local 생성 그리고 배포 환경에서 실행되는 .env.production.local 를 생성한다. 코드 상에서 참조시 process.env.API_URL 형태로 참조 next.config.js 참고: https://nextjs.org/docs/app/building-your-application/configuring/typescript#type-checking-nextconfigjs..

Reset CSS src/app/layout.tsx 위에 다음 한 줄 추가 import '/src/app/ui/globals.css'; 파일 생성하고 src/app/ui/globals.css 다음 3줄 입력 @tailwind base; @tailwind components; @tailwind utilities; 위를 추가하면 처음에 warning이 뜨는네 VS code extension에서 PostCSS Language Support 라는 extension을 설치하면 없어진다. Install 참조: https://tailwindcss.com/docs/guides/nextjs 참조: https://nextjs.org/docs/app/building-your-application/styling/tailwin..

설치 우선 기본 패키지 2개 설치 $ pnpm add eslint eslint-config-next package.json에 scripts 추가 "scripts": { ... "lint": "next lint --no-cache" }, --no-cache는 생략 가능 : 붙여줄 시 변경사항만 검사하지 않고 전체를 다시 검사하는 차이 Standard package 설치 $ pnpm add eslint-config-standard .eslintrc.json을 root에 생성하고 다음 입력 { "extends": ["next/core-web-vitals", "standard"] } ESlint config for Tailwind CSS $ pnpm add eslint-plugin-tailwindcss tail..

이번 장부터는 Apache nifi 표현 언어 가이드 2장에 이어 docs 내용의 함수부터 번역하여 기술하겠습니다. 문자열 조작 입력 유형 반환 유형 설명 예 toUpper String String 문자열을 모두 대문자로 변환합니다 "abc" => "ABC" toLower String String 문자열을 모두 소문자로 변환합니다 "ABC" => "abc" trim String String 문자열 앞뒤의 공백을 제거합니다 " 1 2 3 " => "123" substring String String 문자열의 일부를 가져옵니다 별도 작성 substringBefore String String 특정 문자열이 등장하기 전까지 가져옵니다 별도 작성 substringBeforeLast String String 특정 ..

저희 테크팀에서는 nextjs 상태관리에 대한 많은 고민 끝에 zustand를 사용하기로 하였습니다. 아래는 zustand를 사용하는 학습과정입니다. Zustand Zustand는 간단하고 빠르며 확장성 있는 상태관리 솔루션입니다. hook를 기반으로 한 편리한 API를 가지고 있어서, 보일러플레이트 코드가 없습니다. 특히 Zustand를 사용하면 기존 React 동시성, 그리고 혼합랜더러 같은 곳에서 나타나는 컨텍스트 손실 같은 일반적인 문제들을 개선하는데 도움이 많이 됩니다. 그리 어렵지않으니, 예제 코드를 통해 사용법을 살펴보겠습니다. const useBearStore = create((set) => ({ // 초기값이 0으로 설정된 bears라는 상태 속성 bears: 0, // bears를 증가..

Typescript 설정 src/app/layout.jsx 파일 이름을 .tsx로 수정하고 다시 $ npm run dev 하면 package.json에 자동으로 다음 dev. dependencies가 생성된 것을 볼 수 있다. "devDependencies": { "@types/node": "20.10.4", "@types/react": "18.2.45", "typescript": "5.3.3" } 추가로 root 폴더에 next-env.d.ts 와 tsconfig.json 이 생성된 것을 볼 수 있다. → 이 두 파일을 수정 필요없음. layout.tsx는 확장자만 tsx로 바꿨으므로 코드도 typescript로 바꿔줘야한다. 다음 코드로 수정한다. import React from "react"; im..

useRoute 컴포저블은 현재 경로를 반환한다. Vue 컴포넌트의 템플릿 내에서 $route 를 사용하여 경로에 액세스할 수 있다. 사용 예 {{ mountain.title }} {{ mountain.description }} 경로 쿼리 매개변수(예: /test?example=true 경로 안의 example)에 액세스해야 하는 경우 useRoute().params 대신 useRoute().query 을사용할 수 있다. API 동적 매개변수 및 쿼리 매개변수 외에도 useRoute() 는 현재 경로와 관련된 다음과 같은 계산된 참조도 제공한다. fullPath: 경로, 쿼리 및 해시를 포함하는 현재 경로와 연결된 인코딩된 URL hash: #으로 시작하는 URL의 디코딩된 해시 섹션 matched: 현..

useRequestURL 는 서버 측과 클라이언트 측 모두에서 작동하는 URL 객체를 반환하는 헬퍼 함수다. URL is: {{ url }} Path is: {{ url.pathname }} output URL is: http://localhost:3000/about Path is: /about

내장된 useRequestHeader 컴포저블을 사용하여 페이지, 구성요소, 플러그인 내의 수신 요청 헤더에 액세스할 수 있다. // Get all request headers const headers = useRequestHeaders() // Get only cookie request header const headers = useRequestHeaders(['cookie']) 브라우저에서 useRequestHeader 를 호출하면 빈 객체가 반환된다. 사용 예 useRequestHeaders 는 SSR 중에 초기 요청의 authorization 헤더에 액세스하고 향후 내부 요청을 프록시하는데 사용할 수 있다. 아래 예에서는 $fetch호출에 요청 헤더 authorization 을 추가한다.

페이지, 컴포넌트 및 플러그인 내에서 useRequestEvent 를 이용하여, 들어오는 요청에 액세스하는 데 사용할 수 있다. // Get underlying request event const event = useRequestEvent() // Get the URL const url = event.path 브라우저에서 userRequestEvent 를 호출하면 undefined 가 반환된다.

useNuxtData 는 useAsyncData, useLazyAsyncData, useFetch 및 useLazyFetch 에서 명시적으로 제공된 키를 이용하여 캐시된 값에 접근할 수 있다. 사용법 아래 예는 서버에서 최신 데이터를 가져오는 동안 캐시된 데이터를 placeholder 로 사용하는 방법을 보여준다. // pages/posts/[id].vue // Access to the cached value of useFetch in posts.vue (parent route) const { id } = useRoute().params const { data: posts } = useNuxtData('posts') const { data } = useLazyFetch(`/api/posts/${id}`,..

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-개요 > 데이터 가져오기