전체 글 (23) 썸네일형 리스트형 최근 사용해본 AI 도구들 1. Cursorhttps://www.cursor.com/ Cursor - The AI Code EditorBuilt to make you extraordinarily productive, Cursor is the best way to code with AI.www.cursor.com워낙 유명해서 딱히 설명이 필요 없을 것 같지만, AI가 탑재된 VSCode라고 보면 된다. 코드 자동완성, 챗 기능 등을 제공.자동완성 퀄리티에 좀 놀랐다. 내 의도를 이해하고 다음 타이핑할 것을 바로 바로 추천해주는데 정확도가 상당하다.다만 너무 의존하다보면 내가 멍청해지는 느낌이다. 그리고 아직까지는 당연히(혹은 다행히..?) 오류가 있는 코드를 작성할 때가 있어서 주의해야 한다.항상 내가 중심을 잡고, Assistan.. react-markdown에서 마크다운 UI를 커스터마이징하는 방법 LLM을 이용한 챗 서비스를 만들고 있다보니, react-markdown을 꽤 헤비하게(?) 쓰게 되었다. https://github.com/remarkjs/react-markdown GitHub - remarkjs/react-markdown: Markdown component for ReactMarkdown component for React. Contribute to remarkjs/react-markdown development by creating an account on GitHub.github.com 기본적으로 하는 일은 간단한데, 마크다운 텍스트를 입력(children)으로 받아서 화면에 뿌려준다. 지금부터 알아볼 것은 출력(오른쪽)을 커스터마이징하는 방법들이다.1. CSS당연하지만 가장 .. LLM 응답stream 처리하기 (redux-saga, xState) LLM을 이용한 챗 어플리케이션에서 streaming 방식은 사실상 표준이라고 봐도 될 것 같다. SSE와 fetch-event-source 라이브러리SSE(Server-Sent Events) 방식으로 stream을 처리하는데, Web API를 그대로 사용하는 것보다 아래 라이브러리를 사용하는게 좀 더 간편하다. GitHub - Azure/fetch-event-source: A better API for making Event Source requests, with all the features of fetch()A better API for making Event Source requests, with all the features of fetch() - Azure/fetch-event-source.. 캐시 관련 http 헤더 정리와 Next.js의 캐시 정책 Cache-Control, ETag, Last-Modified 등의 헤더들은 브라우저(혹은 중간 서버) 캐시가 어떻게 동작하는지 결정한다. 프론트엔드 개발자로서 리소스가 사용자에게 얼마나 빠르게 전달되는지는 중요하고, 캐시가 큰 역할을 하기 때문에 알아둘 필요가 있다. 모든 것을 다루기보다는 (주관적으로) 주요한 헤더와 디렉티브 위주로 다루려고 한다.ExpiresResponse 헤더. http-date 형식으로 캐시가 만료되는 시간을 명시하고자 할 때 사용. 아래 설명할 max-age가 있다면 무시된다.Cache-ControlResponse, Request 헤더로 모두 쓰임. 디렉티브마다 사용 가능 여부가 다름. max-age=N: N초 동안 응답이 fresh하다는 의미. fresh할 때는 네트워크 요청.. 쿼리 키(React Query Key)를 체계적으로 사용하기 쿼리 키의 중요성과 적절히 사용하는 방법은 공식 문서와 블로그에 잘 정리되어 있다. 오늘은 그 중에서도 Query Key Factory를 실제 프로젝트에 도입한 사례를 정리해보려고 한다. 프로젝트 규모가 커지다보면 쿼리 키를 체계적으로 관리하기가 어렵다. 규칙을 세워도 점점 일관성이 깨지거나 휴먼 에러가 생기고, 서로 다른 파일에서 쿼리 키를 참조하는 등 안 좋은 패턴이 발생한다. 위 블로그 글에 나오는 쿼리 키 팩토리를 도입하여 이것을 어느 정도 해소할 수 있었다. const todoKeys = { all: ['todos'] as const, lists: () => [...todoKeys.all, 'list'] as const, list: (filters: string) => [...todoKeys.l.. React에서 UI 컴포넌트와 결합된 코드를 다루는 패턴들 MUI 같은 라이브러리를 사용하거나, 꼭 그렇지 않더라도 재사용 가능한 컴포넌트를 만들다보면 특정 컴포넌트와 거의 항상 같이 쓰이는 코드가 있기 마련이다. MUI의 Popover가 대표적. 특정 컴포넌트(주로 버튼)를 클릭하면 해당 컴포넌트의 위치를 기준으로 팝업창을 띄우는 용도로 사용된다. 이 때 MUI에서 권장하는 Popover를 열고 닫는 코드는 다음과 같다. const [anchorEl, setAnchorEl] = React.useState(null); const handleClickButton = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null.. 브라우저에서 로그를 확인하는 방법들 최근 업무 중 원인을 알 수 없는 에러가 있었다. 정확한 원인을 알 수 없던 이유는 1. 에러가 간헐적으로 발생했고, 2. 특정 PC에서만 발생해서 같은 환경(브라우저 버전, 네트워크 등)의 다른 PC에서는 재현이 되지 않았다. 프론트 이슈일 확률은 거의 없어보였지만 그렇다고 원인을 특정할 수도 없었다. 원인을 파악하려고 하다보니 다양한 로그를 확인하게 됐는데, 처음 알게 된 것들이 많아 기록한다. 개발자 도구의 네트워크 탭 웹 개발자라면 익숙할 그 친구다. 우클릭을 해보면 평소에 사용하는 헤더 말고도 다양한 옵션이 있다. 이번 에러의 경우 네트워크 요청이 stalled 상태로 지속되다가 끝나는 현상이 있었는데, TCP 연결이 최대 갯수를 초과한 것인지 의심이 되어 'Connection ID' 옵션을 사.. 모바일 크로스 브라우징 경험기 회사에서 앱 내 iframe으로 삽입되는 방식의 프로덕트를 맡게 되었는데, 운영체제(iOS, AOS)별로 특정하게 발생하는 이슈를 겪었다. 앱 환경은 처음이다보니 디버깅이 쉽지 않았다. 우선은 사내 테스트용 기기들에서는 해결된 것으로 판단을 했지만, 운영체제 버전이나 기기 종류에 따라 완전한 해결책이 아닐 수도 있을 듯하다. 지속적으로 업데이트할 예정. 내가 겪은 대부분의 이슈가 채널톡 블로그(링크)에 잘 설명되어 있으나 해결 방법은 일부 수정을 해야했다. iOS 한글 입력 채팅 입력창에 한글을 입력하고 전송 후 다음 입력시에 앞의 입력이 남아있다. 예를 들어, ‘가나다’ 입력 전송 ‘라’ 입력 입력창에는 ‘다라’로 표시(입력)됨 iOS에서 한글 입력시 값이 버퍼에 남게 되어 생기는 현상이라고 알려져 있.. 이전 1 2 3 다음
