생성형 AI를 활용한 서비스가 많아지면서 단순히 GPT와 대화하는 것을 넘어, 문서를 검색하거나 외부 API를 호출하고 데이터베이스와 연결하는 형태의 AI 서비스가 늘어나고 있다. 이처럼 LLM을 실제 애플리케이션에 연결할 때 자주 사용되는 프레임워크가 바로 LangChain이다. 오늘은 이 LangChain이 어떤 것인지 간단히 알아보도록 하자. LangChain이란?LangChain은 LLM을 활용한 애플리케이션을 쉽게 개발할 수 있도록 도와주는 오픈소스 프레임워크다.OpenAI의 GPT나 Anthropic의 Claude처럼 직접 언어 모델을 제공하는 것은 아니다. 대신 다양한 LLM과 프롬프트, 문서, 데이터베이스, 외부 API 등을 하나의 흐름으로 연결하는 역할을 한다.가장 단순한 LLM 서비스는..

ChatGPT와 같은 LLM은 방대한 데이터를 학습하기 때문에 다양한 질문에 답할 수 있다.하지만 LLM이라고 해서 모든 정보를 알고 있는 것은 아니다. 예를 들어 다음과 같은 질문을 생각해보자.우리 회사의 휴가 규정은 어떻게 돼?지난주에 변경된 서비스 정책을 알려줘.사내 개발 가이드에서 API Naming Rule을 찾아줘.이러한 정보는 LLM이 학습할 때 존재하지 않았거나, 외부에 공개되지 않은 정보일 수 있다.또한 LLM은 답을 정확히 모르는 상황에서도 그럴듯한 내용을 만들어낼 수 있다. 대표적인 문제가 다음 세 가지다.Knowledge Cutoff→ 학습 이후의 최신 정보를 모름Lack of Context→ 회사 내부 문서나 특정 도메인 정보를 모름Hallucination→ 사실이 아닌 내용을 그..

최근 LLM을 활용한 애플리케이션이 빠르게 늘어나면서 기존 웹 서비스에서도 ChatGPT, Claude, Gemini 같은 AI 모델을 사용하는 경우가 많아지고 있다. 예를 들자면 다음과 같은 기능을 생각해볼 수 있다.AI 챗봇문서 기반 질의응답사내 데이터 검색코드 분석문서 요약AI Agent외부 API 자동 호출 Spring Boot 애플리케이션에서도 OpenAI API를 직접 호출하면 이러한 기능을 구현할 수 있다.구조만 보면 간단하다.Spring Application │ │ HTTP Request ▼ OpenAI API │ │ Response ▼ LLM 하지만 실제 서비스를 만들기 시작하면 단순히 HTTP ..

Vue 애플리케이션이 커지면 여러 컴포넌트가 같은 데이터를 함께 사용해야 하는 경우가 많아진다.예를 들어 다음과 같은 데이터가 있다.로그인 사용자 정보장바구니알림 개수다크모드 설정날씨 단위이런 데이터를 부모에서 자식으로 계속 Props로 전달하면 구조가 복잡해질 수 있다.App ↓Layout ↓Header ↓Menu ↓UserInfo중간 컴포넌트가 데이터를 사용하지 않더라도 계속 전달해야 하는 문제가 생긴다.이럴 때 사용하는 것이 Pinia다.Pinia는 Vue 애플리케이션에서 여러 컴포넌트가 함께 사용하는 데이터를 중앙에서 관리하기 위한 전역 상태 관리 라이브러리다.Pinia란?Pinia는 여러 컴포넌트가 같은 상태를 공유할 수 있도록 Store라는 중앙 저장소를 제공한다.구조는 다음과 같다.Compo..

Vue에서 컴포넌트를 만들다 보면 겉모양은 같지만 내부 내용만 바뀌는 UI를 만들고 싶은 경우가 있다.예를 들어 다음과 같은 카드 컴포넌트를 생각해보자.┌──────────────────────┐│ ││ 내용 ││ │└──────────────────────┘카드의 외곽 디자인은 같지만 내부에는 상황에 따라 서로 다른 내용을 넣고 싶을 수 있다.카드 1→ 날씨 정보카드 2→ 사용자 정보카드 3→ 공지사항이럴 때 사용하는 것이 Slot이다.Slot은 쉽게 말하면,자식 컴포넌트가 미리 비워둔 영역에 부모 컴포넌트가 원하는 HTML이나 컴포넌트를 넣을 수 있게 하는 기능이다.Slot의 기본 구조먼저 자식 ..

Props / Emits 는 이전 글 참조 [JavaScript][Vue.js] Props와 Emits 정리 - 부모·자식 컴포넌트 통신Vue는 화면을 여러 개의 컴포넌트로 나누어 구성한다.예를 들어 하나의 페이지가 다음과 같이 구성되어 있다고 해보자.ParentComponent ├─ HeaderComponent ├─ SearchBar ├─ WeatherCard └─ FooterComponentdaniellee09.tistory.com Vue에서는 부모와 자식 컴포넌트 사이의 기본적인 데이터 전달 방식으로 Props와 Emits를 사용한다.하지만 컴포넌트 계층이 깊어지면 단순한 Props 전달만으로는 구조가 복잡해질 수 있다. 예를 들어 다음과 같은 구조가 있다고 해보자.GrandParent ↓Par..

Vue는 화면을 여러 개의 컴포넌트로 나누어 구성한다.예를 들어 하나의 페이지가 다음과 같이 구성되어 있다고 해보자.ParentComponent ├─ HeaderComponent ├─ SearchBar ├─ WeatherCard └─ FooterComponent각 컴포넌트는 서로 독립적으로 동작하지만, 실제 애플리케이션에서는 부모와 자식이 데이터를 주고받아야 한다.Vue에서는 이때 기본적으로 다음 두 가지 방식을 사용한다.Props→ 부모 → 자식Emits→ 자식 → 부모즉,데이터는 부모에서 자식으로 내려가고, 이벤트는 자식에서 부모로 올라간다.이 구조를 보통 Props Down, Events Up이라고 한다.Props란?Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법..

Vue의 컴포넌트는 단순히 화면에 나타나기만 하는 것이 아니라, 생성되고 화면에 붙고, 데이터 변화에 따라 갱신되고, 마지막에는 화면에서 제거되는 과정을 거친다. 이 전체 과정을 Component Lifecycle이라고 한다.쉽게 정리하면 다음과 같다.생성 ↓마운트 ↓업데이트 ↓언마운트그리고 Vue는 각 단계마다 특정 시점에 원하는 코드를 실행할 수 있도록 Lifecycle Hook을 제공한다.대표적으로 다음과 같은 함수들이 있다.onMounted()onUpdated()onUnmounted()즉, Lifecycle은 컴포넌트의 전체 생명주기이고, Lifecycle Hook은 그 생명주기의 특정 시점에 실행되는 함수라고 보면 된다.Component Lifecycle이란?컴포넌트는 화면에 등장하기 전부터 내..

Vue 3에서 컴포넌트의 로직을 작성하는 대표적인 방식이 Composition API다.Composition API는 컴포넌트에서 사용하는 데이터, 함수, 계산된 값, 감시 로직 등을 하나의 기능 단위로 묶어서 작성하는 방식이다.Vue 2에서는 주로 Options API를 사용했지만, Vue 3에서는 Composition API와 현재 값: {{ count }} 2배 값: {{ doubleCount }} 증가 감소 카운터와 관련된 상태와 함수가 하나의 영역에 모여 있다.[카운터 기능]countincrement()decrement()doubleCount이처럼 기능과 관련된 로직을 하나의 묶음으로 구성하는 것이 Composition API의 핵심이다.기존 Options API와 ..

Vue에서 을 작성하다 보면 일반 HTML에서는 볼 수 없었던 속성들이 등장한다.v-htmlv-bindv-ifv-showv-for이처럼 v-로 시작하는 Vue 전용 특수 속성을 Directive(디렉티브)라고 한다.Directive를 사용하면 HTML 태그와 JavaScript 데이터를 연결하여 화면의 내용, 속성, 스타일, 조건, 반복 등을 동적으로 제어할 수 있다. Vue의 Directive에서 특히 중요한 점은 다음과 같은 코드에서"imageUrl"이 단순한 문자열이 아니라 JavaScript 표현식이 실행되는 영역이라는 것이다.즉 Vue의 Template은 단순한 HTML이 아니라 JavaScript 데이터와 연결되어 동적으로 변경되는 화면이라고 볼 수 있다.데이터를 화면에 출력하는 방법Vue에서..