Javascript19 [Javascript] 소수점 표현 자바스크립트에서는 정수와 실수에 대해서 분리하지 않고 오로지 number 타입만 가지고 있다. 즉, 모든 숫자는 실수라고 생각하면 된다. 🎈 실수의 계산정수값에 대한 계산은 오차가 발생하지 않는다. 아래와 같이 1 더하기 1은 항상 2가 나온다. 절대 3이 나올 수 없다.1 + 1 === 2 // true 하지만 실수값에 대한 계산은 우리가 생각하는 값과 차이가 존재한다. 현실세계에서 아래와 같이 0.1과 0.2를 더하면 누구나 0.3이라고 대답할 것이다. 하지만 자바스크립트로 아래의 코드를 실행해보면 false가 나오는 것을 확인할 수 있다.0.1 + 0.2 === 0.3 // false 이는 소수의 표현 방식이 우리와 다르기 때문이다.컴퓨터는 2진법을 사용한다.10진법의 소수 중 일부는 2진법 변.. 2025. 4. 11. [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 2 3 4 다음
