
SystemMessage, HumanMessage, AIMessage 사용
💬 이해하기
SystemMessage : 페르소나 즉 역할
HumanMessage : 사용자가 질의하는 메시지
AIMessage : Ai가 답변하는 메시지
1 | from config import GOOGLE_API_KEY, API_BASE_URL |
결과
Vue 3는 Vue 2에 비해 여러 면에서 개선되었으며, 단순한 업데이트가 아닌 완전히 새롭게 설계된 프레임워크라고 볼 수 있습니다. 주요 차이점은 다음과 같습니다.
1. 성능 향상:
- Composition API: Vue 3의 핵심적인 변화입니다. Vue 2의 Options API와 달리, Composition API는 코드를 논리적인 블록으로 나누어 재사용성과 가독성을 높입니다. 또한, 성능 최적화에도 기여합니다. 특히 큰 컴포넌트에서 성능 향상이 두드러집니다.
- Tree-shaking: 사용하지 않는 코드를 제거하여 번들 크기를 줄이고 로딩 속도를 향상시킵니다. Vue 2에서는 불가능했던 최적화입니다.
- 프록시 기반의 Reactivity System: Vue 2의
Object.defineProperty기반 반응형 시스템보다 성능이 훨씬 향상되었습니다. 더 효율적으로 데이터 변경을 추적하고 업데이트합니다.
2. 개발 경험 개선:
- Composition API: 앞서 언급했듯이, Composition API는 코드를 더욱 모듈화하고 재사용 가능하게 만들어 유지보수성을 높입니다. 특히 큰 컴포넌트에서 그 효과가 큽니다.
- TypeScript 지원 향상: Vue 3는 TypeScript를 1급 시민으로 지원합니다. 타입 안전성을 높이고, 대규모 프로젝트에서 발생할 수 있는 오류를 줄일 수 있습니다.
<script setup>: Composition API를 더욱 간결하게 사용할 수 있도록 도와주는 문법적 설탕입니다.setup()함수 내에서 선언된 변수와 함수를 템플릿에서 직접 사용할 수 있습니다. 더욱 간결하고 직관적인 코드 작성을 가능하게 합니다.- Fragments:
<template>내에서 여러 루트 요소를 허용합니다. Vue 2에서는 하나의 루트 요소만 허용했기 때문에, 불필요한<div>등을 추가해야 했던 불편함을 해소했습니다.
3. 새로운 기능:
- Teleport: 컴포넌트를 DOM의 다른 위치로 렌더링할 수 있습니다. 예를 들어, 모달이나 툴팁을 렌더링할 때 유용합니다.
- Suspense: 비동기 컴포넌트 로딩 시 로딩 중 표시기를 표시할 수 있습니다. 사용자 경험을 향상시키는 데 도움이 됩니다.
- Improved Reactivity: 더욱 정교하고 효율적인 반응형 시스템을 제공합니다. 데이터 변경을 더욱 정확하게 추적하고 업데이트합니다.
4. 호환성:
- Vue 3는 Vue 2와 완전히 호환되지 않습니다. 마이그레이션을 위해서는 코드 변경이 필요합니다. 하지만 Vue 3는 Vue 2와 비교하여 더욱 향상된 성능과 개발 경험을 제공합니다. 장기적인 관점에서 Vue 3로의 마이그레이션을 고려하는 것이 좋습니다.
요약:
Vue 3는 Vue 2에 비해 성능이 향상되었고, 개발 경험이 개선되었으며, 새로운 기능들이 추가되었습니다. 하지만 마이그레이션에는 노력이 필요합니다. 새로운 프로젝트를 시작한다면 Vue 3를 선택하는 것이 좋으며, 기존 Vue 2 프로젝트는 성능 개선이나 새로운 기능이 필요할 때 Vue 3로 마이그레이션을 고려해 볼 수 있습니다. 하지만 Vue 2는 여전히 잘 유지보수되고 있으며, 당장 업그레이드가 필요하지 않을 수도 있습니다. 프로젝트의 규모와 요구사항에 따라 신중하게 결정해야 합니다.