https://hyo814-blog.vercel.app/blog 풀스택 개발자 임효진의 기술 블로그 — 프로젝트 회고, 프런트엔드·백엔드 학습 기록을 정리합니다. ko ggamjge8888@naver.com (Hyo814) ggamjge8888@naver.com (Hyo814) Thu, 24 Apr 2025 00:00:00 GMT https://hyo814-blog.vercel.app/blog/JSTree-VTree https://hyo814-blog.vercel.app/blog/JSTree-VTree 트리 구조 시각화를 위해 jsTree와 VTree를 조사하고 Django Jinja 템플릿에 붙였던 기록입니다. 1년 넘게 운영한 지금 답을 알고 있습니다 — jsTree는 살아남아 트리 화면의 기본이 됐고, VTree는 걷어내고 D3 직접 구현으로 갔어요. 갈린 기준과 함께, 당시 코드에서 지금 보면 걸리는 지점들(텍스트 기반 라우팅, 템플릿 리터럴 JSON 주입)을 정리했습니다. Thu, 24 Apr 2025 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/Jstree-basic https://hyo814-blog.vercel.app/blog/Jstree-basic jQuery 기반 트리 플러그인 jsTree의 플러그인·API·이벤트를 표로 정리한 레퍼런스입니다. 실무 트리 화면에 붙이면서 걸린 지점들을 뒤에 덧붙였습니다 — check_callback의 진짜 의미, 루트 노드 id가 #이라는 함정, 기본 contextmenu를 버리고 모달로 간 이유까지. Wed, 23 Apr 2025 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/figma-44프레임을-코드와-대조하기 https://hyo814-blog.vercel.app/blog/figma-44프레임을-코드와-대조하기 디자인과 화면이 조금씩 다른데 뭐가 틀린 건지 모르겠다는 상태를 정리하려고, Figma 44프레임을 코드와 전수 대조해 리포트를 만들었습니다. 핵심은 차이를 찾는 게 아니라 "의도적 조정"과 "결함"을 가르는 규칙이었어요. 그리고 2.5개월 뒤에 확인해보니 HIGH 4건 중 2건이 아직 미반영입니다. Sun, 10 May 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/jstree-contextmenu-modal https://hyo814-blog.vercel.app/blog/jstree-contextmenu-modal JSTree의 주요 플러그인 설정 방법과 contextmenu 플러그인으로 사용자 정의 우클릭 메뉴(추가/편집/삭제/복사)를 구현하는 방법을 정리합니다. Fri, 16 Jan 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/oid-creation-wizard-ux-구현-회고 https://hyo814-blog.vercel.app/blog/oid-creation-wizard-ux-구현-회고 다단계 입력이 필요한 등록 폼에 Creation Wizard 모드와 일반 편집 모드를 분리해서 구현한 과정을 정리합니다. 상태 관리, 트리 연동, "완전 종료" 버그까지. Mon, 05 Jan 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/open-api-토큰-승인-오클릭-가드와-버튼-그룹화 https://hyo814-blog.vercel.app/blog/open-api-토큰-승인-오클릭-가드와-버튼-그룹화 토큰 신청 검토 화면에서 승인/거절을 우측 정렬 버튼 그룹으로 묶고, 거절 사유를 적어둔 채 승인을 눌러버리는 오클릭에 확인 가드를 넣은 작업입니다. 네 가지 마크업 방식 중 form 속성을 고른 이유와, 커스텀 모달 대신 네이티브 confirm을 남겨둔 판단을 정리해요. Tue, 16 Jun 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/sr-only-체크박스-포커스-스크롤-점프-수리 https://hyo814-blog.vercel.app/blog/sr-only-체크박스-포커스-스크롤-점프-수리 값 유형 토글을 누를 때마다 화면이 튀었습니다. 하나 고쳤는데 증상이 남아서 다시 팠더니 원인이 둘이었어요. sr-only로 숨긴 체크박스가 일으키는 focus scroll, 그리고 tbody 전면 재렌더로 scroll anchoring 기준이 사라지는 문제. 각각 어떤 대안들을 놓고 무엇을 골랐는지, 그리고 "안 튀는 것 같다"를 숫자로 바꾼 검증까지 정리합니다. Tue, 14 Jul 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/waitMe https://hyo814-blog.vercel.app/blog/waitMe jQuery 기반 로딩 애니메이션 플러그인 waitMe의 사용법과 실제 적용 사례를 정리합니다. Tue, 22 Apr 2025 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/검색형-select-복구-searchableselect-회고 https://hyo814-blog.vercel.app/blog/검색형-select-복구-searchableselect-회고 클래스 참조 필드처럼 옵션이 수백 개인 select를 스크롤로만 찾던 걸 입력 검색으로 좁히는 검색형 select로 되살린 작업입니다. 라이브러리를 다시 들일지 직접 얹을지부터 정하고, placeholder 잘림·× 해제 안 되는 버그, 그리고 Font Awesome svg 모드가 참조를 유령으로 만드는 함정까지 하나씩 잡았어요. Thu, 18 Jun 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/등록-프로세스-안내-중복-카드-플로우-제거-회고 https://hyo814-blog.vercel.app/blog/등록-프로세스-안내-중복-카드-플로우-제거-회고 "있는데 도움 안 되는 정보"가 안내 화면을 어떻게 무겁게 만드는지, 표준데이터/OID 등록 프로세스 안내에서 중복 단계 카드 흐름을 제거하며 깨달은 점을 정리합니다. Mon, 04 May 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/메타클래스-속성-모달에서-인라인-폼으로-전환-회고 https://hyo814-blog.vercel.app/blog/메타클래스-속성-모달에서-인라인-폼으로-전환-회고 메타클래스 속성을 편집할 때마다 컨텍스트를 가리던 모달을 들어내고, 트리/리스트 옆 인라인 폼으로 옮긴 결정과 그 결과를 정리합니다. Tue, 19 May 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/비동기-관계-피커-prefill-값-소실-수리 https://hyo814-blog.vercel.app/blog/비동기-관계-피커-prefill-값-소실-수리 편집 화면에서 아무것도 건드리지 않고 저장만 눌렀는데, 이미 선택돼 있던 값이 빈 값으로 저장되는 버그가 있었습니다. 세 가지 해결책을 놓고 고민한 끝에 "값은 동기, 라벨만 비동기"로 나누는 씨앗 패턴을 골랐어요. 에러 로그가 남지 않는 조용한 데이터 소실을 어떻게 재현하고 잡았는지 정리합니다. Sat, 11 Jul 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/이용안내-아코디언에서-캐러셀로-전환-회고 https://hyo814-blog.vercel.app/blog/이용안내-아코디언에서-캐러셀로-전환-회고 표준데이터·OID·아키텍처·Open API 4개 이용안내 탭을 아코디언에서 캐러셀로 통일한 작업입니다. 네 가지 UI 후보를 놓고 캐러셀을 고른 근거, 감수하기로 한 트레이드오프(페이지 내 검색 불가), 그리고 탭마다 복붙돼 있던 인라인 매크로를 공유 파티얼 하나로 합친 이야기예요. Sat, 20 Jun 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI https://hyo814-blog.vercel.app/blog/페이지네이션-가독성-리디자인-회고 https://hyo814-blog.vercel.app/blog/페이지네이션-가독성-리디자인-회고 Bootstrap 기본 페이지네이션이 파란색 테마 위에서 활성 상태가 묻히는 문제를 카드형 버튼 + 아이콘으로 해결한 회고입니다. Sat, 11 Apr 2026 00:00:00 GMT ggamjge8888@naver.com (Hyo814) 기술노트UI