- JavaScript vs JQuery : 무엇이 다를까?
JavaScript는 웹 페이지의 동적 기능을 구현하기 위한 기본 언어이자 웹 개발의 핵심 프로그래밍 언어이다.
이를 통해 DOM 조작, 이벤트 처리, 데이터 검증 등 다양한 기능을 직접 구현할 수 있다.
반면, JQuery는 JavaScript의 작업을 간소화하고 효율적으로 작성할 수 있도록 도와주는 라이브러리다.
JQuery를 활용하면 간단한 코드로 복잡한 동작을 구현할 수 있어 개발 속도를 크게 높여주지만, 내부적으로는 JavaScript로 변환되어 실행되므로 처리 속도 면에서는 순수 JavaScript보다 느릴 수 있다.
- 화면에서 사라지는 요소 :
empty()와hide()의 차이
empty() 메서드는 선택한 요소의 모든 자식 요소를 제거하여 콘텐츠를 비운다.
반면, hide() 메서드는 선택한 요소의 CSS를 display: none;으로 설정하여 화면에서 보이지 않게 한다.
즉, empty()는 요소 내부의 콘텐츠를 제거하고, hide()는 사용자 화면에서 요소를 숨기지만 DOM 구조에는 그대로 남아있게 된다.
따라서 사용자에게 요소를 일시적으로 숨기려면 hide()를, 요소의 콘텐츠를 완전히 제거하려면 empty()를 사용한다.
- 성능을 좌우하는 변수 선언의 전략
이벤트 핸들러를 작성할 때, 선택자를 매번 호출하면 성능에 영향을 줄 수 있다.
따라서 자주 사용하는 요소는 변수에 저장하여 재사용하는 것이 효율적이다.
그러나 한 번만 사용할 요소라면 굳이 변수를 선언하지 않고, 직접 선택자를 사용하는 것이 코드의 간결함을 유지하는 데 도움이 된다.
즉, 반복해서 사용하는 요소는 변수에 저장하여 코드의 효율성과 가독성을 높일 수 있다.
- 이벤트를 다루는 힘 :
addEventListener와e.preventDefault()
addEventListener는 요소에 이벤트 리스너를 추가하는 메서드로, 다양한 이벤트에 대해 특정 동작을 정의할 수 있다.
e.preventDefault()는 해당 이벤트의 기본 동작(ex : 폼 제출 시, 페이지 새로고침)을 막는 역할로, 사용자 정의 동작을 구현하는 데 유용하다.
이때, 이벤트 객체 e는 이벤트에 대한 정보를 담고 있으며, 이를 활용하여 이벤트를 제어할 수 있다.
느낀 점
[ 더 나은 코드를 향한 작은 걸음 ]
JavaScript와 JQuery는 각기 장단점이 있으며, 상황에 맞는 선택이 중요하다는 점을 다시 한 번 느꼈다.
또한, 코드의 효율성과 가독성을 높이기 위해 변수 선언과 이벤트 처리를 신중하게 고려해야겠다고 생각했다.
앞으로도 지속적인 학습과 실습을 통해 더 나은 코드를 작성할 수 있도록 노력해야겠다.
