개발공작소
728x90
article thumbnail
[JS] Promise.all를 통해 여러개의 프라미스를 병렬로 실행하고 모든 프라미스가 종료되는 시점을 잡아보자.
FrontEnd/JavaScript 2023. 5. 20. 23:53

Promise.all 이란? 여러 개의 프라미스를 동시(병렬)에 실행시키고 모든 프라미스가 준비될 때까지 기다린다고 해봅시다. 복수의 URL에 동시에 요청을 보내고, 다운로드가 모두 완료된 후에 콘텐츠를 처리할 때 이런 상황이 발생합니다. Promise.all은 이럴 때 사용할 수 있습니다. -javascript.info/promise-api- 쉽게 말해 여러개의 프라미스를 수행하고 모든 프라미스가 수행될 때까지 기다린 후에 다음 프로세스를 진행시킨다고 보면 된다. Promise.all 사용방법 기본문법 let promise = Promise.all([...promises...]); 샘플 Promise.all([ new Promise(resolve => setTimeout(() => resolve(1),..

article thumbnail
[JS] 웹API : structuredClone함수를 통한 깊은 참조 복사 하는 방법
FrontEnd/JavaScript 2022. 12. 23. 12:42

전역함수인 structuredClone를 통하여 구조화된 복제 알고리즘을 통해 깊은 복제본을 생성한다. 기존에는 javascript 값에서 깊은 복사본을 만들기 위해 여러 방법과 라이브러리를 사용했었다. 하지만 이제는 structuredClone라는 웹API를 기본적으로 제공해주면서 그럴 필요없이 간단하게 깊은 복사를 할 수 있게 되었다. structuredClone 사용방법 기본문법 [복사한 값을 넣을 변수] = structuredClone([값을 복사할 변수]); 샘플코드 obj = { name : '봄봄', age : 18, soul_food : 'chicken' }; // 👉️ {name: '봄봄', age: 18, soul_food: 'chicken'} newObj = structuredClon..

[JS] javascript & JQuery 2개 이상의 조합키로 keypress 이벤트 실행하는 방법
FrontEnd/JavaScript 2022. 12. 18. 23:02

옆집 블로그에 있는 거 그대로 가져다 조금 고쳐서 쓰는 글 보통 keypress 이벤트로 특정 버튼(키보드)을 눌렀을 때, 특정 기능을 수행하도록 하는데 2개 또는 2개 이상의 조합키를 이용하여 특정 기능을 수행하려면 아래와 같이 and절(&&)을 이용하여 조합 하면 된다. 아래에 바닐라JS와 제이쿼리를 통해 중복키 조합을 통해 console.log()를 찍는 샘플코드를 작성하였다. 뭐 조합키를 사용하는 코드는 똑같은데 $().bind를 쓰느냐, addEventListener를 쓰느냐의 차이이다. 필요한 거 갖다 쓰도록 하자. 나는 그냥 DOM객체에 바인딩 해줬다 바닐라JS로 중복키 조합 수행구문 만드는 방법 샘플코드 this.document.addEventListener('keypress', (even..

[JS] javascript : Object.assgin 함수를 통해 객체를 복사해보자 에 대한 정리
FrontEnd/JavaScript 2022. 12. 18. 14:06

Object.assign 함수란? Object.assign함수란 target에 모든 열거 가능한 sources를 복사하여 target에 복사하고 그 target를 반환해준다. 즉 assign함수에 첫번째 파라메터가 target이고 나머지 파라메터들은 sources이다. 이 sources들을 target에 복사하고 그 복사한 target을 리턴해준다. 샘플코드 var returnedTarget = Object.assgin(target, source1, source2, source3 ...); // 👉️ source1, source2, source3의 값을 target에 복사한뒤 return 해준다 // 👉️ returnedTarget === target Object.assign 함수 사용 샘플코드 샘플코드..

[JS] javascript : 메서드 파라메터 기본값 설정과 기본값에 대한 이야기
FrontEnd/JavaScript 2022. 12. 18. 02:41

javascript에서 메서드의 파라메터(인자)의 기본값과 기본값 설정에 대해 정리해본다. 함수의 매개변수(인자)의 기본값은 undefined이다. 샘플코드 const paramsMethod = (a) => { console.log(a); console.log( 5 * a ); }; paramsMethod(); //👉️ undefined //👉️ Nan paramsMethod(3); //👉️ 3 //👉️ 15 위의 코드와 같이 a라는 인자를 받는 paramsMethod 메서드를 선언하였다. 그리고 paramsMethod를 호출할 때, 인자를 넘기지 않고 console.log를 통해 a를 찍어보면 undefined이 뜨는 것을 확인 할 수 있다. 즉 javascript에서 메서드의 인자의 기본값은 unde..

[JS] javascript : 배열 각 문자열의 홑따옴표(') 유지하는 방법
FrontEnd/JavaScript 2022. 12. 17. 15:42

배열에서 문자열로 변환시 홑따옴표(') 유지하는 방법 홑따옴표는 실제로 문자열의 일부가 아니기 때문에 toString과 같이 문자열로 변환하면 유지되지 않고 사라진다. 그래서 필요하다면 아래와 같이 join함수를 통해 새로운 문자열 변수를 만들 수 있다. var arr = ['item1','item2','item3','item4']; arr.toString(); -- 'item1,item2,item3,item4' var quotedAndCommaSeparated = "'" + arr.join("','") + "'"; quotedAndCommaSeparated -- "'item1','item2','item3','item4'" 스택오버플로우에서 참조했음 javascript array as a list of ..

728x90