FIF's 코딩팩토리
Java, Spring, Vue, React 로 개발하고 AI 에이전트를 실무에 붙여보면서 써본 기술을 정리하는 블로그.
186개의 글
Claude Code 에 리버스 엔지니어링 도구 REA 를 MCP 로 연결하는 법과, 윈도우 바탕화면 달력 앱의 구조를 조사한 뒤 비슷한 달력을 C# 으로 직접 만들어 본 과정에 대한 정리 이번에 해본 것REA 소개는 REA 사용법, 터미널에서 직접 돌린 실습은 REA 로 Electron 앱 리버스 엔지니어링 에 썼다.이번엔 터미널 명령이 아니라 Claude Code 한테 말로 시켜봤다.대상은 내 PC 에 깔려 있는 윈도우 바탕화면 달력 앱이다. 바탕화면에 달력이 붙어 있고 날짜마다 메모를 쓰는 앱인데, 이걸 어떻게 만들었나 보고 비슷한걸 직접 만들어봤다.앱 이름은 일부러 안 적었다. 남의 프로그램이라 파일 이름과 import 같은 구조 정보만 봤고, 디컴파일이나 코드 복사는 하지 않았다.약관에 따라 ..
Nous Research 의 오픈소스 AI 에이전트 Hermes Agent 설치법과, 대화 중에 스스로 메모리와 스킬을 만들고 정리하는 학습 루프가 어떻게 돌아가는지에 대한 정리 Hermes Agent 란?요즘 깃허브에서 스타가 제일 많은 AI 에이전트 레포다.2026-10-30 에 GitHub API 로 보면 NousResearch/hermes-agent 가 스타 258,565 개, 최신 릴리스는 v0.22.5 (10-23) 다. 라이선스는 MIT.Claude Code 나 Codex 처럼 터미널에서 대화하면서 파일 읽고, 명령 돌리고, 코드 고치는 에이전트인데 몇 가지가 다르다.모델을 안 가린다. OpenRouter, OpenAI, Anthropic, 직접 띄운 로컬 모델 등 hermes model ..
Vue3 Composition API 에서 ref 와 reactive 가 어떻게 다른지, reactive 를 구조분해하거나 통째로 바꾸면 화면이 안 바뀌는 이유와 toRefs 로 고치는 법에 대한 정리 왜 헷갈리나Vue3 로 넘어오면 setup 안에서 값을 만들때 ref 와 reactive 둘 중에 하나를 고른다.둘 다 "값이 바뀌면 화면이 다시 그려지는" 반응형 값을 만든다.그런데 reactive 로 만든 값을 구조분해하거나, 새 객체로 바꿔 끼우면 화면이 안 바뀐다.에러도 안 나서 더 찾기 어렵다..Vue2 의 data() 에 익숙하면 특히 많이 밟는다. Vue 자체 소개는 예전에 쓴 Vue.js에 관하여 에 있다.아래 예제는 모두 vue 3.5.44 를 node 에서 그대로 돌린 결과다.반응성(r..
AI 코딩 도구가 코드를 다 짜주는 요즘, 개발자 커리어 고민 7가지(직무, 정체성, 스킬, 이직, 배움, 역할, AI 블루)와 오늘 해볼 수 있는 작은 실행을 정리한 글. "내 연차와 경험은 이제 쓸모없어진 걸까?"요즘 개발자들 사이에서 자주 나오는 질문이다.Claude Code, Codex 같은 Agent 코딩 도구가 나오고 나서 더 그렇다.이 블로그에서도 Superpowers, Claude Code 스킬 같은 AI 도구 글을 계속 쓰고 있는데..도구 사용법 말고, 그럼 개발자는 뭘 해야 하나에 대한 고민을 한번 모아봤다.먼저 세 줄로 줄이면 이렇다.개발자가 사라지는 게 아니라, 기대하는 역할과 실력의 기준이 바뀌고 있다코드를 짜는 것보다 문제 정의 -> 판단 -> 검증 -> 운영이 중요해졌다그동안..
자바 CompletableFuture 로 API 여러 개를 동시에 호출해 allOf 로 합치고, 예외 처리와 orTimeout 타임아웃, 스레드 풀 잡는 법에 대한 정리 상품 상세 화면 하나 그리는데 가격, 재고, 리뷰 API 를 각각 불러야 하는 경우가 있다.순서대로 부르면 세 개 시간이 다 더해진다.서로 기다릴 이유가 없는 호출이면 동시에 보내고 다 오면 합치면 된다. 그게 CompletableFuture 다.예제는 JDK 17 (17.0.20) 에서 Thread.sleep 으로 가짜 API 를 만들어 놓고 돌렸다.가격 300ms, 재고 500ms, 리뷰 200ms 걸리게 했다.static String call(String name, long ms) { log(name + " 호출 시작"); ..
Spring 파일 업로드에서 확장자 ㆍContent-Type 대신 Apache Tika 로 파일 앞부분을 읽어 MIME 타입을 검사하고, 확장자만 바꾼 exe ㆍjsp 를 막는 방법에 대한 정리 업로드 검사를 확장자로만 하면 exe 파일 이름을 evil.jpg 로 바꾸기만 해도 통과한다.MultipartFile.getContentType() 도 마찬가지다.이 값은 서버가 알아낸게 아니라 클라이언트가 요청에 적어 보낸 값이다. 브라우저든 curl 이든 보통 확장자를 보고 붙인다.그래서 파일 형식은 파일 내용을 직접 읽어서 판별해야 한다.대부분의 파일은 맨 앞 몇 바이트에 형식 표시(매직 넘버)가 있다.real.png : 89 50 4e 47 0d 0a 1a 0a (.PNG)real.pdf : 25..
fetch 에는 timeout 옵션이 없어서 AbortController 로 요청을 취소하고, AbortSignal.timeout ㆍany 로 타임아웃을 거는 방법과 검색창 응답 꼬임을 막는 법에 대한 정리 axios 를 쓰다가 fetch 로 넘어오면 제일 먼저 찾는게 timeout 이다.fetch(url, { timeout: 5000 }) 이런건 없다. 넣어도 그냥 무시된다..fetch 는 서버가 응답을 안 주면 브라우저가 알아서 끊을때까지 하염없이 기다린다.그래서 요청을 끊는건 AbortController 로 한다.이전에 쓴 프레임워크 없이 퍼블리싱 HTML에 동작 붙이기 에서도 fetch 를 썼는데 거기선 취소까지는 안 다뤘다.예제는 Node 24 (v24.19.0) 에서 3초 늦게 응답하는 로컬..
Cloudflare security-audit-skill 로 Spring Security JWT 예제에 Claude Code 보안 감사를 돌려보고, 나온 JWT 취약점 리드를 curl 로 직접 재현해본 정리 Cloudflare 가 공개한 Claude Code 용 보안 감사 스킬이다.코딩 에이전트한테 "이 코드 보안 감사해줘" 하면 정해진 6단계를 밟아서 취약점 후보를 찾고, 찾은 걸 다른 에이전트가 다시 검증해서 JSON 으로 낸다.https://github.com/cloudflare/security-audit-skillREADME 를 보면 Cloudflare 가 사내에서 쓰는 취약점 탐지 하네스가 이 스킬에서 시작했다고 한다.지금 사내 것은 훨씬 커졌고, 이 레포는 레포 하나를 감사하는 출발점 버전이..
Hallmark 는 Claude Code, Codex, Cursor 가 만드는 웹 화면이 AI 가 찍어낸 티가 안 나게 막아주는 디자인 스킬이다. 설치, 동작 순서, sloplint 검사 규칙 정리 AI 한테 랜딩 페이지 하나 만들어 달라고 하면 거의 비슷한게 나온다.보라색에서 파란색으로 넘어가는 그라데이션, 제목 위에 작은 대문자 한 줄, 아이콘 박힌 카드 세 개, 맨 아래 이메일 구독..한번 보면 "아 AI 가 만들었네" 가 바로 보인다.이걸 막겠다고 나온 스킬이 Hallmark 다.https://github.com/Nutlope/hallmarkTogether AI 에서 만들었고 라이선스는 MIT.2026-10-27 오늘 깃허브 트렌딩 1위다. 하루에 스타가 2,200개 넘게 붙었다.10월 21일에..
Spring Security JWT 의 jti 를 DB 에 기록해서 동시 로그인 수 제한, 토큰 갱신, 로그아웃할때 토큰 무효화를 구현하는 방법에 대한 정리. JPA 예제 1편에서 남은 문제1편에서 RS256 으로 토큰을 발급하고, HttpOnly 쿠키에 담고, Filter 에서 검증하는 데까지 했다.그런데 그 상태로는 서버가 토큰을 거둬들일 방법이 없다.로그아웃해도 쿠키만 지워진다. 토큰 문자열을 복사해 둔 사람은 만료까지 계속 쓴다같은 계정으로 PC, 폰, 다른 PC.. 몇 군데서 로그인하든 다 살아있다만료 시간이 되면 무조건 다시 로그인해야 한다JWT 의 장점이 "서버가 아무것도 안 들고 있어도 된다" 인데, 이걸 해결하려면 결국 서버가 뭔가를 들고 있어야 한다.다 들고 있을 필요는 없고 토큰 I..
Spring Security 에서 세션 없이 JWT 로그인 구현하는 방법에 대한 정리. jjwt 0.12 RS256 토큰 발급, HttpOnly 쿠키, OncePerRequestFilter 검증, 만료 처리까지 왜 JWT 인가?세션 로그인은 서버가 로그인 정보를 들고 있다.서버가 한 대면 문제없는데, 두 대 이상이 되면 세션을 어디에 둘지부터 고민이 시작된다. (세션 클러스터링, Redis 세션..)JWT 는 로그인 정보를 토큰 안에 넣고 서명해서 클라이언트에게 준다.서버는 요청이 올 때마다 서명만 확인하면 된다.어느 서버로 요청이 가든 같은 키만 있으면 검증이 되니, 서버가 아무것도 들고 있을 필요가 없다. (STATELESS)이번 글은 Spring Boot 3.5.4, Spring Security ..
스타 30만 개 Claude Code 스킬 mattpocock/skills 의 설치 방법과 grill-with-docs, tdd, code-review 가 어떻게 도는지 쿠폰 기능 하나를 만들면서 직접 돌려본 정리 깃허브 인기 Claude Code 스킬 정리 에서 8개를 짧게 훑었는데, 이번엔 그중 하나만 깊게 판다.고른 건 mattpocock/skills 다.https://github.com/mattpocock/skills2026-10-25 기준 스타 302,624개, 포크 25,451개.1등인 Superpowers 랑 거의 붙어 있다.Superpowers 는 Superpowers 사용법 에 따로 정리했다.TypeScript 강의로 유명한 Matt Pocock 이 매일 쓰는 스킬을 모은 레포다.REA..
광고 차단 프로그램이 켜져 있는 것 같아요.
이 블로그는 광고 수익으로 꾸려가고 있습니다. 괜찮으시다면 이 블로그만 광고 차단 예외로 추가해 주시면 큰 힘이 됩니다. 감사합니다 :)
