본문 바로가기

자바스크립트54

[Javascript] 텍스트 클립보드 복사하기 코드

// Get the text to be copied const textToCopy = "Hello, world!"; // Create a temporary input element const tempInput = document.createElement("input"); tempInput.setAttribute("type", "text"); tempInput.setAttribute("value", textToCopy); document.body.appendChild(tempInput); // Select the text tempInput.select(); // Copy the text to the clipboard document.execCommand("copy"); // Remove the tempor.. 2023. 2. 19.

[Javascript] 두 배열 간에 교집합 구하기

1. filter 방법 이용 const array1 = [1, 2, 3, 4, 5]; const array2 = [3, 4, 5, 6, 7]; const intersection = array1.filter(x => array2.includes(x)); console.log(intersection); // [3, 4, 5] 2. set 객체 사용 const array1 = [1, 2, 3, 4, 5]; const array2 = [3, 4, 5, 6, 7]; const set1 = new Set(array1); const set2 = new Set(array2); const intersection = Array.from(new Set([...set1].filter(x => set2.has(x)))); co.. 2023. 2. 19.

[Javascript] map 자료구조 변수를 깊은 복사하는 법

개요 새로운 메모리에 새로운 변수와 값을 저장하는 게 깊은 복사다. 원시 타입이 아닌, 참조 타입들(배열 또는 객체 타입)이 이콜 연산자로 변수에 대입하면, 얕은 복사*가 된다. *얕은 복사: 메모리 주소가 변수에 할당된다. 회사에서 돈 주고 솔루션을 제품에 붙이는 중에, 요구사항 중에 데이터를 생성한 날짜별로 묶어서 데이터를 묶음으로 UI 노출을 해야 하는 요구사항이 있었다. 솔루션 서버 응답이 리스트여서, 이 데이터를 Map 자료구조 형태로 변환하였다. 그런데, 데이터를 수정할 수도 있어야 했는데, 이 때, map 자료구조로 만들어 둔 상태를 수정해야만 했다. 그래서, map 자료구조 상태를 깊은 복사한 새로운 변수를 수정하고, 이 새로운 변수를 상태에 반영하도록 했다. map 자료구조 상태 깊은 복.. 2023. 1. 14.

[Javascript] Object.entries가 뭐니?

Object.entries? 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. Object.entries()에 의해 반환된 배열(array)의 순서는 객체가 정의된 방법과 관련이 없습니다. 배열 순서가 쓸 곳이 있다면, 다음과 같이 정렬을 먼저 하시는 것이 좋습니다 Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0])); const object1 = { a: 'somestring', b: 42 }; console.log(Object.entries(object1));// [['a', 'somestring'], ['b', 42]] 2023. 1. 14.

[Javascript] 문자 날짜 정렬하기

예시 다음 객체가 api로 넘어왔다. 가장 최신순으로 정렬하려고 한다. 방법 attendanceScheduleList.sort(function (comp1, comp2) { if (comp1.start comp2.start) { return -1; } return 0; }); 2023. 1. 9.

정규식 예시 모음

한국 가격 표기법 검증 정규식 숫자와 ,만 들어가 있는지 검증 ex) 100 (o) ex) 1,000 (o) /^[0-9,]*$/g.test(this.value) 초성(자음)이 포함되어 있는지 확인 // 초성이 있는지 검사 getConsonantRegex() { return /[ㄱ-ㅎ]/g; }, 키보드에서 입력가능한 특수문자 포함 및 한글 영어 숫자이 외의 문자와 매칭되는 정규식 // 기타 사유 입력할 때, 허용 특수문자 ` ~ ! @ # $ % ^ & * ( ) - _ = + [ { ] } \ | ; : ' " , / ? function getTextRegex() { return /[^가-힣a-zA-Z0-9~!@#$%^&*()-_=+[\].?,;:"\\/'{}|\s]+$/; } 이모지 매칭.. 2022. 12. 15.

[javascript] 한글 이름 파일 업로드 후, 한글 이름 서버에 저장 및 검색 안 되는 버그

원인 맥OS에서 한글 파일이름으로 만들면, 자료 -> ㅈㅏㄹㅛ 이렇게 저장된다고 함. 표기는 다르지만. 해결 방법 normalize()는 Javascript 빌트인 메서드고 unicode normalization form string으로 반환해준다. 여기서 NFC는 분해된 한글을 조합해 준다. 'ㅈㅏㄹㅛ' -> '자료' 파일이름.normalize('NFC') 참고 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize 2022. 11. 24.

[javascript]클립보드 복사 기능 개발

개요 모바일에서 복사버튼 누르면, 키보드 올라옴 해결방법 1. input에 readonly 추가 2. https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API Clipboard API - Web API | MDN Clipboard API는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다. developer.mozilla.org 2022. 11. 23.

[Javascript] 배열 1~9까지 만들기

console.log(Array.from({ length: 9 }, (v, i) => (v = i + 1))); // [1,2,3,4,5,6,7,8,9] 2022. 11. 20.

[Javascript] for문에서 let과 var의 동작 분석

개요 for문에서 i를 반복하면, i는 차례로 0,1,2,3,4가 된다. 그러면, for문 밖에서 i를 참조하면, 5가 출력될거다. 왜냐하면, var로 선언된 i는 전역 변수이기 때문이다. 👇 아래 코드처럼, for문이 전부 실행된 후에 setTimeout이 끝나서, 큐에서 콜스택으로 console.log(i) *5가 들어간다. 이미 반복문이 다 돌고난 후여서, var로 선언된 전역변수 i는 5이다. 그래서 아래처럼 전부 5가 응답되는 원리이다. 그래서 다시 원리를 알아보면, 호이스팅때문이다 ❌ -> 호이스팅 때문이 아니라, 스코프문제이다. 변수 선언 스코프문제임. var, let var는 함수 스코프임 let은 블록 스코프임 var는 함수 내부에 선언하면 밖에서 참조할 수 없다. var를 함수 외부에 .. 2022. 11. 3.

티스토리툴바