JavaScript 13

[JavaScript] 문자열을 구분자로 배열로 나누는 방법 - Split()

JavaScript에서 문자열을 특정 구분자를 기준으로 나누어 배열로 변환하는 가장 기본적인 방법은 split() 메서드를 사용하는 것입니다. 이번 글에서는 split() 메서드의 사용법과 함께 다양한 예제를 통해 이를 이해해보겠습니다.기본 사용법split() 메서드는 문자열을 지정된 구분자로 나누어 배열로 반환합니다.const text = "apple,banana,grape";const result = text.split(",");console.log(result); // 출력: ["apple", "banana", "grape"] 위 예제에서 문자열 text는 쉼표(,)를 기준으로 나뉘어 세 개의 요소를 가진 배열로 변환됩니다.공백을 기준으로 나누기공백 문자를 기준으로 문자열을 나눌 수도 있습니다.co..

Develop 2025.01.20

[JavaScript] a 링크에서 이동 없이 JavaScript 함수만 실행하기

a 링크에서 이동 없이 JavaScript 함수만 실행하기웹 개발 시  태그를 사용하면서 특정 작업을 위해 페이지 이동 없이 JavaScript 함수만 실행하고 싶을 때가 있습니다. 이 경우, 링크의 기본 동작(페이지 이동)을 막아야 합니다. 이 글에서는 이를 구현하는 방법과 함께 간단한 예제를 제공합니다.기본 동작 막기: event.preventDefault() 태그는 클릭 시 기본적으로 href 속성에 지정된 URL로 이동합니다. 이를 막으려면 JavaScript의 event.preventDefault()를 사용하면 됩니다.event.preventDefault()는 이벤트의 기본 동작을 중단시키는 함수입니다.방법 1: onclick 속성 사용HTML의 onclick 속성에서 JavaScript 코드를..

Develop 2024.11.29

[JavaScript] Date() 함수 설명과 사용방법 예제

JavaScript의 Date() 함수는 날짜와 시간을 다룰 수 있는 강력한 도구입니다. 이 함수는 현재 날짜와 시간을 가져오거나, 특정 날짜와 시간을 설정하고, 이를 다양한 형식으로 조작할 수 있게 해줍니다. 날짜 및 시간을 처리할 때, 자주 사용되는 함수 중 하나입니다.Date() 함수란?Date()는 JavaScript에서 기본적으로 제공하는 내장 객체로, 날짜와 시간을 나타냅니다. 이 객체는 현재 날짜와 시간을 가져오거나, 특정한 날짜와 시간을 계산하는 데 사용할 수 있습니다. 주로 시스템의 시간 정보를 기반으로 하기 때문에, 현재 시간을 기준으로 동작합니다.기본 사용법let now = new Date();console.log(now); 이 코드는 현재의 날짜와 시간을 Date 객체로 반환합니다...

Develop 2024.10.24

[JavaScript] 현재 웹페이지의 URL을 가져오는 방법

웹 애플리케이션이나 웹사이트에서 종종 현재 페이지의 URL을 동적으로 처리하거나 분석할 필요가 있을 때가 있습니다. JavaScript는 이를 위한 간단하고 유용한 방법들을 제공합니다. 특히 window.location 객체를 사용하여 URL 정보를 쉽게 가져올 수 있습니다.  1. window.location 객체란?window.location 객체는 현재 웹 페이지의 URL을 관리하는 객체로, 이 객체를 통해 현재 페이지의 URL 정보를 가져오거나, URL을 변경할 수도 있습니다. 이 객체는 웹 페이지와 관련된 다양한 속성을 제공하며, 페이지의 전체 URL뿐만 아니라 그 구성 요소들도 쉽게 접근할 수 있습니다.주요 속성들:window.location.href: 전체 URL 문자열을 반환합니다.wind..

Develop 2024.10.12

[JavaScript] 비구조화 할당 (Destructuring Assignment) 배열 또는 객체의 값 추출

1. 비구조화 할당 (Destructuring Assignment)란?비구조화 할당은 배열(Array) 또는 객체(Object)의 값을 쉽게 추출하고, 이를 변수에 담아 사용하는 방법입니다. 코드의 가독성을 높이고, 특히 여러 개의 변수를 한 번에 선언하고 값을 할당할 때 매우 유용합니다.배열 비구조화배열에서 비구조화 할당을 사용하면, 배열의 각 요소를 변수에 쉽게 할당할 수 있습니다.// 배열 비구조화 할당const fruits = ["apple", "banana", "orange"];// 비구조화 할당으로 배열 요소를 변수에 담기const [firstFruit, secondFruit, thirdFruit] = fruits;console.log(firstFruit); // appleconsole.lo..

Develop 2024.10.09

[JavaScript] 배열에서 객체(오브젝트)의 위치를 찾는 방법 - indexOf 대신 findIndex 활용하기

JavaScript에서 배열에 값이 포함되어 있는지, 또는 값이 배열 내에서 어느 위치에 있는지 확인하기 위해 흔히 indexOf 메서드를 사용합니다. 그러나 배열의 값이 객체로 이루어져 있을 경우, indexOf는 원하는 결과를 제공하지 않습니다. 객체는 참조형 데이터이기 때문에, 동일한 구조의 객체라도 서로 다른 메모리 주소를 가지고 있기 때문입니다. 이런 경우에는 findIndex 메서드를 사용하는 것이 적합합니다. 1. 기본적인 indexOf의 한계indexOf는 원시 데이터 타입(문자열, 숫자 등)으로 이루어진 배열에서 특정 값을 찾을 때는 잘 작동합니다.// 문자열 배열에서 indexOf 사용const fruits = ["apple", "banana", "cherry"];const index ..

Develop 2024.10.08

[Javascript] jQuery 이벤트의 동적 바인딩과 정적 바인딩

JavaScript를 사용하여 HTML 요소에 이벤트를 연결할 때, jQuery에서는 두 가지 방식으로 이벤트를 바인딩할 수 있습니다: 정적 바인딩과 동적 바인딩입니다. 각각의 차이를 이해하고 적절히 사용하는 것은 웹 애플리케이션 개발에서 매우 중요합니다. 1. 정적 바인딩 (Static Binding)정적 바인딩은 페이지가 로드된 후 특정 요소에 대해 이벤트를 직접 바인딩하는 방식입니다. 즉, DOM에 이미 존재하는 요소에 대해서만 이벤트가 바인딩됩니다. 이 방식에서는 새로운 요소가 동적으로 추가되면, 해당 요소에는 이벤트가 바인딩되지 않습니다.예제: 정적 바인딩 정적 버튼 새 버튼 추가위 코드에서는 #static-button 요소에만 클릭 이벤트가 바인딩되어 있습니다. 즉, 페이지가 로드될..

Develop 2024.10.02

[JavaScript] map() 메서드 사용방법 및 활용 예제

JavaScript의 map() 메서드는 배열의 모든 요소에 대해 함수를 호출하고, 그 결과를 새로운 배열로 반환하는 매우 유용한 배열 메서드입니다. map() 메서드는 기존 배열을 변경하지 않고, 각 요소를 변형한 결과를 새 배열로 반환합니다.문법array.map(function(currentValue, index, array) { // return element for new array}, thisArg);currentValue: 배열에서 현재 처리되고 있는 요소입니다.index (선택 사항): 현재 처리되고 있는 요소의 인덱스입니다.array (선택 사항): map() 메서드를 호출한 배열입니다.thisArg (선택 사항): 콜백 함수 내부에서 this로 사용할 값입니다.특징map()은 새로운 배..

Develop 2024.09.24

[Javascript] 스크롤 div 밑에 영역 감지해서 이벤트 발생시키기

화면에서 특정 div 영역에서 상품들이 나열되어 있을 때 추가로 상품을 append 해야 하는대 스크롤이 해당 상품 리스트 영역의 하단에 왔을 때 이벤트를 발생시켜서상품을 추가하고 싶을 때 사용 영역들이 여러개 존재할 수 있고 유동적으로 생성될때도 적용할 수 있게 구성data-prdappendyn="N" 는 추가적으로 더 이벤트를 발생시킬지 여부를 판단. 상황에 따라 추가할 내용이 없으면 값을 변경 ... 상품들 ... ... 상품들 ... ... 상품들 ..

Develop 2024.09.06

[Javascript] html 테이블을 엑셀 다운로드 하기

▶ SheetJS 라이브러리 [xlsx.full.min.js 다운로드 이용]https://www.cdnpkg.com/xlsx/file/xlsx.full.min.js/?id=78603 XLSX.FULL.MIN.JS: DOWNLOAD - CDNPKGxlsx.full.min.js is available in 105 versions of xlsx. 0.15.6 0.15.5 0.15.4 0.15.1 0.15.0 0.14.5 0.14.4 0.14.3 0.14.2 0.14.1 0.14.0 0.13.5 0.13.4 0.13.3 0.13.2 0.13.1 0.13.0 0.12.13 0.12.12 0.12.11 0.12.10 0.12.9 0.12.8 0.12.7 0.12.6 0.12.5 0.12.4 0.12.3 0www.c..

Develop 2024.08.30