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

JavaScript 2023.02.06 0

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

JavaScript 2023.02.02 0

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

JavaScript 2023.01.30 0

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

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

JavaScript 2023.01.26 0

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

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

Vue 2023.01.23 0
반응형