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

같은 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)핵심 기능의 시제품(프로토타입)을 먼저 만들어 사용자 피드백을 반영하며 개발.요구사항..

운영체제 핵심 개념과 계산 문제 완전 정복운영체제(OS) 파트는 개념 암기와 계산 문제가 동시에 출제되는 영역이다.특히 스케줄링 평균 대기시간, 페이지 교체 알고리즘의 페이지 부재 횟수 계산은 풀이 순서를 모르면 절대 맞출 수 없다.이 글은 개념 정리와 함께 계산 문제를 손으로 추적하는 방법을 집중적으로 다룬다.1. 운영체제 기본 목적암기: 처반사신목적영문설명처리 능력Throughput단위 시간당 처리하는 작업량 ↑반환 시간Turn Around Time작업 의뢰 ~ 처리 완료까지 시간 ↓사용 가능도Availability즉시 사용 가능한 정도 ↑신뢰도Reliability정확하게 처리하는 정도 ↑2. 프로세스 상태 전이프로세스는 아래 5가지 상태를 순환한다. 상태 전이 다이어그램 문제가 자주 출제.제출(Su..

툴팁, 드롭다운, 팝오버를 직접 구현해본 적 있다면 한 번쯤 이런 생각을 해봤을 것이다."왜 이게 이렇게 귀찮지?" "스크롤하면 위치 틀어지고" "뷰포트 밖으로 튀어나가고…"그래서 대부분은 MUI, Radix, Base UI 같은 라이브러리를 쓰게 된다. 근데 여기서 한 단계 더 들어가 보면, 이 라이브러리들이 공통으로 의존하는 핵심 엔진이 하나 있다. 바로 floating-ui다. floating-ui가 뭔가요?floating-ui는 툴팁, 팝오버, 드롭다운처럼 기준 요소(reference)에 붙어서 "떠 있는" UI(floating element)의위치 계산충돌 감지뷰포트 보정스크롤 / 리사이즈 대응을 담당하는 저수준 포지셔닝 라이브러리다. 👉 UI 컴포넌트를 만들어주는 게 아니라👉 UI를 "어디..

개발자가 알아야 할 보안 핵심 개념 완전 정리프론트엔드 개발자도 보안에서 자유롭지 않다.XSS는 클라이언트 사이드 공격이고, CSRF는 브라우저 쿠키를 악용하며, HTTPS 미적용은 직접 데이터를 노출시킨다.이 글은 보안의 기본 개념부터 공격 유형, 암호화 알고리즘, 방어 솔루션까지 핵심만 압축해서 정리했다.1. 정보보안의 3대 요소 (CIA)보안의 모든 개념은 이 세 가지를 기준으로 판단한다. 시험에서 "어떤 요소를 침해하는가?" 유형으로 자주 출제.요소영문설명침해 예시기밀성Confidentiality인가된 사용자만 정보에 접근 가능도청, 스니핑, 정보 유출무결성Integrity인가된 방법으로만 정보 수정 가능데이터 변조, 위·변조가용성Availability인가된 사용자가 필요할 때 항상 접근 가능DD..

브라우저 주소창에 URL을 입력하는 순간부터 서버의 응답이 화면에 그려지기까지, 그 사이에는 수십 개의 네트워크 규약이 맞물려 동작한다.이 글은 네트워크의 동작 원리를 계층 구조부터 프로토콜, IP 주소 체계까지 핵심만 압축해서 정리했다.1. OSI 7계층ISO가 정의한 네트워크 표준 모델. 통신을 7개의 계층으로 나눠 각 계층이 독립적으로 역할을 수행한다.암기법: 물데네전세표응 (아래 → 위)계층이름전송 단위 (PDU)핵심 역할장비주요 프로토콜1물리 (Physical)비트 (Bit)전기 신호로 변환해 전송허브, 리피터RS-232C2데이터 링크 (Data Link)프레임 (Frame)인접 노드 간 신뢰성 있는 전송, 오류/흐름 제어스위치, 브리지Ethernet, PPP, HDLC3네트워크 (Network..