준희닷의 인기 글
-
Claude Agent Skills 톺아보기 - 기술 블로그 글쓰기 도우미 Skill 만들기
들어가며Claude Code를 사용하다 보면 반복적인 작업이나 특정 도메인에 특화된 지식이 필요한 상황을 자주 마주하게 됩니다. 매번 같은 맥락을 설명하거나 동일한 지침을 반복하는 것은 비효율적일 수 있습니다. Agent Skills는 이러한 문제를 해결하기 위해 탄생한 모듈식 확장 기능입니다.요즘 SNS(쓰레드, 링크드인, ...)에서는 이렇게 Agent Skills를 활용한 다양한 사례들을 볼 수 있었는데요, 이 글을 통해 '티스토리 기술 블로그 글쓰기 도우미 Skill을 직접 만들어보면서 Agent Skills의 핵심 개념과 작성법을 배워봅니다. 84분짜리 영어 팟캐스트를 5분 만에 핵심 파악하고, 퀴즈까지 풀고, 직접 볼 가치가 있는지 판단84분짜리 영어 팟캐스트를 5분 만에 핵심 파악하고, 퀴즈..
-
만들면서 배우는 챗봇의 SSE 스트리밍 전략
들어가며ChatGPT나 Claude를 사용해 보셨다면 텍스트가 한 글자씩 타이핑되듯 출력되는 것을 경험해 보셨을 것입니다. 이런 UX는 단순히 시각적 효과가 아닙니다. 챗봇이 토큰 단위로 응답을 생성하는 특성을 활용한 스트리밍 응답 방식입니다.챗봇의 응답은 수 초에서 수십 초까지 걸릴 수 있습니다. 사용자가 빈 화면을 보며 기다리게 하는 것보다, 생성되는 즉시 텍스트를 보여주는 것이 훨씬 나은 경험을 제공합니다.이 글에서는 Next.js와 React를 사용해 Claude API 기반 챗봇을 직접 구현하면서 SSE(Server-Sent Events) 스트리밍의 동작 원리와 실전 구현 전략을 살펴봅니다. 서비스 및 깃허브 코드 바로가기 Claude Chat my-claude-learner.vercel.app..
-
useSyncExternalStore로 외부 상태 안전하게 동기화하기
실습하며 알아보기 Create Next AppuseEffect 방식과 useSyncExternalStore 방식을 비교해보세요. 실행 결과는 동일하지만, 구현 방식이 다릅니다.playground-cyan-two.vercel.app목차들어가며useEffect 기반 isMount 패턴의 문제점useSyncExternalStore 소개Before/After: 코드 비교기본 예제: isMounted 구현3가지 매개변수 완전 정복주의사항과 모범 사례심화: 로컬 스토리지 연동 TodoList마무리들어가며React 19와 함께 등장한 React Compiler는 자동 메모이제이션을 제공하며 개발자의 부담을 줄여줍니다. 하지만 이로 인해 기존의 일부 패턴이 예상대로 동작하지 않을 수 있습니다. 특히 useEffect를..
-
Next.js - next/image blur 사용하기
이전 게시글과 이어집니다! Next.js - SSG, getStaticProps Data Fetching: getStaticProps | Next.js Data Fetching: getStaticProps | Next.js Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. n.. junheedot.tistory.com next/image 에서 제공하는 property인 placeholder=’blur’와 blurDataURL={ … }을 사용한다면, 블러를 통해 빈 이미지 공간을 이미지가 렌더링 될 때까지 효율적으로 제어할 수 있습니다. 하지만 다음..
-
리액트로 트리 구조(폴더/파일) 구현하기
들어가며Tree 구조 데이터를 기반으로 파일 시스템 형태의 UI를 구현하는 작업은 많은 프로젝트에서 요구되는 기능입니다. 자료구조를 공부할 때 트리는 다뤄봤지만, 트리 구조를 직접 렌더링하는 경험이 없었던 것 같습니다. 하지만, 생각보다 다양한 환경에서 사용되고 구현을 할 기회가 생기는데요, 이번 글에서는 다음 두 가지 요구 사항을 중심으로, React와 TypeScript를 활용하여 Tree View를 구현하는 방법을 단계별로 설명합니다.요구사항을 보고 어떤식으로 구현할지 계획해 본 뒤, 비교해보시는 방법도 좋을 것 같습니다 😊트리 구조를 UI로 렌더링하는 경우조직도(Organization Chart)CEO → 임원 → 팀장 → 팀원 구조각 노드를 사람(직책)으로 렌더링하고, 상하 관계를 선으로 표현..
-
한번에 적용하는 Sentry with Next.js
들어가며 안녕하세요, 정말 오랜만에 기술 블로그로 돌아왔습니다! 약 3개월 동안 많은 일들이 있었습니다. 서비스 출시가 임박하기도 했고, 프로덕션 배포에 집중하느라 글 작성을 등한시했던 것 같습니다. 아무래도 반복되는 작업과 공유할 수 있는 양질의 글이나 주제를 선택하기가 어려웠었어서 방생 아닌 방생조치를 취하고 있었던 것 같습니다. 이번에 공유드릴 내용은 Sentry 입니다. 전체적으로 서비스에 Sentry를 적용하게 되면서 겪었던 문제점이 많았기 때문에 다른 프론트 개발자 분들이 보기 쉽게 공유차원에서 글을 작성했습니다. 하단에 레포지토리도 같이 달아두었으니, 전체적으로 글을 읽고 코드로 직접 보시면서 만들면 보다 쉽게 적용할 수 있을 것 같습니다. 질문은 언제나 환영입니다. 목차를 보고 천천히 따라..
-
OAuth 2.0과 SSO 구현 가이드
내용ProBit Global 서비스의 세 가지 주요 구성 요소에서 OAuth 2.0 프로토콜을 기반으로 한 단일 로그인(SSO) 플로우 구현을 설명합니다:로그인 서버 (probit-global-accounts): 인증 UI 및 SSO 연동을 처리하는 권한 서버BFF (프론트엔드용 백엔드) (probit-global-web/server): 인증 라우팅 및 토큰 관리를 위한 Express.js 미들웨어클라이언트 (probit-global-web/src): 인증 서비스를 제공하는 Angular 프론트엔드 애플리케이션OAuth 2.0 개요OAuth 2.0은 웹 및 애플리케이션 인증 및 권한 부여를 위한 개방형 표준 프로토콜입니다. ProBit Global 시스템은 OAuth 2.0의 인증 코드 부여(Author..
-
Next.js - middleware 사용하기 (로그인 연동하기)
이번 로그인 연결은 세션을 사용하기로 하였다. 웹 브라우저에서는 직접적으로 세션 ID 에 접근이 불가능하지만, 세션 쿠키에 들어있을 경우 자동으로 인식하여 헤더에 넣어 보내주기 때문에 로그인 로직을 구현하는데 문제가 되지 않았다. 시나리오에 사용되는 페이지는 다음과 같다 sign_up (회원가입 페이지) sign_in (로그인 페이지) welcome (로그인 시 접근하는 페이지) 해당 페이지에 미들웨어를 연동하여, 다음 상황을 구현할 것이다 로그인한 이후 /sign_in 페이지에 접근할 경우, /welcome 페이지로 보내주기 로그인하지 않은 경우 /welcome 페이지에 접근할 경우, /sign_in 페이지로 보내주기 따라서 미들웨어에서는 각각의 페이지에 대한 정보를 먼저 받아야 하고, 이를 미들웨어에..
준희닷의 최신 글
-
만들면서 배우는 챗봇의 SSE 스트리밍 전략AI 활용 2026.01.20 16:08
들어가며ChatGPT나 Claude를 사용해 보셨다면 텍스트가 한 글자씩 타이핑되듯 출력되는 것을 경험해 보셨을 것입니다. 이런 UX는 단순히 시각적 효과가 아닙니다. 챗봇이 토큰 단위로 응답을 생성하는 특성을 활용한 스트리밍 응답 방식입니다.챗봇의 응답은 수 초에서 수십 초까지 걸릴 수 있습니다. 사용자가 빈 화면을 보며 기다리게 하는 것보다, 생성되는 즉시 텍스트를 보여주는 것이 훨씬 나은 경험을 제공합니다.이 글에서는 Next.js와 React를 사용해 Claude API 기반 챗봇을 직접 구현하면서 SSE(Server-Sent Events) 스트리밍의 동작 원리와 실전 구현 전략을 살펴봅니다. 서비스 및 깃허브 코드 바로가기 Claude Chat my-claude-learner.vercel.app..
-
Claude Agent Skills - CTO 역할의 과제 평가 도우미 만들기AI 활용 2026.01.09 11:29
목차들어가며최종 결과물1단계: 스킬 폴더 구조 생성2단계: SKILL.md 작성3단계: 평가 워크플로우 정의4단계: 제한시간별 가중치 설정5단계: 레드 플래그 정의6단계: 참조 문서 작성7단계: 스킬 테스트실제 평가 리포트 예시스킬 확장 아이디어정리들어가며요즘 많은 회사들의 채용 공고에 기술 과제 항목이 포함되고 있습니다. 체감상 이전보다 많은 회사에서 기술 과제를 프로세스에 포함하고 있는 것 같은데요, 적게는 8시간, 2일 많게는 7일 정도의 시간을 부여받습니다. 이렇게 제한된 시간에서 요구사항을 완료하고, 코드를 구현할 때, 스스로 '어느정도 수준까지 개발을 해야 하나'를 되묻게 되었습니다. claude skill에 관심을 갖게된 요즘, cto급 상황을 가정한 나의 코드 기술 과제 평가 도우미를 만들..
-
Claude Agent Skills 톺아보기 - 기술 블로그 글쓰기 도우미 Skill 만들기AI 활용 2026.01.06 11:22
들어가며Claude Code를 사용하다 보면 반복적인 작업이나 특정 도메인에 특화된 지식이 필요한 상황을 자주 마주하게 됩니다. 매번 같은 맥락을 설명하거나 동일한 지침을 반복하는 것은 비효율적일 수 있습니다. Agent Skills는 이러한 문제를 해결하기 위해 탄생한 모듈식 확장 기능입니다.요즘 SNS(쓰레드, 링크드인, ...)에서는 이렇게 Agent Skills를 활용한 다양한 사례들을 볼 수 있었는데요, 이 글을 통해 '티스토리 기술 블로그 글쓰기 도우미 Skill을 직접 만들어보면서 Agent Skills의 핵심 개념과 작성법을 배워봅니다. 84분짜리 영어 팟캐스트를 5분 만에 핵심 파악하고, 퀴즈까지 풀고, 직접 볼 가치가 있는지 판단84분짜리 영어 팟캐스트를 5분 만에 핵심 파악하고, 퀴즈..
-
useSyncExternalStore로 외부 상태 안전하게 동기화하기React & Next 2026.01.05 17:04
실습하며 알아보기 Create Next AppuseEffect 방식과 useSyncExternalStore 방식을 비교해보세요. 실행 결과는 동일하지만, 구현 방식이 다릅니다.playground-cyan-two.vercel.app목차들어가며useEffect 기반 isMount 패턴의 문제점useSyncExternalStore 소개Before/After: 코드 비교기본 예제: isMounted 구현3가지 매개변수 완전 정복주의사항과 모범 사례심화: 로컬 스토리지 연동 TodoList마무리들어가며React 19와 함께 등장한 React Compiler는 자동 메모이제이션을 제공하며 개발자의 부담을 줄여줍니다. 하지만 이로 인해 기존의 일부 패턴이 예상대로 동작하지 않을 수 있습니다. 특히 useEffect를..
-
AI-POT (프롬프트활용능력) 1급 합격 후기회고 2026.01.02 17:03
들어가며1월 1일에 선물같은 시험 결과가 날라왔습니다(🎅). 늘 작은 이기는 습관, winning habbit을 외치는 편인데, 자격증 합격을 통해 작은 winning을 만들어 보았습니다. 2026년을 아주 기분 좋게 시작할 수 있게 되었네요. 2025년 회고도 작성 중이지만, 내용이 아직 정리되지 않아서 시험 합격 후기에 대해 먼저 이야기해볼까 합니다. 왜 따게 되었는가?2025년은 'Agentic AI'의 해라고 불러도 될 만큼 일상생활과 개발 환경에서 도움을 줄 수 있는 다양한 AI들이 등장했습니다. 사용자들은 대부분 GPT(Generative Pre-trained Transformer)를 통해 AI와 소통하며 결과물을 만들게 됩니다. 여기서 GPT라는 개념은 OpenAI의 서비스 모델 ChatG..
-
'데이터 삽질 끝에 UX가 보였다'를 읽고Book Study 2025.12.26 19:11
들어가며velog를 통해 우연히 다른 분들의 독서 후기를 읽던 중, 평소 관심 있던 주제를 다룬 책을 발견하여 구매 후 읽게 되었습니다. 개발할 때도 그렇고, 스스로 '정량적 평가를 기반으로 의사결정을 내리는 사람이 되고 싶다'라고 생각해 왔는데요. 이 책에는 어떻게 정량적 평가를 내리는지, 어떤 방법으로 UX/UI를 고려하고 설계하는지에 대한 과정이 담겨 있습니다. 현 회사에 합류하고 약 1년 반의 시간이 지나면서 '성공했다'라고 칭할 수 있는 프로젝트가 있었고, '실패했다'라고 생각되는 프로젝트도 있었습니다. 실패하면 쉬쉬하는 분위기가 될 뿐, 실제로 '왜 실패했는가', '왜 실패할 수밖에 없었는가'에 대한 회고가 없었던 것이 아쉬움으로 남습니다. 상향식으로 여쭤보면, '다음 프로젝트 시작할 때 해보..
-
실제 앱 구조를 바탕으로 모노레포 알아보기React & Next 2025.12.24 11:30
들어가며실무를 경험하다보면, 단순히 하나의 프로젝트만 관리하는 것이 아닌 과거로부터 전해져오는 다양한 프로젝트들을 관리하게 됩니다. 그 중에서도 업데이트가 되지 않은 채 레거시로 남겨져있는 프로젝트도 있을 거고, 활발하게 업데이트되고 있는 프로젝트도 있을 것입니다.저희 서비스는 10년 이상 유지되다보니, 다양한 이해관점에 따라 + 다양한 용도와 범위에 따라 20개 이상의 프로젝트가 있습니다. 그렇다보니, 디자인을 포함한 코드도 각자의 범위에서 각자가 선택한 라이브러리들로 하여금 무한 팽창을 하고 있는 문제를 발견하였습니다.이렇게 팽창하는 서비스를 효율적으로 관리할 수 있는 영역으로 가져오기 위해 모노레포를 도입하였습니다.모노레포(Monorepo)는 여러 프로젝트를 하나의 저장소에서 관리하는 방식입니다. ..
-
모노레포/폴리레포, 모놀리식/MSA 뭐가 다를까?Computer Science 2025.12.23 10:48
들어가며모노레포, 폴리레포, 모놀리식, MSA 등은 자주 사용되는 용어입니다. 모노레포와 MSA가 함께 언급되는 경우가 많아서, 저는 마치 서로 반대되는 개념인 것처럼 느껴지기도 했는데요,전 회사와 현 회사에서 폴리레포와 모노레포를 모두 경험하면서, 이 개념들이 실제로 어떻게 다른지 정리하였습니다.두 가지 독립적인 개념모노레포라는 단어를 처음 접하면 마이크로서비스(MSA)와 자주 같이 나오기 때문에 혼동하기 쉽습니다. 저 또한 MSA와 모노레포를 겉으로만 알고 혼용하였던 적이 있지만, 이 둘은 다른 차원의 개념입니다.┌─────────────────────────────────────────────────────────┐│ 저장소 관리 방식 ..