javascript78 자바스크립트 match() 함수 특정 문자 찾기 자바스크립트에서 문자열 내에서 특정 문자를 찾아야 하는 경우가 종종있다. 다양한 방법이 있는데, 오늘은 그 중에서 match() 함수를 활용한 방법을 정리해보려고 한다.match() 함수는 전체 문자열에서 찾고자 하는 문자를 매개변수로 전달하면 결괏값을 배열 형태로 반환해주는 함수다. 만약 찾고자 하는 값이 없으면 null이 반환된다. 사용방법은 매우 간단하지만 해당 함수는 어떠한 특징을 가지고 있는지 하나씩 살펴보도록 하자.match() 함수의 특징자바스크립트의 match() 함수는 문자열 메서드 중 하나로서, 대상 문자열 내에서 정규 표현식과 일치하는 부분을 찾아주는 기능이다. match() 함수는 주어진 문자열에서 정규 표현식과 일치하는 부분을 배열로 반환하는데, 이 때, 정규 표현식을 매개변수로 .. 2024. 5. 7. 자바스크립트 화살표 함수란 무엇인가 자바스크립트의 화살표 함수는 함수를 정의하는 또 다른 방법 중 하나다. 보통 익명 함수라고도 한다. 이름에서도 유추할 수 있듯이 함수 형태는 이름이 없고, 중간에 화살표를 사용해 간결하게 작성하는 방법이다. 화살표 함수는 () => {} 와 같은 형식으로 작성이 되며, 기존의 함수 작성 방법보다 훨씬 더 간결한 형태라고 할 수 있다.화살표 함수는 과연 쓸만한 함수인지... 함수의 특징과 활용 사례 등을 살펴보자.화살표 함수 (익명 함수)화살표 함수는 ES6(ECMAScript 2015)에서 도입된 새로운 형태의 함수 문법이다. 기존의 함수 형태보다 표현식이 더 간결하고 가독성이 좋으며, 주로 콜백 함수나 간단한 함수를 작성할 때 많이 사용된다.문법화살표 함수는 () => {} 형태로 작성되며, 화살표 왼.. 2024. 5. 5. 자바스크립트 reduce() 함수의 특징과 활용 오늘은 자바스크립트의 reduce() 함수에 대해 정리해보려고 한다. reduce() 함수는 배열을 순회하면서 요소의 값을 누적시켜 합을 구할 수 있도록 도와주는 기능이다. 일반 for문을 사용하여 누적을 해도 되지만 누적을 위해 만들어진 함수라고 하니 어떤 특징과 장점들이 있는지 알아보자.reduce() 함수의 개념과 특징자바스크립트의 reduce() 함수는 배열의 각 요소에 대해 지정된 콜백 함수를 실행하고, 그 결과를 하나의 값으로 축약하는 함수다.reduce() 함수는 배열을 순회하면서 각 요소를 처리하고, 그 결과를 누적하면서 최종값을 반환하는 구조다.함수의 특징누적된 반환값reduce() 함수는 배열의 각 요소에 대해 지정된 콜백 함수를 지정하고, 그 결과를 누적하여 하나의 값으로 반환한다.초.. 2024. 4. 29. 자바스크립트 filter() 함수의 특징과 활용에 대한 내용 자바스크립트를 개발하다 보면 배열 객체를 다루는 일이 정말 많다. 배열 안의 특정 요소를 필터링하거나 특정 조건에 부합하는 요소만 따로 추출해 처리해야 하는 경우가 많다. 이러한 상황에 적합한 함수가 바로 filter() 함수다. 함수 명 그대로 필터를 시켜주는 기능을 하는데, 배열을 기준으로 특정 조건에 부합하는 요소만 모아서 반환시켜 주는 방식이다.그렇다면 filter() 함수는 어떤 특징이 있는지, 어떤 상황에 활용되는지 자세히 살펴보도록 하자.filter() 함수의 개념과 특징filter() 함수는 배열의 각 요소에 대해 제공된 함수를 호출하고, 그 함수가 true를 반환하는 요소로 새로운 배열을 생성해 반환하는 기능이다. 이 함수는 주어진 조건에 따라 배열을 필터링하는 데 유용하게 사용된다.조건.. 2024. 4. 27. 자바스크립트 some() 함수의 개념과 사용 방법 자바스크립트를 개발하다 보면 for문을 사용하여 로직 처리해야 하는 경우기 정말 많다. 기본 for문을 제외하고 정말 다양한 종류의 반복문 처리하는 기능이 있는데, 오늘은 그중에서 some() 함수에 대해서 정리해보려고 한다. 배열 객체를 기준으로 루프를 돌며 반복 처리한다는 개념은 같지만 내부적으로 처리되는 방식이 조금 다르다는 점이 있다. some() 함수는 어떤 차이가 있는지 개념과 특징, 사용법 등을 알아보자.some() 함수의 개념과 특징some() 함수는 배열의 각 요소에 대해 제공된 함수를 호출하고, 그 함수가 적어도 하나에 대해 true를 반환할 때 반복문을 종료하고 최종 결괏값을 true로 반환하게 된다. 그렇지 않으면 마지막 요소까지 확인하면서 true가 없다면 false를 반환한다.조.. 2024. 4. 26. 자바스크립트 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. 이전 1 2 3 4 ··· 8 다음 728x90
