SI 화면 개발의 현실은 jQuery와 모던 JS가 공존하는 코드베이스입니다. 이 페이지는 jQuery DOM·이벤트 처리부터 표준 fetch·배열 가공까지 — "매번 검색하는 그 코드"를 실무 형태로 모았습니다.
스니펫은 빈칸 채우기 폼으로 제공됩니다 — 변수명·값처럼 바뀌는 부분이 입력칸으로 표시되고, 채우면 코드에 실시간 반영돼 완성본을 복사합니다. 채운 값은 브라우저 안에서만 쓰이고 외부로 전송되지 않습니다.
| 갈래 | 담긴 것 |
|---|---|
| DOM·이벤트 | jQuery 선택·조작·이벤트 위임 — 동적 행 추가 같은 관리 화면 단골 |
| HTTP | fetch GET/POST(타임아웃·에러 처리 포함), 폼 데이터 전송 |
| 배열·객체 | map·filter·reduce 조합, 그룹핑, 중복 제거 |
| 문자열·날짜 | 포맷팅, 패딩, 날짜 계산 |
| 테스트 | Vitest 기본 패턴 |
운영 중인 사내 시스템의 화면 상당수가 jQuery로 짜여 있습니다. 유지보수하러 들어간 화면에서 "이 문법이 뭐였지"가 되는 순간을 위해, 이벤트 위임·동적 요소 바인딩처럼 레거시에서 특히 헷갈리는 패턴을 갖췄습니다 — 새 화면은 표준 JS 카드로 시작하면 됩니다.
| 상황 | 해당 카드 |
|---|---|
| 동적 행의 버튼 클릭이 안 잡힘 | jQuery 이벤트 위임(on + 선택자) |
| POST로 JSON 보내기 | fetch POST — 헤더·에러 처리 포함 |
| 배열을 그룹별로 묶기 | reduce 그룹핑 |
| 날짜를 yyyy-MM-dd로 | 패딩 포함 포맷 카드 |
| 체크된 행만 수집 | 선택자 + map 조합 |
jQuery 화면을 고칠 때 최신 문법으로 다시 짜고 싶은 유혹이 들지만, 동작하는 레거시를 건드리는 범위는 작을수록 안전합니다 — 그래서 jQuery 카드들은 "그 자리 관례대로 고치는" 형태를 제공합니다. 반대로 새 화면·새 모듈은 표준 JS 카드로 시작해, 한 화면 안에 두 시대가 섞이지 않게 하는 것이 유지보수의 균형점입니다.
fetch 카드의 에러 처리 형태(response.ok 확인)는 특히 습관으로 만들 가치가 있습니다 — HTTP 4xx·5xx가 예외를 던지지 않는 fetch의 특성은 "조용히 실패하는 화면"의 단골 원인이기 때문입니다.
사내 시스템의 브라우저 사정은 최신 웹과 다릅니다 — 아직 구형 브라우저 지원이 명시된 프로젝트라면 최신 문법 카드가 그대로 안 돌 수 있습니다. 카드의 환경 라벨과 주의점이 그 경계를 표시하지만, 최종 확인은 대상 브라우저에서의 동작 테스트입니다. 반대로 내부 표준이 최신 브라우저로 정리된 환경이라면 폴리필 걱정 없이 표준 카드를 그대로 쓰면 됩니다.
복사한 코드를 화면에 붙이기 전에 브라우저 개발자 도구 콘솔에서 한 번 실행해 보는 습관은 JS 특유의 "조용한 실패"를 줄입니다 — 선택자가 빈 결과를 돌려주는지, 응답 구조가 예상과 같은지를 콘솔에서 10초에 확인할 수 있습니다.
전량 덤프는 JS/TS 레퍼런스에서. 서버 쪽 짝은 Java 스니펫, 화면이 부르는 API 검증은 .http 스니펫, 매퍼 XML은 HTML·XML 스니펫이 잇습니다.
DoniKit(도니킷)은 개발자가 자주 쓰는 코드 조각을 빈칸만 채워 바로 복사하는 스니펫 라이브러리입니다. 반복문·컬렉션·Stream·문자열·형변환·날짜·예외 처리부터 DB·HTTP·테스트·파일까지, Java·JavaScript·SQL·HTML 168종을 15개 카테고리로 정리했습니다. 외우기 애매한 정형 코드를 매번 검색하는 대신, 필요한 값만 채워 완성된 코드를 얻습니다.
언어 토글로 Java·JavaScript·SQL을 오가고, 실무 작업 영역인 .http 요청·Shell(PowerShell·cmd·Linux 서버·WSL) 명령·HTML·XML(MyBatis 매퍼 포함)도 전용 색칠로 제공합니다. 채우기·색칠은 모두 접속한 브라우저 안에서 처리되어 입력한 값이 외부 서버로 전송되지 않습니다. 아래에서 카테고리와 자주 묻는 질문을 정리했습니다.
원하는 스니펫을 고르면 변수명·타입·값처럼 바뀌는 부분이 입력칸으로 표시됩니다. 값을 채우면 코드에 실시간으로 반영되고, 복사 버튼으로 완성된 코드를 그대로 가져갑니다.
Java·JavaScript·SQL 토글로 같은 개념의 코드를 언어별로 오갑니다. .http·Shell·HTML·XML은 언어가 아닌 작업 영역 토글로, IntelliJ/VS Code의 .http 요청, PowerShell·cmd·Linux 서버 실무 명령, MyBatis 매퍼 XML과 HTML 문서를 각각 전용 색칠로 보여줍니다. Shell은 개발 PC(Windows)·배포 서버(Linux)·WSL(둘을 잇는 명령)을 한 토글에서 오갈 수 있도록 기준 환경 라벨로 구분했습니다. 파일을 이름·수정일·크기로 찾고 폴더 구조·용량을 확인하는 조회 명령을 Windows·Linux 양쪽에 갖췄습니다. PowerShell을 처음 쓴다면 "기초·문법" 카테고리에서 동사-명사 이름 규칙, ls·cat 같은 별칭이 유닉스 옵션(-al)까지 받아주지는 않는다는 점, 파이프라인으로 거르고 정렬하는 법, .ps1 실행이 막힐 때 푸는 순서를 먼저 확인할 수 있습니다.
SQL은 PostgreSQL 함수·프로시저·익명 블록(DO $ … END $)·윈도우 함수·재귀 CTE·DDL을, Java는 BigDecimal·MultipartFile·페이징·@Scheduled를, 테스트는 JUnit 4↔5·Mockito·MockMvc·Vitest를 담았습니다. 폐쇄망 레거시를 고려해 HTTP 클라이언트는 최신·구세대 API를 함께 제공합니다.
네, 모든 스니펫을 무료로 쓸 수 있습니다. 운영 비용은 페이지에 표시되는 광고로 충당합니다.
아니요. 브라우저로 페이지를 열면 바로 쓸 수 있고, 로그인이나 프로그램 설치가 필요 없습니다.
아니요. 빈칸 채우기와 구문 색칠은 접속한 기기의 브라우저 안에서 처리되며, 입력한 값은 외부 서버로 전송되지 않습니다.
스니펫은 흔히 쓰이는 정형 코드 패턴으로, 자유롭게 참고·사용할 수 있도록 제공합니다. 다만 프로젝트에 넣을 때는 실제 요구사항과 라이선스에 맞게 검토·수정해 사용하세요.
테마·언어 토글 같은 화면 설정과 즐겨찾기·최근 사용한 스니펫 목록(스니펫 이름표만)이 브라우저 localStorage에 저장됩니다. 채운 값 자체는 저장하지 않습니다.
Google 애드센스 광고가 표시될 수 있으며 광고 목적의 제3자 쿠키가 사용될 수 있습니다. 자세한 내용은 페이지 하단 "개인정보 안내"에서 확인할 수 있습니다.