의류 검수 AI 시스템을 설계하면서 깨달은 Object Detection 모델 선택의 기준들어가며"객체 탐지? 그럼 YOLO지."솔직히 이게 그동안 내 접근 방식이었다. 차량 번호판 인식 프로젝트에서 YOLO를 써본 이후로, Object Detection이 필요하면 자연스럽게 YOLO를 꺼내 들었다. 빠르고, 정확하고, 레퍼런스도 많으니까.그런데 최근 의류 품질 검수 AI 시스템을 설계하면서 생각이 바뀌었다. 이 글에서는 왜 YOLO 대신 RT-DETR을 선택했는지, 그 과정에서 알게 된 두 모델의 근본적인 차이를 정리해보려 한다.과거 경험: 번호판 인식에서의 YOLO이전에 차량 번호판 인식 시스템을 개발한 적이 있다. 당시 YOLO를 선택했고, 결과는 대만족이었다.번호판 인식은 "쉬운" 문제다번호판 검..

목차들어가며YOLO26을 검토하게 된 계기왜 YOLO26인가?YOLO26이란?핵심 개선사항지원 태스크성능 벤치마크사용 방법YOLOE-26: 개방형 어휘 지원이전 버전과의 비교실무 적용 가이드실제 도입 사례: 중고 의류 자동 검수 시스템마치며1. 들어가며1.1 YOLO26을 검토하게 된 계기최근 중고 의류 자동 검수 AI 시스템을 설계하면서 객체 탐지 모델을 검토하던 중이었습니다. 반품된 중고 의류의 결함(오염, 손상, 변색 등)을 자동으로 탐지하고, S/A/B/F 등급을 판정하는 시스템인데요. 처리 속도 목표가 의류 1벌당 1초 이내였고, 향후 물류센터 현장의 엣지 디바이스 배포도 고려해야 했습니다.마침 2025년 1월 14일, Ultralytics에서 YOLO 시리즈의 최신 버전인 YOLO26을 공식 ..

들어가며블로그에 광고 배너를 달면서 이런 요구사항이 생겼습니다.요구사항:- 좌측/우측 배너 각각 클릭 수 추적- 일별, 시간대별 통계 확인- 관리자 대시보드에서 시각화- 서버리스 환경 (Next.js on Vercel)처음엔 간단할 줄 알았습니다. "그냥 데이터베이스에 저장하면 되지 않나?" 하고요.// ❌ 순진한 첫 시도async function trackClick(bannerId: string) { await prisma.bannerClick.create({ data: { bannerId, timestamp: new Date() } });}문제:매 클릭마다 DB 쓰기 → 비용 증가통계 조회 시 전체 레코드 스캔 → 느림시간대별 집계를 매번 계산 → 비효율그래서 선택한 것이 Vercel KV ..

문제 출처문제 보러가기문제 설명네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다.영단어 변환 예시:1478 → "one4seveneight"234567 → "23four5six7"10203 → "1zerotwozero3"이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요.숫자-영단어 대응표:숫자영단어0zero1one2two3three4four5five6six7seven8eight9nine제한사항1 ≤ s의 길이 ≤ 50s가 "zero" 또는 "0"으로 시..

들어가며"자료구조? 그거 학교에서나 배우는 거 아니야?"실무에서 코딩만 하면 되지, 왜 자료구조를 알아야 하는지 의문을 가진 적 있으신가요? 저도 처음에는 그랬습니다. 하지만 자료구조는 단순히 이론이 아닙니다. 우리가 매일 작성하는 코드의 효율성과 직결되는 실전 개념입니다.컴퓨터의 메모리는 무한해 보이지만, 사실은 매우 한정적입니다. 이 한정된 공간에서 데이터를 어떻게 효율적으로 저장하고 관리할 것인가. 이것이 바로 자료구조를 배우는 이유입니다.오늘은 실무에서 가장 많이 사용되는 4가지 핵심 자료구조를 알아보겠습니다.1. 스택 (Stack): 드럼통처럼 쌓이는 구조스택이란?스택을 이해하는 가장 쉬운 방법은 드럼통을 떠올리는 것입니다. 드럼통에 물건을 하나씩 넣으면 위로 쌓이죠? 꺼낼 때는 가장 나중에 넣..

들어가며"이 알고리즘이 더 빠른데?" vs "저 알고리즘이 더 빠른데?"개발자들 사이에서 흔히 일어나는 논쟁입니다. 하지만 '빠르다'는 표현은 생각보다 애매합니다. 내 컴퓨터에서는 0.5초 걸렸는데, 동료 컴퓨터에서는 0.2초 걸렸다면? 과연 어느 알고리즘이 더 효율적인 걸까요?이런 모호함을 해결하기 위해 컴퓨터 과학에서는 Big O 표기법이라는 표준화된 방법을 사용합니다. 오늘은 이 Big O 표기법을 통해 알고리즘의 성능을 제대로 평가하는 방법을 알아보겠습니다.왜 시간이 아닌 단계(Step)로 측정할까?알고리즘의 성능을 초 단위로 측정하지 않는 이유는 명확합니다. 같은 알고리즘이라도 하드웨어 성능에 따라 실행 시간이 달라지기 때문입니다.최신 M4 맥북에서 돌린 알고리즘: 0.1초10년 된 노트북에서 ..

React의 Error Boundary는 컴포넌트 렌더링 도중 발생하는 오류를 포착하여 앱이 완전히 중단되지 않도록 돕는 강력한 기능입니다.하지만 한 가지 중요한 한계가 있습니다 — 비동기 코드에서 발생한 오류는 Error Boundary가 잡을 수 없습니다.## 왜 Error Boundary는 비동기 에러를 잡지 못할까?그 이유는 비동기 에러가 렌더링 시점의 콜스택이 모두 비워진 후에 발생하기 때문입니다.React는 컴포넌트를 렌더링할 때 하나의 연속된 콜스택 안에서 작업을 수행하며, Error Boundary 또한 이 흐름 안에서만 동작합니다.즉, 동기적인 렌더링 과정 중에 발생한 오류만 감지할 수 있습니다.class MyComponent extends React.Component { render(..

React에서 “언제, 왜, 어떻게” 리렌더링이 일어나는지 정확히 이해하면 성능 최적화와 불필요한 복잡도 감소에 큰 도움을 줍니다. 이 글은 리렌더링의 이론을 체계적으로 정리하고, 실행 가능한 예시와 실무 체크리스트로 마무리합니다.핵심 개념: 렌더링 파이프라인 3단계Trigger: 상태(state) 변경, 상위 컴포넌트 렌더, context 값 변경, key 변경, 외부 스토어 구독 변경 등으로 “업데이트 필요”가 발생합니다. React는 내부 업데이트 큐에 변경을 기록합니다.Render: 변경된 상태로 함수 컴포넌트를 다시 호출하여 새로운 VDOM(Fiber 트리)을 만듭니다. 이전 트리와 비교(diff)하지만, 이 단계에서는 실제 DOM 조작이 없습니다.Commit: diff 결과를 실제 DOM에 최..

안녕하세요! 프론트엔드/풀스택 실무에서 자주 부딪히는 “JWT를 어디에 보관할 것인가” 문제를 정리했습니다. 저장 위치별 보안/UX 트레이드오프, 실제로 일어나는 탈취(steal) 시나리오, 그리고 탈취 되었을 때 어떻게 눈치채고 대응할지까지 바로 적용 가능한 체크리스트로 담았습니다.저장 위치별 비교구분localStoragesessionStorageCookie (HttpOnly 권장)접근성JS로 window.localStorage 읽기/쓰기탭 수명(탭 닫히면 소멸)JS 접근 불가(HttpOnly)·자동 전송(도메인/경로 일치 시)지속성브라우저 종료 후에도 유지탭 살아있는 동안만만료 시각/세션/영구 선택 가능XSS에 대한 노출높음(스크립트가 읽을 수 있음)높음낮음(HttpOnly면 읽기 불가)CSRF 위험..

서론이번 글에서는 아직 다루지 않은 SSR(Server-Side Rendering) 페이지의 풀 페이지 캐싱에 대해 이야기합니다.SSR은 매 요청마다 서버에서 HTML을 생성하므로 항상 최신 데이터를 보장하지만, 그만큼 성능 부담이 큽니다.그렇다면 SSR 페이지를 캐싱하면서도 신선함을 유지할 수 있는 방법은 무엇일까요?SSR의 본질 (Next.js 15 기준)SSR이 하는 일매 요청마다 서버에서 HTML 생성데이터는 요청 시점에 가져옴SEO 친화적, 항상 최신 상태 반영적합한 경우자주 변하는 데이터사용자별 맞춤형 페이지인증 필요 페이지성능 문제가 발생하는 경우모든 요청이 DB/API 호출을 동반고트래픽 시 서버 부하 급증TTFB(Time to First Byte) 지연따라서 풀 페이지 캐싱은 필수적인 최..