Sangin Dev

브라우저 보안 강화 실습: HTTPS/TLS, HSTS, CORS이번에는 실제 브라우저로 요청을 보내고, 개발자 도구에서 보안 헤더와 차단 동작을 직접 확인해보는 걸 목표로 실습을 진행했다. 다룬 주제는 HTTPS/TLS, HSTS, CORS 세 가지이고, 먼저 개념을 정리한 뒤 실습 결과를 순서대로 기록해둔다.개념 정리TLS와 HTTPSTLS는 네트워크에서 데이터를 안전하게 주고받기 위한 암호화 프로토콜이다. TLS로 암호화해서 통신하면 중간에 데이터를 탈취당하더라도 내용을 알아볼 수 없기 때문에, 도청이나 변조 같은 공격으로부터 데이터를 보호할 수 있다. TLS는 SSL의 취약점을 보완해서 나온 프로토콜이고, SSL은 이제 사용이 중단되어 지금은 사실상 TLS만 쓴다.그리고 HTTP에 TLS를 적용한..

스크롤이 버벅이는 랜딩 페이지, 원인을 하나씩 분석해 보기문제 상황우리 팀은 브랜드 랜딩 페이지를 새로 만들고 있습니다. 스크롤에 따라 이미지가 확대/축소되고, 텍스트가 페이드인/슬라이드되고, 배경색이 서서히 바뀌는 등 화려한 스크롤 연동 애니메이션이 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: ..