분류 전체보기 (19) 썸네일형 리스트형 챗 봇 스트리밍 통신 목차작동 원리구현 과정오픈 소스 분석 중 마주친 클로저마지막으로 GPT의 답변 성능과 속도가 반비례 관계에 있어서 이를 보완해야 했습니다.openAI의 GPT3.5-turbo 모델을 쓰면 속도는 빠르지만, 답변 성능이 떨어졌습니다. 반대로, GPT4 모델을 쓰면 답변 성능은 좋았지만, 답변 시간이 오래 걸렸습니다. 답변 양에 따라 사용자가 10초 이상 로딩 화면만 보는 상황도 발생했습니다.이 문제를 해결하기 위해 답변 성능을 위해 GPT4 모델을 사용하고, 답변 속도는 사용자 경험 개선하는 방향으로 고민했습니다. 사용자 경험은 텍스트가 화면에 실시간으로 한 글자씩 스트리밍 되는 방법으로 보완하기로 했습니다. 텍스트 스트리밍은 SSE API를 활용했습니다.💡 Server-sent events(SSE)se.. Apollo Client Cache로 전역 상태 관리하기 사내 솔루션으로 UI CMS를 개발하면서, 관리해야 할 전역 상태가 많아지고 컴포넌트 간 의존성이 복잡해졌습니다. 더 복잡해지기 전에 코드를 정리하고자, 과도하게 사용되는 상태를 찾아 정리했습니다.그중의 하나가 서버의 응답 데이터를 Recoil을 활용해 전역 상태로 사용하는 경우였습니다. “Source of Truth” 개념으로 생각했을 때, 이미 그 역할을 하는 Apollo Client Cache를 사용하는 게 상태 관리 측면에서 더 직관적이라 생각했습니다. 오픈소스 분석캐시 동작을 분석하기 위해, Apollo Client 오픈소스 코드를 분석했습니다.FetchApollo Client는 데이터 요청 시, fetch 정책에 따라 캐시 데이터를 사용할지 말지, 또는 응답 데이터를 캐싱할지 말지 달라집니다.. Event Loop와 Task Queue의 동작 시각화 setTimeout의 실행 순서에 대해 이해하기가 쉽지 않았습니다. 또, Event Loop의 구조 전체를 시각적으로 파악하고 싶었지만, 자료를 찾기 쉽지 않았습니다. 저와 같이 Event Loop가 머릿속에 그려지지 않는 분들에게 이 글이 조금이라도 도움이 되었으면 합니다. Event LoopJavaScript는 초기에 한 번에 하나의 작업만 처리하도록 설계되었습니다. 하지만 시간이 지나고, 여러 가지 작업을 동시에 처리할 일들이 생기기 시작했습니다. 이벤트루프는 이런 비동기 처리를 지원합니다. 간단히 말하면, Task Queue에 있는 작업을 Call Stack으로 이동시키는 역할을 합니다. 그리고 좀 더 상세하게는 다음과 같습니다.Task Queue에 작업이 있으면, Call Stack이 비었는지 .. Core Web Vitals Web Vitals 웹에서 훌륭한 사용자 경험을 제공하기 위해, 필수적인 성능 지표에 대해 지침을 제공하는 Google의 개발 도구입니다. 그 간, Google은 성능 측정을 위해 다양한 도구를 제공해 왔습니다. 이런 다양한 도구와 지표를 버거워하는 사람들을 위해, 사이트에서 가장 중요한 지표인 Core Web Vitals에 초점을 맞추어 지원합니다. Core Web Vitals 아래 세 가지 지표는 사용자 경험에 영향을 미치는 가장 핵심적인 지표입니다. LCP(Largest Contentful Paint): 로딩 성능 지표입니다. 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 최대 콘텐츠(이미지, 텍스트 블록 등)의 렌더링 시간을 측정합니다. HTML 요소들은 단계별로 로드되며, 각.. Failed to load module script - ViteJS Typescript 문제 발견 Vite + Vanilla JS를 이용해서 간단한 웹을 개발했습니다. 하지만, github pages로 배포하는 과정(참고 문서)에서 아래 이미지와 같은 이슈가 발생했습니다. 에러 내용을 확인해 보니, 브라우저가 index.html에 있는 script 태그를 읽지 못했습니다. 그래서 main.js에 작성되어 있던 js 로직과 import 된 css를 읽지 못했고, style과 사용자 인터렉션이 하나도 없는 깡통 html만 렌더링 되었습니다. ...body tags 원인 파악과 해결 초기에는 github page가 레포지토리 이름으로 렌더링 되도록 설정했습니다. 이후 정상적으로 배포되는 걸 확인한 후, url이 github.io로 끝나도록(https://{username}.github.io) 변.. DOM (Document Object Model) DOM은 HTML, XML 문서의 인터페이스로, 프로그래밍 언어가 문서에 접근하고 수정(구조, 스타일, 내용 등)할 수 있습니다. 브라우저에 의해 로드되고 노드 트리와 같이 구조화된 표현(structured representation)으로 제공됩니다. DOM은 프로그래밍 언어와 독립적으로 디자인되었기 때문에, JS와 파이썬 등 어떠한 언어에도 제약이 없습니다. DOM에 접근하기 위해 환경설정이나 라이브러리를 설치할 필요가 없습니다. 개발자도구 콘솔에서도 아래 이미지와 같이 간단하게 호출할 수 있습니다. 콘솔에서 document object(브라우저가 불러온 웹페이지이자, 페이지 콘텐츠의 진입점)를 직접 호출하거나 window object(DOM 문서를 담은 창)의 element로 document를 호출할.. [자료구조] 배열 배열은 데이터를 하나의 변수로 관리하는 방법 중 하나입니다. 반복문과 함께 사용하면 좀 더 효율적인 처리가 가능합니다. 예를 들면, alphabet 이라는 전역 변수에 빈 배열을 초기화합니다. 알파벳을 차례대로 담아 사용할 계획입니다. // javascript code var alphabet = new Array(); alphabet[0] = 'a'; alphabet[1] = 'b'; alphabet[2] = 'c'; 0, 1, 2는 인덱스(index)입니다. 값을 식별하는 데에 사용됩니다. 'a', 'b', 'c'는 값(value)입니다. 0은 'a'의 배열내 위치를 가리키며, 이 둘을 합쳐서 엘리먼트(element)라고 합니다. 배열 사용하기 실생활에서는 숫자나 순서에 의미를 두는 경우, 배열로 표현.. SSR(Server-side Rendering) SSR(Server-side Rendering)은 서버에서 생성한 HTML 페이지를 렌더링합니다. 간단하게 말하면 서버가 문서 작업을 담당하고, 클라이언트는 보여주기만 합니다. HTML이 생성되면, 클라이언트로 HTML, JSON 데이터, 상호작용을 위한 JS 명령어를 전송합니다. 클라이언트는 상호작용이 불가능한 HTML 빠르게 표시하고, React는 JSON data와 JS 명령어를로 컴포넌트가 상호작용이 가능하도록 만듭니다. 이 과정을 Hydration(수화)이라고 합니다. Pre-Rendering Server-Side Rendering(SSR)과 Static Site Generation(SSG)은 data fetch와 React 컴포넌트를 HTML로 변환하는 작업이 클라이언트에 서버가 응답하기 전에.. CSR(Client-side Rendering) 자바스크립트의 발전에 힘입어 개발자들은 어떤 시도를 해보기로 합니다. 서버에서 최소한의 HTML을 한번만 받고, 나머지를 자바스크립트를 이용해 그려내기로요. 왜 했을까요? 기존 방식인 MPA(Multi Page Application)에서는 새로운 화면을 보려면 화면을 새하얗게 날리고, 서버에서 새로운 HTML을 받아와 문서의 Asset(image, video, ...)을 다운로드하곤 했습니다. 서버에 요청할 때마다 페이지 전체를 새로 렌더링하는 것은 비효율적이라 생각했습니다. 이에 필요한 데이터만 받아아고, 해당 부분만 변경하도록 한 것이죠. CSR(Client-side Rendering)이란 JavaScript로 클라이언트에서 HTML 페이지를 생성하고 브라우저에서 페이지를 렌더링하는 것입니다. 클라이.. 이전 1 2 다음
