[jQuery] noConflict - 식별자 중복, 이중 jQuery 충돌 방지

#. 개발한 내용이 jQuery 3 버전대에서만 처리되는 것이 있었습니다.

 

#. 그러나 기존 개발베이스는 jQuert 1 버전대를 사용하고 있었고 이미 개발되어있는 것이었기에 3 버전대로 변경하면 문법 및 존재하지 않는 기능 오류를 뱉어대는 것이었습니다.

 

#. 확인해 보니 새로 개발한 내용이 1 버전대에선 정상적으로 처리되지 않았습니다.

 

#. 그래서 찾아보던 중 이중으로 사용이 가능하다고 하여 noConflict 기능을 사용해 봤습니다.

 

---

#. noConflict()

• 기본 jQuery의 식별자는 $ 기호로 $("#ID") , $.ajax, $.each() 등과 같이 사용하게 됩니다.
  
  
• 그러나 식별자가 $인 다른 라이브러리를 같이 사용하고자 할 때 덮어 써지면서 기존 라이브러리 기능을 온전히 사용할 수 없게 됩니다.
  (대표적으로 jQuery와 protoType.js가 동일 식별자를 사용 - $)

<script type="text/javascript" src="경로/jquery-3.6.0.min.js"></script>
<script src="prototype.js"></script>

<script>
	$.ajax({
    	url : 'test.do'
    })  
</script>

- 위와 같이 jQuery가 먼저 선언됐고 protoType.js가 이후 선언됐다면 jQuery에서 사용하는 기능들을 제대로 실행할 수 없습니다.

 

---

#. noConflict()로 구분할 식별자 설정하기

<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script>
	$.noConflict(true);
</script>

<script src="prototype.js"></script> 
<script>
	jQuery.ajax({
		url : 'test.do',
		dataType : 'JSON',
		...
	})
</script>

- 이렇게 작성하면 jQuery를 충돌되지 않게 설정하였고 이로 인해 디폴트 값인 jQuery가 $ 대신 식별자로 사용됩니다.

 

---

#. jQuery를 상이한 버전으로 사용해야 할 때

• 이때에도 사용방법은 동일합니다.
  
  
• 나의 경우 임포트한 페이지에서 1 버전대를 선언해 두었고 실제 사용할 페이지에서 3 버전대를 선언하였습니다.

<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script>
    var $test = jQuery.noConflict(true);
    $test.ajax({
    	url : 'test.do'
    });
</script>

- 이렇게 작성하면 기존의 1 버전대 jQuery는 $ 식별자를 그대로 사용하게 되고 3 버전대는 $test를 $ 대신 붙여 사용할 수 있습니다.

 

 

===========================================================
틀린 내용이 있거나 이견 있으시면 언제든 가감 없이 말씀 부탁드립니다!

===========================================================