소행성왕자

vuex store 사용시 많은 양의 데이터를 하나의 store 파일에서 작업하기엔 벅차 store 모듈로 쪼개는 방법을 알아보고자 합니다. store 디렉토리 구조 store/modules/Counter.js /modules/moduleA.js index.js index.js import { createStore } from 'vuex' import { Counter } from './modules/Counter' import { moduleA } from './modules/moduleA' export default createStore({ mudules: { Counter, moduleA }, //기존 저장소 }); moduleA.js export const moduleA = { namespaced..

vue3 에서 options API 사용할때 watch 사용방법을 알아보도록 하겠습니다. options API 에서는 setup() 할수 안에서 아래와 같이 watch 사용합니다. 첫번째 방법 import { useStore } from 'vuex'; export default { ... ... setup() { const store = useStore(); store.watch(_=>store.getters.afterLogin, _=>{ console.log(store.getters.afterLogin); }); store.watch(_=>store.getters.ofprInfo, _=>{ console.log(store.getters.ofprInfo); }, {deep:true}); }, mounte..

재귀함수를 꼬리물기 최적화 재귀함수로 변경한다. why. 현시점에서 재귀함수는 스택오버플로우를 발생하기 때문에 꼬리물기 최적화 재귀함수로 변경한다. 그다음 꼬리물기 최적화된 재귀함수는 언제든지 while 문으로 변경할수 있다. 샘플 예제를 확인해보자 꼬리물기 최적화가 안된 재귀함수 ( 이유 : 연산자 + 때문에 스택 해제를 하지 못한다.) const sum = (v) => { return v > 0 ? v + sum(v-1) : 0; }; console.log(sum(5)); console.log(sum(5000000)); 꼬리물기 최적화 된 재귀함수(크롬에서는 아직까지 꼬리물기 최적화 지원이 안된다.) const sum2 = (v, hab=0) => { hab += v; return v > 0 ? su..

클래스의 메소드를 함수를 이용하여 호출하는 방법을 알아보도록 합니다. 템플릿 메소드를 이용한것입니다. 대략 23분 참고 https://www.youtube.com/watch?v=ik7HZrEqfEA&list=PLBA53uNlbf-vuKTARH6Ka7a_Jp0OVT_AY&index=2 const SET = { stage: { max:10, } }; const Subdata = class { constructor(listener) {} notify() {} clear() { this._clear(); } }; const Stage = class extends Subdata { _clear() { console.log('_clear()'); console.log(SET.stage.max) } }; 을 아래와 ..

/** * Table2Excel JS PLUGIN * * Table2Excel is a ES6 javscript html table to excel file exporter, * this plgin originally inspired from jQuery table2excel plgin, * but in this fork the jQuery dependency is removed. * twitter: @masiifi * release date: 26/12/2019 */ class Table2Excel { constructor(element, options = {}) { this.element = document.querySelectorAll(element); this.settings = {}; this...

js에서 0.1 + 0.2 를 하면 0.3이 나와야 하는데 0.30000000000000004 위와 같이 나온다. 이를 해결하기 위해 아래 라이브러리를 이용한다.

현재 크롬에서 웹소켓으로 전문을 송수신 하고 있습니다. 콘솔로그로 1초마다 지켜보고 있고 30초마다 서버와 접속하여 끊어지는 현상을 방지하고 있습니다. 그런데 소켓 연결된 탭을 비활성화 즉 다른 탭을 열고 작업을 하고 있으면 12분~13분 후에 소켓이 끊어져버립니다. onClose 에서도 감지를 못합니다. Intensive Wake Up Throttling Chrome 브라우저가 최소화되거나 초점이 맞지 않은 상태에서 5~6분 후에 웹소켓 연결이 끊길 수 있습니다. "Connection closed: 1001 Going Away (The endpoint is going away due to a server failure or client navigation), clean closure: true" 메시지..

목적 안드로이드에서 웹뷰를 실행한후 브릿지를 이용하여 연동하는 방법과 웹뷰와 웹워커를 이용합니다. 서버에서 받은 TR 을 분석하는 일을 웹워커에게 전달후 TR 분석 작업이 끝나면 json 데이터를 html 페이지에 돌려주는 방법 입니다. 또한 디자인패턴의 테플릿 메소드 패턴을 사용하여 추가되는 TR 분석은 클래스만 만들어서 사용합니다. 하고자 하는 것을 정리해보면 아래와 같습니다. 웹뷰에서 조회1 클릭 네이티브로 데이터 전송 ( TrMake.js window.HybridApp.sendMessage ) 네이티브에서 데이터 받음 ( webView.addJavascriptInterface(new AndroidBridge(), "HybridApp"); ) 네이티브 -> TR 서버 데이터 전송 서버 TR 응답 데..

목적 : 안드로이드 webview 와 native 간의 bridge 를 이용하여 연결하는 방법을 알아보도록 하겠습니다. 또한 native 는 TCP Socket 을 이용하여 데이터 전송을 할 예정입니다. 다소 복잡할것 같지만 소스 보면서 확인하시죠 안드로이드 AndroidManifest.xml MainActivity.java package com.example.worker_bridge; import android.content.Context; import android.os.Bundle; import android.os.Handler; import android.os.StrictMode; import android.util.Log; import android.view.View; import android..

모든 방법은 아래 글을 보고 참고했습니다. step-05 사용 turn 임대서버를 사용했음에도 본테스트는 안됨 내부네트워크에서만 작동함 https://codelabs.developers.google.com/codelabs/webrtc-web/#7 Real time communication with WebRTC | Google Codelabs Learn how to stream media and data between two browsers. Get to grips with the core APIs and technologies of WebRTC. Capture and manipulate images using getUserMedia, CSS, and the canvas element. Set up a p..