web (4) 썸네일형 리스트형 React 개발자가 구글 oAuth를 이해하기 3년 전, NextAuth를 이용해서 구글 로그인을 처리한 적이 있습니다. 그 당시 oAuth를 이해했다고 생각했는데, 이번에 애플과 구글로그인을 클라이언트 사이드에서 구현하면서 어려움을 겪었습니다. 사실 NextAuth가 code 발급과 token, 그리고 JWT를 관리해 줘서 내부에서 어떤 일이 일어나는지 자세히 알지 못했습니다.서비스의 백엔드 서버에서 토큰을 발급받고, 모바일도 함께 처리하다보니 Access Token과 Refresh Token을 클라이언트에서 관리해야 했습니다. 이걸 어떻게 처리해야 할지 몰라 한동안 헤맸습니다. 이번 기회에 클라이언트에서 토큰을 활용한 로그인 관리와 구글 서버, 프론트엔드, 백엔드 각자의 역할과 토큰들을 정리해 보았습니다. oAuth 시스템이 잘 이해가지 않을 때.. 챗 봇 스트리밍 통신 목차작동 원리구현 과정오픈 소스 분석 중 마주친 클로저마지막으로 GPT의 답변 성능과 속도가 반비례 관계에 있어서 이를 보완해야 했습니다.openAI의 GPT3.5-turbo 모델을 쓰면 속도는 빠르지만, 답변 성능이 떨어졌습니다. 반대로, GPT4 모델을 쓰면 답변 성능은 좋았지만, 답변 시간이 오래 걸렸습니다. 답변 양에 따라 사용자가 10초 이상 로딩 화면만 보는 상황도 발생했습니다.이 문제를 해결하기 위해 답변 성능을 위해 GPT4 모델을 사용하고, 답변 속도는 사용자 경험 개선하는 방향으로 고민했습니다. 사용자 경험은 텍스트가 화면에 실시간으로 한 글자씩 스트리밍 되는 방법으로 보완하기로 했습니다. 텍스트 스트리밍은 SSE API를 활용했습니다.💡 Server-sent events(SSE)se.. Core Web Vitals Web Vitals 웹에서 훌륭한 사용자 경험을 제공하기 위해, 필수적인 성능 지표에 대해 지침을 제공하는 Google의 개발 도구입니다. 그 간, Google은 성능 측정을 위해 다양한 도구를 제공해 왔습니다. 이런 다양한 도구와 지표를 버거워하는 사람들을 위해, 사이트에서 가장 중요한 지표인 Core Web Vitals에 초점을 맞추어 지원합니다. Core Web Vitals 아래 세 가지 지표는 사용자 경험에 영향을 미치는 가장 핵심적인 지표입니다. LCP(Largest Contentful Paint): 로딩 성능 지표입니다. 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 최대 콘텐츠(이미지, 텍스트 블록 등)의 렌더링 시간을 측정합니다. HTML 요소들은 단계별로 로드되며, 각.. DOM (Document Object Model) DOM은 HTML, XML 문서의 인터페이스로, 프로그래밍 언어가 문서에 접근하고 수정(구조, 스타일, 내용 등)할 수 있습니다. 브라우저에 의해 로드되고 노드 트리와 같이 구조화된 표현(structured representation)으로 제공됩니다. DOM은 프로그래밍 언어와 독립적으로 디자인되었기 때문에, JS와 파이썬 등 어떠한 언어에도 제약이 없습니다. DOM에 접근하기 위해 환경설정이나 라이브러리를 설치할 필요가 없습니다. 개발자도구 콘솔에서도 아래 이미지와 같이 간단하게 호출할 수 있습니다. 콘솔에서 document object(브라우저가 불러온 웹페이지이자, 페이지 콘텐츠의 진입점)를 직접 호출하거나 window object(DOM 문서를 담은 창)의 element로 document를 호출할.. 이전 1 다음
