제리코드르렁

이 개념을 이해하지 못하면Elasticsearch를 비싼 WHERE 절 엔진으로 쓰게 됩니다.이해하면, Lucene 기반 검색 엔진으로 제대로 쓰게 됩니다.match = 관련도(_score)를 계산하는 검색filter = 조건 만족 여부만 보는 필터1. match정의문서가 검색어와 얼마나 잘 맞는지를 계산하는 쿼리 { "query": { "match": { "content": "Shay Banon" } }}실행 방식text 필드 기준분석기(analyzer)로 토큰화_score 계산결과는 관련도 순 정렬내부 동작Elasticsearch는Apache Lucene의 BM25 알고리즘으로 점수를 계산합니다.즉, “같다 / 다르다”가 아니라 “얼마나 비슷한가”를 계산합니다.언제 쓰는가검색창..

로그인은 됐는데, 왜 또 로그인하라는 걸까? 백엔드 API를 처음 설계했을 때로그인 기능 자체는 비교적 쉽게 구현했습니다. 문제는 그 다음이었습니다.- 새로고침하면 로그인이 풀리고- 서버를 여러 대로 늘리자 인증 오류가 발생 인증이라는게 이렇게까지 어려운 문제였나 . . .?이 고민의 끝에서 JWT (Json Web Token) 를 제대로 이해하지 않으면 안 되겠구나 느꼈습니다. 이 글은 JWT 를- 왜 쓰게 되었는지- 어떤 문제를 해결했는 지- 막연히 쓰다 겪은 시행착오중심으로 정리한 문제 해결 기록입니다. 문제 상황 - 세션 기반 인증의 한계에 부딪히다 처음 사용했던 방식 : 세션 (Session)초기 구조는 전형적인 세션 기반 인증이었습니다. 1. 로그인 성공2. 서버에 세션 저장3. 클라이언트는..

들어가며 — “로그 조회 하나가 왜 이렇게 느릴까?”처음 로그 수집 기능을 만들었을 때, 저는 아주 자연스러운 선택을 했습니다.“데이터니까 DB에 넣으면 되겠지.”API 요청 로그사용자 행동 로그에러 로그모두 RDB(MySQL) 에 차곡차곡 쌓았습니다.초반엔 문제없었습니다. 데이터도 적고, 조회도 단순했으니까요.하지만 시간이 지나면서 이런 일이 생기기 시작했습니다.특정 키워드가 포함된 로그 검색 → 풀 테이블 스캔날짜 + 조건 검색 → 인덱스가 있어도 느림“이건 DB 문제가 아니라, 검색 엔진 문제예요.”이 지점에서 ElasticSearch / OpenSearch 를 도입하게 되었습니다.문제 상황 — DB는 ‘저장’에 강하고, ‘검색’에는 약했다우리가 겪은 실제 이슈로그 데이터: 하루 수백만 건조회 패턴..

https://wikidocs.net/book/7601" 점프 투 스프링 " 을 통해 독학하고 있다 .. 2-03 JPA로 데이터베이스 사용하기 챕터를 하는 중 H2 데이터베이스 설치를 해도 404 에러가 뜨는 상황이 발생하였다 . 문제 상황http://localhost:8080/h2-console브라우저에는 Whitelabel Error Page가 표시되었고,서버 로그에는 다음과 같은 예외가 출력되었다. 설정 문제는 아니었다.다음 설정들은 이미 올바르게 되어 있었다.spring.h2.console.enabled=truespring.h2.console.path=/h2-consolespring.datasource.url=jdbc:h2:~/local또한 Gradle reuntimeClasspath를 확인..

생성conda create -n 환경이름 python=3.10 목록 확인conda env list 삭제conda env remove -n 환경이름 복제conda create --name 환경이름 --clone 기존환경

데이터 수집 & 전처리 (Data Collection & Preprocessing)용어의미예시출처/맥락Context입력으로 주어지는 문맥, 대화의 앞부분, 이전 턴들의 내용“상담사: 혹시 비밀번호를 잊어버리셨나요?” → 이게 다음 발화의 contextDialogue Systems, Conversational AIUtterance한 발화(turn) 단위의 텍스트“고객: 인터넷뱅킹 로그인이 안돼요.”Dialogue Dataset 구성 단위Input text모델에 들어가는 실제 문자열 (Context + 현재 발화 포함)“Q: 혹시 비밀번호를 잊어버리셨나요? A: 인터넷뱅킹 로그인이 안돼요.”Transformer, BERT, ELECTRAToken텍스트를 분해한 최소 의미 단위“비밀번호”, “##오류”, “로..

들어가며딥러닝 모델을 학습시키다 보면, 이런 상황을 한 번쯤 겪게 됩니다." 손실 (Loss)은 줄지 않고 Accuracy는 비슷하네 .. learning rate를 낮춰야 하나? gradient가 터졌나? " 처음에는 그냥 epoch을 늘리면 되겠지하며 돌렸지만학습이 오히려 불안정해지고 손실이 발산하는 경험을 했습니다. 이 문제를 해결하려면, 단순히 하이퍼파라미터를 감으로 조정하는 게 아니라모델 학습의 핵심 지표인 loss, grad_norm, learning_rate, epoch의 관계를 정확히 이해해야 했습니다. Loss - 모델이 얼마나 틀렸는가의 지표Loss (손실함수)는 모델의 예측값과 실제값의 차이를 수치화한 값입니다.즉, 모델이 얼마나 틀렸는가를 나타냅니다.MSE (Mean Squared..

https://github.com/monologg/KoELECTRA/blob/master/README_EN.md KoELECTRA/README_EN.md at master · monologg/KoELECTRAPretrained ELECTRA Model for Korean. Contribute to monologg/KoELECTRA development by creating an account on GitHub.github.com 실무에서 한국어 자연어처리 프로젝트를 진행해보면, 다음과 같은 고민이 자주 나옵니다. - 언어 자원 부족 : 영어처럼 다양한 사전학습된 모델이 한국어에서는 상대적으로 적습니다.- 모델 구조 및 학습 방식의 효율성 한계 : 기존에 많이 쓰이던 BERT 계열 모델은 마스크된 토큰..

🔹 랭체인(LangChain)이란?LangChain은 대형 언어 모델(LLM)을 보다 효율적으로 활용할 수 있도록 돕는 프레임워크입니다. 단순히 프롬프트를 입력받아 응답을 출력하는 방식에서 벗어나, 외부 데이터와 연동하고, 체인을 구성하며, 기억(Memory)과 검색(Retrieval) 기능을 활용할 수 있도록 설계되었습니다.🚀 1. 랭체인이 왜 필요할까?기존의 LLM은 기본적으로 다음과 같은 한계를 가집니다.기존 LLM의 한계LangChain의 해결 방식모델이 사전 학습된 데이터만 알고 있음✅ 외부 데이터 검색을 통해 최신 정보를 반영대화의 문맥을 오래 기억하지 못함✅ Memory 기능을 활용하여 대화의 흐름 유지API 요청마다 동일한 패턴의 작업 수행✅ 체인(Chain) 구성으로 복잡한 작업 자동..

💡 시맨틱 검색 vs 엘라스틱서치 vs RAG 비교✅ 결론:엘라스틱서치(ElasticSearch) → 키워드 기반 검색 (빠른 검색, 로그 분석, 대량 데이터 처리)시맨틱 검색(Semantic Search) → 의미 기반 검색 (벡터 검색으로 문맥 유사도 높은 문서 검색)RAG(Retrieval-Augmented Generation) → 검색 + AI 응답 생성 (검색된 문서를 AI가 요약 및 자연어로 응답)1. 핵심 차이점 비교표시맨틱 검색 (Semantic Search)엘라스틱서치 (ElasticSearch)RAG (Retrieval-Augmented Generation)목적의미적으로 유사한 문서 검색키워드 기반 문서 검색검색된 문서를 바탕으로 AI가 답변 생성검색 방식벡터 검색 (유사도 기반)역색..

LoRA(Low-Rank Adaptation)와 풀 파인튜닝(full fine-tuning)의 CER (Character Error Rate) 성능 차이는 여러 가지 이유로 발생할 수 있습니다. 주된 이유는 모델의 적합성, 학습된 파라미터의 수, 훈련 데이터의 크기 및 모델이 학습할 수 있는 정보의 양에 따라 달라집니다. 아래에 그 이유들을 자세히 설명하겠습니다:1. 모델의 적합성 (Model Fit)풀 파인튜닝: 모델 전체를 훈련시킴으로써 모든 파라미터가 데이터에 적합하도록 최적화됩니다. 이로 인해 모델이 데이터의 특징을 더 잘 반영할 수 있으며, 특히 훈련 데이터와 테스트 데이터에서 성능 향상이 나타날 수 있습니다.LoRA: LoRA는 모델의 특정 레이어만 수정하여 효율적으로 학습을 진행하는 방법입니..

Runpod에 대한 개요Runpod는 고성능 컴퓨팅 리소스를 임대하거나 제공하는 플랫폼임. 주로 GPU를 활용한 작업(딥러닝, AI 모델 훈련, 데이터 처리 등)을 수행하기 위해 설계되었음. 사용자들은 Runpod를 통해 클라우드 기반의 GPU 인프라를 효율적으로 사용하면서도 저렴한 비용으로 고성능을 이용할 수 있음.주요 특징유연한 GPU 사용:GPU가 필요한 작업량만큼 리소스를 동적으로 할당 가능.필요할 때만 사용하고 사용한 만큼만 비용을 지불하는 Pay-as-you-go 모델 제공.사용자 친화적 인터페이스:복잡한 설정 없이 간단한 인터페이스로 GPU 인스턴스를 생성하고 관리할 수 있음.CLI(Command Line Interface)와 API도 지원해서 개발 워크플로에 쉽게 통합 가능.다양한 GPU ..

Pinia는 Vue 3의 상태 관리를 위한 현대적인 아키텍처로 구성됨. 주요 아키텍처 구성 요소는 다음과 같음:스토어(Store): Pinia에서 상태(State)를 정의하고 관리하는 기본 단위. 여러 스토어를 분리하여 기능별 상태를 모듈화할 수 있음.상태(State): 애플리케이션의 전역 데이터로, 여러 컴포넌트에서 공유 및 업데이트가 가능.게터(Getters): 상태를 조회하는 속성으로, Vue의 계산 속성(Computed Property)처럼 동작. 상태를 변형하여 컴포넌트에서 쉽게 사용할 수 있도록 함.액션(Actions): 상태를 수정하는 함수로, 비동기 작업 및 상태 변경을 관리함. Pinia에서 액션은 상태를 직접 변경할 수 있음. 스토어 정의Pinia에서 스토어는 defineStore 함수..

Pinia는 Vue 3에서 사용할 수 있는 최신 상태 관리 라이브러리로, Vuex의 후속작이자 대체품으로 만들어짐. Vuex와 동일하게 Vue 애플리케이션 전반에 걸쳐 상태를 공유하고 관리하기 위한 기능을 제공하지만, 코드가 더 간결하고 사용하기 쉽게 설계된 것이 큰 특징이다.Pinia의 주요 특징간단하고 직관적인 APIVuex보다 코드가 간결하고 직관적이라 개발자가 쉽게 상태를 정의하고 관리할 수 있음.defineStore 함수로 간편하게 Store를 정의하고 사용할 수 있음.TypeScript 지원 강화Pinia는 TypeScript와의 호환성이 높아 타입 안정성을 더욱 쉽게 유지할 수 있음.Composition API와의 호환성Vue 3의 Composition API와 자연스럽게 통합됨. 필요한 S..

프론트엔드 애플리케이션에서 API 호출 시 지연이 발생하면 사용자 경험이 저하될 수 있기 때문에 로딩 중임을 알려주는 스피너(Spinner) UI를 추가하여 사용자에게 명확한 피드백을 제공함.3초 이상의 지연이 있을 경우 스피너 UI를 구현해 다음과 같이 작업을 수행:스피너 컴포넌트 생성Spinner.vue 컴포넌트로 스피너 UI를 만듦. 간단한 CSS 애니메이션으로 스피너를 구성. 2. App 컴포넌트에서 스피너 표시 상태 관리App.vue에 로딩 상태 변수를 추가하여 데이터 요청 중에 스피너를 표시.데이터 로딩이 완료되면 스피너를 숨기고 데이터를 화면에 표시하도록 설정. Todo List {{ todo.text }} 3초 지연 시간 처리만..

App 컴포넌트 변경 App.vue 컴포넌트를 변경하여 백엔드 API와의 통신을 수행하도록 업데이트함. 이때, axios와 같은 라이브러리를 통해 API와 통신하며, 상태 관리 라이브러리를 사용하여 API 응답을 관리함.Axios 설정: 백엔드 API와 통신하기 위해 Axios를 설정.예시: src/services/api.js 파일에 API 요청 설정을 분리.// src/services/api.jsimport axios from 'axios';const apiClient = axios.create({ baseURL: '/api', // 프록시 설정된 기본 경로 headers: { 'Content-Type': 'application/json' }});export default apiClient;..

12.1.1 작성할 화면들애플리케이션에서 작성할 주요 화면을 미리 정의하면 기능 개발에 필요한 컴포넌트를 예측할 수 있음. 예를 들어:메인 화면: 사용자에게 첫 화면을 제공하는 메인 페이지.로그인 화면: 사용자 인증을 위한 로그인 및 회원 가입 페이지.대시보드 화면: 데이터 시각화 및 주요 기능 접근을 위한 대시보드.프로필 관리 화면: 사용자 정보와 설정을 관리하는 화면.이 외에도 검색 화면, 상세 화면 등 주요 기능에 맞는 페이지를 정의해놓고 각 페이지에 필요한 기능과 UI 요소를 준비함. 12.1.2 컴포넌트 계층 구조컴포넌트 계층 구조를 정리하여 컴포넌트를 재사용하기 쉬운 구조로 설계함.App.vue: 최상위 컴포넌트로, 각 페이지를 라우터로 연결하고 전역 상태나 스타일을 관리.페이지 컴포넌트: 각..

웹 개발하면서 CORS 오류를 자주 마주하게 됨. 특히 다른 서버의 API를 호출할 때 CORS(Cross-Origin Resource Sharing) 오류가 많이 발생하는데, 초보자든 숙련자든 한 번쯤 겪게 되는 문제임. CORS의 개념, 문제 발생 이유, 그리고 해결 방법에 대해 알아봄. 원쌤의  vue.js 퀵 스타트  1. CORS란?CORS는 크로스 오리진 리소스 공유를 의미함. 브라우저는 기본적으로 보안을 위해 같은 출처(Same-Origin) 정책을 따름. 이 정책은 한 웹 애플리케이션이 다른 도메인에서 리소스를 가져오는 것을 제한함.예를 들어 https://example.com에서 로드된 웹 페이지가 https://api.otherdomain.com/data에 요청을 보내려 할 때, 브라우..

MockAPIMockAPI는 쉽게 테스트 API를 생성할 수 있는 서비스임. 데이터베이스 스키마를 정의하고, 간단한 REST API를 자동으로 생성해줌. 또한 프론트엔드 개발자들이 필요에 맞춰 데이터를 수정하고 추가할 수 있음.RESTful API 생성: 데이터 모델링을 통해 각종 엔드포인트를 자동 생성데이터 관리: 웹 대시보드를 통해 데이터를 추가하거나 삭제 가능사용 예시:https://mockapi.io/projects/{project-id}/usersPOST /users: 사용자 추가GET /users: 사용자 목록 조회

Axios는 브라우저와 Node.js에서 모두 동작하는 Promise 기반의 HTTP 클라이언트 라이브러리이다. 주로 웹 애플리케이션에서 서버와 데이터를 주고받기 위해 사용되며, Vue.js, React 등과 같은 프론트엔드 프레임워크와 함께 많이 사용됨. Ajax 요청을 더욱 간편하게 처리할 수 있도록 도와주며, 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등)를 지원함.주요 기능Promise 기반으로 비동기 작업 처리브라우저와 Node.js에서 사용 가능요청 및 응답 인터셉터 지원자동 JSON 데이터 변환 (요청 본문 또는 응답 본문)CORS 지원HTTP 요청 취소 기능타임아웃 설정 가능기본 사용법import axios from 'axios';// GET 요청axios.get('h..

제네릭 타입과 any 타입의 가장 큰 차이점은 타입 안전성과 유연성임. 제네릭은 타입을 명확하게 지정하면서도 다양한 타입을 지원할 수 있는 방식임.제네릭 타입을 사용하면, 그 타입에 따라 함수나 클래스가 구체적으로 동작하게 됨.즉, 타입을 유지하면서도 코드의 재사용성을 극대화할 수 있음.제네릭의 특징:타입 안전성 보장: 컴파일 시 타입이 명확하게 지정되므로, 올바른 타입만 처리하도록 코드가 제한됨.유연성: 다양한 타입을 하나의 함수나 클래스에서 처리할 수 있음.타입 추론 가능: 함수나 클래스를 호출할 때, 제네릭이 자동으로 타입을 추론하기 때문에 코드가 더 간결해질 수 있음.2. any 타입:any는 모든 타입을 허용하는 타입임. 즉, 어떤 값이든 다 받을 수 있지만, 타입 안전성을 잃게 됨. any를 ..

Vue에서는 동적 import() 함수를 사용하여 컴포넌트를 지연 로딩할 수 있다.이렇게 하면 컴포넌트가 실제로 필요할 때 로딩이 이루어지기 때문에 애플리케이션의 초기 로딩 속도가 빨라진다. 요약지연 로딩은 컴포넌트나 리소스를 필요한 시점에 로딩하여 애플리케이션의 성능을 최적화하는 기법임.**동적 import()**를 통해 컴포넌트 지연 로딩을 쉽게 적용할 수 있음.Suspense 컴포넌트는 비동기 컴포넌트의 로딩 상태를 관리할 때 유용하며, fallback 슬롯을 통해 로딩 화면을 제공할 수 있음. 1. 동적 import()를 사용한 지연 로딩// router/index.jsimport { createRouter, createWebHistory } from 'vue-router';const routes..

Vue Router에서 라우트 정보를 속성으로 연결하는 방법은 컴포넌트나 를 통해서 컴포넌트 간에 라우트 관련 정보를 주고받는 방식으로 이루어짐. 특히 동적 라우팅이나 라우트 매칭 정보를 컴포넌트에서 사용하고자 할 때, 이러한 방법을 자주 사용함.요약props 옵션을 사용하여 라우트 파라미터나 쿼리를 컴포넌트에 전달할 수 있음.****를 통해 라우트 경로에 동적 값을 전달하여 링크를 생성 가능.$route 객체로 라우트 정보를 직접 접근할 수도 있지만, props로 전달하는 것이 더 구조적으로 깔끔하고 권장됨.1. 라우트 정보를 속성으로 연결하기Vue Router를 사용할 때 라우트 정보를 컴포넌트에 전달하고, 해당 정보를 props를 통해 연결하여 컴포넌트 내부에서 처리할 수 있음.1.1. props..

프론트엔드 프로젝트에서 디렉토리 구조는 코드의 가독성, 유지보수성, 확장성에 중요한 역할을 함. 1. 레이어드 아키텍처 (Layered Architecture)레이어드 아키텍처는 기능별로 나누기보다는 계층에 따라 파일을 분리하는 구조임. 주로 프레젠테이션 계층, 비즈니스 로직 계층, 데이터 계층으로 나뉨.src/├── components/ # UI 컴포넌트 (프레젠테이션 계층)│ ├── Button.vue│ ├── Header.vue│ └── Footer.vue├── services/ # 비즈니스 로직 처리 (비즈니스 계층)│ ├── AuthService.js│ ├── ApiService.js│ └── UserService.js├── store/ ..

Flux 아키텍처는 단방향 데이터 흐름을 기반으로 애플리케이션 상태 관리를 체계적으로 하는 디자인 패턴임. 특히 리액트(React)와 함께 사용되는 상태 관리 패턴으로 유명하며, 복잡한 애플리케이션에서 데이터 흐름을 쉽게 추적하고, 상태 관리를 더욱 예측 가능하게 만드는 데 중점을 둠. Flux의 핵심 개념Flux 아키텍처는 크게 4개의 주요 컴포넌트로 구성됨:Action (액션)Dispatcher (디스패처)Store (스토어)View (뷰)Flux 데이터 흐름1. Action (액션)액션은 애플리케이션에서 일어나는 **사건(이벤트)**을 의미함.사용자 입력, API 호출 등으로 발생하며, 액션 객체는 일반적으로 다음과 같은 형식을 가짐:{ type : 'ADD_TODO'. payload : { ..

명명 라우트 (Named Routes)명명 라우트는 Vue Router에서 라우트를 정의할 때 이름을 부여하는 방식으로, 라우트를 보다 쉽게 참조하거나 네비게이션할 수 있게 해줌. 라우트 이름을 사용하면 URL을 직접 입력하거나 하드코딩하는 대신, 라우트의 이름을 통해 경로를 참조할 수 있음. 명명 라우트 정의라우트를 정의할 때 name 속성을 추가하여 라우트에 이름을 부여할 수 있음.const routes = [ { path: '/user/:id', component: UserComponent, name: 'user' // 라우트 이름 정의 }]명명 라우트로 네비게이션라우트 이름을 이용해 네비게이션하려면 router.push 또는 에서 이름을 참조할 수 있음.// router.p..

중첩 라우트는 Vue Router에서 다중 뷰 또는 중첩된 컴포넌트 구조를 지원하는 기능을 말함.즉, 부모 라우트의 컴포넌트 안에 자식 라우트를 정의하여, 하나의 페이지에서 여러 개의 컴포넌트를 계층적으로 관리할 수 있게 해줌.중첩 라우트 설정 방법중첩 라우트를 구현하기 위해서는 부모 라우트의 component에 라우트 아울렛(router-view)을 설정하고, 자식 라우트들을 children 속성에 정의해야 함. 기본 구조const routes = [ { path: '/parent', component: ParentComponent, children: [ { path: 'child', component: ChildComponent } ]..

동적 라우트는 URL 경로에 변수를 포함하여 여러 가지 유사한 경로를 처리할 수 있는 기능을 말함. Vue Router에서 동적 라우트는 특정 URL 패턴에 매칭되는 경로를 정의하고, 해당 경로에서 동적으로 변하는 부분을 파라미터로 받을 수 있음.동적 라우트 설정 방법동적 라우트는 경로에 콜론(:)을 붙여 정의함.예를 들어, :id라는 동적 파라미터를 사용하면 /user/1, /user/2와 같은 경로가 모두 동일한 라우트에 매칭될 수 있음.const routes = [ { path: '/user/:id', component: UserComponent }]위 코드에서 path에 있는 :id 부분이 동적 파라미터로, /user/1, /user/2 등의 URL에 매칭됨. 여기서 :id는 동적으..

vue-router는 Vue.js 에서 공식적으로 제공하는 클라이언트 측 라우팅 라이브러리임.이를 사용하면 Vue.js 애플리케이션 내에서 여러 페이지 또는 컴포넌트 간에 라우팅을 쉽게 처리할 수 있음 기본사용법라우터설정 -> 라우터 사용 -> 라우트 링크와 라우트 표시라우터설정import { createRouter, createWebHistory } from 'vue-router'import Home from '../views/Home.vue'import About from '../views/About.vue'const routes = [ { path: '/', component: Home }, { path: '/about', component: About }]const router = create..

2. TodoList.vue 3. TodoListItem.vue {{ todoItem.todo }} 삭제 4. InputTodo.vue 추가 주요 변경 사항:defineProps와 defineEmits:props와 emit을 각각 선언하고 관리할 수 있다.기존의 props 및 emits 옵션과는 다르게, 각각 defineProps() 및 defineEmits()를 사용하여 컴팩트하게 선언할 수 있다.ref와 반응형 데이터:반응형 데이터는 모두 ref()로 선언되어 관리된다.todoList, newTodo 등은 상태를 관리하는 반응형 데이터로 사용된다.자동 컴포넌트 등록:에서는 컴포넌트를 import한 후 따로 등록하지 않아도 바로..