소행성왕자

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을 함께 사용하여 부모와 자식 컴포넌트 간의 데이터를 효과적으로 주고받을 수..

인텔리제이 2020.3 에서는 java 17  작동이 안된다.java17 사용하려면 인텔리제이 버전을 높여야 한다. 그렇지 않으면 java 11로 낮추어야 하는데 스프링 부트 3은 java 17 부터 지원하기 때문에스프링 부트를 2로 내리는 방법을 알리고자 한다. 1. project SDK 는 java 11 로 한다.Java version 17 21 22 만 나온다.일단 17 로 하자2. 프로젝트 완료된 후 pom.xml 에서 스프링 부트 버전을 2버전으로 변경한다.3. 톰캣 시작후 정상적으로 안되면 아래 restart 한다.

오류코드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)를 관리하는데, 각 컴포넌트가 마운트될 때마다 동일한 이벤트 리스너가 중복 등록되어 이벤트 발생 시 핸들러가 여러 번 호출되는 문제가 발생했습니다.문제 해결 방법이 문제를 해결하기 위해 ..

원본 코드const loadChartDatahandler = data=>{ // to do};onUnmounted(()=>{ emitter.off('loadChartData', loadChartDatahandler) }):onMounted(()=>{ emitter.on('loadChartData', data=>{ loadChartDatahandler(data); })}); Vue 3에서 이벤트 리스너를 등록하고 해제하는 과정에서 loadChartData 배열의 길이가 계속 늘어난다면, 이는 이벤트 리스너가 제대로 제거되지 않았기 때문일 가능성이 큽니다. 이 문제를 해결하려면 이벤트 리스너를 등록할 때 사용하는 함수 참조를 일관되게 유지해야 합니다.문제는 onMoun..