소행성왕자

이 코드는 할 일(Task) 관리 시스템을 구현한 것입니다.Task 클래스: 개별 할 일 객체TaskList 클래스: 여러 개의 할 일 목록을 관리하는 리스트정렬 기능: 할 일 목록을 제목(title), 생성 날짜(date), 등록 순서(register) 기준으로 정렬https://www.youtube.com/watch?v=yMyDUpTjwCw&list=PLBA53uNlbf-ud8ttaC5QoC3XwJ04eOWbU&index=5 const Task = class { constructor(title) { this._title = title; this._date = Date.now(); this._isComplate = false; ..

웹 개발을 하다 보면 console.log()를 사용하여 디버깅해야 합니다.하지만 모바일에서는 확인할 수 없어 불편할 때가 있습니다.이 글에서는 console.log의 출력을 웹 페이지의 특정 영역에 표시하는 방법을 소개합니다.기본적으로 console.log()는 브라우저의 개발자 도구에 출력됩니다.하지만 이를 가로채서 웹 페이지 내의 에 출력하도록 만들면, 개발자 도구 없이도 디버깅 정보를 쉽게 확인할 수 있습니다.주요 기능:console.log()의 기본 기능 유지div 안에 로그 출력객체(Object)와 배열(Array) 변환하여 가독성 높이기Promise 처리하여 해결된 값 출력 Console Output

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