자바스크립트 - Promise all, allSettled 사용법, 차이점

자바스크립트에서비동기 작업 중 여러개의 API를 동시에 호출하고모든 비동기 작업이 완료 되었을 때, 새로운 코드를 작성하고 싶을 때가 있습니다. 또, 여러개의 API를 순차적으로 날리지 않고 동시에 호출하여 웹 성능을 향상할 수도 있습니다. 그럴때 Promise 메서드 중 all 과 allSettled 를 사용할 수 있습니다. Promise.all()Promise.all() 의 경우에는 n개의 비동기 함수를 동시에 실행하고 모든 함수가 완료하면, 함수의 결과 값을 반환합니다.하지만, 단 하나의 함수라도 실패하면 Promise가 실패되게 됩니다. const response = await Promise.all([ getExcelFile('name1.xls', 1000), getExcelFile('name..

• format_list_bulleted Develop/JavaScript
• · 2024. 8. 29.
• textsms

자바스크립트 - 비동기 Promise 란?

자바스크립트에서 비동기 함수들을 사용할 때, Promise를 많이 사용합니다.또 confirm, modal 등 미래에 일어날 일들에 대해서 Promise를 사용해서 개발을 진행하면편리하게 개발할 수 있는 장점이 있습니다. Promise 란?Promise 란 비동기 작업을 할 때, 미래에 일어날 결과 또는 실패 값을 나타내는 객체입니다. Promise 에는 세 가지 상태가 있습니다.pending (완료하지 않은 아직 대기 상태)fulfilled (완료)reject (실패)const getExcelFile = (name, delay = 1000, isSuccess = true) => { return new Promise((resolve, reject) => { setTimeout(() => { ..

• format_list_bulleted Develop/JavaScript
• · 2024. 8. 24.
• textsms

JavaScript - 조건부 배열 추가 하기

자바스크립트에서 조건에 따라서 배열에 값을 추가하고 싶을 때가 있습니다. 1. if문 이용하기고전적인 방법이지만 if 문을 이용하여 조건부로 추가할 수 있습니다.const arr = [];const condition = true;if (condition) { arr.push('superman');} 2. 삼항 연산자 이용하기삼항연산자를 이용하여 조건부로 배열의 값을 추가 할 수 있습니다.true 시 값이 있는 배열은 push 가 되고, 빈 배열은 아무값도 추가되지 않습니다.const condition = true;const arr = [ ...(condition ? ['superman'] : [])]   JavaScript - 조건부 객체 속성 추가하기조건에 따라서 객체의 속성을 추가하고 싶을 때..

• format_list_bulleted Develop/JavaScript
• · 2024. 6. 27.
• textsms

자바스크립트 - 사칙 연산 계산기 만들기

더하기, 빼기, 곱셉, 나누기, 나머지 계산하는 계산기 입니다. html계산기 첫번째값: 두번째값: + - * / % 계산결과:  javascriptconst num1 = document.getElementById('num1');const num2 = document.getElementById('num2');const plusBtn = document.getElementById('plusBtn');const subBtn = document.getElementById('subBtn');const multBtn = document.getElementById('multBtn');const divBtn = document.getElementById('divBtn');const res..

• format_list_bulleted Develop/JavaScript
• · 2024. 6. 23.
• textsms

자바스크립트 - 객체 속성 값을 변수로 만드는 방법

자바스크립트에서 객체를 사용하다고 보면 key 값을 변수로 사용하고 싶을 때가 있습니다.ES2015 문법 부터는 쉽게 객체의 key 값을 변수로 선언하여 사용할 수 있습니다. 객체 초기화 하기일반적으로는 아래와 같이 초기화 할 수 있습니다.var user = { name: 'superman', age: '23', job: 'developer'} 객체 초기화 (약식 문법)객체에 프로퍼티명을 약식으로 만들면 객체 property 값을 본인이 원하는 값으로 선언할 수 있습니다.const name = 'superman';const age = 23;const job = 'developler';var user = { name, age, job }  Computed Property 사용해서 객체 속성 변수..

• format_list_bulleted Develop/JavaScript
• · 2024. 6. 11.
• textsms

객체 구조 분해 이용하여 속성, key, property 삭제 하기

객체, 배열 구조 분해 사용법객체, 배열 구조 분해 할당을 사용하면 객체, 배열 내에 있는 값들을 쉽게 사용할 수 있습니다.const [a, b] = [1, 2]// a: 1, b: 2const { name, age } = { name: 'superman', age: 25 }// name: 'superman', age: 25  구조 분해 Rest Parameters 기능 사용하여 객체 Property 삭제 하기Rest Parameters란? 아래와 같이 뒤에 있는 남은 매개 변수를 한번에 받을 수 있는 방법입니다.function foo(...a) { console.log(a)}foo(1, 2, 3, 4) // [1, 2, 3, 4] 객체 구조 분해 Rest Parameters를 사용하면 객체의 키를..

• format_list_bulleted Develop/JavaScript
• · 2024. 6. 4.
• textsms

자바스크립트 - map 함수에서 비동기 함수 사용하기 async, Promise.all

map 함수에서 비동기 사용하기 async function asynFunction(id) { const res = await fetch('https://dummyjson.com/products/${id}'); const data = await res.json(); console.log(data); return data } const array = [1, 2, 3, 4, 5]; const userList = array.map(async (id) => await asyncFunction()); console.log(userList); 위와 같이 map 함수에서 비동기 함수를 호출하게 되면 아래와 같이 데이터의 결과 값들이 아니라 Promise 객체가 반환 됩니다. await 의 경우에는 promise 객체는..

• format_list_bulleted Develop/JavaScript
• · 2024. 4. 19.
• textsms

자바스크립트 - 함수 속도 측정할 수 있는 방법 console.time(), performance.now()

프론트엔드 개발에서 성능 향상은 중요한 요소 중에 하나 입니다. 성능 향상을 위해 자바스크립트 함수 속도를 측정 할 수 있는 방법에 대해서 알려드리겠습니다. console.time() console.time(); doSomething(); console.timeEnd(); // default: 8007.467041015625 ms console 의 static 메서드인 time을 이용해서 속도를 측정할 수 있습니다. time 메서드 호출 이후, timeEnd 메서드를 호출하기까지의 시간을 계산해서 콘솔에 표시 해줍니다. 간단히 속도를 콘솔에서 확인할 수 있는 장점이 있지만, 콘솔에서만 확인할 수 있고, 데이터로 처리 하거나, 다른 방법으로 확인할 수 없는 단점이 있습니다. performance.now()..

• format_list_bulleted Develop/JavaScript
• · 2024. 3. 31.
• textsms

자바스크립트 - 원시형(primitive) 이란?

primitive이란? 자바스크립트의 원시형 타입이 있습니다. 객체도, 메서드도 속성을 가지지 않은 데이터 입니다 primitive 종류 총 7개가 있습니다. String Number Boolean null undefined 그리고 ES6 문법에서 Symbol ES 2020 문법 BigInt 가 추가 되었습니다. Symbol BigInt 예시 var str = 'superman'; console.log(str.length); // 8 str 변수에 superman 값을 담고 length 속성을 부르게 되면 8이 콘솔에 찍히게 됩니다. 문자열 데이터가 어떻게 length라는 속성을 가지게 되는건가요? length를 호출할 때, String 객체 래퍼를 만들고, 그 객체 length 속성 값을 가지고 오게 ..

• format_list_bulleted Develop/JavaScript
• · 2024. 3. 26.
• textsms

자바스크립트 - async await 비동기 처리하기

비동기 asynchronous 란? 특정 작업이 완료할 때까지 대기하지 않고, 다른 작업을 먼저 진행하고 특정 작업이 완료가 되면 이벤트에 응답할 수 있는 방법입니다. fetch('https://dummyjson.com/users') .then(res => res.json()) .then(console.log); // to do something fetch 작업을 진행하고, 아래에는 다른 작업들이 진행되게 됩니다. 그리고 then 을 이용하여 api 호출이 완료가 되면 완료 이후 로직이 타게 됩니다. async / await 여러 비동기 함수를 콜백함수를 이용해서 처리하면, 콜백 지옥에 빠질 수 도 있습니다. 그렇게 되면 코드가 복잡하게 되어서 로직을 이해하기 어려울 수 있습니다. async / awai..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 24.
• textsms