Atelier BiCute

JavaScript에서 class는 ① 객체(특정 데이터 구조)를 만들고, ② 상태(멤버 변수 또는 속성)에 대한 초기 값을 제공하고, ③ 동작 구현(멤버 함수 또는 메서드) 을 위한 템플릿입니다. # class 다음은 Person이라는 이름의 기본 클래스의 예입니다. class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); } } 클래스를 사용하려면 new키워드를 사용하여 클래스의 객체(인스턴스)를 만든 다음 해당 인스턴스에서 메서드를 호출할 수 있습니다. 예를들..

일반 함수를 Promise로 변환하는 여러가지가 있지만, 모두 새로운 Promise 객체를 반환하고 resolve및 reject 콜백을 사용하여 성공 사례와 실패 사례를 각각 처리해야 합니다. # function function add(a, b) { return new Promise((resolve, reject) => { if (a && b) { resolve(a + b); } else { reject(new Error('Invalid arguments')); } }); } 이 예제에서 add 함수는 new Promise를 반환하는 일반 함수로 정의됩니다. 콜백은 인수(a와 b)의 합계를 반환하는 resolve와 콜백의 인수가 유효하지 않은 경우 오류를 반환하는 reject가 있습니다. # Arrow ..

[JavaScript] 비동기 코드를 순차적으로 실행하도록 만드는 패턴들에서 이어지는 내용입니다. 순차적으로 만드는 다양한 패턴들중 가장 많이 사용되는 asnyc / await 와 promise.all()의 동작에 관하여 간단히 정리해 보았습니다. # async / awiat async function processFunctions() { try { var result1 = await func1(); var result2 = await func2(); console.log(result1, result2); } catch(error) { console.error(error); } } (1) 함수 앞에 async 라는 예약어를 붙입니다. (2) 함수 내부에서 순서대로 처리하고 싶은 비동기 메서드 앞에 awa..

# JSON.parse(JSON.stringify(obj)) let originalArray = [1, 2, 3, 4, 5]; let copiedArray = JSON.parse(JSON.stringify(originalArray)); console.log(copiedArray); // [1, 2, 3, 4, 5] JSON.stringify(obj)는 JavaScript 개체를 JSON 문자열로 변환하는 JavaScript의 메서드입니다. JSON.parse(jsonString)는 JSON 문자열을 JavaScript 객체로 변환하는 메서드입니다. 객체는 JSON.stringify(obj)를 통해 JSON 문자열로 변환된 다음 해당 문자열을 JSON.parse(jsonString)를 사용하여 다시 객체로..

간혹 진행률을 표시하기위해 전체 수량을 완료된 수량으로 나누게 되면 57.999999999999% 처럼 소수부분이 길게 표시되는 경우가 있는데, 이때 원하는 소수 자리수만큼만 표시하는 방법입니다. 또한 58.00% 같이 뒤에 소수점 뒤에 끝자리가 0일 경우, 필요없는 0을 제거하는 방법도 함께 설명합니다. # toFixed() let workCount = 7; // 완료 수량 let totalQuantity = 50; // 전체 수량 let percentage = ((workCount / totalQuantity) * 100).toFixed(2); console.log(percentage); toFixed() 메서드를 이용하면 원하는 소수점 자리수를 지정할 수 있습니다. # 소수점 끝자리 0 제거하기 l..

비동기 코드를 순차적으로 실행하는 방법에는 여러 가지가 있습니다. 다음은 이와 관련된 몇 가지 패턴입니다. #1 Chaining Promises Promise의 then 메서드를 사용하여 여러 비동기 작업을 함께 연결하여 순서대로 실행되도록 할 수 있습니다. async function runSequentially() { await doSomethingAsync() .then(result => doSomethingElseAsync(result)) .then(result => doThirdThingAsync(result)); } #2 Async/Await Promise가 완료될 때까지 await 키워드를 사용하여 비동기 함수의 실행을 일시 중지할 수 있습니다. 다음과 같이 작성하여 비동기 작업을 순차적으로 ..

버튼 예를 들어, 위와 같은 버튼이 있을 경우 여러 번 클릭해도 한 번만 실행되도록 하고 싶을 경우 아래와 같은 방법들을 사용할 수 있습니다. # removeEventListener를 사용 const button = document.querySelector('button'); // 이벤트 핸들러를 생성 button.addEventListener('click', handleClick); function handleClick() { console.log('Button clicked!'); button.removeEventListener('click', handleClick); } 내부 함수 작동 후 removeEventListener를 이용하여, 더이상 함수가 호출되지 않도록 이벤트 핸들러를 제거해 줍니다...

# 주어진 범위 내에서 임의의 정수를 생성하는 방법 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } console.log(getRandomInt(1, 10)); 작동 방식 1. 입력받은 최소값(min)을 올림(Math.ceil), 최대값(max)을 내림(Math.floor)한다. 이는 min과 max가 소수일 경우 소수 자리를 제거하기 위함입니다. 2. Math.random 함수를 이용해 0과 1 사이의 임의의 실수를 생성한다. 3. 생성한 임의의 실수에 (max - min + 1)을 곱한다. 이는 min과..

# 숫자로 UUID 만들기 function generateUUID() { const digits = []; for (let i = 0; i < 16; i++) { digits.push(Math.floor(Math.random() * 10)); } return `${digits[0]}${digits[1]}${digits[2]}${digits[3]}-${digits[4]}${digits[5]}-${digits[6]}${digits[7]}-${digits[8]}${digits[9]}-${digits[10]}${digits[11]}${digits[12]}${digits[13]}${digits[14]}${digits[15]}`; } console.log(generateUUID()); for 반복문을 16번 반복하..

# Reduce const data = ['1', '3', '5', '7', '9']; function useReduce() { const sum = data.reduce((acc, element) => acc + parseInt(element), 0); console.log('reduce() = ', sum); } useReduce() // "reduce() = " 25 동작 방식 reduce() 메서드는 데이터 배열의 각 요소에 대해 reducer 함수를 호출하는데, 첫 번째 반복에서 acc는 초기값 0으로 설정되고 element는 데이터 배열의 첫 번째 요소인 '1'로 이 들어옵니다. reducer 함수는 parseInt()를 호출하여 요소를 숫자로 변환하고 현재 0인 acc에 더합니다. Reduc..