jQuery 4.0 업그레이드: 제거된 $.trim·$.parseJSON과 안전한 대체 코드

문제와 사용 상황

jQuery 3.x에서 오래 운영한 화면을 4.0.0으로 올린 뒤 $.trim is not a function 또는 $.parseJSON is not a function 오류가 나면 CDN 장애보다 제거 API를 먼저 확인해야 합니다. jQuery 4.0 공식 발표와 업그레이드 가이드에는 jQuery.trim, jQuery.parseJSON, jQuery.type, jQuery.now 등 폐기됐던 함수가 4.0에서 제거됐다고 명시돼 있습니다.

이 변경은 함수 이름만 네이티브 API로 바꾸면 끝나는 문제가 아닙니다. jQuery 3.7.1의 $.trim(null)은 빈 문자열을 반환하지만 String(null).trim()은 "null"을 반환합니다. $.type(null)은 "null", $.type([])는 "array"지만 JavaScript의 typeof는 둘 다 "object"입니다. 입력 계약을 확인하지 않은 일괄 치환은 조용한 데이터 오류를 만들 수 있습니다.

테스트 환경·버전·날짜

• 확인 날짜: 2026-08-04
• Node.js: v24.14.0
• DOM 실행 환경: jsdom 29.1.1
• 비교 대상: jQuery 3.7.1, jQuery 4.0.0 공식 minified 배포 파일
• 공식 SRI: 두 파일 모두 SHA-256 일치
• 실제 브라우저: 미실행

jsdom 최신 30.0.1은 Node.js 24.15.0 이상을 요구했습니다. 로컬 Node.js 24.14.0에서 실행 가능한 29.1.1을 선택했으며, 이 결과를 실제 Chrome·Firefox·Safari 통과로 확대하지 않습니다.

최소 재현 코드

jQuery 3.x에서 동작하던 다음 코드는 4.0.0에서 제거된 함수를 호출합니다.

const name = $.trim(formValue);
const data = $.parseJSON(responseText);
const kind = $.type(data);
const requestedAt = $.now();

업그레이드 뒤 함수 존재 여부를 먼저 확인합니다.

console.table({
  version: $.fn.jquery,
  trim: typeof $.trim,
  parseJSON: typeof $.parseJSON,
  type: typeof $.type,
  now: typeof $.now,
  push: typeof $.fn.push,
  sort: typeof $.fn.sort,
  splice: typeof $.fn.splice
});

실제 실행에서 jQuery 3.7.1은 일곱 항목이 모두 function, 4.0.0은 모두 undefined였습니다.

테스트 케이스와 결과표

 

테스트	jQuery 3.7.1	jQuery 4.0.0 / 네이티브	결과
$.trim 등 공개 API 4개	function	undefined	PASS
컬렉션 push/sort/splice	function	undefined	PASS
$.trim(null) 대체	""	단순 변환 "null", guard ""	PASS
$.type(null)	"null"	typeof null은 "object"	PASS
$.type([])	"array"	Array.isArray([])는 true	PASS
잘못된 JSON	SyntaxError	JSON.parse()도 SyntaxError	PASS
공식 파일 SRI	일치	일치	PASS

최종 코드

1. null·undefined 정책을 보존하는 trim 대체

function normalizeText(value) {
  return value == null ? "" : String(value).trim();
}

normalizeText(null);          // ""
normalizeText("  hello  "); // "hello"

입력값이 반드시 문자열이어야 한다면 조용히 변환하지 말고 타입 오류를 냅니다.

function trimRequiredText(value) {
  if (typeof value !== "string") {
    throw new TypeError("value must be a string");
  }
  return value.trim();
}

2. JSON.parse 뒤 데이터 형태까지 검사

function parseJsonObject(text) {
  const value = JSON.parse(text);

  if (value === null || typeof value !== "object" || Array.isArray(value)) {
    throw new TypeError("JSON object expected");
  }

  return value;
}

3. $.type을 한 함수로 기계적으로 바꾸지 않기

function valueKind(value) {
  if (value === null) return "null";
  if (Array.isArray(value)) return "array";
  return typeof value;
}

const requestedAt = Date.now();

typeof, Array.isArray, instanceof 중 어떤 검사가 맞는지는 기존 분기 조건이 구분하려던 값에 따라 결정합니다.

4. CDN 사용 시 공식 SRI 적용

<script
  src="https://code.jquery.com/jquery-4.0.0.min.js"
  integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao="
  crossorigin="anonymous"></script>

사내 번들에 포함한다면 패키지 잠금 파일과 빌드 결과에서 실제 버전을 확인합니다. 화면에 jQuery를 두 번 로드해 오류를 숨기는 방식은 플러그인 상태와 이벤트 핸들러를 분리할 수 있으므로 해결책으로 사용하지 않습니다.

실패 조건·브라우저·버전 차이

• $.trim(value)를 전부 String(value).trim()으로 바꾸면 null·undefined의 결과가 달라집니다.
• $.type(value)를 전부 typeof value로 바꾸면 null과 배열 분기가 깨집니다.
• JSON.parse()도 잘못된 JSON에서 SyntaxError를 내므로 오류 처리 정책이 필요합니다.
• jQuery 객체의 push, sort, splice에 의존했다면 .toArray()로 일반 배열을 만든 뒤 배열 메서드를 적용합니다.
• jQuery 4.0 공식 지원 범위는 IE 11, 현재 및 직전 Chrome·Edge·Firefox·Safari, 현재 Opera, 최근 Safari Mobile iOS·Android입니다. IE 10 이하와 Edge Legacy 등은 제외됩니다.
• 실제 브라우저와 focus·blur 이벤트 순서는 이번 실행에서 확인하지 못했습니다.

보안·호환성 주의사항

공식 업그레이드 가이드는 dataType: "json" 요청을 callback 유무만으로 JSONP로 자동 승격하던 동작이 제거됐다고 설명합니다. 원격 도메인의 코드를 의도치 않게 실행할 수 있는 보안 문제 때문입니다. 기존 요청이 깨졌다고 JSONP를 무조건 다시 활성화하지 말고 서버의 CORS 정책과 응답 형식을 먼저 확인해야 합니다.

jQuery 4.0은 Trusted Types 입력과 CSP 관련 처리를 개선했지만, 이 테스트에서는 실제 CSP 헤더와 TrustedHTML을 실행하지 않았습니다. 보안 정책 통과를 보장하는 결과가 아닙니다.

공식 가이드에 따르면 jQuery UI는 1.13.3 이상이 jQuery 4.0과 호환됩니다. 다른 플러그인은 각각의 지원 버전을 확인해야 하며 유지보수가 끝난 플러그인은 테스트 없이 그대로 올리지 않습니다.

권장 순서는 최신 jQuery 3.x에서 기존 경고를 정리하고, jQuery 4.x와 압축하지 않은 Migrate 4.x를 함께 로드해 콘솔 경고를 수정한 뒤, 마지막에 Migrate를 제거하고 다시 테스트하는 방식입니다. Migrate가 오류를 임시로 가리는 상태를 완료로 보지 않습니다.

직접 확인 방법

1. 공식 jQuery 릴리스 페이지에서 3.7.1·4.0.0 파일 URL과 SRI를 확인합니다.
2. 테스트 폴더에서 npm ci --ignore-scripts --no-audit --no-fund를 실행합니다.
3. Node.js 24.x 호환 버전인지 확인한 뒤 node test.mjs를 실행합니다.
4. 출력의 두 sri= 줄과 마지막 overall=PASS를 확인합니다.
5. 실제 프로젝트 복사본에서 jQuery 4.x와 Migrate 4.x를 로드하고 콘솔 경고를 0건으로 줄입니다.
6. 로그인, 폼 전송, Ajax, 동적 DOM, 포커스 이동, 사용 중인 플러그인을 실제 지원 브라우저에서 다시 확인합니다.

공식 참고자료

• jQuery 4.0.0 공식 발표
• jQuery Core 4.0 Upgrade Guide
• jQuery 공식 CDN 릴리스와 SRI
• MDN String.prototype.trim()
• MDN JSON.parse()

변경 이력

• 2026-08-04: 공식 파일 SRI와 제거 API, null·배열 의미 차이, 잘못된 JSON 조건을 재현했습니다.
• 2026-08-04: 실제 브라우저 실행 실패를 미실행 한계로 분리하고 최근 커뮤니티 표본 부족을 점수에 반영했습니다.