본문 바로가기

javascript79

자바스크립트 querySelector와 querySelectorAll 개념과 활용 오늘은 자바스크립트의 내장 함수인 querySelector에 대해서 정리해 보려고 한다. querySelector 함수는 document 요소를 간단하게 조회 및 조작할 수 있는 기능이다. 자바스크립트 기반의 개발을 하게 된다면 자주 사용하는 함수이지만 습관처럼 사용하는 것보다 기능을 조금 더 깊이 있게 배우고 익혀두는 것이 좋다. querySelector 자바스크립트의 querySelector 함수는 객체 DOM을 통해 HTML 내에서 요소를 선택하는 데 사용되는 기능이다. 이 함수는 css 선택자를 사용하여 요소를 선택하고 반환한다. 1. 요소 선택 querySelector를 사용하여 HTML 내에서 원하는 요소를 선택할 수 있으며, 선택자를 사용하여 단일 요소를 선택하며, 해당 요소가 여러 개 존재.. 2024. 4. 16.
[javascript] 천단위 콤마 찍기 (add comma) 오늘은 자바스크립트 개발을 하면서 정말 많이 사용하는 콤마 찍는 기능에 대한 내용을 정리해 보려고 한다. 기능은 정말 간단하지만 사용 빈도가 매우 많고 다양하기 때문에 한번 정리해 두면 두고두고 활용할 수 있는 유용한 기능이다. 자바스크립트의 순수 기능이기 때문에 해당 함수는 자바스크립트 기반의 라이브러리에서는 모두 호환이 된다. 특히 SPA (React, vue, React 등) 자바스크립트 기반이라면 모두 활용이 가능하다. 천 단위의 콤마 함수 천 단위의 콤마 함수는 일반적으로 숫자를 입력받아 천(1000) 단위마다 쉼표(,)를 추가하여 표현하는 기능의 함수다. 이 함수는 주로 금액이나 숫자를 사용자에게 표시할 때 사용되며, 숫자의 가독성을 높이고 이해하기 쉽게 도와준다. 기능은 매우 간단하지만 이러.. 2024. 4. 16.
[Vue3] vue3-echarts - line + bar 차트 만들기 vue3-charts 라이브러리를 이용하여 line + bar 차트를 만들어 보려고 한다. 화면 개발을 하다 보면 통계를 나타내는 화면을 만들어야 하는 상황이 종종 생기는데, 처음 마주한다면 어려움이 있겠지만 차트 개발은 한두 번 해봤다면 어렵지 않게 만들 수 있다. 지난번 글에서 만들어봤던 line 유형의 차트와 bar 유형의 차트를 오늘은 한 번에 생성하는 방법에 대해서 정리해 보려고 한다. Line + Bar 차트 사용 사례 보통 Line 차트와 Bar 차트를 사용하는 경우가 다양하게 있는데, 어떤 경우에 사용하는지 정리해 보았다. 1. 데이터 비교 여러 다양한 데이터 집한 간의 비교를 할 때 사용할 수 있다. 예를 들어, 시간에 따른 매출량과 이익을 함께 표시하여 매출과 이익 간의 관계를 시각적으.. 2024. 4. 16.
[Vue3] vue3-echarts - line 차트, smooth 차트, area 차트 만들기 오늘은 vue3-echarts 라이브러리를 활용하여 line, smooth, area 유형의 차트를 만들어 보려고 한다. UI 개발을 하면서 데이터 시각화하는 경우는 생각보다 많고, 시각화하는 유형도 생각한 것보다 다양하게 구현을 하게 된다. 기본 형태인 line 차트를 기반으로 해서 옵션을 조금만 추가해서 smooth, area 형태의 차트로도 구현이 가능하며, 옵션 하나로 훨씬 더 다양한 차트 구현이 가능하다. smooth 옵션 차트 smooth는 line 그래프의 부드러운 정도를 조절하는 옵션이다. 이 옵션을 활성화하면 선이 더 부드럽게 그려지며, 일반적으로 이 옵션은 데이터 포인트 사이를 부드럽게 연결하여 시각적으로 더 부드러운 곡선을 형성하게 된다. 선이 꺾이는 부분이 더 부드럽게 연결된다. 활.. 2024. 4. 16.
[Vue3] vue3-echarts - bar 차트 만들기 오늘은 vue에서 vue3-echarts 라이브러리를 활용한 bar 형태 차트를 만들어 보려고 한다. 차트 유형중 기본이 되는 bar 형태의 차트는 다양한 시각화 차트에서 많이 사용한다. 나 또한 다양한 환경에서 bar 형태의 차트를 많이 사용해 왔고, 최근에는 apache echarts 라이브러리를 이용해서 개발을 하고 있다. Apache에서 제공되는 라이브러리는 오픈 소스로서 생산성이 매우 좋다고 생각한다. 오늘 소개하는 시각화 차트를 그리는 Echarts 또한 개발이 쉽고 생산성이 좋은 것 같다. https://echarts.apache.org/en/index.html Apache ECharts ECharts: A Declarative Framework for Rapid Construction of.. 2024. 4. 15.
[리액트네이티브] react-native-config .env 수정 반영 안될 때 React-Native를 개발하다가 react-native-config를 이용하여 개발을 진행하는데 .env 파일 설정을 수정 후 설정 정보가 반영되지 않아 고생했던 내용을 정리해보려고 한다. 구글링을 통해서 찾아봤을 때에는 대부분 그냥 내용을 변경하면 적용이 된다고 했는데, React-Native 환경에서는 전혀 적용이 되지 않았다. 이 문제를 해결하기까지 2주는 시간을 투자했던 것 같다. .env 설정 반영시 체크 사항 우선 .env 설정을 반영하기 전에 다양한 케이스로 간단하게 해결될 수 있으며, 오늘 정리하는 해결 방안을 확인하기 전에 체크 사항을 먼저 확인해 보는 것이 중요하다. 그렇지 않으면 해결 방법을 실행해도 동일하게 반영이 되지 않을 수 있다. 1. 환경 변수 변경사항 확인 .env 파.. 2024. 4. 15.

티스토리툴바