시리즈·멀티캠퍼스 JAVA 풀스택 개발자 아카데미 6회차(30개의 글)
- ···
- 4.
[멀티캠퍼스] 풀스택 개발자 아카데미 (4) - jQuery - 5.[멀티캠퍼스] 풀스택 개발자 아카데미 (5) - jQuery(2)현재
- 6.
[멀티캠퍼스] 풀스택 개발자 아카데미 (6) - React - ···
1. jQuery DOM 요소 조작
1.1. DOM 요소 삽입/삭제 관련 메서드
| 메소드 | 설명 |
|---|---|
text() | 글자와 관련된 내용을 반환하거나 설정 |
html() | HTML과 관련된 내용을 반환하거나 설정 |
$(선택자).append(A) | 선택자의 내부 요소들 맨 뒤에 A를 삽입 |
$(선택자).prepend(A) | 선택자의 내부 요소들 맨 앞에 A를 삽입 |
$(A).appendTo(선택자) | A를 선택자의 내부 요소들 맨 뒤에 삽입 |
$(A).prependTo(선택자) | A를 선택자의 내부 요소들 맨 앞에 삽입 |
$(선택자).after(A) | 선택자 뒤에 A 삽입 |
$(선택자).before(A) | 선택자 앞에 A 삽입 |
$(A).insertAfter(선택자) | A를 선택자의 뒤에 삽입 |
$(A).insertBefore(선택자) | A를 선택자의 앞에 삽입 |
$(선택자).remove() | 해당되는 요소 제거 |
$(선택자).empty() | 해당되는 요소의 모든 자식 노드 제거 |
text()와html()메소드는 자바스크립트의 innerHTML 속성과 유사하다.html()은 HTML 태그를 인식하여 효과를 적용하지만,text()는 HTML 태그를 인식하지 못하고 글자로 인식한다.
Caution
html()과 XSS 공격
사용자로부터 입력받은 값을 화면에 표시할 때, html() 메소드를 무분별하게 사용하면 Cross-Site Scripting(XSS) 공격에 취약해질 수 있다. 악의적인 스크립트 태그가 포함된 문자열이 그대로 실행될 수 있기 때문이다. 따라서 신뢰할 수 없는 외부 입력값을 다룰 때는 반드시 text()를 사용하여 HTML 태그가 문자로 처리되도록 해야 한다.Note
remove()와 empty()의 명확한 구분
$('#box').empty()는 <div id="box"></div> 상태로 만들지만, $('#box').remove()는 <div id="box"> 요소 자체를 페이지에서 완전히 삭제한다는 차이점을 명확히 인지해야 한다.1.2. 속성 및 클래스 제어
요소의 속성(Attribute)이나 클래스(Class)를 변경하여 스타일이나 동작을 동적으로 제어할 수 있다.
| 메소드 | 설명 |
|---|---|
attr('속성명', '값') | 요소의 속성(attribute)을 가져오거나 설정한다. |
removeAttr('속성명') | 요소의 특정 속성을 제거한다. |
addClass('클래스명') | 요소에 지정된 CSS 클래스를 추가하여 스타일을 적용한다. |
removeClass('클래스명') | 요소에 적용된 CSS 클래스를 제거한다. |
toggleClass('클래스명') | 지정된 클래스가 없으면 추가하고, 있으면 제거한다. 두 상태를 전환할 때 매우 유용하다. |
Note
attr() vs prop(): 속성과 프로퍼티의 차이
jQuery에서 요소의 상태를 제어할 때 attr()과 prop()의 차이를 아는 것은 매우 중요하다. attr()는 HTML에 명시된 속성 값을 다루는 반면, prop()는 DOM 요소가 가진 프로퍼티(속성) 값을 다룬다. 예를 들어 체크박스의 '체크 여부'는 사용자의 클릭에 따라 변하는 상태이므로 $('#cb').prop('checked')와 같이 prop()로 제어하는 것이 올바르다. disabled, selected 등 상태와 관련된 값은 prop()를 사용하는 것이 권장된다.Tip
toggleClass()를 활용한 간결한 UI 구현
메뉴 열기/닫기, 다크 모드 전환 등 두 가지 상태를 오가는 UI를 만들 때, toggleClass()를 사용하면 if/else 조건문 없이 단 한 줄의 코드로 깔끔하게 기능을 구현할 수 있다.2. 시각적 효과 (Effects)
jQuery는 사용자의 시선을 사로잡는 다양한 애니메이션 효과를 간단하게 구현할 수 있는 메소드들을 제공한다.
| 메소드 | 설명 |
|---|---|
hide() / show() / toggle() | 요소를 즉시 또는 점진적으로 숨기거나, 표시하거나, 두 상태를 전환한다. |
slideUp() / slideDown() / slideToggle() | 요소를 슬라이딩 효과로 숨기거나, 나타나게 하거나, 두 상태를 전환한다. |
fadeOut() / fadeIn() / fadeToggle() | 요소의 투명도를 조절하여 페이드 효과로 숨기거나, 나타나게 하거나, 전환한다. |
fadeTo(speed, opacity) | 요소의 불투명도를 지정된 값으로 조절한다. 투명도가 0이 되어도 공간은 유지된다. |
animate({속성}, speed, callback) | 사용자 정의 CSS 속성으로 복잡한 애니메이션 효과를 직접 만들 수 있다. |
stop(clearQueue, goToEnd) | 현재 실행 중이거나 대기 중인 애니메이션을 중지시킨다. |
Important
애니메이션 큐(Queue)와 stop() 메소드의 중요성
마우스 오버(hover) 이벤트에 애니메이션을 적용할 때, 마우스를 빠르게 여러 번 움직이면 애니메이션이 중첩되어 의도치 않게 계속 실행되는 '애니메이션 큐' 문제가 발생한다. 이를 방지하려면 애니메이션 시작 전에 $('선택자').stop().animate(...)와 같이 stop() 메소드를 호출하여 대기 중인 애니메이션을 초기화하는 습관이 매우 중요하다.Tip
슬라이딩 효과는 <div>에 적용하라
<img> 태그에 직접 slideUp()이나 slideDown() 효과를 적용하면, 이미지가 위아래로 찌그러지며 어색하게 보일 수 있다.Note
fadeOut()과 fadeTo(0)의 레이아웃 차이
fadeOut()은 요소를 사라지게 만들면서 display: none 상태로 만들어 차지하던 공간까지 없앤다. 레이아웃 유지 여부에 따라 적절한 메소드를 선택해야 한다.3. 이벤트 처리
정교한 상호작용은 이벤트 처리로부터 시작된다. jQuery는 이벤트 전파를 제어하는 강력한 기능을 제공한다.
3.1. 이벤트 전파(Propagation) 제어
DOM에서는 자식 요소에서 발생한 이벤트가 부모 요소로 전달되는 **이벤트 버블링(Event Bubbling)**이 기본 동작이다. 때로는 이 기본 동작을 막아야 할 필요가 있다.
| 메소드/구문 | 설명 |
|---|---|
event.preventDefault() | <a> 태그의 링크 이동, form의 제출 등 특정 요소의 고유한 기본 동작을 중단시킨다. |
event.stopPropagation() | 이벤트가 상위(부모) 요소로 전파(버블링)되는 것을 막는다. |
event.stopImmediatePropagation() | 이벤트 전파를 막을 뿐 아니라, 현재 요소에 바인딩된 다른 리스너의 실행까지 모두 중단시킨다. |
return false | jQuery 이벤트 핸들러 내에서 사용 시, event.preventDefault()와 event.stopPropagation()을 동시에 호출한 것과 같다. |
Important
폼 유효성 검사에는 preventDefault()가 필수
submit 이벤트 핸들러에서 사용자의 입력값을 검증하고, 만약 유효하지 않을 경우 event.preventDefault()를 호출하여 폼 제출을 막아야 한다. 유효성 검사를 통과했을 때만 폼이 제출되도록 로직을 제어할 수 있다.Tip
stopPropagation()의 신중한 사용
이벤트 버블링은 이벤트 위임(Event Delegation)과 같이 유용한 패턴에도 사용된다. 무조건 stopPropagation()으로 전파를 막으면, 상위 요소에서 이벤트를 감지하여 처리하는 로직이 동작하지 않을 수 있다. 이벤트 전파를 막기 전에 전체적인 구조에 미칠 영향을 반드시 고려해야 한다.