Vue.js + AI 마법 4강: 어제 한 말 기억하니? 마법의 일기장 (Chat History)

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 보고 듣는 ‘마법의 소리(Speech AI)’를 배웠죠? 그런데 큰일이에요! 우리 AI 비서가 자고 일어나면 우리가 어제 무슨 이야기를 했는지 싹 잊어버린대요. 오늘은 AI에게 소중한 추억을 간직할 수 있는 마법의 일기장, Chat History(대화 기록) 마법을 소개합니다!

[IMAGE_1]

1. Chat History: 잊지 않는 마법의 수첩

대화 기록은 우리가 AI와 나눈 모든 이야기를 차곡차곡 적어두는 ‘기억 장소’예요.

  • 대화의 연결: “아까 내가 말했던 거 기억해?”라고 물어봤을 때, AI가 수첩을 슥 넘겨보고 대답할 수 있게 해준답니다.
  • 연결 통로: Vue.js 안의 ‘Array(배열)’라는 바구니에 내 질문과 AI의 대답을 한 세트씩 담아서 보관해요.

2. LocalStorage: 비밀 금고에 저장하기

인터넷 창을 닫아도 기억이 사라지지 않게 하려면 브라우저의 LocalStorage(로컬 스토리지)라는 비밀 금고에 수첩을 넣어둬야 해요.

  • 새로고침해도 OK: 다시 성에 들어왔을 때 금고에서 수첩을 꺼내면, 예전 대화들이 마법처럼 화면에 다시 나타나요!

3. 실전 마법: 대화 기억하기

<script setup>
import { ref, onMounted } from 'vue';

// 1. 대화 바구니(Array)
const messages = ref([]);

// 2. 금고에서 기억 불러오기
onMounted(() => {
  const saved = localStorage.getItem('chat-memory');
  if (saved) messages.value = JSON.parse(saved);
});

// 3. 새 대화 기억하고 금고에 넣기
function saveChat(userMsg, aiMsg) {
  messages.value.push({ user: userMsg, ai: aiMsg });
  localStorage.setItem('chat-memory', JSON.stringify(messages.value));
}
</script>

[IMAGE_2]

4. 스마트 라이프를 위한 가족 코딩 팁

아이들에게 ‘성장 일기’나 ‘추억 앨범’에 비유해 보세요. 어제를 기억하기 때문에 오늘 우리가 더 친해질 수 있는 것처럼, 코딩도 사용자의 기록을 소중히 여기는 것이 최고의 매너라고 알려주세요. 아이와 함께 만든 ‘에듀패드’에 “우리가 어제 배운 단어는 이거였어!”라고 AI가 먼저 알려주는 기능을 추가해 보세요. 아이는 자신의 노력이 디지털 세상 어딘가에 소중히 간직되고 있다는 따뜻한 신뢰를 배우게 됩니다.

마치며: 추억을 간직하는 다정한 마법사

이제 여러분의 성은 단순히 대화하는 곳을 넘어, 함께한 시간을 소중히 기억하는 다정한 공간이 되었습니다! 다음 시간에는 **’나만의 개성 있는 AI(Customizing AI Role)’**라는 주제로, AI 비서에게 “친절한 요정 선생님”이나 “개구쟁이 탐정” 같은 성격을 선물하는 비법을 배워볼게요! 내일 아침 9시에 만나요!