Atelier BiCute

[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 키워드를 사용하여 비동기 함수의 실행을 일시 중지할 수 있습니다. 다음과 같이 작성하여 비동기 작업을 순차적으로 ..

부모 컴포넌트에 추가된 자식 컴포넌트의 함수를 부모 컴포넌트 측에서 직접 호출하는 방법입니다. #1. 사용할 함수 정의 자식 컴포넌트에서 호출할 함수를 methods에 정의합니다. // 자식 컴포넌트 export default { methods: { childFunction() { // 실행할 코드 작성 } } } #2. ref 속성 추가 상위 컴포넌트에서 하위 컴포넌트에 ref속성을 사용하여 하위 컴포넌트에 대한 참조를 추가합니다.. // 부모 컴포넌트 #3. 함수 호출 부모 컴포넌트의 메서드에서 ref 및 함수 이름을 사용하여 자식 컴포넌트의 함수를 호출할 수 있습니다 // 부모 컴포넌트 export default { methods: { parentFunction() { this.$refs.child..

Vue에서는 사용자 지정 이벤트를 사용하여 서로 다른 컴포넌트 간에 통신할 수 있습니다. 템플릿에서 사용자 지정 이벤트를 내보내려면 $emit메서드를 사용하여 이벤트 이름과 이벤트에 포함할 페이로드를 전달할 수 있습니다. 아래는 $emit 메서드를 이용하여 자식 컴포넌트가 부모 컴포넌트에게 데이터를 전달하거나 데이터를 변경하도록 요청하는 방법들입니다. # 템플릿에서 이벤트를 요청 $emit 메서드를 사용하여 이벤트 이름과 이벤트에 포함할 페이로드를 전달할 수 있습니다. // 자식 컴포넌트의 템플릿에서 사용자 지정 이벤트를 요청 Click me # 스크립트에서 이벤트를 요청 this.$emit 메서드를 사용하여 컴포넌트의 스크립트 태그에서 사용자 지정 이벤트를 내보낼 수도 있습니다 . // 자식 컴포넌트의..

버튼 예를 들어, 위와 같은 버튼이 있을 경우 여러 번 클릭해도 한 번만 실행되도록 하고 싶을 경우 아래와 같은 방법들을 사용할 수 있습니다. # 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..