개발
Claude 모델 고르기 — 똑똑한 것부터 시작하라
1. 이 글은 무엇에 관한 글인가? 한 줄로 요약하면 이렇습니다. "싼 모델부터 써보고 부족하면 올린다"는 순서가 뒤집혔습니다. 지금 권장되는 순서는 가장 똑똑한 모델로 시작해서, effort(노력 수준)를 낮춰가며 비용을 맞추는 것 입니다. 어제 글(덜어내는 컨텍스트 엔지니어링)에서…
태그
태그
71개의 글관심 주제로 글 모아보기
개발
Claude 5 세대의 컨텍스트 엔지니어링 새 규칙
1. 이 글은 무엇에 관한 글인가? 한 줄로 요약하면 이렇습니다. "AI에게 규칙을 더 많이 적어줄수록 잘한다"는 상식이 뒤집혔습니다. Anthropic은 Claude Code의 시스템 프롬프트에서 80% 이상을 삭제 했고, 코딩 평가 점수는 떨어지지 않았습니다. 지난 글들에서 저는…
개발
TypeScript 7.0
TypeScript 7.0 출시: Go로 다시 쓴 네이티브 컴파일러 TypeScript 7.0이 공식 출시되었습니다. 이번 메이저 버전의 핵심은 컴파일러를 Go 언어로 완전히 다시 이식(native port) 한 것입니다. 10년 넘게 JavaScript로 작성되어 온 tsc 를…
개발
제품 스펙 하네스 (product-spec-harness)
소개 product-spec-harness 는 기획자(PM)가 요구·문제 또는 기획안 초안으로부터 제품 기획문서(PRD)와 사용자 스토리를 단계별로 작성·검증하는 도메인 무관 인터랙티브 멀티 에이전트 하네스다. 개발 착수 전 단계의 제품 기획 산출물(문제 정의 → 기획 완성도…
개발
자가치유 하네스 엔지니어링 (meta-harness)
1. 이 글은 무엇에 관한 글인가? 한 줄로 요약하면 이렇습니다. AI가 같은 실수를 반복할 때, 그 실수를 막도록 AI 설정 파일을 스스로 고쳐주는 도구 이야기입니다. 단, 실제로 파일을 바꾸기 전엔 항상 사람에게 "이렇게 고쳐도 될까요?"라고 물어봅니다. 먼저, "하네스"가 뭐죠?…
개발
Frontend 하네스 엔지니어링
1. 하네스 엔지니어링이란? AI 모델을 둘러싼 실행 환경 전체 (도구, 피드백 루프, 안전장치, 승인 게이트)를 설계하여, 신뢰할 수 있는 소프트웨어 로 만들어 가는 기술이다. AI 엔지니어링의 진화 (프롬프트 vs 컨텍스트 vs 하네스) AI를 다루는 방식은 프롬프트 엔지니어링 →…
개발
Claude Code 플러그인 마켓플레이스 구축
개요 본 문서는 Claude Code 플러그인 마켓플레이스의 등록, 설치 및 사용 방법을 기술합니다. seungah-claude-plugins 마켓플레이스를 통해 플러그인을 공유하고 있습니다. 현재 다음 4개의 팀별 플러그인으로 구성되어 있습니다. 마켓플레이스 버전: 1.4.0 ·…
개발
LLM Wiki: RAG를 넘어 지식을 미리 정리해 두는 위키 패턴
개요 LLM Wiki는 기획서, 스펙, 회의록 같은 원본 자료를 모아 두면 Claude가 그 내용을 읽고 정리해 하나의 한국어 위키로 만들어 두는 저장소입니다. 사람은 자료를 모으고 질문하는 역할을 맡고, 위키를 실제로 작성하고 관리하는 일은 Claude가 합니다. Andrej…
개발
시맨틱(의미 기반) + 키워드 하이브리드 검색 RAG 구축
0. 배경 특정 비즈니스 로직(결제, 인증, 캠페인 등)이 프론트엔드·백엔드 서비스 등 여러 레포에 걸쳐 구현되어 있어, 관련 코드를 찾기 위해 각 레포를 개별적으로 검색해야 하는 비효율이 발생하고 있다. 기존 GitHub 검색은 키워드 기반으로만 동작하여 "결제 처리 로직",…
개발
figma mcp link
개발 환경 - VSCode 버전: 1.99 이상 - Copilot 계정 필요 copilot 연동방법 Figma API access token 발급 1단계: 전제 조건 - Node.js (v16.0 이상) - npm (v7.0 이상) 또는 pnpm (v8.0 이상) - Figma 계정:…
개발
FE 성능개선 - gif to mp4 변환
개요 리소스 중에 용량이 큰 gif 포멧을 효율적인 압축 방식을 제공하는 mp4 비디오 포멧으로 변경해서 리소스 수신 용량을 줄이고 로딩 속도를 개선하기 위해서 해당 기능을 서비스에 적용을 위한 성능개선 작업을 진행하였습니다. 요구사항 분석 - 변환 형식 - img > gif →…
개발
CRA To Vite Migration
Vite를 사용해야 하는 이유 기존 모듈 번들러 문제점 - 브라우저에서 Native ESM 방식을 지원하기 전까지는 Javascript 모듈화를 브라우저 레벨에서 진행할 수 없었고, 해당 소스 모듈을 브라우저에서 지원하기 위해서 require/IIFE/import,expor를 통한…
개발
Nextjs(v14)
설치 요약 - 지원하는 브라우저에서 Internet Explorer를 삭제하고, 최신 브라우저를 지원하는걸로 변경되었습니다. - Chrome 64+ - Edge 79+ - Firefox 67+ - Opera 51+ - Safari 12+ - 최소 Node 버전이 12.22.0 →…
개발
개발 생산성 & 빌드 성능 개선
개요 개발을 진행하면서 개발 생산성 & 빌드 성능 개선했던 사례들을 공유하려고 합니다. Lint 속도 개선 husky를 통해서 Lint 검사에 대한 속도 개선을 위해서 eslint, prettier cache 적용하였습니다. cache flag 적용 시 이전에 검사했던 파일이나 항목을…
개발
PNPM
도입 배경 NPM, Yarn Classic(1.0) 패키지 매니저 문제점 유령 의존성 - yarn classic(1.0), npm(v3 ) 둘 다 중복 패키지에 대한 용량을 효율적으로 관리하기 위해서 호이스팅 & 병합을 기법을 사용해서 평탄화 작업 진행(놀랍게도 npm v2 까지는…
개발
미사용 의존성 제거
npm-check Installization 일괄 업데이트 yarn autoclean yarn autoclean 설명 - 패키지 종속성에서 불필요한 파일을 정리하고 제거(빌드와 상관없는 파일) yarn autoclean 명령어 autoclean 활성화 조건 - yarn install…
개발
React v18 migration
React v16 to v18 마이그레이션 가이드(with Best Practice Code) Updates to Client Rendering APIs Migration The new root API also enables the new concurrent renderer,…
개발
next14 migration
Update React Installation 'Component' cannot be used as a JSX component. 에러가 날 경우 @types/react@latest 최신 버전을 올릴 경우 nextJS Component에 대한 타입 추가가 되지 않아서 나온 이슈여서…
개발
CORS(교차 출처 리소스 공유)
개요 CORS(교차 출처 리소스 공유)는 다른 출처(origin:프로토콜, 호스트, 포트)출처의 자원을 접근할 수 있도록 알려주는 것을 것을 뜻한다. 다른 출처의 리소스를 불러올 때 올바를 CORS 헤더를 포함하지 않는다면 접근이 제한됨을 뜻합니다. CORS 사용 사례 -…
개발
react-hook-form inside code
Form 객체 생성 useForm에서 데이터를 최초 세팅 후 defaultValues 세팅 이후에 다시 변경 시 변경이 안되는 경우가 있는데 아래 코드 처럼 useRef 최초 1회 생성 시에만 defaultValues를 세팅함으로 변경이 안되는거 였다. 해당 이슈를 해결을 위해서는…
개발
Gatsby(v5)
주요 기능 Slice API 공통 구성요소를 한번만 빌드하게 해서 빌드 성능을 높일 수 있게 되었다. 즉, Slice로 분리된 컴포넌트가 변경 시 한번만 빌드 후에 다른 구성요소에 합쳐지게 됨으로 이전처럼 전체를 빌드할 필요가 없습니다. Partial Hydration (Beta)…
개발
리액트 상태관리 정리
전역 상태 관리 라이브러리 등장 배경 리액트는 처음 출시될 때 Model View Controller 중 View만 담당하는 라이브러리로 발표되었기 때문에 상태를 구성하거나 관리하는 방안이 필요해졌고, 초창기에는 상태와 비즈니스 로직을 Container/Presenter에 몰아넣고…
개발
Nextjs(v13)
설치 요약 - 지원하는 브라우저에서 Internet Explorer를 삭제하고, 최신 브라우저를 지원하는걸로 변경되었습니다. - Chrome 64+ - Edge 79+ - Firefox 67+ - Opera 51+ - Safari 12+ - 최소 Node 버전이 12.22.0 →…
개발
react-hook-form v7
설치 react-hook-form v5 → v7 변경사항 useForm config 파일명에 prefix에 validation 삭제 errors 객체가 formState 객체 속성으로 변경 shouldUnregister 기본 값이 false → true로 수정…
개발
Tree Shaking
개요 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거 하는 최적화 작업 - Webpack 4버전 이상을 사용하는 경우에는 ES6 모듈을 대상으로 기본적인 트리쉐이킹을 제공한다.( import , export 를 사용하는 모듈) - Create React App을 통해 만든…
개발
ecmascript
ES2024(ES15) ES2024에 추가된 기능들 ECMAScript® 2024 Language Specification ECMAScript 2024, the 15th edition, added facilities for resizing and transferring…
개발
react-query(v5)
v5 변경사항 Install react-query → @tanstack/react-query로 변경 Requirements New Features - Simplified optimistic updates - 낙관적 UI 업데이트에 필요한 variables 사용방법이…
개발
react-query(v4)
Install react-quey → @tanstack/react-query로 변경 지원범위 - typescript - TypeScript v4.1 or greater - Supported Browsers - v4부터 React Query는 최신 브라우저에 최적화 - Support…
개발
Playwright
들어가기 전에.. (vs. Cypress) Cypress에서 Playwright로 왜 넘어갔나?? Cypress 개발 시 어려움 점 - 테스트 환경 로딩, 테스트 수행 시 너무 많은 시간이 소요한다는 느낌을 받았습니다. - 테스트 환경에서 엘리먼트를 Cypress 선택 시 못 찾는…
개발
FE 개발 프로세스
사전 작업 1. 기획 및 디자인 검토 - 와이어프레임 및 디자인 시안 검토 - 디자인 시안에 대한 공통 컴포넌트화 설계 및 공유 - 마케팅 수집 체크 2. API 검토 및 피드백 - API 인터페이스 검토 및 FE 피드백 전달 -…
개발
react-query
개요 - React를 위한 Data Synchronization Library - React application에서 서버 상태 를 fetching, caching, synchronizing, updating 작업을 쉽게 만들어 줍니다. 서버 상태 - 원격에 위치한 공간에 저장되며…
개발
redux-toolkit
리덕스 툴킷이란? - redux toolkit 라이브러리는 리덕스팀의 3가지 걱정을 해결하기 위해 등장하였다. 1. 리덕스 스토어를 구성하는 것은 너무 복잡하다. 2. 리덕스가 유용해지려면 많은 패키지들을 추가로 설치해야한다. 3. 리덕스는 너무 많은 보일러플레이트 코드를 요구한다.…
개발
react-router-v6
v6 React Router v6 정식 릴리즈 2021년 11월 4일 v6.0.0 beta → release 출시되었습니다. React v16.8 이상으로 업그레이드 단, React ≥ 15 이상이면 react router v5 이상을 호환하고 있어서 v6로 업그레이드 하지 않더라도…
개발
redux-saga
redux-saga란? 리액트/리덕스 애플리케이션의 side effect를 더 쉽고 좋게 만드는 것을 목적으로 하는 미들웨어 라이브러리 설치 typesafe-actions 설치 (v5) → 선택 redux-actions와 같은 Typescript 용 라이브러리입니다. 액션 생성 함수와…
개발
typescript
타입스크립트는 왜 사용해야하는 걸까?? Typescript는 코드를 보다 읽기 쉽게 만든다. - 변수,리턴,인터페이스 등등 타입을 명시함으로써 코드에 대한 이해가 쉬워진다. Typescript는 개발자의 실수를 줄여준다. - 코드 작성 중/컴파일 단계에서 에러 발견이 쉽다. - 에러에…
개발
webassembly
웹어셈블리 나온 이유 구글의 NaCI(Native Client), 모질라의 asm.js(JavaScript 서브셋) 등 네이티브 머신 코드를 웹으로 가져오기 위한, 그리고 빠르게 실행하기 위한 시도들은 결과적으로 웹어셈블리(이하 'wasm'으로 표기)로 귀결되면서 개발이 시작되었다.…
개발
Front-End Performance
javascript 메모리 누수 의도치 않은 전역 변수 - 전역변수는 메모리를 해제할 수가 없다.(null 처리 또는 재할당 되지 않는 경우) 잊혀진 타이머 또는 콜백 DOM 외부에서의 참조 프론트엔드 성능 최적화 렌더링 최적화 - Reflow, Repaint 줄이기 지금까지 웹…
개발
Windows API
windows programming - 윈도우즈의 장점 1. 그래픽 기반의 운영체제 - 화면 처리를 문자 단위가 아닌 디지털 표현의 최소 단위인 픽셀로 처리해서 화면 처리 가능 2. 멀티 태스킹이 가능하다. - 한번에 여러가지 일을 수행함. 3. 장치에 영향을 받지 않는다. -…
