본문 바로가기

전체 글

 (19)
Storybook으로 시각적 요소 테스트하기 최근 TDD를 지향하면서 단위 테스트코드를 많이 짰습니다.기능 테스트는 Jest로 큰 무리가 없었는데, UI 테스트 코드를 짤 때는 시각적으로 확인할 수 없어 답답함과 불안함이 있었습니다.UI 테스트를 어떻게 진행할지 엄두가 안 났습니다. 꼼꼼하게 하자니 생산성이 바닥을 기어갈게 뻔했고, 그렇다고 대충 하거나 안 할 수도 없는 노릇이었습니다.  레이아웃이나 색이 변경되는 걸 어떻게 테스트할 수 있을까요? 그러던 차에 NHN FE개발랩의 김동우님이 발표하신 '실용적인 프런트엔드 테스팅 전략' 유튜브 영상을 봤고, Storybook을 한번 써보기로 했습니다.  시각적 요소 테스트먼저 UI 테스트 요소에는 '시각적 요소', '구성 요소', '상호작용', '접근성', '유저 플로우'가 있습니다.이번에는 소개해 ..
챗 봇 스트리밍 통신 목차작동 원리구현 과정오픈 소스 분석 중 마주친 클로저마지막으로 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 정책에 따라 캐시 데이터를 사용할지 말지, 또는 응답 데이터를 캐싱할지 말지 달라집니다..

티스토리툴바