소행성왕자

Promise.all은 JavaScript에서 여러 개의 비동기 작업을 병렬로 처리하기 위한 메서드입니다.주요 특징병렬 실행: 여러 프로미스를 동시에 실행합니다배열 입력: 프로미스 배열을 인자로 받습니다단일 프로미스 반환: 모든 프로미스의 결과를 담은 배열을 반환하는 새로운 프로미스를 생성합니다전체 완료 대기: 모든 프로미스가 이행(fulfilled)될 때까지 기다립니다순서 보장: 결과 배열은 입력된 프로미스 순서를 유지합니다빠른 실패: 하나라도 거부(rejected)되면 전체가 즉시 거부됩니다성능 향상: 독립적인 비동기 작업들을 동시에 처리하여 전체 실행 시간을 단축합니다Promise.all은 여러 API 호출 결과를 한 번에 처리하거나, 독립적인 데이터 fetching을 병렬화하는 등의 상황에서 유용..

Promise는 JavaScript에서 비동기 작업을 처리하기 위한 객체입니다. Promise의 주요 특징과 기본 개념은 다음과 같습니다:상태(State)Promise는 세 가지 상태 중 하나를 가집니다. 이는 resolve 와 reject 호출함으로써 반영됩니다.Pending (대기) :  Promise가 생성된 초기 상태입니다. 비동기 작업이 아직 완료되지 않은 상태를 의미합니다. new Promise()로 Promise를 생성하면 이 상태가 됩니다. Fulfilled (이행) : 비동기 작업이 성공적으로 완료된 상태입니다. Promise 내부에서 resolve 함수가 호출되면 이 상태가 됩니다. .then() 메서드를 통해 처리 결과를 받을 수 있습니다. Rejected (거부) : 비동기 작업이 ..

IndexedDB는 키-값 쌍으로 데이터를 저장하는 객체 지향 데이터베이스입니다.주로 대용량의 구조화된 데이터를 클라이언트에 저장하기 위해 사용됩니다.주요 특징비동기 작동: IndexedDB는 비동기 API를 사용하여 UI 블로킹을 방지합니다트랜잭션 지원: 데이터의 일관성을 보장하기 위해 트랜잭션을 지원합니다인덱싱: 빠른 검색을 위해 객체의 속성을 사용하여 인덱스를 생성할 수 있습니다대용량 데이터 처리: 상대적으로 큰 양의 데이터를 로컬에 저장할 수 있습니다전체소스const IndexedDB = class { dbName = 'iDB'; objName = ''; constructor(dbName) { if(dbName) this.selectDb(dbName); } ..

사례 1 사용: 숫자 합산reduce()의 가장 간단한 사용 사례 중 하나는 여러 숫자를 합산하는 것입니다.정수 배열이 있고 총합을 구하고 싶다고 가정해 보겠습니다.// 반복문 사용const numbers = [1, 2, 3, 4, 5];let sum=0;for(let i=0; iacc+curr, 0);console.log(sum);와우! 코드 한 줄만으로 배열의 모든 요소의 합을 계산했습니다.어큐뮬레이터의 초기 값은 0으로 설정되고 각 반복에서 현재 요소를 어큐뮬레이터에 추가합니다.시작 값을 제외하기로 선택하면 reduce는 배열의 첫 번째 항목만 사용합니다.하지만 저는 항상 초기 값을 포함하는 경향이 있어서 읽기가 더 쉽습니다.사용 사례 2: 배열 평면화여러분은 여러 배열을 보면서 "이걸 하나의 배열..

acc[curr] = (acc[curr] || 0) + 1;JavaScript의 논리 연산자(||)의 특성을 활용한 매우 간결하고 효과적인 패턴입니다. 이를 "단축 평가(short-circuit evaluation)"라고 부르기도 합니다.이 패턴의 작동 원리를 더 자세히 설명해 드리겠습니다:논리 OR 연산자(||)의 특성:JavaScript에서 ||는 왼쪽 피연산자가 truthy면 왼쪽 피연산자를 반환합니다.왼쪽 피연산자가 falsy면 오른쪽 피연산자를 반환합니다.Falsy 값:JavaScript에서 falsy 값은 false, 0, '', null, undefined, NaN입니다.객체의 존재하지 않는 속성에 접근하면 undefined를 반환합니다.이 패턴의 동작:acc[curr]가 존재하면(즉, 0이..

개요사이트 처음 접속시 레이어 팝업을 4개 open 합니다.그런데 무작정 띄우는게 아니라 첫번째 레이터 팝업 닫으면 그다음 레이어 팝업 뜨고 또 닫으면 그다음 팝업이 떠야 합니다.알고리즘을 어떻게 구현할까 생각하다 generator 를 사용하여 팝업 닫으면 그 다음 레이어 팝업을 뜨게 구현합니다.실제 코드는 아래코드보다는 많이 복잡하지만 제네레이터 사용 방법을 알고자 간단한 코드로 처리했습니다.html ~~~ 팝업 1 내용 닫기 ~~~ 팝업 2 내용 닫기 ~~~ 팝업 3 내용 닫기 ~~~ 팝업 4 내용 닫기위 코드는 다음과 같이 작동합니다:popupIds 배열에 모든 팝업의 ID를 저장합니다.currentPopup은 현재 열려있는 팝업의 ID를 저장하는 반응형 참조(ref)입니다.p..

전문 Input 값에 한글이 들어가는경우 한글을 그대로 사용하면 안된다.한글을 Uint8Array는 8비트 부호 없는 정수(0-255) 배열을 나타내는 JavaScript의 타입으로 변환해야 합니다.console.log( iconv.encode('홍길동', 'euc-kr') )iconv.encode('홍길동', 'euc-kr')의 결과로 받은 Uint8Array [200,171,177,230,181,191]는 "홍길동"이라는 한글 문자열을 EUC-KR 인코딩으로 변환한 바이트 배열입니다. 이를 자세히 설명하겠습니다:Uint8Array는 8비트 부호 없는 정수(0-255) 배열을 나타내는 JavaScript의 타입입니다.각 숫자는 EUC-KR 인코딩에서 해당 한글 문자를 나타내는 바이트 값입니다:[200,..

부모에서 자식으로 데이터 전달부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 props를 사용합니다.ParentComponent.vue ChildComponent.vue 자식에서 부모로 데이터 전달자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해 emit을 사용합니다.ChildComponent.vue Send Message to ParentParentComponent.vue {{ childMessage }} 위 예제에서는 부모 컴포넌트에서 자식 컴포넌트로 메시지를 props를 통해 전달하고, 자식 컴포넌트에서 부모 컴포넌트로 메시지를 emit을 통해 전달합니다. props와 emit을 함께 사용하여 부모와 자식 컴포넌트 간의 데이터를 효과적으로 주고받을 수..

오류코드import { defineStore } from 'pinia';import { ref, computed } from 'vue';export const useData365MastStore = defineStore('data365Master', () => { const data365Master = ref({}); const getData365Master = (prdcd) => { return computed(() => data365Master.value); }; return { data365Master, getData365Master };});개선코드import { defineStore } from 'pinia';import { ref, computed } from 'vue..

Vue 3 애플리케이션에서 여러 컴포넌트에서 동일한 컴포넌트를 사용하면서 mitt를 활용한 이벤트 핸들러가 중복 실행되는 문제를 해결하는 방법을 소개합니다.이 글에서는 전역 이벤트 버스를 사용하여 이벤트 리스너가 한 번만 등록되도록 하는 방법을 설명합니다.문제상황여러 컴포넌트(order.vue, rfOrder.vue, marketWatch_spot.vue, marketWatch_exchange.vue)에서 동일한 컴포넌트(currencyMaster.vue)를 사용하고 있습니다.mitt를 사용하여 이벤트(FAReceive)를 관리하는데, 각 컴포넌트가 마운트될 때마다 동일한 이벤트 리스너가 중복 등록되어 이벤트 발생 시 핸들러가 여러 번 호출되는 문제가 발생했습니다.문제 해결 방법이 문제를 해결하기 위해 ..