소행성왕자

문제 설명Vue3를 사용하는 프로젝트에서 웹에서는 emitter를 통해 이벤트가 정상적으로 전달되지만, 모바일 앱에서는 이벤트가 전달되지 않는 문제가 발생했습니다. 문제의 원인은 웹과 모바일의 초기 접근 파일이 다르기 때문입니다.문제 원인웹 초기 접근 파일: AppTr.vue모바일 초기 접근 파일: AppMobileTr.vue문제가 발생한 컴포넌트는 infoChartToTr.vue입니다. 이 컴포넌트가 웹에서는 AppTr.vue에 import 되어 있어 이벤트가 정상적으로 처리되지만, 모바일에서는 AppMobileTr.vue에 import 되어 있지 않아 이벤트가 처리되지 않았습니다.해결 방법모바일 초기 접근 파일인 AppMobileTr.vue에 infoChartToTr.vue 컴포넌트를 import 하..

this.document.activeElement.scrollIntoView()는 웹 페이지에서 현재 포커스된(활성화된) 요소를 뷰포트(viewport) 내에 보이도록 스크롤하는 메서드 호출을 의미합니다. 이것은 웹 페이지의 사용자 인터페이스에서 특정 요소에 포커스가 주어졌을 때, 해당 요소가 사용자에게 보이도록 자동으로 스크롤하는 데 사용됩니다.용도사용자가 웹 페이지에서 키보드를 사용하거나 특정 상호작용을 통해 요소를 활성화할 때, 해당 요소가 뷰포트 밖에 있을 수 있습니다. 이때 scrollIntoView()를 사용하면 활성화된 요소가 자동으로 뷰포트 안으로 스크롤되어 사용자에게 보여지도록 할 수 있습니다. 이는 특히 접근성 측면에서 유용하며, 사용자 경험을 개선하는 데 도움이 됩니다.작동 방식thi..

none 가상 키보드를 사용하지 않아요. 키보드를 직접 구현할 때에 사용합니다. text (default) 기본값으로 제공되고, type 속성에 따라 제공되는 가상 키보드가 표시됩니다. decimal 소수점(.)을 제공하는 숫자형 키보드를 보여줍니다. 그 외에 numeric, tel, search, email, url 있습니다. 참고 https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/inputmode

아래 두개의 코드는 두 가지 다른 방법으로 배열의 합을 계산하는 두 가지 함수를 포함하고 있습니다. 하나는 꼬리물기재귀(tail recursion)를 사용하고 다른 하나는 for 루프를 사용합니다. 각 함수와 코드 블록에 대한 설명은 다음과 같습니다: 꼬리물기 재귀함수 const _sum = (arr, i, acc) => i > -1 ? _sum(arr, i-1, acc = acc + arr[i]) : acc; const sum = (arr) => _sum(arr, arr.length-1, 0); console.log('꼬리물기재귀 : '+ sum([1,2,3,4])); _sum 함수는 재귀 함수로, 배열 arr, 현재 인덱스 i, 및 합산기 acc를 받습니다. 재귀적으로 배열을 합산하며, i가 -1보다..

import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { nodePolyfills } from 'vite-plugin-node-polyfills' import fs from 'fs-extra' //import { viteSingleFile } from "vite-plugin-singlefile" export default defineConfig({ worker: { format: 'es', }, build: { lib: { entry: './src/main.js', name: 'my-library', format: 'es', }, //..

온라인에서 node module 추가할때 아래와같이 한다. 아래 모듈은 vite build 시 청크파일을 한개로 만들수 있는 모듈이다. npm i vite-plugin-singlefile 그러면 package.json 에 해당 모듈이 추가된다. { "name": "coForward Relay Socket Client", "version": "0.0.1", "private": true, "scripts": { "dev": "vite --host", "build": "vite build", "preview": "vite preview --host" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "6.2.1", "@fortawesome/free-bran..

Vue 3의 defineExpose 함수는 Composition API와 함께 사용되며 컴포넌트의 내부 로직을 외부에서 액세스 가능하게 만들 때 사용됩니다. 기본적으로 Vue 3에서는 컴포넌트 내부의 상태와 메서드가 비공개(private)이며 컴포넌트 외부에서 직접 액세스할 수 없습니다. 그러나 defineExpose를 사용하면 컴포넌트의 일부를 외부로 노출하고 다른 컴포넌트에서 액세스할 수 있도록 할 수 있습니다. defineExpose는 컴포넌트 내부에서 호출되며 다음과 같이 사용됩니다: main.vue # 외부에 공개할 함수 선언 compo.vue Show Message defineExpose를 사용하여 컴포넌트의 일부를 외부로 노출하면 컴포넌트 간의 상호 작용 및 재사용성을 높일 수 있습니다. 그..

"꼬리물기 최적화"는 프로그래밍에서 재귀 함수의 성능을 최적화하는 기법 중 하나입니다. 이 기법은 재귀 함수가 끝날 때 함수 호출 스택에서 이전 호출들을 제거하여 스택 오버플로우를 방지하고 메모리 사용을 최적화합니다. 꼬리물기 최적화의 핵심 아이디어는 "꼬리 재귀" 함수를 작성하는 것입니다. 꼬리 재귀 함수는 재귀 호출이 함수의 마지막 작업으로 수행되는 경우를 의미합니다. 따라서 꼬리 재귀 함수를 호출하면 현재 함수 호출 스택에 남아 있는 정보가 필요하지 않습니다. 이를 통해 스택을 계속해서 쌓지 않고 재귀 함수를 최적화할 수 있습니다. 꼬리물기 최적화의 예시를 살펴보겠습니다. 아래는 1부터 10까지 더하기 계산하는 재귀 함수의 비효율적인 버전과 꼬리 재귀 버전입니다. 비효율적인 재귀함수 const su..

디자인 패턴의 OCP 를 공부하다 기록해 놓습니다. 아래와 같은 코드가 있습니다. const aa = 't'; if(aa == 't') console.log('ooo'); else consolelog('xxx'); 아주 단순한 코드죠 위 코드를 라우팅 테이블과 라우터로 변경해봅니다. const resultProcess = { table: { "true": () => { console.log('ooo'); }, "false": () => { console.log('xxx'); }, }, router(input) { return this.table[input == 't']?.(input); } }; resultProcess.router('t'); OCP 를 흉내내기 위해서 아주 간단한 코드로 작성했습니다. ..

const arr = [1,2,3]; if(arr.length == 0) console.log('0000'); else console.log('11111'); 위 코드는 아래와 같이 if 문 없이 바꿀수 있다. const err = v=>{throw v;}; const resultProcess = { table: { "true" : arr=>console.log('0000'), "false" : arr=>console.log('1111'), }, processRouter(arr) { return this.table[arr.length == 0]?.(arr); } }; resultProcess.processRouter([]); 참고 1시간 7분경 https://www.youtube.com/watch?v=v..