프론트엔드 공부 블로그 프론트엔드 공부 블로그

AI 코딩 도구는 단순히 질문을 던지는 것만으로도 도움을 준다. 하지만 Claude Code는 조금 다르다.이 도구는 단순한 챗봇이 아니라프로젝트 환경에 맞게 설정할수록 더 강력해지는 “개발 에이전트”에 가깝다. 특히 다음 설정을 제대로 활용하면 생산성이 크게 올라간다.CLAUDE.md — 프로젝트 규칙 정의MCP (Model Context Protocol) — 외부 도구 연결Commands / Skills / Hooks — 반복 작업 자동화이 글에서는 Claude Code를 실무 개발에 맞게 설정하는 방법을 정리해보기로 했다. Claude Code의 핵심 개념Claude Code는 단순히 코드 생성만 하는 도구가 아니다.설정 파일과 플러그인을 통해 개발 환경 자체를 확장하는 구조다.대표적인 구성 요소는..

\n, \t 같은 이스케이프 시퀀스가 원하는 것과 다르게 처리돼서 당황한 적 있다면, 이 글이 도움 될 거다.1. String.raw()가 뭔가템플릿 리터럴 안에서 백슬래시(\)를 이스케이프 문자로 해석하지 않고, 문자 그대로 보존해주는 내장 태그 함수다.console.log(`C:\new\test`); // C: // ew est ← \n, \t가 이스케이프로 처리됨console.log(String.raw`C:\new\test`); // C:\new\test ← 그대로 나옴일반 템플릿 리터럴은 \n을 줄바꿈으로, \t를 탭으로 해석해버린다.String.raw를 태그로 붙이면 이 해석 과정을 건너뛰고 소스 코드에 적힌 그대로..

쿠키는 오래된 기술이지만, React SPA 환경에서는 생각보다 복잡한 문제를 만들어냅니다.로그인 직후 인증 상태가 안 잡힌다거나, 다른 탭에서 로그아웃했는데 현재 탭은 여전히 로그인 상태라거나, CORS 설정을 다 했는데 쿠키가 안 붙는다거나.이 글에서는 이런 상황들이 왜 발생하는지를 먼저 이해하고, 실무에서 쓸 수 있는 패턴들을 정리합니다.1. 쿠키 속성, 실무 관점으로 다시 읽기쿠키 속성은 MDN에서 다 볼 수 있지만, 실무에서 어떤 의미를 갖는지 짚고 넘어갑니다.HttpOnlySet-Cookie: token=abc123; HttpOnlyHttpOnly가 붙으면 JavaScript에서 document.cookie로 접근할 수 없습니다. 브라우저가 요청에 자동으로 포함시키기만 합니다.XSS 공격이 성..

localhost:3000 으로만 개발하고 있다면, 이 글을 읽고 나서 생각이 바뀔 수도 있어요. 1. 왜 가상호스트가 필요한가요?개발 초반에는 localhost:3000, 127.0.0.1:8080 같은 포트 기반 방식으로 충분하게 느껴져요. 그런데 프로젝트가 조금만 복잡해지면 생각지 못한 곳에서 문제가 생기기 시작해요.포트 기반 방식의 한계 쿠키 domain 분리가 안 돼요. localhost는 서브도메인을 지원하지 않아서, domain=.myapp.local 같은 방식으로 쿠키를 공유할 수가 없어요. CORS / SameSite 정책이 달라져요. 브라우저가 localhost를 특별하게 취급하는 경우가 있어서, 운영 환경에서 터지는 CORS 문제를 로컬에서 재현하기 어렵습니다. OAuth red..

같은 Claude Code를 쓰는데 생산성이 3배씩 차이 나는 이유는 ??엔지니어링 문화를 마크다운으로 배포하는 플러그인을 해부한다(이전에 작성했던 bkit 플러그인 글의 superpowers 버전입니다 !) 1. 왜 같은 AI를 써도 결과가 다를까 ??2026년 현재, 대부분의 개발자는 이미 Claude Code 같은 AI 에이전트를 활용하고 있다.함수 작성, 에러 수정, 리팩토링까지 — AI가 개발을 빠르게 만들어준다는 건 사실이다. 그런데 이상한 현상이 있다. 같은 AI를 쓰는데도 어떤 개발자는 생산성이 2~3배씩 올라가고, 어떤 개발자는 "그냥 조금 편해진 정도"에 머문다.💡 핵심 질문: 이 차이는 AI의 성능에서 오는가? 아니다. AI를 어떻게 사용하느냐에서 온다. 더 정확히는, AI에게 어..

결합도/응집도, 웹 서비스(SOAP/REST/WSDL/UDDI), EAI, UI 설계 원칙, SW 아키텍처 패턴, 제품 패키징(DRM/버전관리), 신기술 용어까지 한 번에 정리한다.1. 결합도 (Coupling) — 낮을수록 좋음모듈 간 상호 의존하는 정도. 낮을수록 독립성이 높아 좋은 설계.암기: 내공외제스자 (강 → 약)순위결합도설명1 (가장 강함)내용 (Content)한 모듈이 다른 모듈의 내부 기능·데이터를 직접 참조·수정2공통 (Common)전역 변수를 여러 모듈이 공유3외부 (External)외부에서 선언한 변수를 다른 모듈에서 참조4제어 (Control)제어 요소(flag, if 조건 등)를 다른 모듈에 전달5스탬프 (Stamp)배열·구조체 등 자료구조를 매개변수로 전달6 (가장 약함)자료 ..

디자인 패턴 완전 정리 — 23가지 핵심 개념디자인 패턴은 소프트웨어 설계에서 반복적으로 나타나는 문제를 해결하기 위한 재사용 가능한 설계 템플릿이다.GoF(Gang of Four)가 정리한 23가지 패턴이 표준으로, 생성(Creational) / 구조(Structural) / 행위(Behavioral) 3가지로 분류된다.분류 전체 구조디자인 패턴 (23개)├── 생성 패턴 (5개) — 객체를 어떻게 만들 것인가│ ├── Singleton│ ├── Factory Method│ ├── Abstract Factory│ ├── Builder│ └── Prototype│├── 구조 패턴 (7개) — 클래스/객체를 어떻게 조합할 것인가│ ├── Adapter│ ├── Bridge│ ├..

Part 1. 소프트웨어 개발 방법론소프트웨어를 어떤 절차와 방식으로 개발할 것인가를 정의한 것이 개발 방법론이다.프로젝트 규모, 요구사항 변화 빈도, 팀 구성에 따라 적합한 방법론이 달라진다.1. 소프트웨어 생명주기 모델 (SDLC)소프트웨어 개발의 전체 과정을 단계로 나눈 모델.폭포수 모델 (Waterfall)각 단계를 순차적으로 진행. 이전 단계로 돌아갈 수 없다는 전제.요구사항 분석 → 설계 → 구현 → 테스트 → 유지보수장점: 단계별 산출물 명확, 관리 용이단점: 요구사항 변경 대응 어려움, 완성 전까지 결과물 확인 불가적합: 요구사항이 명확하고 변경이 거의 없는 프로젝트프로토타이핑 모델 (Prototyping)핵심 기능의 시제품(프로토타입)을 먼저 만들어 사용자 피드백을 반영하며 개발.요구사항..