알토르 3주차 - Browser Storage

Browser Storage

“브라우저 저장 방식”이라고 하면, 웹 브라우저에서 데이터를 사용자 측(클라이언트)에서 저장하는 방법

1️⃣ 쿠키(Cookie)

• 용도: 로그인 상태 유지, 세션 관리, 사용자 설정 저장 등
• 저장 위치: 브라우저 내, 서버와 주고받음
• 용량: 약 4KB 정도
• 특징:
  - HTTP 요청 시 서버로 자동 전송 → 서버에서 읽고 활용 가능
• 만료일 설정 가능

(JavaScript):

// 쿠키 생성
document.cookie = "username=JuHyeok; path=/; max-age=3600"; // 1시간
// 쿠키 읽기
console.log(document.cookie);

2️⃣ 로컬 스토리지(Local Storage)

• 용도: 브라우저에 장기 데이터 저장, 앱 설정, 캐시
• 저장 위치: 브라우저 안, 클라이언트 장치만 접근 가능
• 용량: 약 5~10MB
• 특징:
  - 서버에 자동 전송되지 않음 → 클라이언트 전용
  - 사용자가 직접 파일을 건드리지 않는 이상, 브라우저를 통해서만 접근 가능
  - 로컬 스토리지는 HTTP 요청 시 서버로 전송되지 않음
  - 서버는 사용자가 브라우저를 통해 데이터를 보내기 전까지 확인 불가
  - 데이터 만료 없음 → 삭제 전까지 유지

// 저장
localStorage.setItem("toeicScore", "935");
// 불러오기
const score = localStorage.getItem("toeicScore");
console.log(score); // 935
// 삭제
localStorage.removeItem("toeicScore");
// 전체 삭제
localStorage.clear();

3️⃣ 세션 스토리지(Session Storage)

• 용도: 브라우저 탭 단위 데이터 저장, 일시적 상태 유지
• 저장 위치: 브라우저
• 용량: 로컬 스토리지와 비슷
• 특징:
  - 브라우저 탭을 닫으면 데이터 사라짐
  - 서버에 전송되지 않음

// 저장
sessionStorage.setItem("threadId", "12345");
// 불러오기
const thread = sessionStorage.getItem("threadId");
console.log(thread); // 12345
// 삭제
sessionStorage.removeItem("threadId");
// 전체 삭제
sessionStorage.clear();

4️⃣ IndexedDB

• 용도: 대용량 구조화 데이터, 오프라인 앱 저장
• 저장 위치: 브라우저
• 용량: 수 MB ~ GB 가능
• 특징:
  - 비동기 API
  - 객체 저장 가능 (문서, JSON 등)
  - 트랜잭션, 인덱스 지원

const request = indexedDB.open("MyDB", 1);
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore("scores", { keyPath: "id" });
};
request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction("scores", "readwrite");
  const store = tx.objectStore("scores");
  store.put({ id: 1, score: 935 });
};

1️⃣ 개념: thread_id란?

Thread = 대화 흐름 단위

GPT 모델에서 같은 대화 맥락(Context)을 유지하기 위해 사용

thread_id를 이용하면, 이전 대화 내용을 기억한 채로 답변 가능

2️⃣ 흐름 설명
① 최초 메시지

사용자가 처음 메시지를 보냄 → thread_id가 없음

서버(API)가 새로운 thread_id 생성 요청을 GPT에 보냄

GPT API가 thread_id를 생성해서 반환

서버가 사용자에게 생성된 thread_id와 함께 답변 전달

사용자는 thread_id를 로컬에 저장 (예: 로컬 스토리지, 세션 등)

예시 JSON 반환

{
"thread_id": "abc123xyz",
"reply": "안녕하세요! 질문을 알려주세요."
}

② 이후 메시지

사용자가 메시지를 보낼 때 저장해둔 thread_id 포함

POST /sendMessage
{
"thread_id": "abc123xyz",
"message": "제 TOEIC 점수는 얼마인가요?"
}

서버가 GPT API에 thread_id와 메시지 같이 전달

GPT 모델은 같은 스레드 컨텍스트를 기반으로 답변 생성

서버가 답변을 사용자에게 전달

필요 시 thread_id는 그대로 유지 → 다음 메시지에도 계속 사용

③ 장점

대화 맥락 유지 가능 → 이전 질문/답변 기억

사용자가 여러 메시지를 보내도 대화 연속성 유지

클라이언트는 thread_id만 저장하면 됨 → 서버 상태 관리 불필요

④ 예시 구조 (Flask)
@app.route("/sendMessage", methods=["POST"])
def send_message():
data = request.json
thread_id = data.get("thread_id")
message = data.get("message")

if not thread_id:
    # 새 thread 생성
    thread = client.beta.threads.create()
    thread_id = thread.id

# GPT에 메시지와 thread_id 전달
response = client.beta.threads.add_message(
    thread_id=thread_id,
    content=message
)

return jsonify({
    "thread_id": thread_id,
    "reply": response.content
})

⑤ 클라이언트 처리

최초 메시지: thread_id 없으므로 서버에서 새 thread_id 받아서 저장

이후 메시지: 저장한 thread_id와 함께 요청

이렇게 하면 대화가 항상 같은 스레드 컨텍스트 안에서 진행

정리하면:

thread_id = 대화 맥락을 유지하는 키

처음 없으면 생성 → 사용자에게 반환

사용자는 저장 → 이후 메시지마다 thread_id 함께 전송

GPT는 같은 스레드로 인식 → 이전 대화 기억