눈으로 개발하는 블로그

[19] Frontend 개발 - Capacitor, Geolocation, Google Map

앱에 위치 기반 기능을 추가해보겠습니다. @capacitor/geolocation 설치 (https://capacitorjs.com/docs/apis/geolocation) 위치 기반 기능 사용1. geolocation 설치 (터미널에서 실행합니다.)npm install @capacitor/geolocation --save 2. src\views\LunchMenu에 LunchMenuMapView.vue 파일을 생성합니다. GeoLocation 나의 위치: 위도: {{ loc.lat }} 경도: {{ loc.lng }} 현 위치 3. src\router\index.js 파일을 수정합니다. :import LunchMenuMapVie..

[18] Frontend 개발 - Capacitor, Vue + Android

Capacitor를 사용하여 쉽게 앱을 개발해 보도록 하겠습니다. Capacitor (https://capacitorjs.com) Web App에 Capacitor 추가 (https://capacitorjs.com/docs/getting-started#add-capacitor-to-your-web-app) 1. capacitor 설치 (터미널에서 실행합니다.)npm install @capacitor/core @capacitor/cli --save 2. Capacitor 초기화 (터미널에서 실행합니다.)npx cap init App Name : 앱 이름 (변경하지 않으려면 그냥 엔터 키를 누릅니다. 변경하려면 입력합니다.) Package ID : 앱의 패키지 아이디 (변경하지 않으려면 그냥 엔터 키를 누..

Android 설치 - Hello Android 실행

Android Studio 다운로드1. Android Developer (https://developer.android.com/?hl=ko) 사이트로 이동합니다. 2. [Android 스튜디오 다운로드]를 클릭합니다. 3. 약관를 아래로 스크롤한 후 동의를 체크하고 하고 [다운로드]를 누릅니다.현재는 Android Studio Quail 2 입니다. 4. Android Studio가 다운로드 됩니다. Android Studio 설치1. [Next] 버튼을 누릅니다. 2. 설치할 컴퍼넌트를 선택하고 [Next] 버튼을 누릅니다. 3. 설치 경로를 설정하고 [Next] 버튼을 누릅니다. 4. 설치 이름을 설정하고 [Next] 버튼을 누릅니다. 5. 설치가 진행됩니다. 6. 설치가 완료되면 [Finish] ..

[17] Frontend 개발 - Store State 유지, Cookies, localStorage, Pinia Plugin Persistedstate

페이지 새로고침 문제점웹 브라우저에서 새로고침을 하면 Vue가 초기화 되면서 Store가 초기화 됩니다. 페이지 새로고침 문제점 해결Store에 있는 State를 유지하기 위해서는 state의 정보를 저장하고 초기화되면 다시 읽어 들어 유지하게 하면 됩니다. State의 정보를 저장하고 유지하기 위해 다음과 같이 세 가지 방법이 있습니다.Cookie(쿠키)를 사용하는 방법Storage(스토리지)를 사용하는 방법Pinia Plugin Persistedstate를 사용하는 방법 Store State 유지 - Cookie(쿠키) 사용 웹 브라우저에서 F12키를 누르면 개발자 툴이 나타납니다.여기서 Application를 클릭하고 Cookies를 클릭합니다. Cookie 구성Name : 쿠키 이름Value : ..

[17] Frontend 개발 - Login 관리, 모듈화

모듈화Axios Instance (엑시오스 인터셉터) (https://axios-http.com/kr/docs/instance) 1. src\apis\axiosInterceptor.js 파일을 수정합니다.import axios from 'axios';import { useLoginStore } from '@/stores/useLoginStore';import { useRouter } from 'vue-router';export const createAxiosInstance = (baseURL, timeout) => { const loginStore = useLoginStore(); const router = useRouter(); const axiosInstance = axios...

[16] Frontend 개발 - Login 관리, Axios Interceptor

Axios Interceptor (엑시오스 인터셉터)를 사용하여 Access Token 재발급(갱신)Axios Interceptor (엑시오스 인터셉터) (https://axios-http.com/kr/docs/interceptors)Axios 요청 전이나 Axios 응답 후 처리는 Axios Interceptor (엑시오스 인터셉터)을 사용하여 가로챌 수 있습니다. Axios Interceptor (엑시오스 인터셉터) 기본 구조입니다.// 요청 인터셉터axios.interceptors.request.use(function (config) { // Do something before request is sent // 요청이 전달되기 전에 처리 return config; }, functi..

[15] Frontend 개발 - Login 관리, Access Token, Refresh Token

Access Token, Refresh Token (액세스 토큰, 리프레시 토큰)1. src\stores\useLoginStore.js 파일을 수정합니다.import { defineStore } from 'pinia';import { ref, computed } from 'vue';import axios from 'axios';export const useLoginStore = defineStore('login', () => { const access_token = ref(""); const refresh_token = ref(""); // 로그인 여부를 가져옵니다. const isLogin = computed(() => { return refresh_token.valu..

[14] Backend 개발 - 사용자 API 개발, 라우트 별 인증 처리, 인가 처리

라우트 별로 인증 처리1. index.js 파일 수정const express = require('express');const cookieParser = require('cookie-parser');const app = express();const port = 9000;app.get('/', (req, res) => { res.send('Hello World!');});:// Cookie 설정app.use(cookieParser());// 인증 설정//app.use('/api/v1/lunchmenus', require('./src/api/v1/authMiddleware'));// 점심 메뉴 연결app.use('/api/v1/lunchmenus', require('./src/api/v1/lunchmen..

[13] Backend 개발 - 사용자 API 개발, Access Token, Refresh Token

기존 ID Token 생성 부분을 함수로 분리 ID Token 생성1. src\api\v1\member.js 파일 수정 – ID Token 생성 함수로 분리합니다.// ID Token을 생성합니다.async function generateIDToken(memberID, memberName, memberRoles) { const result = { result: 'success', message: '', token: '' }; // 토큰 발급 시간 const issuedAt = new Date().toLocaleString(); const iat = Date.parse(issuedAt) / 1000; // ID Token - JWT ..

[12] Frontend 개발 - 상태 관리, Login 관리, ID Token

로그인뷰 생성하기1. src에 Account 디렉터리를 생성하고 LoginView.vue 파일을 생성합니다. 아이디 패스워드 로그인 취소 {{ errorMessage }} 2. src\router\index.js에서 로그인을 추가합니다.import LoginView from '@/views/Account/LoginView.vue':const routes = [ ..

[11] Frontend 개발 - 상태 관리, Store – Pinia

Store를 사용해야 하는 이유Store는 애플리케이션 전반에서 접근할 수 있는 데이터를 포함해야 합니다.여러 컴포넌트에서 사용되는 데이터(사용자 정보, 네비게이션 정보, 전역 정보)와 컴포넌트에서 보존되어야 하는 데이터(Form 데이터)가 포함됩니다. Store는 state와 비즈니스 로직을 보유하는 독립체(entity)로 컴포넌트 트리에 묶여 있지 않습니다.→ 전역 state로 모든 컴포넌트가 읽고 쓸 수 있습니다. Computed (계산된 속성) 사용반응형 데이터를 계산하는 코드가 내에 있거나 반복되면 이 복잡해 보일 수 있습니다.그래서 계산하는 코드를 분리하고 반응되도록 computered() 함수로 처리합니다. 리스트가 {{ lunchMenuList.value.length > 0 ?..

[10] Frontend 개발 - 상태 관리

상태 관리여러 하위 컴포넌트들이 동일한 데이터를 사용해야 할 경우 → 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해야 할 때 props를 사용합니다. 깊은 계층 구조를 가진 컴포넌트 트리에서 비효율적입니다. → Prop Drillin Prop Drilling (프랍(프롭) 드릴링)자식 컴포넌트는 부모 컴포넌트로부터 데이터를 전달 받기 위해 FooterComp.vue Footer에는 사용하지 않지만 자식 컴포넌트인 DeepChild가 사용하기 때문에 prop를 설정해야 합니다. DeepChildComp.vue {{ userID }}, Have a good time Provide(제공) / Inject(주입) 사용 ← Prop Drilling 해결 상위 컴포넌트는 하위 모든 컴포넌트에 대한..

[9] Backend 개발 - 사용자 API 개발, 인증 처리, ID Token

ID Token사용자가 로그인하면 서버에서 사용자를 확인하여 사용자 정보로 토큰을 생성한 후 응답 데이터로 클라이언트에게 토큰을 전달하는 방식입니다.클라이언트는 요청을 보낼 때 Authorization HTTP Header에 토큰을 포함하여 전달하면 서버는 전달 받은 토큰을 검증하여 인증된 사용자인지 확인합니다. ID 토큰은 JSON Web Token (JWT, JSON 웹 토큰)입니다.ID 토큰에는 인증된 사용자에 대한 정보(claim(클레임))가 포함되어 있습니다. 장점클라이언트에서 토큰을 관리하기 때문에 서버에 부하가 낮아집니다.접근 권한을 적용할 수 있습니다.단점토큰이 탈취 당할 수 있습니다. → 보안성이 취약함 (HTTPS로 보안할 수 있습니다. 단, 클라이언트 해킹은 차단할 수 없습니다.)모든..

[8] Backend 개발 - 사용자 API 개발, 인증 처리, Session + HTTP Cookie

인증 처리를 위한 사용자 API 개발사용자 인증 처리를 위한 테이블을 생성합니다. Table 생성테이블 생성 쿼리 실행use lunchdb;-- tb_member table이 있으면 삭제DROP TABLE IF EXISTS tb_member;-- tb_member table 생성CREATE TABLE tb_member ( seq int NOT NULL AUTO_INCREMENT COMMENT '사용자 일련번호', mbr_id varchar(50) NOT NULL COMMENT '사용자 ID', mbr_pw varchar(125) NOT NULL COMMENT '사용자 비밀번호', mbr_name varchar(50) NOT NULL COMMENT '사용자 이름', mbr_rol..

[7] Frontend 개발 - 읽기 뷰 (ReadView), 수정, 삭제 생성

읽기 뷰 (ReadView) 생성1. src\views\LunchMenu에서 LunchMenuReadView.vue 파일을 생성합니다. 점심 메뉴 보기 2. src\router\index.js에서 LunchMenuReadView.vue를 import하고 children(칠드런)에 추가합니다.:import LunchMenuReadView from '@/views/LunchMenu/LunchMenuReadView.vue'const routes = [ : { path: '/lunchmenu', component: LunchMenuView, children : [ : { path: ':seq', name: 'lunchmenuread', ..

[6] Frontend 개발 - 등록 뷰 (AddView) 생성

등록 뷰 (AddView) 생성1. src\views\LunchMenu에서 LunchMenuAddView.vue 파일을 생성합니다. 점심 메뉴 등록 2. src\router\index.js에서 LunchMenuAddView.vue를 import하고 routes에 route를 추가합니다.:import LunchMenuAddView from '@/views/LunchMenu/LunchMenuAddView.vue'const routes = [ : { path: '/lunchmenu/', name: 'lunchmenulist', component: LunchMenuListView }, { path: '/lunchmenu/add', name: 'lunchmenuadd', ..

[5] Backend 개발 - API Server 개발, Node.JS + Search

검색(Search)데이터베이스에 있는 테이블에서 검색 조건에 맞는 데이터만 검색(select) 하기 위해서는 SELECT 할 때 WHERE 절을 사용하면 됩니다. 공통적으로 많이 사용하는 검색 조건은검색 타입(검색할 테이블의 컬럼)검색 조건(검색하고자 하는 키워드가 테이블의 컬럼 값과 일치하는지 또는 포함되는지에 대한 조건)검색 키워드(검색할 테이블의 컬럼에서 검색할 키워드) WHERE 절을 MyBatis Mapper XML에서 조건에 따라 처리되게 만들기 위해서는 를 사용하면 됩니다. 검색 타입(searchType), 검색 조건(searchCondition), 검색 키워드(searchKeyword) SELECT TLM.* FROM tb_lunch_menu TLM ..

[4] Backend 개발 - API Server 개발, Node.JS + Paging

페이징(Paging), 페이지(Page)데이터베이스에서 페이징(Paging) 없이 데이터를 가져오면 전체 데이터를 반환하면 서버 부하(데이터베이스 부하, 네트워크 트래픽 부하)가 발생합니다. 그래서 데이터를 가져오기 전에 한 번에 가져올 데이터의 크기를 정해서 가져오게 해야 합니다.이렇게 일정한 크기로 데이터를 가져오는 것을 페이징(Paging)이라고 하고 일정한 크기를 가진 데이터를 페이지(Page)라고 합니다. Query String(쿼리 스트링)으로 URL 주소 뒤에 붙여서 사용합니다.페이지 크기(countperpage) : 가져올 ROW 수페이지 번호(pageno) : 가져올 페이지 번호 http://127.0.0.1:9000/api/v1/lunchmenus?countperpage=10&pag..

[3] Backend 개발 - API Server 개발, Node.JS + MyBatis3

Node.JS에서 MyBatis3 Mapper XML 파일을 이용하기 1. Mybatis Mapper 설치하기 (터미널에서 실행합니다.)npm install mybatis-mapper --save 2. src\db에 mappers\mariadb\lunchmenu 디렉터리를 생성하고 lunchmenu-sql.xml 파일을 생성합니다. XML은 MyBatis3 구문과 동일합니다. 의 namespace(네임스페이스) 속성은 Mapper XML 파일들을 서로 구분하기 위해서 사용됩니다. 그래서 하나의 Mapper XML 파일만 가리켜야 하기 때문에 중복되지 않아야 합니다.여기서는 namespace(네임스페이스)를 프로젝트 명과 XML 파일이 있는 경로를 조합하여 사용하겠습니다. 프로젝트 명 : apiserv..

개발 환경을 구성하기 위해 프로그램 설치Project Scaffolding(프로젝트 스캐폴딩)프로젝트를 시작하기 위한 구조와 설정 등을 자동으로 처리해주는 툴입니다. → 애플리케이션의 구조 생성개발자가 수동으로 설치하고 설정해야 하는 것들을 프로그램이 대신 처리해줌으로써 개발을 빠르게 시작할 수 있도록 도와줍니다.Vue CLI(Command line interface)Vue.js 개발을 위한 표준 도구 (빠른 Vue.js 애플리케이션 개발을 위한 시스템을 제공) (https://cli.vuejs.org/) IDE(Integrated Development Environment, 통합 개발 환경)VS Code + Vue-Official(extension)문법 강조 표시, TypeScript 지원, 템플릿 표..

APIServer 프로젝트 생성1. toyprojects > apiserver 디렉터리 생성 (터미널에서 실행합니다.)mkdir toyprojects; cd toyprojects; mkdir apiserver; cd apiserver; code . 2. 패키지 초기화 (터미널에서 실행합니다.)npm init -y 3. Express.js 설치하기 (터미널에서 실행합니다.)npm install express --save package.json에서 dependencies 확인 4. Entry Point 파일 생성하기 (index.js 파일 생성, express를 가져와 서버를 생성)const express = require('express');const app = express();const port = 9..

Reranker (리랭커)벡터 스토어에서 검색된 문서(청크)가 사용자의 의도를 정확히 반영하지 못하거나 대화의 맥락을 놓칠 수 있기 때문에 사용자 질문과 관련이 높은 문서(청크)로 순위를 재정렬합니다. (프롬프트가 길어지면 중간에 위치한 중요한 정보를 LLM이 제대로 반영하지 못하는 ‘Lost in the Middle’ 현상이 발생할 위험이 있습니다. - https://arxiv.org/pdf/2307.03172) Retriever (검색) : 벡터 스토어에서 질문과 관련성(유사도 계산) 있는 문서(청크)들을 빠르게 추출합니다.Reranker (순위 재정렬) : 문서(청크)들을 분석(의미적 분석)하여 순위를 조정합니다.Compression (압축) : 전체 문서(청크)를 LLM에 전달하면 비용이 많이 ..

질문에 대한 데이터를 검색하면 질문과 관련된 많은 문서(청크)가 검색될 수 있습니다.유료 LLM를 사용할 경우 검색된 많은 문서(청크)를 그대로 사용하면 많은 비용이 발생하게 됩니다.그래서 검색된 많은 문서(청크)를 그대로 사용하지 않고 질문의 맥락에 맞게 검색된 문서(청크)를 압축하여 사용하면 비용을 줄 일 수 있습니다. Advanced RAG – Post-Retrieval ContextualCompressionRetriever (문맥 압축 검색기)기본 리트리버를 래핑하고 결과를 압축하는 리트리버입니다. LLMChainExtractor (LLM 체인 추출기)LLM 체인을 사용하여 문서(청크)에서 관련 부분을 추출합니다. project3에 QnA3.ipynb 파일에 검색 결과 압축 코드를 추가합니다.[C..

이번에는 한국어 LLM인 exaone3.5:7.8b를 사용하여 답변을 생성해보고 MultiQueryRetriever에 적용해보겠습니다. Exaone 3.5 (https://www.lgresearch.ai/exaone)현배 버전은 4.5입니다. Ollama에서 Exaone 3.5 다운로드 하기 1. Ollama Models Search (https://ollama.com/search?q=exaone) 에서 Exaone 3.5를 검색합니다. Exaone 3.5(https://ollama.com/library/exaone3.5)를 클릭하면 다양한 모델이 있습니다. PC에서 사용할거라 용량이 작은 모델인 Exaone 3.5를 사용할 겁니다. exaone3.5:7.8b를 클릭하면 모델에 대한 정보를 확인할 수 ..

이전까지 개발한 RAG를 Navie RAG라고 합니다. 지금부터 좀더 업그레이드된 RAG인 Advanced RAG를 개발해보겠습니다. Advanced RAG(Retrieval-Augmented Generation)Naive RAG의 검색 기능을 개선하고 텍스트 처리 기술을 도입하여 RAG 성능을 향상시킨 모델입니다.즉, Retrieve(검색) 품질을 개선하는 것입니다. 검색 품질을 개선하기 위해서 검색 전(Pre-Retrieval)과 검색 후(Post-Retrieval)를 최적화하는 것을 의미합니다. Pre-Retrieval(사전 검색) 최적화검색되는 문서(청크)의 질을 높이기 위해 Indexing(인덱싱)를 최적화하고 검색 결과의 질을 높이기 위해 검색 질의(Query)를 재구성(Query Rewri..

Prompt(프롬프트)란사용자가 대규모(초거대) 언어 모델(LLM)에게 질문이나 작업을 요청할때 사용되는 입력문입니다. Prompt Template(프롬프트 템플릿)이란PromptTemplate를 사용하여 프롬프트(입력문)안에 변수를 포함하여 생성한 후 동적으로 입력받은 변수 값으로 채워 넣어 프롬프트를 생성합니다.from langchain_core.prompts import PromptTemplate# 'role' 변수를 사용하는 프롬프트 템플릿을 정의template = "너는 {role} 전문가로 {role} 질문에 친절하게 답변해 주십시오."# PromptTemplate 인스턴스를 생성promptTemplate = PromptTemplate.from_template(template)# 템플릿에 변..

LangChain Message에 대해 알아보겠습니다. 대화 메시지를 Role(역활)로 구분해보겠습니다. 첫번쩨 메시지는 Developer(개발자)가 LLM에 역화과 작업을 설명 → Task Description (작업 설명)두번째 메시지는 User(사용자)가 LLM에게 질문세번째 메시지는 Assistant(어시스턴트)가 User(사용자)의 질문에 대한 대답 대화 시작전에 Task Description (작업 설명)이 설명되어 있으면 LLM으로부터 좀더 정확한 결과를 받을 수 있습니다. 대화 메시지를 LangChain Message로 구분해보겠습니다. SystemMessage : 시스템 메시지로 AI의 행동(역할이나 정보를 통한 설정)을 촉진하기 위한 메시지입니다. HumanMessage : 인간 메시..

Hugging Face 모델을 다운로드하여 Ollama에서 사용하기한국어가 포함되어 있는 llama-3.2-Korean Models를 사용해보겠습니다.(https://huggingface.co/Bllossom/llama-3.2-Korean-Bllossom-3B-gguf-Q4_K_M) 1. llama-3.2-Korean Models을 다운로드합니다.(https://huggingface.co/Bllossom/llama-3.2-Korean-Bllossom-3B-gguf-Q4_K_M/tree/main) 2. llama-3.2-Korean-Bllossom-3B-gguf-Q4_K_M.gguf 파일을 다운로드합니다.GGUF : GPT(generative pre-trained transformer) Unified Fo..

LangChain에서 Ollama 연동하기LangChain에서 Ollama와 연동하는 방법을 제공하고 있습니다.(https://docs.langchain.com/oss/python/integrations/providers/ollama) Ollama를 사용하면 Llama3.1과 같은 오픈 소스 대규모 언어 모델을 로컬에서 실행할 수 있습니다.Ollama는 모델 가중치, 구성 그리고 데이터를 Modelfile로 정의된 단일 패키지로 묶습니다. GPU 사용량을 포함한 설정 및 구성 세부 정보를 최적화합니다. 지원되는 모델 및 모델 변형의 전체 목록은 Ollama 모델 라이브러리를 참조하세요.OllamaLLM은 LangChain에서 Ollama 모델과 상호 작용하는 방법을 설명합니다.(https://docs.l..

Open Source (Local) LLM 장점과 단점 장점보안성 : 유료 LLM(대규모(초거대) 언어 모델)를 사용하지 않기 때문에 데이터가 유출될 위험이 없습니다.접근성 : 내부 망에 서버가 있어 외부 망과 연결하지 않아도 되고 인터넷 연결 없이도 사용이 가능합니다.빠른 응답 : 내부 서버에서 실행되므로 처리 응답이 빠릅니다. (대기 시간이 짧아집니다.)비용 절감 : 유료 LLM 사용료가 없습니다.다양한 모델 사용 : 서버나 서비스에 맞게 다양한 모델을 사용할 수 있습니다. 단점정확성의 한계 : 모델이 학습된 날짜가 오래될 경우 오래된 정보가 제공되거나 정보가 없을 수도 있습니다. (파인 튜닝 또는 관련 정보 별도 구축 후 연동)높은 시스템 비용 : 모델에 따라 고성능 GPU와 대용량 메모리가 있는..