Javascript18 [Javascript] 클립보드 🎈 Document.execCommand예전에는 Document.execCommand 메서드를 사용해서 복사 및 붙여넣기 기능을 사용하였다. 아래는 복사 버튼을 클릭 시, id가 email인 태그의 값을 복사하는 기능이다. email@email.com 복사 Document.execCommand 메서드를 활용해서 다음과 같이 복사 기능을 사용할 수 있다. 복사 버튼 클릭 후 붙여넣기 기능을 수행하면 email@email.com가 클립보드에 정상적으로 복사된 것을 확인할 수 있다. 📯 Document.execCommand의 문제점 첫번째, Dom을 대상으로만 사용이 가능하다. 위의 코드를 보면 알 수 있듯이, Dom이 선택 된 상태에서만 가능하기 때문에 강제로 선택상태로 만든 후 복사가 완료되면 선.. 2025. 4. 6. [Javascript] EyeDropper API 아래 이미지와 같이 컬러피커를 개발할 일이 있었다. 빨간 원으로 표시되어 있는 아이콘을 활용해서, 주변 컬러를 직접 선택할 수 있는 기능을 개발해야하였다. 어떻게 개발을 해야할지 막막했었는데 검색을 해보니 간단하게 EyeDropper API 를 통해서 개발할 수 있다는 것을 알게 되었다. 🎈 EyeDropper API이 API는 구글과 엣지에서만 지원하는 기능이다. 아래와 같이 간단하게 사용할 수 있다.const eyeDropper = new EyeDropper();let color = '';eyeDropper .open() .then((result) => { color = result.sRGBHex; console.log(color); }) .catch((e) => { });});.. 2025. 3. 15. 비동기함수 순차 실행 🎈 비동기함수 순차 실행비동기함수를 순차적으로 실행해야하는 경우가 존재한다. 다음과 같이 두가지 방법을 사용할 수 있다.for…of를 사용reduce를 사용한 방법 1️⃣ for…of를 사용한 방법for...of 는 이터러블을 대상으로 순회하는 가장 일반적인 방법 중 하나이다. 이를 활용해서 직관적으로 코드를 구성할 수 있다. 아래와 같이 for…of를 사용하고 내부에서 await을 통해 순차적으로 실행할 수 있다.function delay(time) { return new Promise(resolve => { setTimeout(() => { console.log(`${time} 완료`); resolve(time); }, time); });}let i = 1;for (.. 2025. 1. 21. [자바스크립트 - Canvas] 1. 시작하기 - 도형 그리기 해당 내용은 MDN을 참고하여 작성하였습니다. 캔버스란 HTML에서 Canvas는 HTML5에서 추가된 요소 중 하나로, 웹 페이지에서 그래픽을 그리기 위한 도화지나 캔버스를 제공합니다.Canvas 요소는 JavaScript를 사용하여 2D 그래픽 및 애니메이션을 만들 수 있습니다. 또한 WebGL과 같은 기술을 사용하여 3D 그래픽을 그리기도 합니다. Canvas 요소는 width와 height 속성을 사용하여 그려질 영역의 크기를 지정할 수 있으며, 그리기 작업은 Canvas API를 사용하여 수행됩니다.Canvas를 사용하면 동적으로 그래픽을 그릴 수 있으며, 게임, 데이터 시각화, 인터랙티브 애니메이션 등의 웹 애플리케이션을 만드는 데 사용됩니다. HTML에서 캔버스는 아래와 같이 추가할 수 있습.. 2023. 3. 20. [자바스크립트-배열] splice, slice 정리 매번 사용할때 마다 헷갈리던 splice와 slice를 한번 정리해야겠다는 생각이 들었습니다. 매번 헷갈리는 내용인 부수효과여부, 반환값, 두번째 인수 3가지를 정리해보고 싶었습니다. 두번째 인수는 삭제할 개수인지 삭제할 인덱스인지 헷갈려 추가로 정리하게 되었습니다. splice splice 는 배열 요소를 삭제하거나 배열에 새로운 요소를 추가해주는 기능을 합니다. 기본 구문은 아래와 같습니다. Array.prototype.splice(startIndex [,deleteCount [, item1[, item2[, ...]]]]); 배열 요소 삭제하기 배열 요소를 삭제하기 위해서는 첫번째 인수로 삭제하려는 인덱스, 두번째 인수로 인덱스로부터 삭제할 deleteCount 값을 넘겨주면 됩니다. 삭제시 인덱스.. 2023. 3. 16. 자주 잊어버리고 헷갈리는 자바스크립트 - 배열편 자주 사용되지 않아 가끔 사용할때마다 헷갈리는 자바스크립트 문법을 정리하였습니다. 가장 먼저 잊어버리거나 헷갈리는 배열 문법에 대해서 알아보겠습니다. 실제 사용방법보다는 각각의 특성별로 정리하는 형태로 진행하였습니다. 1. 고차함수 고차함수는 함수를 인자로 받거나 결과로 함수를 반환하는 함수를 고차함수라고 부릅니다. 배열에서는 많은 고차함수를 제공하고 있습니다. 가장 많이 사용되는 9가지 고차함수 forEach map filter find findIndex some every reduce sort 2. 부수효과 여부 배열 메서드를 사용할때 원본을 훼손 하는지 여부가 중요할때가 존재합니다. 아래는 메서드 호출 시 부수 효과 여부를 정리하였습니다. 배열에서 제공해주는 고차함수의 경우 부수효과가 없습니다. 부.. 2023. 3. 14. 이전 1 2 3 다음
