우연히 한 사이트를 발견했다. sinceyouarrived.world/taken.들어가 보니 나에 대한 온갖 정보가 나열되어 있었다.현재 위치, 접속 시간, 디바이스 정보, 배터리... 이런 정보는 어떻게 수집되는 걸까?브라우저는 어떻게 정보를 수집하나?HTTP 요청으로 전달되는 정보웹사이트에 접속하는 순간 브라우저는 서버에 요청을 보내고, 이 요청 안에는 다양한 정보가 포함되어 있다.IP 주소 — 요청 자체에 포함된다. 도시 수준의 위치와 ISP를 추정할 수 있다User-Agent — 브라우저 종류, 버전, OS 정보Accept-Language — 브라우저 언어 설정 (ex: ko-KR)타임존 — Asia/Seoul JavaScript로 읽을 수 있는 정보JavaScript가 실행되면 더 많은 것을 읽..

Skill이란?특정 작업에 대한 매뉴얼로, 반복적으로 수행해야하는 작업에 대한 프롬프트를 재사용할 수 있도록 만든 문서이다. 스킬의 작동 원리클로드는 대화 시작 시 모든 스킬의 Frontmatter(스킬의 메타데이터)를 읽는다.사용자의 요청과 관련된 스킬을 발견하면, 해당 스킬의 본문을 로딩(점진적 로딩)한다. 실제 작업이 필요할 때 동적으로 상세 지침과 관련 스크립트를 읽어들여 컨텍스트 윈도우를 효율적으로 관리한다. 스킬 정의스킬 저장 위치스킬 사용 범위에 따라 스킬 파일의 위치를 달리한다.모든 프로젝트~/.claude/skills/스킬 이름/SKILL.md특정 프로젝트./claude/skills/스킬 이름/SKILL.md플러그인/플러그인/skills/스킬 이름/SKILL.md플러그인 활성화 시 적용된..

AI가 단순히 답변을 생성하는 단계를 넘어, 직접 작업을 수행하는 에이전트로 발전했다. 그렇다면 AI는 외부 시스템을 어떻게 사용할까?다음과 같은 작업은 외부 시스템에서 실행되어야 한다.데이터베이스에서 사용자 조회API 호출웹 페이지 조작코드 수정 및 실행이 문제를 해결하기 위한 대표적인 두 가지 접근 방식이 MCP(Model Context Protocol)와 CLI(Command Line Interface)다.MCPMCP가 등장한 배경예를 들어 AI 모델이 3개이고, 연결해야 할 시스템이 5개라면 총 15개의 연결을 각각 구현해야 한다. 새로운 시스템이 하나 추가되면 모든 AI와 연결해야 하고, 새로운 AI가 추가되면 기존 모든 시스템과 다시 연결해야 한다. 이 과정에서 연결 코드가 계속 늘어나고, 구..

멱등성이란?멱등성(Idempotency)이란, 어떤 연산을 한 번 수행하든 여러 번 수행하든 결과가 동일한 속성을 뜻한다.수학적인 예시를 들면, 어떤 수에 1을 곱하는 연산은 몇 번을 반복해도 처음 결과가 그대로 유지되므로 멱등하다. 절대값 함수 역시 같은 입력에 대해 항상 같은 값을 반환하므로 멱등 함수에 해당한다.HTTP 메서드와 멱등성HTTP 메서드에도 멱등성 개념이 적용된다. 메서드 멱등성 GET✅HEAD✅OPTIONS✅PUT✅DELETE✅POST❌PATCH❌CONNECT❌GET, PUT, DELETE처럼 리소스를 조회하거나 대체·삭제하는 메서드는 멱등하다. 같은 요청을 반복해도 서버 상태가 달라지지 않는다.반면 POST와 PATCH는 비멱등 메서드다. POST는 요청할 때마다 새 리소스가 생성..

AbortController란비동기 작업을 취소할 수 있게 해주는 브라우저 내장 API다. 두 객체가 함께 동작한다.AbortController: 취소 명령을 내리는 쪽. abort() 메서드를 가진다.AbortSignal: 취소 신호를 전달받는 쪽. fetch나 addEventListener 같은 API에 넘겨준다.const controller = new AbortController();const signal = controller.signal;console.log(signal.aborted); // falsecontroller.abort();console.log(signal.aborted); // true fetch에 활용하기fetch의 두 번째 인자에 signal을 넘기면 된다.const contr..

Media Query의 한계기존 Media Query는 뷰포트(브라우저 창) 너비를 기준으로 스타일을 바꾼다.@media (min-width: 768px) { .card { display: grid; }} 문제는 같은 컴포넌트가 넓은 영역에도, 좁은 사이드바에도 동시에 쓰일 때다.┌─────────────────────────────────┐│ 사이드바(좁음) │ 메인(넓음) ││ [카드] │ [카드] │└─────────────────────────────────┘ 뷰포트 너비는 동일한데, 카드에게 주어진 공간은 다르다.Media Query로는 이 두 경우를 구분할 수 없다. "그럼 부모 클래스로 분기하면 되지 않나?".sidebar .card { display:..