프론트엔드 개발자의 기억 저장소

분류 전체보기

• 만들면서 배우는 챗봇의 SSE 스트리밍 전략

  개발/AI 활용 2026. 1. 20. 16:08

  들어가며ChatGPT나 Claude를 사용해 보셨다면 텍스트가 한 글자씩 타이핑되듯 출력되는 것을 경험해 보셨을 것입니다. 이런 UX는 단순히 시각적 효과가 아닙니다. 챗봇이 토큰 단위로 응답을 생성하는 특성을 활용한 스트리밍 응답 방식입니다.챗봇의 응답은 수 초에서 수십 초까지 걸릴 수 있습니다. 사용자가 빈 화면을 보며 기다리게 하는 것보다, 생성되는 즉시 텍스트를 보여주는 것이 훨씬 나은 경험을 제공합니다.이 글에서는 Next.js와 React를 사용해 Claude API 기반 챗봇을 직접 구현하면서 SSE(Server-Sent Events) 스트리밍의 동작 원리와 실전 구현 전략을 살펴봅니다. 서비스 및 깃허브 코드 바로가기 Claude Chat my-claude-learner.vercel.app..

  Read More
• Claude Agent Skills - CTO 역할의 과제 평가 도우미 만들기

  개발/AI 활용 2026. 1. 9. 11:29

  목차들어가며최종 결과물1단계: 스킬 폴더 구조 생성2단계: SKILL.md 작성3단계: 평가 워크플로우 정의4단계: 제한시간별 가중치 설정5단계: 레드 플래그 정의6단계: 참조 문서 작성7단계: 스킬 테스트실제 평가 리포트 예시스킬 확장 아이디어정리들어가며요즘 많은 회사들의 채용 공고에 기술 과제 항목이 포함되고 있습니다. 체감상 이전보다 많은 회사에서 기술 과제를 프로세스에 포함하고 있는 것 같은데요, 적게는 8시간, 2일 많게는 7일 정도의 시간을 부여받습니다. 이렇게 제한된 시간에서 요구사항을 완료하고, 코드를 구현할 때, 스스로 '어느정도 수준까지 개발을 해야 하나'를 되묻게 되었습니다. claude skill에 관심을 갖게된 요즘, cto급 상황을 가정한 나의 코드 기술 과제 평가 도우미를 만들..

  Read More
• Claude Agent Skills 톺아보기 - 기술 블로그 글쓰기 도우미 Skill 만들기

  개발/AI 활용 2026. 1. 6. 11:22

  들어가며Claude Code를 사용하다 보면 반복적인 작업이나 특정 도메인에 특화된 지식이 필요한 상황을 자주 마주하게 됩니다. 매번 같은 맥락을 설명하거나 동일한 지침을 반복하는 것은 비효율적일 수 있습니다. Agent Skills는 이러한 문제를 해결하기 위해 탄생한 모듈식 확장 기능입니다.요즘 SNS(쓰레드, 링크드인, ...)에서는 이렇게 Agent Skills를 활용한 다양한 사례들을 볼 수 있었는데요, 이 글을 통해 '티스토리 기술 블로그 글쓰기 도우미 Skill을 직접 만들어보면서 Agent Skills의 핵심 개념과 작성법을 배워봅니다. 84분짜리 영어 팟캐스트를 5분 만에 핵심 파악하고, 퀴즈까지 풀고, 직접 볼 가치가 있는지 판단84분짜리 영어 팟캐스트를 5분 만에 핵심 파악하고, 퀴즈..

  Read More
• useSyncExternalStore로 외부 상태 안전하게 동기화하기

  개발/React & Next 2026. 1. 5. 17:04

  실습하며 알아보기 Create Next AppuseEffect 방식과 useSyncExternalStore 방식을 비교해보세요. 실행 결과는 동일하지만, 구현 방식이 다릅니다.playground-cyan-two.vercel.app목차들어가며useEffect 기반 isMount 패턴의 문제점useSyncExternalStore 소개Before/After: 코드 비교기본 예제: isMounted 구현3가지 매개변수 완전 정복주의사항과 모범 사례심화: 로컬 스토리지 연동 TodoList마무리들어가며React 19와 함께 등장한 React Compiler는 자동 메모이제이션을 제공하며 개발자의 부담을 줄여줍니다. 하지만 이로 인해 기존의 일부 패턴이 예상대로 동작하지 않을 수 있습니다. 특히 useEffect를..

  Read More
• AI-POT (프롬프트활용능력) 1급 합격 후기

  끄적끄적/회고 2026. 1. 2. 17:03

  들어가며1월 1일에 선물같은 시험 결과가 날라왔습니다(🎅). 늘 작은 이기는 습관, winning habbit을 외치는 편인데, 자격증 합격을 통해 작은 winning을 만들어 보았습니다. 2026년을 아주 기분 좋게 시작할 수 있게 되었네요. 2025년 회고도 작성 중이지만, 내용이 아직 정리되지 않아서 시험 합격 후기에 대해 먼저 이야기해볼까 합니다. 왜 따게 되었는가?2025년은 'Agentic AI'의 해라고 불러도 될 만큼 일상생활과 개발 환경에서 도움을 줄 수 있는 다양한 AI들이 등장했습니다. 사용자들은 대부분 GPT(Generative Pre-trained Transformer)를 통해 AI와 소통하며 결과물을 만들게 됩니다. 여기서 GPT라는 개념은 OpenAI의 서비스 모델 ChatG..

  Read More
• '데이터 삽질 끝에 UX가 보였다'를 읽고

  개발/Book Study 2025. 12. 26. 19:11

  들어가며velog를 통해 우연히 다른 분들의 독서 후기를 읽던 중, 평소 관심 있던 주제를 다룬 책을 발견하여 구매 후 읽게 되었습니다. 개발할 때도 그렇고, 스스로 '정량적 평가를 기반으로 의사결정을 내리는 사람이 되고 싶다'라고 생각해 왔는데요. 이 책에는 어떻게 정량적 평가를 내리는지, 어떤 방법으로 UX/UI를 고려하고 설계하는지에 대한 과정이 담겨 있습니다. 현 회사에 합류하고 약 1년 반의 시간이 지나면서 '성공했다'라고 칭할 수 있는 프로젝트가 있었고, '실패했다'라고 생각되는 프로젝트도 있었습니다. 실패하면 쉬쉬하는 분위기가 될 뿐, 실제로 '왜 실패했는가', '왜 실패할 수밖에 없었는가'에 대한 회고가 없었던 것이 아쉬움으로 남습니다. 상향식으로 여쭤보면, '다음 프로젝트 시작할 때 해보..

  Read More
• 실제 앱 구조를 바탕으로 모노레포 알아보기

  개발/React & Next 2025. 12. 24. 11:30

  들어가며실무를 경험하다보면, 단순히 하나의 프로젝트만 관리하는 것이 아닌 과거로부터 전해져오는 다양한 프로젝트들을 관리하게 됩니다. 그 중에서도 업데이트가 되지 않은 채 레거시로 남겨져있는 프로젝트도 있을 거고, 활발하게 업데이트되고 있는 프로젝트도 있을 것입니다.저희 서비스는 10년 이상 유지되다보니, 다양한 이해관점에 따라 + 다양한 용도와 범위에 따라 20개 이상의 프로젝트가 있습니다. 그렇다보니, 디자인을 포함한 코드도 각자의 범위에서 각자가 선택한 라이브러리들로 하여금 무한 팽창을 하고 있는 문제를 발견하였습니다.이렇게 팽창하는 서비스를 효율적으로 관리할 수 있는 영역으로 가져오기 위해 모노레포를 도입하였습니다.모노레포(Monorepo)는 여러 프로젝트를 하나의 저장소에서 관리하는 방식입니다. ..

  Read More
• 모노레포/폴리레포, 모놀리식/MSA 뭐가 다를까?

  개발/Computer Science 2025. 12. 23. 10:48

  들어가며모노레포, 폴리레포, 모놀리식, MSA 등은 자주 사용되는 용어입니다. 모노레포와 MSA가 함께 언급되는 경우가 많아서, 저는 마치 서로 반대되는 개념인 것처럼 느껴지기도 했는데요,전 회사와 현 회사에서 폴리레포와 모노레포를 모두 경험하면서, 이 개념들이 실제로 어떻게 다른지 정리하였습니다.두 가지 독립적인 개념모노레포라는 단어를 처음 접하면 마이크로서비스(MSA)와 자주 같이 나오기 때문에 혼동하기 쉽습니다. 저 또한 MSA와 모노레포를 겉으로만 알고 혼용하였던 적이 있지만, 이 둘은 다른 차원의 개념입니다.┌─────────────────────────────────────────────────────────┐│ 저장소 관리 방식 ..

  Read More