기술노트

표준데이터·OID·아키텍처·Open API 4개 이용안내 탭을 아코디언에서 캐러셀로 통일한 작업입니다. 긴 섹션을 화면 1개 단위 슬라이드로 잘게 나눠 스크롤을 줄이고, 탭마다 복붙돼 있던 인라인 매크로를 공유 파티얼 하나로 합친 이야기예요.

클래스 참조 필드처럼 옵션이 수백 개인 select를 스크롤로만 찾던 걸 입력 검색으로 좁히는 검색형 select로 되살린 작업입니다. placeholder 잘림, × 해제 안 되는 버그, 그리고 Font Awesome svg 모드 때문에 × 아이콘이 사라지던 함정까지 하나씩 잡았어요.

토큰 신청 검토 화면에서 승인/거절을 우측 정렬 버튼 그룹으로 묶고, 거절 사유를 적어둔 채 승인을 눌러버리는 오클릭에 확인 가드를 넣은 작업입니다. form 속성으로 버튼과 폼을 분리하는 HTML 패턴을 쓰면서 배운 점을 정리해요.

관리자가 오퍼레이션을 토글했는데 TTL이 지나야 반영되던 캐시 갭, 그리고 만료된 토큰의 신청 상태가 "승인됨"으로 남던 stale 문제를 정리합니다. 캐시 즉시 무효화와 진입 시점 sync_expired로 "보이는 상태 = 실제 상태"를 맞춘 이야기예요.

데이터 관계도·워드클라우드·트리맵마다 복붙돼 있던 줌 설정을 공용 모듈 d3ZoomControls.js로 추출하고, 확대/축소/맞춤 버튼과 "최초 1회 fit-to-view"를 표준화한 작업입니다. SVG가 100% 크기일 때 뷰포트 크기를 어떻게 구하느냐가 핵심 함정이었어요.

FAQ 게시판을 새 모델을 추가하지 않고 기존 Post 모델 + "FAQ" 카테고리로 구현한 회고입니다. 공지사항과 한 모델을 공유하면서 카테고리로 분리하고, 큐레이션 순서 노출·읽기 전용 본문·데이터 적재 커맨드까지 묶은 이야기예요.

Open API의 데이터 계층을 처음부터 provider 인터페이스로 추상화해 mock으로 화면·계약을 먼저 굳히고, 실데이터 전환은 OrmDataProvider 골격 + 한 줄 스위치로 분리한 과정을 정리합니다. 미완 활성화가 곧 비공개 데이터 유출이라 fail-closed로 설계한 이야기도 담았어요.

총 등록 수·상태 분포만 보여주던 통계 대시보드를, 생애주기·완성도·최근 업데이트·인기 항목 중심으로 다시 짠 작업입니다. "ACT 개수"가 아니라 "완성형(고품질) 데이터가 얼마나 되나"를 묻도록 지표를 바꾼 이야기예요.

항목 수가 늘면서 점점 느려지던 메타클래스 리스트 페이지의 쿼리를 분석하고, select_related/prefetch_related로 정리하면서 의식한 점들을 기록합니다.

백엔드 개발 전 mockup 데이터가 49개라서 페이지네이션·검색·필터 검증이 빈약했던 문제를, 엑셀 파일을 입력으로 받는 시드 스크립트를 만들어 478개로 늘린 과정을 정리합니다.

"거의 안 바뀔 것"이라는 가정으로 정적 JSON에 두었던 네임스페이스 옵션이 실제로는 자주 바뀌고 있었고, 결국 DB 조회로 옮긴 결정과 그 교훈을 정리합니다.

메타클래스 속성을 편집할 때마다 컨텍스트를 가리던 모달을 들어내고, 트리/리스트 옆 인라인 폼으로 옮긴 결정과 그 결과를 정리합니다.

두 페이지가 따로 들고 있던 jstree 옵션과 이벤트 핸들러를 비교해 차이가 거의 없음을 확인하고, 공통 헬퍼 4종으로 추출한 리팩토링 회고입니다.

Tailwind 메이저 업그레이드를 앞두고 시각 회귀를 잡기 위해 Playwright 기반 페이지 캡쳐 스크립트를 만든 경위와, 그 과정에서 만난 작은 어려움들을 정리합니다.

약관/방침 페이지와 소개·가이드 페이지에 흩어져 있던 마크업 중복을 base 템플릿 + 공용 매크로 + 외부 스크립트로 정리한 회고입니다.

tailwind.config.js 기반 v3에서 CSS 안에서 @theme로 토큰을 정의하는 v4로 전환하면서 발생한 회귀와 패치 과정을 정리한 회고입니다.

FontAwesome 6.x에서 7.x로 메이저 버전 업그레이드를 하면서 검토한 호환성 항목과 실제로 깨졌던 부분, 그리고 회고를 정리합니다.

드롭다운 네비에서 상위 메뉴에서 하위 메뉴로 마우스를 옮길 때 끊기는 현상의 원인을 추적하고, 모든 sub-list height를 h-28로 통일해 해결한 짧은 기록입니다.

"있는데 도움 안 되는 정보"가 안내 화면을 어떻게 무겁게 만드는지, 표준데이터/OID 등록 프로세스 안내에서 중복 단계 카드 흐름을 제거하며 깨달은 점을 정리합니다.

프론트엔드가 먼저 만들어둔 두 작업이 각각 "심사 전 무분별 취소"와 "OID 트리 방향 역전 필요"라는 도메인 문제를 드러낸 과정과, 어떻게 결정·정리했는지에 대한 회고입니다.

Django REST API는 Render에, React 19 + Vite SPA는 Vercel에 나눠 배포하면서 마주친 CORS, 환경변수, 정적 파일, 빌드 파이프라인 이슈를 정리합니다.

본인과 관리자만 열람할 수 있는 1:1 비공개 문의 게시판을 Django로 구현한 과정을 정리합니다. 열람 권한, 답변 권한, 첨부파일 재사용 패턴을 다룹니다.

편집자가 직접 쓴 글과 RSS에서 수집한 글을 하나의 Post 테이블에 두되, source_type 필드로 분기하는 설계의 장단점과 어드민/쿼리 패턴을 정리합니다.

서버에서 graphviz로 PNG를 그려 내려주던 ASN.1 트리를 D3.js 기반 Collapsible Tree로 전환한 과정과 그 이유를 정리합니다. 서버 의존성 제거, 인터랙션, JSON 스키마 설계까지.

로그인 없이 이메일 한 줄로 구독하고, 발송 메일의 고유 링크로 해지할 수 있는 뉴스레터 시스템을 Django + DRF로 설계한 기록입니다.

일회성 스크립트 대신 Django management command로 crawl_news, send_newsletter, seed_editorial, backfill_urls 네 가지를 설계하며 얻은 기준과 패턴을 정리합니다.

한국어 5개 + 영어 4개 RSS 소스에서 Python/Django 관련 글만 골라 수집하고, HTML 정제와 자동 태깅까지 거치는 파이프라인을 Django management command로 정리한 기록입니다.

같은 Django 크롤링 작업을 로컬 crontab(setup_cron.sh)과 Render Cron Job으로 각각 돌려보고, 두 방식의 차이와 선택 기준을 정리합니다.

8개 카테고리 커뮤니티 게시판을 단일 Post 모델로 갈지, 카테고리별로 앱을 나눌지. 이번 프로젝트에서 전자를 택한 이유와 트레이드오프를 정리합니다.

헤더에 "쪽지 N개"를 띄우기 위해 모든 뷰에서 카운트를 넘기는 대신, context processor로 전역 주입한 경험과 그 함정을 정리합니다.

Bootstrap 기본 페이지네이션이 파란색 테마 위에서 활성 상태가 묻히는 문제를 카드형 버튼 + 아이콘으로 해결한 회고입니다.

Render의 render.yaml 하나로 Django API(web)와 주간 크롤러(cron)를 각각 다른 서비스로 띄우고, 같은 DB를 공유하도록 연결한 경험을 정리합니다.

포트폴리오용 커뮤니티 서비스에서 "비어 보이지 않게, 가짜 같지 않게" 더미 데이터를 만든 과정을 정리합니다. 페이지네이션 검증과 작성자 분산이 핵심이었습니다.

업무상 결제해둔 ITS/V2X 관련 표준 14종(ISO 14817-2, SAE J2735, KS R 1600 시리즈, KS X ISO 14827/15784, ISO TS 19091)을 실제로 읽어보며, 각 표준이 무엇을 규정하고 서로 어떻게 물려 있는지 한 글에 정리합니다.

표준데이터 등록 시스템(SDMS)에 ISO 14817-2의 데이터 개념 라이프사이클을 적용해 기록→제출→사전검증→검증→사전인증→인증→배포의 7단계 상태 머신을 구성한 과정을 정리합니다.

시드 데이터를 data migration에 넣을지, 커스텀 management command로 뺄지. 두 방법의 차이와 실제로 언제 무엇을 택해야 하는지 정리합니다.

AbstractUser를 확장한 커스텀 User 모델에 카카오 OAuth 2.0을 얹어, 일반 이메일 가입과 소셜 로그인을 한 테이블에서 공존시키는 과정을 정리합니다.

심사 프로세스에 승인/반려 외 제3의 축(보완 요청)을 추가했다가, 상태 머신 복잡도와 UX 혼란을 이유로 철회한 의사결정 과정을 정리합니다.

기존 프로젝트의 웹팩 설정을 변경할 때 자주 마주치는 문제들과 체크리스트를 정리합니다.

common 앱에 섞여 있던 설문조사 모델을 독립 앱으로 분리하고 3-tier 아키텍처로 재설계한 과정, 그리고 weasyprint 기반 PDF 다운로드와 개인정보 마스킹 구현을 정리합니다.

JSTree의 주요 플러그인 설정 방법과 contextmenu 플러그인으로 사용자 정의 우클릭 메뉴(추가/편집/삭제/복사)를 구현하는 방법을 정리합니다.

다단계 입력이 필요한 등록 폼에 Creation Wizard 모드와 일반 편집 모드를 분리해서 구현한 과정을 정리합니다. 상태 관리, 트리 연동, "완전 종료" 버그까지.

협업과 유지보수를 위한 Git 커밋 메시지 형식, 타입 분류, 작성 규칙을 정리합니다.

django-treebeard의 MP_Node(Materialized Path)를 활용해 계층형 데이터를 DB에 저장하고 효율적으로 조회하는 방법을 정리합니다.

Django ORM에서 자주 발생하는 N+1 쿼리 문제를 진단하고 select_related, prefetch_related로 해결하는 방법을 정리합니다.

Django 마이그레이션에서 RunPython을 사용해 필드 추가 후 데이터를 채우는 방법과 수동 마이그레이션 시 주의할 점을 정리합니다.

Django에서 여러 폼을 한 페이지에서 처리하는 Formset과 부모-자식 관계를 함께 처리하는 Inline Formset의 차이와 사용법을 정리합니다.

Django의 두 가지 뷰 작성 방식인 FBV(함수형 뷰)와 CBV(클래스형 뷰)의 차이점, 장단점, 언제 무엇을 쓸지 정리합니다.

Django ORM

깊이의 차이를 어떻게 구현을 진자 템플릿에서 해야할지에 대한 고민을 담다..

장고에서는 mvt 패턴을 가진다고 하는데 mvc 패턴 과는 어떠한 차이가 있는지 정리 해보자.

시맨틱 웹, 웹 3.0 에 대해 이해해보기!

jQuery 기반 로딩 애니메이션 플러그인 waitMe의 사용법과 실제 적용 사례를 정리합니다.

장고에서 템플릿을 어떻게 사용 해야할지에 대한 정리 모음

웹 애플리케이션에서 사용자가 특정 페이지에서 스크롤한 위치를 기억하고, 페이지를 다시 방문했을 때 해당 위치로 자동으로 스크롤하는 기능

인프런 강의 정리 : 프론트엔드 개발 웹팩

인프런 강의 정리 : 실무에 바로 적용하는 스토리북과 UI 테스트

인프런 클린코드 강의를 들으며 정리한 입문 수준의 핵심 개념과 실무 적용 포인트.

실무에 바로 적용하는 프런트엔드 테스트 2부

WebSocket connection to wss:… failed 오류의 원인과 해결 방법

웹소켓과 STOMP를 이용한 채팅 구현 중 메시지 동기화 문제 해결

WebSocket 연결 문제 및 HTTP/HTTPS 에러 분석

실무에 바로 적용하는 프런트엔드 테스트 1부

React Infinite Scroll 구현하기를 3종류로 구현

프로그래머스 괄호 문제 정리

코딩테스트 그래프

코딩테스트 트리

코딩 테스트 탐색 이진탐색 완전탐색

코딩테스트 그리디

자바스크립트로 useState 구현 해보기

자바스크립트로 useEffect 구현 해보기

제로베이스 코딩테스트 1주차 ~ 8주차 과정 정리

코딩 테스트 연결 리스트

코딩테스트 연결 리스트

코딩테스트 수학함수

코딩테스트 덱

코딩테스트 행렬

코딩테스트 재귀함수

코딩테스트 힙

코딩테스트 동적계획법

코딩테스트 백트레킹

코딩테스트 정렬

무한 스크롤에서는 왜 이슈가 생긴 걸까

무한 스크롤 비교

사용자가 로그아웃할 때 서버로 요청을 보내는 방법은 크게 두 가지로 나눌 수 있습니다: PATCH 방식과 DELETE 방식. 두 방식 모두 RESTful API에서 자주 사용되며, 각각의 장단점이 있습니다. 이 문서에서는 로그아웃을 구현할 때 이 두 가지 방법을 비교하고, 어떤 상황에서 각각의 방식이 적합한지 살펴보겠습니다.

장고에서는 데이터 폼셋이라고 데이터 폼을 쉽고 빠르게 형성은 해주지만 레이아웃에 대한 배치를 도울 뿐 커스텀은 js 나 jtree 기반의 커스텀을 통해 구조화 해야한다.