Next.js7분
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16 App Router 로 만든 제조 공장의 생산 관리 앱입니다.
전체 태그
#technical-note 502개 글
- 프론트엔드8분
가상 스크롤로 장부 화면 만들기: 느린 원인은 Intl.DateTimeFormat
제조 공장 한 곳의 생산 관리 앱을 만들고 있습니다. 그 안에 수주대장이라는 화면이 있는데, 공장이 쓰던 생산 엑셀을 칸 순서까지 그대로 옮긴 표입니다. 1년치만 봐도 4천 줄이 넘습니다. 처음에는 100줄씩 쪽으로 나눠 두었습니다. 직접 써 보다가 이 부분은 확실히 엑셀보다 불편하다는 생각이 들었습니다. 엑셀은 수천 …
- 보안8분
서비스 간 인증 키 관리: 공유 토큰부터 mTLS까지 규모별 4단계
예를 들어 직원 열 명 남짓한 쇼핑몰 운영사를 생각해 봅시다. 주문 관리 화면이 재고 서버에서 수량을 읽고, 고객센터 도구가 주문 서버에서 문의 내역을 가져오고, 사내 챗봇이 외부 AI API를 부릅니다. 연결은 세 가닥이고 키도 세 개입니다. 그런데 이 키들을 비밀 관리 도구에 옮겨 적으려고 표를 그려 보면 칸이 다섯…
- 보안10분
CSP script-src 'unsafe-inline'은 무엇을 열어 둘까?
어떤 사이트의 응답 헤더를 열어 보면 이런 줄이 있습니다.
- 백오피스6분
텔레그램 알림 봇 만들기: BotFather 토큰부터 chat id까지
예약해 둔 작업은 사람이 없는 시각에 서버가 혼자 처리합니다. 잘 끝나면 다행이지만, 중간에 막히면 그 작업은 조용히 대기 상태로 돌아갑니다. 까닭은 기록에 남는데, 기록을 열어 보기 전에는 아무도 모릅니다. 그래서 고객사 업무 시스템의 예약 작업에 텔레그램 알림을 붙였고, 그 알림을 받을 봇을 새로 만들기로 했습니다.
- Next.js8분
Next.js Docker 빌드 캐시: 배포 CSS에서 패키지 스타일이 빠진 문제
테마 메뉴에서 디자인 시스템을 바꾸는 기능을 배포했습니다. 메뉴에는 「Betelgeuse 라임 다크」라고 정확히 찍히는데, 화면은 기본 시스템 그대로였습니다. 바로 전 배포에서는 같은 기능이 잘 동작했습니다. 그 사이에 바뀐 것은 디자인 시스템 패키지의 버전 하나였습니다.
- 데이터베이스 설계13분
온톨로지 다시 보기: 시맨틱 웹 유행 뒤에 남은 것
20년쯤 전, 처음 개발을 배우던 무렵 「온톨로지」라는 말을 들었습니다. 시맨틱 웹이 다음 웹이 된다던 때였고, 저는 그 말이 무슨 뜻인지 제대로 모른 채 지나갔습니다. 그 말을 최근 터미널 매뉴얼 하나를 고치다가 다시 만났습니다.
- AI 자동화6분
SMTP만으로 답장할 수 있을까? 메일 자동화와 IMAP
업무 메일을 대화 한 번으로 보내는 스킬을 설계하다가, 시간을 얼마나 아낄 수 있을지 따져 봤습니다. 견적서를 만든 직후 "이거 보내줘" 한 마디로 첨부·제목·본문이 끝나면 꽤 줄어듭니다. 그런데 목록을 적다 보니 한 줄이 걸렸습니다. 받은 메일에 답하는 일은 이 설계로는 할 수 없었습니다.
- 데이터베이스9분
pgvector HNSW 필터 검색: WHERE를 붙이면 결과가 줄어드는 이유
SELECT id, title
- AI 자동화20분
RAG와 긴 컨텍스트: 100만 토큰이면 검색이 필요 없을까?
Anthropic의 컨텍스트 창 문서에는 이런 문장이 있습니다.
- AI 자동화21분
토크나이저와 한국어 토큰 비용: 같은 내용이 왜 더 비쌀까?
아래 두 문장은 같은 말입니다. 직접 지어낸 예문이고, 앞은 한국어로 49자, 뒤는 영어로 100자입니다.
- 데이터베이스19분
MCP 데이터베이스 서버: 에이전트에 DB를 열어 줄 때의 권한 설계
Anthropic이 처음 내놓은 Postgres MCP 서버의 README에는 이렇게 적혀 있었습니다.
- 데이터베이스20분
Text-to-SQL 정확도는 왜 실무 DB에서 떨어질까?
「지난 분기 매출 상위 고객 10곳」을 물었더니 모델이 깔끔한 SQL을 돌려줍니다. JOIN도 맞고 GROUP BY도 맞고 실행도 됩니다. 그런데 그 숫자를 재무팀 보고서와 나란히 놓으면 맞지 않습니다. 환불이 빠지지 않았을 수도 있고, 부가세가 들어갔을 수도 있고, 회사의 회계 분기가 달력 분기와 다를 수도 있습니다.…
- 데이터베이스13분
그래프 DB가 RDB를 대체할까? 숫자로 본 2026년 데이터베이스 흐름
데이터베이스 순위 사이트 DB-Engines에는 데이터 모델별 인기 추이를 그린 그래프가 있습니다. 2013년 1월을 100으로 놓고 2026년 10월까지 이어 보면 그래프 DBMS는 901이 됩니다. 아홉 배입니다. 같은 기간 관계형 DBMS는 80으로 오히려 내려왔습니다.
- AI 자동화26분
GGUF와 safetensors의 차이: Q4_K_M 같은 이름 읽는 법
Hugging Face에서 Qwen/Qwen2.5-7B-Instruct를 열면 파일이 14개 있습니다. config.json, tokenizer.json, vocab.json, merges.txt가 있고, model-00001-of-00004.safetensors부터 model-00004-of-00004.safetens…
- AI 자동화21분
지식 증류와 파인튜닝: 큰 모델의 답으로 작은 모델을 가르치는 방법
DeepSeek가 공개한 모델 중에 DeepSeek-R1-Distill-Qwen-32B가 있습니다. 이름에 Distill, 즉 증류가 들어 있습니다. 그런데 DeepSeek-R1 논문 2.4절은 이 모델을 만든 방법을 이렇게 적습니다.
- AI 자동화19분
GPU 병렬화 세 가지: 데이터 병렬, 텐서 병렬, 파이프라인 병렬
vLLM 문서에 GPU 16장으로 모델 하나를 띄우는 예시가 있습니다. 서버 두 대에 8장씩 꽂힌 구성인데, 명령에는 숫자가 두 개 들어갑니다.
- AI 자동화20분
vLLM과 Ollama의 차이: 연속 배칭과 PagedAttention
Ollama 공식 FAQ의 동시 요청 항목에는 이런 기본값이 적혀 있습니다. OLLAMANUMPARALLEL, 모델 하나가 동시에 처리하는 요청 수의 최댓값, 기본값 1. 바로 아래 줄에는 필요한 메모리가 OLLAMANUMPARALLEL 곱하기 OLLAMACONTEXTLENGTH만큼 늘어난다고 쓰여 있습니다(Ollama…
- AI 자동화20분
LLM 추론 GPU 메모리 계산: KV 캐시와 메모리 대역폭
NVIDIA의 H100 제품 페이지와 H200 제품 페이지 사양표를 나란히 놓으면 이상한 점이 하나 보입니다. SXM 모델 기준으로 FP16 Tensor Core 성능이 둘 다 1,979 TFLOPS(희소성 기준 표기)이고, FP8도 3,958 TFLOPS로 같습니다. 같은 Hopper 아키텍처라 연산 칸은 한 자리도 …
- AI 자동화7분
MIG와 NVLink의 차이: GPU를 자르는 기술과 잇는 기술
H100 서버 견적서를 보면 사양표에 NVLink 900GB/s가 적혀 있습니다. 그런데 GPU 한 장을 여러 사람이 나눠 쓰는 방법을 찾아보면 이번에는 MIG라는 말이 나옵니다. 둘 다 NVIDIA의 데이터센터 GPU 이야기이고, 이름 첫 글자도 비슷해서 같은 계열의 기능처럼 들립니다. 실제로는 방향이 정반대입니다.