프로그래밍 193

[html] inputmode 를 이용하여 상황에 맞는 키패드 보여주기

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

프로그래밍/Js 2023.10.23

[es6] 배열의 합 (꼬리물기 재귀함수 <--> for문으로 변경)

아래 두개의 코드는 두 가지 다른 방법으로 배열의 합을 계산하는 두 가지 함수를 포함하고 있습니다. 하나는 꼬리물기재귀(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보다..

프로그래밍/Js 2023.10.17

[vue3] vite build 시 배포버전 만들기 (한개의 파일로 생성)

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', }, //..

프로그래밍/Js 2023.10.17

[vue3] npm i 설치시 의존성 모듈 확인방법

온라인에서 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..

프로그래밍/Js 2023.10.13

[vue3] defineExpose 사용법

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

프로그래밍/Js 2023.10.06

[es6] 꼬리물기 최적화 (재귀함수)

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

프로그래밍/Js 2023.10.05

[flutter] 화면 방향을 세로/가로 고정 방법

// 화면 방향을 세로모드로 고정합니다. void setOrientationVertical(BuildContext context) { SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]); } // 화면 방향을 가로모드로 고정합니다. void setOrientationHorizontal(BuildContext context) { SystemChrome.setPreferredOrientations([ DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight, ]); } 위의 코드는 Flutter 앱에서 화면 방향을 제어하기 위해 사용되는 함수들을 정의하고 있습니다. 이러한 함..

[flutter] 화면의 가로 및 세로 크기를 가져오기(휴대폰/패드 등)

휴대폰인지 패드인지 확인하기 위한 작업이 필요하다. 다음 코드를 봅시다. _screenSize() { MediaQueryData mediaQueryData = MediaQuery.of(context); // 화면의 가로 및 세로 크기를 가져옵니다. double screenWidth = mediaQueryData.size.width; double screenHeight = mediaQueryData.size.height; if(screenWidth > 600) { print('pad 에서 접속했습니다. 가로모드만 적용'); } else { print('phone 에서 접속했습니다. 세로모드만 적용'); } } 해설 MediaQueryData를 사용하여 현재 디바이스의 화면 크기 정보를 가져옵니다. scre..