🎯 한 줄 요약background(Service Worker) = 확장의 두뇌/지휘자 (항상 대기, 이벤트 처리, DOM 없음)offscreen = 두뇌가 못 하는 DOM 작업을 대신 해주는 손 (화면에 안 보이는 숨겨진 HTML 문서) 1. Offscreen이 뭔가?크롬의 Offscreen API, 즉 "화면에 보이지 않는 숨겨진 HTML 문서".왜 필요했나? (배경)Manifest V2: background page가 DOM을 가져서 오디오/클립보드/HTML 파싱 등을 직접 처리했음.Manifest V3: background가 Service Worker로 바뀜.Service Worker = "DOM이 없는 순수 JS 실행 환경" (document, window, 없음)필요할 때 깼다가 일 끝나면 ..

웹페이지를 만들던 감각으로 브라우저 익스텐션을 시작하면, 분명 똑같은 JavaScript인데 자꾸 이상한 벽에 부딪힌다. "분명 변수에 값을 넣었는데 사라져요", "페이지의 함수를 부르려는데 undefined래요", "외부 API를 호출했더니 CORS 에러가 나요" 같은 것들.이건 실력 문제가 아니라 익스텐션의 구조가 일반 웹페이지와 근본적으로 다르기 때문이다. 이 글에서는 그 구조를 프론트엔드 개발자의 눈높이에서 정리해본다. 🧩 1. 익스텐션은 "하나의 앱"이 아니다일반 웹페이지에서는 보통 JS 하나가 한 화면을 다 주무른다. 하지만 익스텐션은 역할별로 따로 도는 조각들의 모음이다.Content Script — 사용자가 보는 웹페이지 안에 침투해서 도는 코드. DOM 조작을 담당한다.Backgrou..

프론트엔드 개발을 하다 보면 어느 날 갑자기 이런 상황을 마주치게 된다.git clone git@github.com:foo/bar.git# Permission denied (publickey).분명히 어제까지 https://github.com/... 으로 잘만 쓰고 있었는데, 어느 순간 누군가 "SSH 키 등록해야지" 하는 말을 한다. 그러고 나서 ~/.ssh/id_rsa.pub 의 내용을 GitHub에 붙여넣으면 마법처럼 잘 동작한다.이 마법의 정체가 바로 SSH 다. 그리고 SSH를 제대로 이해하려면 그 조상격인 TELNET과 FTP부터 짚어봐야 한다. 모든 것의 시작 — 유닉스, 그리고 원격 접속웹 서버에서 가장 많이 쓰이는 운영체제는 리눅스다. 리눅스의 뿌리는 유닉스(UNIX) 인데, 이 유닉스..

들어가며Figma MCP를 Claude Code에 연결해서 UI를 구현해본 사람이라면 비슷한 경험이 있을 것이다. 큰 레이아웃은 제법 그럴듯하게 뽑히는데, 자세히 보면 padding이 2px씩 어긋나 있거나, gap이 미묘하게 다르거나, 그림자 값이 근사치로만 들어가 있다. 결국 Claude에게 "저기 간격 16px로 맞춰줘", "이 색 좀 원본이랑 비교해줘"를 여러 번 반복하게 된다.이 글은 왜 그런 일이 일어나는지, 그리고 한 번의 실행으로 이 문제를 줄이려면 어떻게 해야 하는지를 정리한 내용이다.1. Figma MCP가 Claude Code에 전달하는 것먼저 MCP 연결 시 Claude에게 실제로 어떤 정보가 전달되는지부터 짚고 넘어가자. 핵심 도구는 get_design_context이고, 다음이 ..

1. 크롬 익스텐션 기본 구조크롬 확장 프로그램은 여러 구성 요소로 이루어져 있다.my-extension/├── manifest.json # 확장 프로그램의 설정 파일 (필수)├── background.js # Service Worker (백그라운드 로직)├── content.js # Content Script (웹 페이지에 주입)├── popup.html # 팝업 UI├── popup.js # 팝업 로직├── options.html # 설정 페이지 (선택)├── options.js # 설정 로직└── icons/ # 아이콘 파일들 ├── icon16.png ..

Safari SSO 로그인 플로우Safari 브라우저에서 SSO 로그인 시 팝업 차단 문제를 우회하기 위한 전략 및 플로우 설명문제 배경Safari는 보안상의 이유로 비동기 작업(async/await) 중에 window.open()을 호출하면 팝업을 차단합니다. 이는 사용자 액션(클릭) 컨텍스트가 비동기 작업 중에 끊어지기 때문입니다.// ❌ Safari에서 차단됨async function handleLogin() { const response = await fetch('/api/auth') // 비동기 작업 window.open(response.url) // 컨텍스트 끊어짐 → 팝업 차단}해결 전략2단계 팝업 열기 전략:API 호출 전에 작은 팝업(10×10)을 미리 열어둠 → 사용자 액션 컨텍스트..

자바스크립트에서 접근할 수 없는 쿠키Set-Cookie: session=abc123; HttpOnly브라우저는 HTTP 요청에 자동으로 포함document.cookie로 읽을 수 없음JS에서 수정/삭제 불가왜 굳이 JS 접근을 막을까목적: XSS 공격 방어만약 공격자가 사이트에서 스크립트를 심으면→ 일반 쿠키면 세션 탈취 가능alert(document.cookie)하지만 Http-only 쿠키는document.cookie // ❌ session 쿠키 안 보임→ 세션 탈취 차단 Https와의 관계HttpOnly → JS 접근 차단Secure → Https에서만 전송NextAuth에서 HTTP-only 쿠키세션 쿠키 = Http-Onlyproduction 모드에서 Secure 자동 적용그래서JS에서 세션 토..

❓React forwardRef란 ?ref를 부모에서 자식으로 전달하기 위해 쓰이는 함수"부모가 자식 내부의 DOM이나 컴포넌트 인스턴스를 직접 제어할 수 있게 해주는 기능"function Input() { return }function App() { const inputRef = useRef(null) return }Input은 그냥 일반 함수 컴포넌트라서 ref를 바로 받을 수 없다.React는 ref를 기본적으로 DOM 요소에만 전달하기 때문이다. 예시) forwardRef로 감싸서 ref 전달 허용하기const Input = React.forwardRef>( (props, ref) => { return })function App() { const inputRef = u..

발생한 에러Type error: Route "src/app/api/auth/[...nextauth]/route.ts" does not match the required types of a Next.js Route.2025-10-24T09:38:12.105Z "authOptions" is not a valid Route export field.Next.js 13~15(App Router)에서는 app/api/**/route.ts 파일 안에서export 가능한 항목이 제한되어 있어요. route.ts 에서 허용되는 export 내용은export const GET = ...export const POST = ...export const PUT = ...export const DELETE = ...expo..

이 글을 쓰게 된 동기AWS Cloud practitioner 자격증을 준비하면서, 헷갈리는 AWS 서비스들이 많아 두고두고 보고 공부하기 위해지극히 개인적인 정리 노트를 작성할려고 한다. 컨테이너 서비스Amazon ECSElastic Container ServiceAWS 제공하는 완전관리형 오케스트레이션 서비스AWS에서 컨테이너를 쉽고 안정적으로 실행할 수 있게 해주는 서비스EC2 또는 Fargate 위에서 실행 가능Amazon EKSElastic Kubernetes Service완전관리형 쿠버네티스 서비스Amazon Fargate컨테이너를 실행하기 위한 서버리스 컴퓨팅 엔진EC2 인스턴스를 직접 만들거나 관리하지 않고도 컨테이너를 실행할 수 있게 해주는 서비스서버 없는 ECS/EKS 실행 방식ECS..

프롤로그Amazon Virtual Private Cloud(VPC)는 사용자가 정의한 가상 네트워크에서 AWS 리소스를 실행할 수 있는 논리적으로 격리된 AWS 클라우드 섹션을 프로비저닝할 수 있다. 이는 인터넷에 직접 접속할 수 있는 퍼블릭 리소스가 있고, 접속할 수 없는 프라이빗일 수 있다. 퍼블릭 또는 프라이빗 리소스 그룹을 서브넷이라고 하며, 서브넷은 VPC에 IP 주소의 범위다.📌 서브넷이란? 서브네트워크는 대규모 네트워크 내의 작은 네트워크다. 1장 VPC(Amazon Virtual Private Cloud)수많은 EC2 인스턴스가 있는데 이 모든 리소스가 경계가 없으면 네트워크 트래픽 제한 없이 리소스 간에 흐를 수 있다. → AWS 리소스에 경계를 설정하는 데 사용할 수 있는 네트워킹 서..

서론 크롬이 인터넷 익스플로러보다도 성능이 좋은데 이유는 V8엔진이라고 하는 자바스크립트 엔진 때문이다. 자바스크립트는 프로그래밍 언어인데 이를 사람이 문법을 사용하면 그 문법을 컴퓨터가 해석해서 동작한다. 하지만 실제 이 언어를 해석해서 컴퓨터에 전달하기 위해서는 엔진이라는게 필요하다. 예를 들어 자바스크립트를 써서 인터넷 익스플로러에서는 차크라라는 자바스크립트 엔진이 내장되어 있고 파이어폭스에서는 스파이더 몽키라는 엔진이 내장되어 있다. 그리고 크롬 브라우저에서는 V8엔진이라는 자바스크립트 엔진이 내장되어 있다. V8엔진은 성능이 빠른데 이는 벤치마크 툴을 통해서 숫자로 정량적으로 비교할 수 있는데, 크롬은 그럴 필요 없이 맨눈으로만 봐도 빠르다고 느낄 정도이다. 이게 바로 크롬과 익스플로러의 차이..