본문 바로가기

javascript79

[javascript] mouseover, mouseout 마우스 이벤트의 개념과 활용 오늘은 자바스크립트의 기본 이벤트인 mouseover, mouseout에 대해서 정리해 보려고 한다. 이름에서도 알 수 있듯이 마우스 관련 이벤트이며, 기능의 개념과 예제 코드를 통해 정리해보려고 한다. 웹 개발에서는 없어서는 안 될 이벤트 중 하나이며, 다양한 유형의 이벤트가 있다. 마우스 이벤트 종류 자바스크립트에서 마우스 이벤트는 다양하게 지원이 되고 있는데, 이러한 마우스 이벤트는 사용자와의 상호작용을 통해 웹 페이지를 보다 동적으로 만드는 데 유용하다. click 마우스를 클릭할 때 발생하는 이벤트이며, 주로 버튼 클릭, 링크 클릭, 요소선택 등에 사용된다. dbclick 마우스를 빠르게 두 번 클릭할 때 발생하는 이벤트이다. mousedown 마우스 버튼을 누르는 순간 발생하는 이벤트이다. .. 2022. 12. 23.
[javascript] setTimeout 알아보기! ( + 날짜 포맷 parseDate ) 자바스크립트에서 기본 함수 중에서 정말 많이 사용되는 setTimeout 함수에 대해서 정리해 보려고 한다. UI 개발을 한다면 정말 다양한 환경에서 setTimeout 함수를 필요로 할 것이고, 단순하게 사용하면 간단하지만 함수의 활용도가 높기 때문에 조금 더 깊이 있게 숙지해 둔다면 좋을 것 같다. 처음 함수를 공부할 때에는 setInterval과 유사하다 보니 헷갈리기도 하고 많이 헤맸던 기억이 있다. 하지만 다양한 상황을 겪으면서 활용하다 보니 생각보다 빠르게 기능을 익혔던 기억이 있다. UI 개발은 생각보다 동적으로 처리해야 하는 부분이 많기 때문에 모든 프로세스를 한 번에 딱! 맞춰서 처리하기보다는 상황에 맞게 비동기로 처리되어야 하는 경우도 있다. 이러한 경우에 setTimeout을 적절히 .. 2022. 12. 22.
[vue3] vue3-echarts multi bar 차트 만들기 오늘은 vue3-echarts 라이브러리를 활용해서 multi bar 차트를 만들어 보고 어떤 차트인지 정리해 보려고 한다. UI 개발을 하면서 데이터 시각화 하는 상황은 많이 있으며, 그중 기본이 되는 bar 형태의 차트는 정말 많이 사용된다. 하나의 series로 구성된 차트도 많이 사용하지만 여러 개의 series를 한 번에 그리며 multi 형태로 시각화하여 데이터를 비교 분석하는 경우도 많이 있다. 이런 경우에 많이 사용되는 유형이 multi bar 차트다. multi bar 차트의 활용 사례 multi bar 차트를 만들어 보기 전에 어떤 상황에서 주로 활용되는지 사례를 정리해 보았다. 다중 범주 비교 여러 범주 또는 그룹 간의 데이터를 비교해야 할 때 multi bar 차트를 사용한다. 예.. 2022. 12. 21.
[Vue3] vue3-echarts - multi line 차트 만들기 오늘은 지난 시간에 이어 multi line 차트를 만들어 보려고 한다. 지난 글에서는 line + bar 차트를 생성해 봤는데, 오늘은 조금 더 응용해서 multi line 차트에 대한 내용을 주제로 정리해 보려고 한다. multi line 차트 역시 다양한 환경에서 활용하는데 매우 유용한 형태의 차트라고 볼 수 있다. 이름에서도 알 수 있듯이 multi line은 여러 개의 라인을 한 번에 그리는 차트다. multi line 차트의 개념 multi line 차트는 여러 개의 선 그래프가 하나의 차트 위에 표시되는 데이터 시각화 방법이다. 각 선은 서로 다른 데이터 시리즈를 나타내며, 시간 또는 다른 기준에 따른 값의 변화를 보여준다. 1. 다중 데이터 시리즈 multi line 차트는 여러 개의 데이.. 2022. 12. 21.
[리액트네이티브] Task 'installDebug' not found in project ':app'. Some candidates are: 'installDevDebug', 'installQaDebug', 'installUaDebug'. 오늘은 React-Native를 개발하다가 발생한 에러 내용에 대해서 해결한 내용을 정리해 보려고 한다. React-Native를 개발한 지는 오래되지 않았는데, 생각보다 정보가 부족하고 공부가 부족해서 시간이 오래 걸린 것 같다. 그 와중에 다양한 에러를 만나면서 해결해 나가고 있는 것들을 정리해야 할 것 같다. 에러 내용 > Task 'installDebug' not found in project ':app'. Some candidates are: 'installDevDebug', 'installQaDebug', 'installUaDebug'. > Task 'installLocal' not found in project ':app'. Some candidates are: 'installLocalDeb.. 2022. 12. 15.
jQuery 텍스트 문구 자동 롤링 기능 (fade in / out) 지난번 animate 기능으로 구현한 텍스트 문구 자동 롤링에 이어 오늘은 fadein과 fadeout 기능을 활용하여 문구 자동 롤링 처리되는 기능에 대해서 정리해 보려고 한다. 사용하는 함수는 다르지만 효과는 매우 유사하며, animate 함수가 아니더라도 동일한 기능을 낼 수 있다. 개발자라면 하나의 기능 구현보다는 다양한 기능을 활용하여 동일한 기능을 구현해 보는 것도 매우 중요하다. 기능을 정리하기에 앞서 fadein과 fadeout 함수에 대해서 개념을 정리하고 시작하는 것이 좋다. fadein(), fadeout() 함수 텍스트 문구의 자동 롤링 가능을 구현하는 데에는 jQuery의 fadeIn()과 fadeOut() 함수를 사용할 수 있다. animate()함수와 달리 두 개의 이들을 조합.. 2022. 2. 17.