들어가며딜러/파트너사를 위한 사내 포털을 운영하면서, 브랜드 가이드·교육 자료·Q&A·공지사항 등 콘텐츠가 점점 쌓여갔다. 문제는 사용자들이 원하는 정보를 찾지 못한다는 것이었다. 검색 기능이 있어도 키워드 기반이라 "렉서스 SNS에 로고 올릴 때 최소 크기가 뭐야?" 같은 자연어 질문에는 답을 줄 수 없었다. 결국 RAG(Retrieval-Augmented Generation)를 도입하기로 했다. RAG를 구현할 때 가장 먼저 떠오르는 도구가 LangChain이다. LangChain을 쓸까 고민했지만, 결국 직접 파이프라인을 구축하는 쪽을 선택했다.LangChain이란?LangChain은 LLM 기반 애플리케이션을 빠르게 개발할 수 있도록 도와주는 프레임워크다. 문서 로딩, 텍스트 분할, 임베딩, 벡터..

블로그 글 이번 글에서는 GTP 3.0부터 약 3년 간 사용해 온 나의 개인적인 의견을 적는 글이기 때문에 평어체를 사용하려고 한다. 2023년 3월, 본격적으로 개발자들에게 AI 하나가 유명해졌다. 불과 몇 달 전인 2022년 말에만 해도 AI가 이렇게 화제가 될 줄을 몰랐는데 말이다. 나도 곧장 다른 개발자들과 동일하게 무료 버전부터 사용해봤다. 그 당시엔 기능이 그렇게 뛰어나지 않았음에도 불구하고 개발의 ㄱ 자도 모르던 내가 firebase를 사용하여 CRUD 형태의 게시판, 실시간 채팅, 알림 등 구현했던 것을 기억한다. 그렇게 나의 AI 첫 경험은 엄청난 충격을 선사했다. 물론 3년 안에 쓸만한 정도도 아닌 나보다 뛰어난 AI가 만들어지리라는 상상도 못했는데 말이다. 그렇게 AI는 소리소문없이 ..

아마 대부분의 사람들은 제목만 보고는 이 글이 어떤 내용인지 바로 이해하기 어려울 수도 있습니다.한 줄로 요약하면 “커밋 메시지를 통일하자!” 입니다. 구현하게 된 계기현재 우리 팀의 Git 히스토리를 보면 아래 사진처럼 각자 다른 방식으로 커밋 메시지를 작성하고 있습니다.이렇게 되면 히스토리를 파악하기 어려울 뿐만 아니라, 코드 리뷰나 온보딩 과정에서도 불편함이 생깁니다.또한 에이전시 특성상 작업 속도가 중요한데, 매번 push 이후에 pull request를 생성하고 메시지를 정리하는 과정이 번거롭게 느껴질 때도 있습니다. 이런 사소한 작업들이 쌓이면 하루, 일주일 단위로 꽤 많은 시간을 소비하게 됩니다. 이러한 문제를 줄이고 팀원들이 더 편하게 사용할 수 있도록 커밋 메시지를 쉽게 작성할 수 있는 ..

머릿말이번에는 PWA를 구현하게 되었습니다.PWA에 대해 간단히 말해보자면, Progressive Web APP입니다.기본적으로 PWA는 HTML, CSS, JS로 만들어졌지만 네이티브 앱과 유사한 경험을 제공하는 웹 어플리케이션입니다.왜 React Native나 Flutter가 아닌 PWA인지?사실 처음에는 RN과 Webview를 사용하여 App store와 구글 플레이 스토어에 앱을 출시해보려고 했습니다.하지만 개발 전 설계를 하다보니 여러 관문에 부딪혔습니다.1. App store에 출시하기 위해서는 최소한 소셜 로그인 또는 자체 로그인이 필요한 점2. 내 애플 계정으로 출시할 경우 만약 내가 퇴사하는 경우 인도하는 부분이 힘든 점3. 알림 서비스는 굳이 네이티브 앱이 아니여도 PWA도 가능한 점P..

올해 상반기에 우리 회사는 가장 매출이 큰 프로젝트 중 하나를 리뉴얼을 하게 되었습니다.왜 Sentry를 도입하게 되었는지프로젝트에서도 가장 중요한 서비스 (서비스 A라고 하겠습니다.)는 주말에도 정상적으로 실행이 되어야하고, 새벽 시간대에도 정상적으로 실행이 되어야합니다.하지만 지금까지 에러 모니터링은 기획팀에서 하루에 3번 씩 실행하는 방법이었습니다.이 방법은 현실적으로 주말이나, 늦은 새벽에 실행하기에는 어려움이 있습니다.따라서 저는 자동 모니터링을 해주는 시스템을 개발하기로 했습니다.왜 굳이 Sentry냐, WebSocket을 연결해서 API 통신 중 이벤트가 발생하면 catch하면 안되는 것인지에 대해 저도 많은 생각을 해봤는데요.이미 Sentry라는 좋은 툴이 있고, WebSocket 연결을 ..

문제 발견사실 이 문제점을 처음 발견한 것은 지난 7월 말이었습니다. 당시 프로젝트에 투입되어 대부분의 API를 구현하는 역할을 맡다보니 Zustand로 API 통신하기에만 급급했습니다. 이렇다보니 같은 API 통신이 4번이나 발생한다는 것을 알고도, 프로젝트 기한 때문에 React의 Strict.Mode겠지 하며 넘어갔습니다.문제가 되었던 부분당시 구현했던 코드입니다.section: [ { component: 컴포넌트 A, }, { component: 컴포넌트 B, }, { component: 컴포넌트 C, }, { component: 컴포넌트 D, }, { component: 컴포넌트 E, }, {..

취준하고 취업하고 일한다고 오랜만에 글을 작성해 보네요..앞으로는 종종 작성해 보도록 노력해 보겠습니다. (보장은 못..ㅎㅎ) 이번 글에서는 회사 업무를 다루며 발생한 NextJS의 Router 문제 해결 방안에 대해 서술해보려고 합니다. 기본 플로우지금 맡고있는 프로젝트에서 동영상에 접근하기 위한 기본적인 url로 /video/${videoId}를 사용합니다.여기서 하단 BottomSheet를 클릭하면 /video/${videoId}#해시값으로 url이 변경되면서 BottomSheet가 열리고 닫히는 무한 루프가 발생했습니다. 문제점문제는 바로 여기서 발생합니다. 첫 번째 동영상 페이지를 /video/71으로 가정하고, 두 번째 동영상 페이지를 /video/109로 가정하겠습니다. 첫 번째 동영상 시청..

이번 글에서는 기존에 사용하던 Context API에서 Zustand로 마이그레이션 하게 된 썰을 한 번 풀어보려고 합니다. 처음에는 상태관리에 대해 잘 모르기도 했고 단순한 전역 상태만 관리하면 되겠지 싶었습니다.  그래서 Context API를 루트에 넣고, 하나 둘 Provider를 감쌌죠.하지만 어느 순간부터 컴포넌트가 불필요하게 리렌더링 되고 수정하지 않은 컴포넌트도 갑자기 반응하며 성능 저하 이슈까지 발생하기 시작했습니다.그때 든 생각은 하나였습니다."내가… 왜 그랬을까?"이 글에서는 Context API를 쓸 때 겪었던 리렌더링 이슈와 Zustand로 어떻게 개선했는지를 공유해보려고 합니다. 왜 나는 Context API를 선택했을까?사실 Context API는 제가 선택해서 사용한 기술은 ..