서버 컴포넌트에서는 상태를 저장하거나 조회하기 어렵기 때문에 redisClient를 제공함. 1. Server Component import { restApi } from '@/lib/common/plugins/restApi'; import { getRedisValue, setRedisValue } from '@/lib/common/plugins/redisClient'; const SearchPage = async () => { const test = { test1: 'test1', test2: '999999', test3: 'weqweqweqwe', }; // 마지막 500의 경우 500초로 아무것도 안넣을 경우 무한으로 저장됨 await setRedisValue('test998877', test, 5..

1번에서 설명한 zustand사용법은 매우 간단하지만 상태를 생성할때는 반복되는 코드를 줄이기 위해서 x2beeStore를 제공하고 있습니다. x2beeStore 사용방법 1.testStore.ts 생성 가장 먼저 store를 다음과 같이 생성함. import x2beeStore from '@/lib/common/plugins/x2beeStore'; export const testState = { test1: '', test2: '', test3: '', }; const useTestStore = x2beeStore('testStore', testState); export default useTestStore; 2.testStore 상태 저장, 조회 'use client'; import useTestSt..

topic. huggingface transformers 라이브러리를 사용해봅시다. 1. 개요 모든 개발자들이나 모든 딥러닝을 하고자 하는 사용자들이 쉽게 접근할 수 있도록 pipeline() 을 사용하는 방법과 AutoClass 를 사용하여 사전 훈련된 모델 및 전처리기를 로드하고 PyTorch 또는 텐서플로우를 이용하여 모델을 빠르게 학습시키는 방법을 알아봅니다. 2. 본론 1. 설치 설치는 파이썬 패키지를 설치하는 방법과 동일합니다. datasets 은 학습을 위한 데이터를 불러오고 가공하는 용도로 사용합니다. pip install transformers datasets 또 실습을 위해 필요한 패키지도 설치합니다. pip install torch pip install tensorflow 2. pip..

restApi Class의 경우 x2bee-core에 있는 restApiUtil을 사용하여 동작합니다. 기본적인 사용법은 1번에서 설명하였던 restApiUtil과 모두 동일합니다. 단지 함수 이름은 조금 달라서 밑에서 표로 설명 하겠습니다. 1. Server Component 서버 컴포넌트의 경우 기본적으로 get만 있을 경우가 높아서 get만 코드를 설명하였습니다. import { restApi } from '@/lib/common/plugins/restApi'; const SearchPage = async () => { const options = { headers: { Cookie: 'site_no2=1;', }, }; const data = await restApi.get( 'http://loc..

Topic. 🤗(Huggingface) Transformers 라이브러리에 대해 알아봅니다. 1. 개요 transformers 라이브러리는 파이썬에서 사용할 수 있는 딥러닝을 위한 통합 라이브러리입니다. 딥러닝을 할때 동원되는 PyTorch, TensorFlow, JAX 간의 상호 운용성을 지원하여 모델 라이프사이클 단계에서 다른 프레임워크를 사용할 수 있는 유연성을 제공합니다. 코드 세줄만으로도 모델을 훈련시키고 다른 프레임워크에서 추론을 위해 로드할 수 있도록 해주는 아주 고마운 라이브러랍니다. 학습한 모델은 생산 환경에서 배포하기 위해 ONNX 및 TorchScript와 같은 형식으로 내보낼 수 있으며, huggingface 에 업로드 해놓고 필요할 때 모델을 다운로드하여 사용할 수 있습니다. 2...

Next.js는 여러 언어를 지원하기 위해 라우팅 및 콘텐츠 렌더링을 구성할 수 있게 해준다. 여러 locale에 대응하는 사이트를 만들기 위해서는 번역된 콘텐츠(localization)와 internationalized routes가 포함된다. Middleware (/src/middleware.ts) 미들웨어는 클라이언트의 요청에서 locale 을 추출하고, 이에 따라 적절한 리디렉션 또는 리라이트를 수행한다. 만약 클라이언트가 /about에 대한 요청을 하고 locale이 en으로 설정되어 있다면, 미들웨어는 이를 /en/about으로 리디렉션하거나 리라이트할 것이다. 이러한 처리를 통해 사용자는 적절한 언어로 번역된 페이지로 리디렉션되거나 리라이트되어 효과적으로 국제화된 콘텐츠를 제공받을 수 있다...

Dynamic Routes Dynamic Routes는 관행적으로 [slug]라는 이름으로 많은 상품명에 따라 동일한 레이아웃을 가져갈 때 사용됩니다. 반드시 slug라는 이름을 사용해야하는 것은 아니며, 가독성을 위해 아래는 categoryname이라는 이름으로 예시를 작성하였습니다. 다음 폴더 구조에서의 예시 └── category └── [categoryname] └── page.tsx page.tsx import React from "react"; const Page = ({ params }: { params: { categoryname: string } }) => { return ( {params.categoryname} ); }; export default Page; 브라우저에 http://l..

/x2bee-storefront src api common 공통 api display 전시 api event 이벤트 api goods 상품 api member 회원 api order 주문 api search 검색 api app (root) App router의 folder-based routing layout.tsx common layout (home) root 폴더 page.tsx Main Page display 예시) App router의 folder-based routing … 기타 folder-based routing my-cart 예시) MO 환경에서 Footer layout을 다르게 가져갈 라우트 layout.tsx 장바구니 layout (shopping-bag는 한섬 전용 용어라 my-car..

- 용어 정의 1. 클라이언트 앱 : 푸쉬 알림을 받는 역할 2. Notification Server : 알림을 전송하는 서버로, FCM이 해당됨. 3. Provider : Spring Boot서버가 역할을 수행하며, - 앱에서 Sender ID값을 받아 해당값으로 FCM에서 Registration Token을 발급받은후 해당값을 Provider에 전달하여 DB등에 등록하며 해당값은 알림 전송에 사용됨. (Registration Token 등록시 iOS, Android등 OS구분값이 필요함.) - Provider의 경우 요청이 있을 경우 등록된 Registration Token을 이용하여 Notification Server에 요청을 전송하여 앱에 알림을 전송함. 4. Platform-level Trans..

Parallel Routes Parallel Routes는 동시에 또는 조건부로 동일한 레이아웃 내에서 하나 이상의 페이지를 렌더링할 수 있게 해준다. 이는 앱의 매우 동적인 섹션인 대시보드나 소셜 사이트의 피드와 같은 경우에 유용하다. 예를 들어, 대시보드를 고려해보면 병렬 루트를 사용하여 팀 및 분석 페이지를 동시에 렌더링할 수 있다. Parallel Routes는 명명된 슬롯을 사용하여 생성됩니다. 슬롯은 @폴더 관례로 정의된다. 아래 예시는 @team 및 @user 두 개의 슬롯을 정의한다. 슬롯은 공유 부모 레이아웃에 속성(props)으로 전달됩니다. 위의 예에서는 app/layout.js의 컴포넌트가 이제 @team 및 @user 슬롯 속성을 받아들이고, 이를 자식 속성(children pro..

용어 트리(Tree): 계층 구조를 시각화하는 데 사용되는 관례. 예를 들어, 부모 및 자식 컴포넌트로 구성된 컴포넌트 트리, 폴더 구조 등이 있다. 서브트리(Subtree): 새로운 루트(첫 번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부분. 루트(Root): 트리 또는 서브트리의 첫 번째 노드, 즉 루트 레이아웃. 리프(Leaf): 자식이 없는 서브트리의 노드, 즉 URL 경로에서의 마지막 세그먼트. URL 세그먼트: 슬래시로 구분된 URL 경로의 일부입니다. URL 경로: 도메인 뒤에 오는 URL의 일부(세그먼트로 구성) app Router Next.js의 13 버전에서는 React Server Components를 기반으로 한 새로운 App Router가 소개되었다. 이 새로운 라우터는 ..

Topic. 퍼셉트론에 대해 알아봅니다. 1. 개요 퍼셉트론이란 인공신경망의 한 종류입니다. 여러가지 입력값에 따른 중요도를 결정하고 임계치와 활성함수를 통해 옳고 그름을 판단하는 것이 목적입니다. 2. 도식화 위 그림에서 모의고사 점수가 입력값이고 중요도는 가중치 입니다. 커트라인이 임계값이라고 보면 단일 퍼셉트론의 개념이 됩니다.

기존 개발 가이드 3번의 ESLint, Prettier 설정을 했을경우 vscode에서는 문제가 없었지만 IntelliJ에서는 정상동작하지 않는 문제가 발견되었다. 해당 문제 문제를 해결하며 알게 된 방법과 내용을 남기도록 하겠다. 1. 우선 plugin을 추가하였다. "eslint-plugin-prettier": "^5.1.2" 해당 플러그인은 lint 위에 사용할 prettier 기능을 추가해준다고 한다. 2. .eslintrc.json의 설정을 변경해주었다. AS-IS // 기존 방식 { "extends": [ "next/core-web-vitals", "standard", "plugin:tailwindcss/recommended", "prettier" ], "rules": { "no-undef":..

쿠버네티스 CSI(Container Storge Interface) 학습 중에 셰프(Ceph) 라는 스토리지 솔루션을 실습하기 위해 VM으로 구성된 클러스터 노드에 디스크를 추가할 필요가 생겼다. 그 과정을 기록해 본다. 현재 스토리지 디바이스 정보 root 사용자로 로그인을 한다. Terminal lsblk 최소한 20G 이상 디스크가 두개 이상 필요하기 때문에 디스크를 추가해야 했다. VMWare 화면에서 보면 우축 하단에 아래와 같은 그림을 볼 수 있다. 디스크 갯수가 하나이다. 먼저 Settings 화면으로 들어가서 디스크 추가를 위해 선택을 하고 'Add...' 버튼을 클릭한다. 이 후 아래 그림 순서로 한다. 아래는 디스크 종류 선택 자신에게 필요한 만큼 사이즈를 할당한다. 아래의 경우는 20..

Nuxt 공식 홈페이지 에서 보면 Nuxt 는 상용 서비스가 가능한 풀스택 프레임워크라고 소개되어 있다. 통상 API 서버가 Java Spring 으로 구성되고, Nuxt 혹은 Nextjs 는 프런트만 담당하는 경우가 흔하다. 이는 기존에 Vue, React 등이 프런트만 담당하고, Nuxt, Next 와 같은 메타 프레임워크는 나중에 출시되어서 이기도 하고, 이미 잘 구축되어 있는 레거시를 바꿀 필요가 없기에 관심이 덜 가기 때문이기도하다. Nuxt 는 풀스택 프레임워크이기 때문에 JAVA 같은 다른 기술이나, Spring, NestJS 같은 다른 프렘임워크를 이용하지 않고도, 처음 구축하는 어플리케이션이면서 단일 기술로 풀스택을 구축하고 싶은 경우 좋은 선택지가 될 수 있을 것이다. API 서버를 구..

Eclipse 단축키를 계속 써오다가 IntelliJ 단축키로 변경하기로 마음먹어 자주 사용하는 단축키 위주로 정리를 하기로 하였다. ( 나는 윈도우를 사용중이므로 맥은 정리하지 않는다.)익숙해지는데 시간이 좀 필요할 것 같지만 이번 기회에 여러 단축키를 찾아보니 익숙해지면 편한 기능들이 많은것 같다. 기능단축키취소ctrl + z재실행ctrl + shift  + z클래스명 검색ctrl + nsetting 열기ctrl + alt + s특정 문자가 들어간 파일 찾기ctrl + shift + f메소드 들어가기ctrl + b선택 블럭 감싸기(if, for 등)ctrl + alt + t리턴값 자동 완성ctrl + alt + v줄 자동 완성ctrl + shift + enter클래스의 테스트 만들기ctrl + shi..

데이터 통신과 관련한 거의 모든 내용은 "Nuxt-개요 > 데이터 가져오기" 에 담겨있다. 이번 장에서 간단하게 실습한 후 위 내용을 참고하면 이해에 더 도움이 될 것이다. useFetch 컴포저블을 사용하는 것이 적절하지 않은 경우가 있다 (예: CMS 또는 자체적으로 API 통신 레이어를 제공해야 하는 경우). 이 경우 useAsyncData 를 사용하여 호출을 래핑하면서도 컴포저블에서 제공하는 이점을 계속 유지할 수 있다. 앞 장에서 useFetch 컴포저블을 이용한 todos 의 예를 useAsyncData 로 바꿔보자. 데이터를 캐싱하는데 필요한 문자열 키가 필요하다. 키가 주어지지 않으면 파일명과 해당 소스라인으로 자동으로 구성된 키가 할당된다. /pages/todos.vue ID Title ..

데이터 통신과 관련한 거의 모든 내용은 "Nuxt-개요 > 데이터 가져오기" 에 담겨있다. 이번 장에서 간단하게 실습한 후 위 내용을 참고하면 이해에 더 도움이 될 것이다. useFetch 컴포저블은 SSR 을 지원하는 컴포넌트이다. 서버 측, 클라어언트 측 모두에서 사용할 수 있으며, Nuxt 에서 제공하는 내장 컴포저블이다. 이를 통하면 개발자의 개입없이 네트워크 중복 호출을 피할 수 있다. 데이터 호출과 관련해서 Nuxt 에서 제공하는 컴포저블 및 함수에는, useFetch 이외에도 useLazyFetch, useAsyncData, useLazyAsyncData, $fetcch 가 있다. useFetch 컴포저블은 setup 함수에서 데이터를 가져올 때 사용할 수 있는 가장 간단한 방법이다. 간단한..

Topic. LoRA(Low-Rank Adaptation) 에 대해 알아봅니다. 1. LoRA 란? Low-Rank Adaptation 약어로 Huggingface 에서 개발한 Parameter-Efficient Fine-Tuning (PEFT) 방식 중 하나입니다. 파이썬의 peft 라이브러리를 사용하여 쉽게 LoRA 를 사용할 수 있습니다. 2. 개요 기존 full fine-tuning은 pre-trained Model 전체 파라미터에 가중치와 역전파(back propagation)의 기울기를 더하는 방식입니다. LoRA 는 기존의 LLM을 직접 fine-tuning 하는 대신, 새로운 레이어(LoRA adapter 의 A Layer, B Layer)를 삽입해서 훈련하는 방식입니다. LoRA는 훈련 ..

Topic. 미세조정(Fine-tuning) 하기 위한 환경설정 중 시행착오 내용을 공유합니다.* 딥러닝 환경설정 시행착오1. Case1UnboundLocalError: local variable 'sentencepiece_model_pb2' referenced before assignment위 오류가 발생하면 protobuf 패키지를 설치해줍니다.$ conda install protobuf2. Case2NotImplementedError: Loading a dataset cached in a LocalFileSystem is not supported.conda env 설치를 root 계정으로 한 경우 위 오류가 발생합니다.datasets 를 User 영역에서 사용할 수 있도록 설치합니다.$ pip i..