javascript15 [Javascript] 원시타입에 전개연산자 사용 객체 또는 배열에 전개 연산자를 사용해서 쉽게 병합 또는 복사할 수 있는 기능을 제공한다. 🎈 원시타입값을 객체에 전개 연산자 사용아래와 같이 원시 타입의 값을 전개연산자를 사용하면 어떻게 될까? const obj = { ...1, ...'', ...undefined, ...null} 처음에는 오류가 날 것으로 생각하였다. 하지만 객체에 원시값을 전개 연산자를 사용하더라도 오류가 나지 않고 값이 무시된다. 빈 객체가 생성되는 것을 확인할 수 있다.console.log(obj); // {} 이걸 알기 전에는 오류가 날 것이라 생각해서 전개 연산자를 사용할 땐 값이 없는 경우도 존재한다면, 빈 객체로 초기화를 하도록 코드를 작성하였다. 아래의 예제 처럼 조건에 따라 병합 여부를 결정하는 경우에 조.. 2025. 4. 27. [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. [저작 도구 만들기] 3 ~ 5주차 진행 사항 (2024.12.16 ~ 2025.01.05) 회고 😪작업 진행 내용 정리 및 회고를 위해서 매주마다 진행사항을 블로그에 올리고 하였으나, 생각보다 진도가 원한는만큼 나가지도 못했고 그리고 살짝 귀찮은 것도 있었다. 갑자기 1월이 되면서 시간을 더 내기가 힘들어 더 미루게 되었다. 이제는 다시 시작해야겠다는 생각이 들어 마지막 작업 내용이었던 3 ~ 5주차 진행을 올리게 되었다. 🎮 작업기존 작업했었던 모델, 컴포넌트, 프로퍼티, 매니저의 구조를 변경하였다.처음 설계와 실제 구현간의 맞지 않는 부분을 수정하였다.위치, 사이즈와 관련 된 프로퍼티 기능을 구현하였다.네모 모양의 기본 컴포넌트를 구현하고 프로퍼티와의 연관관계를 설정하였다. 🤔 고민설계코드 작업 전 설계했었던 부분이 실제 코드 작업을 해보면서 누락된 부분도 많고, 코드 구현과 맞지 .. 2025. 1. 19. 이전 1 2 3 다음
