본문 바로가기

javascript79

jQuery click 이벤트의 개념과 활용방법 알아보기 오늘은 jQuery의 기본 기능 중 하나인 click 이벤트에 대해서 정리해 보려고 한다. 화면 개발에서 가장 많이 사용하는 이벤트가 아닐까 생각한다. 그만큼 사용자가 가장 많이 사용하는 기능인 것이고, 그만큼 기능의 사용법과 특징, 주의사항 등을 잘 알아두는 것이 중요하다. jQuery는 러닝커브가 낮은 편이고, click 이벤트와 같이 흔한 기능을 위주로 학습한다면 실력 향상이 빠르다는 것을 느낄 수 있다는 장점이 있다. click 이벤트의 개념 jQuery에서의 click 이벤트는 웹 페이지에서 요소를 클릭했을 때 발생하는 이벤트를 처리하기 위한 함수다. 이를 통해서 사용자와의 상호작용에 대한 반응을 구현할 수 있다. 선택자의 활용 jQuery에서는 css 선택자를 사용하여 특정 요소를 선택할 수 .. 2022. 12. 28.
[javascript] 자바스크립트 getElementById() 알아보자! 오늘은 자바스크립트의 기본 내장 함수인 getElementById()에 대해서 정리해보려고 한다. 이름에서도 알 수 있듯이 document 요소의 id를 기준으로 조회하고 다룰 수 있는 함수다. class를 다루는 getElementsByClassName, 태그 명을 다루는 getElementsByTagName, name을 다루는 getElementsByName 등과 같이 유사한 함수들이 있지만 조회 대상과 사용법은 조금씩 다르다는 차이점이 있다. getElementById의 특징과 사용 방법 등을 정리하고, 다른 함수들과는 어떤 차이가 있는지도 확인해 보도록 하자. getElementsById() getElementsById() 함수는 자바스크립트의 DOM 요소를 다루는 메서드 중 하나로, HTML 문.. 2022. 12. 28.
[javascript] 자바스크립트 date parse 날짜 파싱 배우기 (date to string) 오늘은 자바스크립트에서 날짜 데이터를 다루는 방법에 대해서 정리해 보려고 한다. 날짜 파싱은 date 형태의 값을 문자열 형태의 원하는 포맷 형식으로 변경하는 방법이다. 날짜 관련한 기능은 화면 개발에서 빼놓을 수 없는 부분 중 하나인데, 특히 날짜 포맷 처리하는 방법은 매우 중요한 부분이다. Date to string parsing 자바스크립트에서 date 형태의 날짜를 문자열 형태의 원하는 포맷으로 변경하는 것이며, 화면에서 날짜 데이터를 표현할 때에는 날짜 포맷이 맞지 않은 경우에는 원하는 문자열 형태의 포맷으로 변경을 해줘야한다. 자바스크립트에서는 Date 객체를 사용하여 날짜와 시간을 나타내며, 이 객체에는 다양한 메서드가 있어 날짜를 원하는 형식의 문자열로 변환할 수 있다. Date 객체에서.. 2022. 12. 27.
[javascript] 이벤트 전파 막기 (preventDefault, stopPropagation) 오늘은 자바스크립트의 기능 중 이벤트의 전파와 관련된 preventDefault와 stopPropagation에 대해서 정리해 보려고 한다. 이벤트 전파를 막는 것은 웹 애플리케이션에서 중요한 기능 중 하나다. 이벤트 전파에 대해 처리를 제대로 하지 않고 기능을 구현한다면 잠재적인 오류가 빈번히 발생할 수 있고, 중복된 이벤트가 발생하여 서비스의 성능이 문제가 될 수 있다. 특히 UI를 담당하는 자바스크립트를 학습하고 있다면 자바스크립트는 동적인 처리를 많이 하기 때문에 반드시 이벤트 전파에 대한 내용을 숙지하는 것이 중요하다. 이벤트 전파란? 자바스크립트에서 이벤트 전파란 한 요소에서 발생한 이벤트가 그 요소의 부모나 자식 요소에 전달되는 현상을 말한다. 캡처링 단계 (Capturing phase) 이.. 2022. 12. 25.
[javascript] setInterval, clearInterval ( +setTimeout 차이점) 알아보자! 오늘은 자바스크립트의 내장 함수 중 시간을 다루는 setInterval과 clearInterval 함수에 대해서 알아보려고 한다. 지난번에는 setTimeout 함수에 대해 알아보았는데, 유사하지만 다른 특징이 있기 때문에 setInterval에 대해서도 정리해보려고 한다. setTimeout 함수는 지정된 지연 시간이 지난 후 1회만 실행되고 종료되지만, setInterval은 지정된 시간이 지날 때마다 주기적으로 실행이 되는 차이점이 있다. 그렇기 때문에 상황에 따라서 setTimeout을 사용할지, 아니면 setInterval을 사용할지 고려하고 사용하는 것이 중요하다. setInterval setInterval 함수는 일정한 시간 간격마다 지정된 함수를 반복적으로 실행하는 자바스크립트의 타이머 함.. 2022. 12. 24.
[vue3] vue3-echarts scatter 차트 (dot) 만들기! 오늘은 vue3-echarts를 이용하여 scatter 차트, 또는 dot 차트라고 하는 유형의 차트에 대해서 정리해 보려고 한다. scatter 차트는 데이터의 분포도를 나타낼 때에 유용한 데이터 시각화 차트다. 실제 업무에서는 scatter 차트를 사용했던 경험은 많이 없지만 최근 개발을 진행하면서 scatter 유형의 차트를 구현했던 경험이 있기 때문에 이렇게 글을 정리하게 되었다. Scatter 차트의 개념 Scatter 차트는 데이터를 산점도 형태로 표현하는 차트다. 이 차트는 두 변수 간의 관계를 시각적으로 파악할 수 있도록 도와주며, 각각의 데이터 포인트는 데이터 집합에서 하나의 점으로 나타난다. Scatter 차트는 일반적으로 X축과 Y축에 각각의 변수를 할당하고, 데이터 포인트를 해당 .. 2022. 12. 23.

티스토리툴바