FIF's 코딩팩토리

Java, Spring, Vue, React 로 개발하고 AI 에이전트를 실무에 붙여보면서 써본 기술을 정리하는 블로그.

182개의 글

전체 글

Back-End/Java(자바)

[Java] CompletableFuture 사용법 - API 여러 개 동시에 호출, allOf, 예외 처리, orTimeout 이 작업을 안 멈추는 이유

자바 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 + " 호출 시작"); ..

Back-End/Spring(스프링)

[Spring] 파일 업로드 확장자 위조 막기 - Apache Tika 로 MIME 타입 검사, SVG ㆍGIF 머리글 우회까지

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..

Front-End/JavaScript(자바스크립트)

[JS] fetch 요청 취소와 타임아웃 - AbortController, AbortSignal.timeout, 검색창 이전 요청 끊기

fetch 에는 timeout 옵션이 없어서 AbortController 로 요청을 취소하고, AbortSignal.timeout ㆍany 로 타임아웃을 거는 방법과 검색창 응답 꼬임을 막는 법에 대한 정리 axios 를 쓰다가 fetch 로 넘어오면 제일 먼저 찾는게 timeout 이다.fetch(url, { timeout: 5000 }) 이런건 없다. 넣어도 그냥 무시된다..fetch 는 서버가 응답을 안 주면 브라우저가 알아서 끊을때까지 하염없이 기다린다.그래서 요청을 끊는건 AbortController 로 한다.이전에 쓴 프레임워크 없이 퍼블리싱 HTML에 동작 붙이기 에서도 fetch 를 썼는데 거기선 취소까지는 안 다뤘다.예제는 Node 24 (v24.19.0) 에서 3초 늦게 응답하는 로컬..

AI

[AI] Cloudflare security-audit-skill 사용법 - Claude Code 보안 감사로 Spring JWT 취약점 찾고 직접 재현해보기

Cloudflare security-audit-skill 로 Spring Security JWT 예제에 Claude Code 보안 감사를 돌려보고, 나온 JWT 취약점 리드를 curl 로 직접 재현해본 정리 Cloudflare 가 공개한 Claude Code 용 보안 감사 스킬이다.코딩 에이전트한테 "이 코드 보안 감사해줘" 하면 정해진 6단계를 밟아서 취약점 후보를 찾고, 찾은 걸 다른 에이전트가 다시 검증해서 JSON 으로 낸다.https://github.com/cloudflare/security-audit-skillREADME 를 보면 Cloudflare 가 사내에서 쓰는 취약점 탐지 하네스가 이 스킬에서 시작했다고 한다.지금 사내 것은 훨씬 커졌고, 이 레포는 레포 하나를 감사하는 출발점 버전이..

AI

[AI] Hallmark 사용법 - Claude Code 가 만든 화면에서 AI 티 지우는 디자인 스킬, sloplint 가 잡는 것들

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일에..

Back-End/Spring(스프링)

[Spring] Spring Security JWT 로그인 구현 (2) - jti 발행 이력으로 동시 로그인 제한, 토큰 갱신, 로그아웃 무효화

Spring Security JWT 의 jti 를 DB 에 기록해서 동시 로그인 수 제한, 토큰 갱신, 로그아웃할때 토큰 무효화를 구현하는 방법에 대한 정리. JPA 예제 1편에서 남은 문제1편에서 RS256 으로 토큰을 발급하고, HttpOnly 쿠키에 담고, Filter 에서 검증하는 데까지 했다.그런데 그 상태로는 서버가 토큰을 거둬들일 방법이 없다.로그아웃해도 쿠키만 지워진다. 토큰 문자열을 복사해 둔 사람은 만료까지 계속 쓴다같은 계정으로 PC, 폰, 다른 PC.. 몇 군데서 로그인하든 다 살아있다만료 시간이 되면 무조건 다시 로그인해야 한다JWT 의 장점이 "서버가 아무것도 안 들고 있어도 된다" 인데, 이걸 해결하려면 결국 서버가 뭔가를 들고 있어야 한다.다 들고 있을 필요는 없고 토큰 I..

Back-End/Spring(스프링)

[Spring] Spring Security JWT 로그인 구현 (1) - RS256 토큰 발급, HttpOnly 쿠키, Filter 검증과 만료 처리

Spring Security 에서 세션 없이 JWT 로그인 구현하는 방법에 대한 정리. jjwt 0.12 RS256 토큰 발급, HttpOnly 쿠키, OncePerRequestFilter 검증, 만료 처리까지 왜 JWT 인가?세션 로그인은 서버가 로그인 정보를 들고 있다.서버가 한 대면 문제없는데, 두 대 이상이 되면 세션을 어디에 둘지부터 고민이 시작된다. (세션 클러스터링, Redis 세션..)JWT 는 로그인 정보를 토큰 안에 넣고 서명해서 클라이언트에게 준다.서버는 요청이 올 때마다 서명만 확인하면 된다.어느 서버로 요청이 가든 같은 키만 있으면 검증이 되니, 서버가 아무것도 들고 있을 필요가 없다. (STATELESS)이번 글은 Spring Boot 3.5.4, Spring Security ..

AI

[AI] Matt Pocock skills 사용법 - grill-with-docs 로 질문받고 tdd, code-review 까지 쿠폰 기능 하나 직접 만들어보기

스타 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..

AI

[AI] 깃허브 인기 Claude Code 스킬 정리 - 스타 많은 순으로 8개, 설치법과 직접 돌려본 결과

깃허브에서 스타가 많은 Claude Code 스킬 레포 8개(mattpocock, Karpathy, anthropics/skills, Caveman 등)의 설치 방법, 동작 방식, 직접 돌려본 결과 정리 요즘 깃허브 트렌딩을 보면 반은 Claude Code 스킬 레포다.."best claude code skills" 로 검색해도 비슷한 이름들이 계속 나온다.그래서 스타 수를 직접 찍어봤다.2026-10-25 기준, gh CLI 로 확인한 숫자다.obra/superpowers : 304,691mattpocock/skills : 302,614multica-ai/andrej-karpathy-skills : 223,430anthropics/skills : 183,551nextlevelbuilder/ui-ux-..

AI

[AI] oh-my-claudecode, oh-my-codex 사용법 - 하네스 엔지니어링을 대신 깔아주는 플러그인, 훅과 매직 키워드 뜯어보기

oh-my-claudecode(OMC)와 oh-my-codex(OMX)는 Claude Code ㆍCodex CLI 에 훅, 전문 에이전트, 매직 키워드를 한번에 깔아서 하네스 엔지니어링을 대신 해주는 플러그인이다. 설치와 동작 구조 정리 요즘 AI 코딩 쪽에서 "하네스 엔지니어링" 이라는 말이 자주 보인다.그리고 그 얘기가 나올때 같이 나오는 레포가 이 두 개다.https://github.com/Yeachan-Heo/oh-my-claudecodehttps://github.com/Yeachan-Heo/oh-my-codex둘 다 허예찬(Yeachan Heo)님이 만든 레포고 라이선스는 MIT.2026-10-23 기준 스타가 OMC 약 4만 개, OMX 약 3.4만 개다.한국어 README 도 있다.이 글은..

AI

[AI] Superpowers 사용법 - Claude Code 가 코드부터 짜지 않게 브레인스토밍, TDD, 디버깅 순서를 스킬로 넣는 플러그인

Superpowers 는 Claude Code 같은 코딩 에이전트에 브레인스토밍, 계획, TDD, 체계적 디버깅 순서를 스킬로 넣어주는 플러그인이다. 설치와 동작 방식, 스킬별 규칙, 직접 돌려본 예시 정리 REA 다음으로 깃허브에서 많이 보이는 AI 레포가 Superpowers 다.https://github.com/obra/superpowers2026-10-22 기준 스타가 약 30만 개, 포크가 2.7만 개다.Jesse Vincent 가 만들었고 지금은 Prime Radiant 라는 회사에서 같이 관리한다.라이선스는 MIT.REA 는 REA 사용법 글에 따로 정리했다.MCP 서버를 직접 만드는 건 MCP 서버 직접 만들기 에 있다.이번 건 MCP 가 아니라 스킬(Skill) 쪽이다.글이 좀 길다.앞..

AI

[AI] REA 로 Electron 앱 리버스 엔지니어링 - 직접 만든 Git 클라이언트를 app.asar 만으로 뜯어보고 소스랑 비교

REA 의 analyze-javascript-application 으로 Electron 앱 app.asar 를 정적 분석해서 IPC 채널, preload API, fuse 설정을 뽑고 실제 소스와 얼마나 맞는지 비교해 본 정리 지난 글에서 REA 를 문서만 보고 정리했다.REA 사용법 - AI 에이전트로 리버스 엔지니어링 하는 MCP 서버, 설치부터 분석 명령어까지이번엔 직접 돌려봤다.대상은 내가 만든 Electron 앱 GitFIF 다.GitKraken 무료 버전은 private 저장소를 열려고 하면 업그레이드를 하라고 한다.그래서 GitKraken 같은 그래프 UI 로 private 저장소도 그냥 열리는 Git 클라이언트를 직접 만든게 GitFIF 다.Electron + React + TypeScr..

티스토리툴바