Dev 109

Promise를 사용하는 방법 - async / await 그리고 promise.all()

[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..

Dev/JavaScript 2023.02.06

[JavaScript] 객체와 배열을 복사하는 방법들

# 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)를 사용하여 다시 객체로..

Dev/JavaScript 2023.02.02

[JavaScript] 원하는 특정 소수점 자리까지 표시하기

간혹 진행률을 표시하기위해 전체 수량을 완료된 수량으로 나누게 되면 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..

Dev/JavaScript 2023.01.30

[JavaScript] 비동기 코드를 순차적으로 실행하도록 만드는 패턴들

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

Dev/JavaScript 2023.01.26

Vue - 부모 컴포넌트가 자식 컴포넌트의 함수를 호출하는 방법

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

Dev/Vue 2023.01.23

Vue - 사용자 지정 이벤트(Custom Event)

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

Dev/Vue 2023.01.19

[JavaScript] 한번만 작동하는 일회성 이벤트 핸들러 만들기

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

Dev/JavaScript 2023.01.16

[JavaScript] 주어진 범위 내에서 임의의 정수를 생성하는 방법

# 주어진 범위 내에서 임의의 정수를 생성하는 방법 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과..

Dev/JavaScript 2023.01.12

[JavaScript] 임의의 UUID를 생성하는 방법

# 숫자로 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번 반복하..

Dev/JavaScript 2023.01.09

[JavaScript] 배열의 값들을 더하는 방법

# 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..

Dev/JavaScript 2023.01.05
반응형