프로그래밍/JavaScript 52

[Javascript] 배열을 문자열로 합치기

배열을 문자열로 합치는 방법 1. join() 배열을 하나의 문자열로 리턴 받을 때 구분값을 줄 수 있음 const arr = new Array('하나', '둘', '셋'); console.log(arr.join());// 하나,둘,셋 console.log(arr.join(''));// 하나둘셋 console.log(arr.join(' '));// 하나 둘 셋 console.log(arr.join(', '));// 하나, 둘, 셋 console.log(arr.join('-'));// 하나-둘-셋 2. toString() 콤마(,)로 구분된 하나의 문자열 리턴 const arr = new Array('하나', '둘', '셋'); console.log(arr.toString());// 하나,둘,셋

[Javascript] 자바스크립트 slice와 splice 비교

slice 배열의 일부분을 추출하여 새로운 배열을 반환 원본 배열은 변경되지 않음 사용 방법 array.slice(startIndex, endIndex); startIndex - 추출 시작 인덱스 (포함). 음수 값이면 배열의 끝에서부터 카운트 endIndex - 추출 종료 인덱스 (제외). 생략하면 배열의 끝까지 추출. 음수 값이면 배열의 끝에서부터 카운트 예시 const numbers = [1, 2, 3, 4, 5]; const slicedNumbers = numbers.slice(1, 4); console.log(slicedNumbers); // [2, 3, 4] splice 배열에서 요소를 추가, 삭제 또는 교체하는데 사용 원본 배열을 수정함 사용 방법 array.splice(startIndex,..

[Javascript] 숫자인지 체크하는 방법

isNaN() isNaN() 함수는 주어진 값이 "Not-a-Number"인지 여부를 판별하는 함수 전달된 값이 숫자가 아닌 경우 true를 반환, 숫자인 경우 false를 반환 예시 console.log(isNaN(123)); // 출력: false console.log(isNaN('Hello')); // 출력: true console.log(isNaN('123')); // 출력: false console.log(isNaN('123abc')); // 출력: true console.log(isNaN(NaN)); // 출력: true console.log(isNaN(null)); // 출력: false console.log(isNaN(undefined)); // 출력: true isNaN(123): 숫자 ..

[Javascript] url 파일 다운로드

url 파일 다운로드 javascript 혹은 react에서 파일 다운로드 하는 방법 예시 const handleDownload = async () => { // URL에서 GET 요청 보내기 fetch('다운로드 할 file url', { method: 'GET', }) // 응답 데이터를 블롭(Blob) 객체로 변환 .then((response) => response.blob()) .then((blob) => { // 블롭(Blob) 객체 생성하고 URL을 생성 const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); // 생성한 URL과 다운로드할 파일명 설정 link.setAttribute('hre..

[Javascript] export 'default' (imported as 'XLSX') was not found in 'xlsx' 해결 방법

export 'default' (imported as 'XLSX') was not found in 'xlsx' 에러 원인 import XLSX from 'xlsx'; // 중략... const handleFileUpload = (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); // 첫 번째 시트를 가져옴 const worksheet = workbook.Sheets[workbook.SheetN..

[Javascript] 자바스크립트, 리액트 xlsx 라이브러리 사용법

xlsx 라이브러리 사용법 간단 정리 리액트에서 엑셀 업로드해서 데이터 가져오기위해 사용했던 라이브러리 사용법 설치하기 npm install xlsx # or yarn add xlsx 사용하기 업로드 하는 코드만 정리함 import React from 'react'; import * as XLSX from 'xlsx'; const ExcelUploader = () => { const handleFileUpload = (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { const data = new Uint8Array(e.target.result); const work..

[JavaScript] 간단한 숫자 3자리 마다 , 표기 방법 toLocaleString()

숫자 3자리 마다 , 구분하여 표기하는 방법 toLocaleString() 함수 사용하기 toLocaleString() 함수란? 숫자, 날짜 및 시간 값에 대한 locale별 문자열 표현을 생성 현재 실행되는 컴퓨터의 locale에 따라 문자열을 반환 const num = 1234567.89; console.log(num.toLocaleString()); // "1,234,567.89" (기본 로케일에 따라 출력) 만약, 특정 locale을 사용하려면 toLocaleString() 함수에 로케일 매개 변수를 추가하면 됨 예시 → 한국 const num = 1234567.89; console.log(num.toLocaleString("ko-KR")); // "1,234,567.89" (한국 로케일에 따라 ..

[JavaScript] 배열 메소드 some()

Array.prototype.some() some() 메서드는 배열 안의 요소가 주어진 판별 함수를 하나라도 통과하는지 테스트함 만약 배열에서 주어진 함수가 하나라도 true이면 true를 반환 모두 false인 경우에만 false 반환 이 메서드는 배열을 변경하지 않음 const array = [1, 2, 3, 4, 5]; // Checks whether an element is even const even = (element) => element % 2 === 0; console.log(array.some(even)); // Expected output: true 참고자료: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_O..