Sangin Dev

스크롤이 버벅이는 랜딩 페이지, 원인을 하나씩 분석해 보기문제 상황우리 팀은 브랜드 랜딩 페이지를 새로 만들고 있습니다. 스크롤에 따라 이미지가 확대/축소되고, 텍스트가 페이드인/슬라이드되고, 배경색이 서서히 바뀌는 등 화려한 스크롤 연동 애니메이션이 20개 이상 섹션에 걸쳐 들어갑니다. 디자인 리뷰에서는 반응이 좋았는데, 실제 배포 후 다음과 같은 문제가 발견되었습니다.애니메이션 구현 방식은 scroll 이벤트 리스너에서 매번 element.style.top, element.style.width 같은 값을 직접 계산해서 바꾸는 방식입니다.스크롤 이벤트 핸들러 안에서 매번 element.getBoundingClientRect()를 호출해서 요소 위치를 다시 계산하고 있습니다.애니메이션 대상 요소가 20개..

Claude Code: Skill, SubAgent, Agent Team 사용하기Claude Code를 사용하면서 병렬 작업을 하거나 전문화된 역할을 필요로 할 때가 있다. Claude Code는 이를 인식하고 Agent Teams 개념을 도입했다. 그리고 이 안에서 Skill, SubAgent, Agent Team 이라는 세 가지 구성 요소가 서로 다른 역할을 맡는다. 오늘은 세 가지의 역할과 차이를 정리해보았다.Agent Teams기존 Claude Code 사용 방식은 단일 에이전트가 모든 것을 처리하는 구조이다.기획 -> 코드 구현 -> 테스트 -> 문서화위 과정이 혼자 일하는 개발자처럼 순차적으로 처리한다.하지만 실무에서는 팀의 여러 포지션이 있고, 병렬적으로 작업을 수행하며, 특정 기술의 전문가..

상태 표시줄 커스터마이즈하여 사용하기Claude Code 하단에 있는 상태 표시줄을 원하는 대로 커스터마이즈하여 유용한 정보를 표시할 수 있습니다.이 기능은 특히, 사용 중인 단어나 문장의 맥락을 파악하고, 자신이 무엇을 하고 있었는지 기억하는 데 매우 유용합니다. 또한, 이 스크립트는 10가지 색상 테마를 지원합니다.설정 방법설치글 하단 스크립트 템플릿을 Claude 스크립트 디렉토리에 복사하세요:mkdir -p ~/.claude/scriptscp context-bar.sh ~/.claude/scripts/chmod +x ~/.claude/scripts/context-bar.sh/.claude/settings.json 을 업데이트해 주세요:{ "statusLine": { "type": "comm..

Claude Code를 Skill로 확장하기Claude Code에서 skills를 생성, 관리, 공유하여 Claude의 기능을 확장한다. 사용자 정의 명령어와 번들 skills를 포함한다.SKILL.md 파일을 지침과 함께 생성하면 Claude가 이를 자신의 도구 모음에 추가한다. Claude는 관련이 있을 때 skills를 사용하거나 /skills으로 호출할 수 있다. skill의 본문은 사용할 때만 로드되므로 긴 참조 자료는 필요할 때까지 거의 비용이 들지 않는다.번들 skillsClaude Code에는 모든 세션에서 사용 가능한 번들 skills 세트를 포함하고 있으며, disableBundleSkills 설정으로 비활성화하지 않는 한 다음 스킬들을 포함하고 사용할 수 있다:/code-review/..

Claude Code 세션 팀 조율하기공유 작업, 에이전트 간 메시징, 중앙 집중식 관리를 통해 함께 작동하는 여러 Claude Code 인스턴스를 조율한다.Agent Team을 사용하면 함께 작동하는 여러 Claude Code 인스턴스를 조율할 수 있다. 한 세션이 팀 리더 역할을 하여 작업을 조율하고, 작업을 할당하며, 결과를 종합한다. 팀원들은 독립적으로 작동하며, 각각 자신의 context window에서 작동하고, 서로 직접 통신한다.단일 세션 내에서 실행되고 메인 에이전트에만 보고할 수 있는 SubAgent와 달리, 리더를 거치지 않고 개별 팀원과 직접 상호작용할 수도 있다.Agent Team 사용 예시연구 및 검토: 여러 팀원이 다양한 측면을 동시에 조사한 후 서로의 발견을 공유하고 도전새로..

Star Rating 구현소요 시간: 2시간설계 및 고민한 부분에러 처리, 타입, 접근성을 신경 쓰는 것을 목표로 잡고 시작했습니다.가장 고민한 부분은 별을 어떻게 관리할 것인가였습니다.하나의 별 className을 조건에 따라 직접 조작할지, 아니면 채워진 별과 빈 별을 따로 관리할지 고민했습니다.마우스 이벤트를 별마다 주면, 다른 별로 커서를 옮길 때 별 사이 간격에서 이벤트가 풀릴 수 있다고 판단했습니다.반대로 리스트 전체에 이벤트를 주면 이벤트가 풀리진 않지만, 어느 별에 접근했는지 특정하기 어려울 것 같아 기각했습니다.또한 StarRating 컴포넌트는 maximum, current 두 prop을 받기 때문에 외부에서 setState를 받을 수 없어, 컴포넌트 내부에서 별도의 state로 관리하..

구조 고민처음에는 데이터가 어떻게 오는지 알려주지 않아서 고민 -> 어떻게 하면 데이터 타입에 구애받지 않고 유연하게 구현할 수 있을까?Tabs가 데이터를 prop으로 받는 구조로 만들면, prop의 형태가 일정 해야함예를 들어, 아래와 같이 Tabs의 규칙대로 리스트를 만들어서 전달 해줘야함const TABS_ITEMS = [ { menu: "HTML", description: "The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.", }, { menu: "CSS", description: ..

최근 더줄게 프로젝트를 리팩토링 하면서 API 속도 개선에 여러 방법들을 시도해봤다.프로젝트 내에서 API 요청을 보낼 때 Proxy 서버를 경유하고 요청을 하는 방식에서 직접 요청하는 방식으로 구조를 바꿨지만, 드라마틱한 변화는 없었다.이에 Network 탭에서 TTFB 지수를 살펴보고, 서버 응답을 기다리는 시간이 오래 걸린다는 점을 발견했다.TTFB란?TTFB(Time To First Byte) 는 클라이언트가 요청을 보낸 시점부터 서버로부터 첫 번째 바이트를 받는 시점까지의 시간이다. 이 수치 하나에 DNS 조회, TCP 연결, TLS 핸드셰이크, 서버 처리 시간, 다운로드이 전부 합산되어 있다.여기서 중요한 건 "Waiting" 구간이다. 이 구간이 길면 서버(DB 쿼리, 비즈니스 로직, 외부 ..