'Programming' 카테고리의 글 목록 (5 Page)

'Programming'에 해당되는 글 1767건

2024.04.19 qr decoder
2024.04.19 안드로이드 모바일 크롬 디버깅 하기
2024.04.18 vue3 ckeditor5 document editor 추가하기
2024.04.16 QR decoder로 로또 추첨하기
2024.04.16 javascript 집합(set) 내용 출력하기
2024.04.12 js split()
2024.04.08 자바스크립트 옵셔널 체이닝(optional chaining)
2024.04.08 golang tcp socket timeout 주기(listen, read)
2024.04.07 qr decoder part 2
2024.04.04 web qr decoder

js DataView() (0)	2024.08.21
javascript ... (rest parameter) (0)	2024.08.12
QR decoder로 로또 추첨하기 (0)	2024.04.16
javascript 집합(set) 내용 출력하기 (0)	2024.04.16
js split() (0)	2024.04.12

안드로이드 모바일 크롬 디버깅 하기

chrome://inspect/#devices

[링크 : https://hotel-iu.tistory.com/279]

오랫만에 해서 USB 디버깅 켜는 법도 까먹었네

빌드버전 열심히 누르면 디버깅 모드가 숨겨져 있다가 나타난다

[링크 : https://support.google.com/android/thread/231740096/관리자가-아닌-사용자-환경에서-개발자-모드-활성화-안됨?hl=ko]

핸드폰에서 왜 안되었나 했는데..

핸드폰이 느려서 읽는데 반응을 못해준거였냐 -_-

index.min.js:1 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
o._createImageData @ index.min.js:1
o._decodeFromImageElm @ index.min.js:1
(anonymous) @ index.min.js:1
(anonymous) @ index.min.js:1
(anonymous) @ index.min.js:1
a @ index.min.js:1
o.decodeFromImage @ index.min.js:1
eval @ VM138:1
qr_decode @ lotto.html:38
await in qr_decode (async)
preview.onload @ lotto.html:62
load (async)
reader.onload @ lotto.html:61
load (async)
previewFile @ lotto.html:57
onchange @ lotto.html:12
Promise {: false}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: false

[링크 : https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently]

수정해 보았는데 영 안되네.. -_-

getContext('2d', { willReadFrequently: true });

[링크 : https://stackoverflow.com/questions/74020182/canvas2d-multiple-readback-operations-using-getimagedata-are-faster-with-the-wi]

저작자표시 (새창열림)

'Programming > android' 카테고리의 다른 글

android hdmi rotate (4)	2022.05.12
안드로이드 강제 종료 (0)	2022.03.11
안드로이드 앱 자동 실행 설정 (0)	2022.03.02
안드로이드 system.img 마운트 하기 (0)	2022.02.18
안드로이드 64bit 지원 (0)	2021.07.27

Posted by 구차니

vue3 ckeditor5 document editor 추가하기

classic editor는 이미지 크기를 조절할 수 없어서 설정 가능한 에디터를 찾아봤더니 document editor라는 녀석이 필요하다고 한다.

그런데 얘는 희한하게(?) 툴바가 안나오는데, 별도의 위치에서 붙여줘야 하는 녀석인 듯.

<template>
    <div class="document-editor__toolbar"></div>
    <div class="document-editor__editable-container">
        <ckeditor :editor="editor" :config="editorConfig"  @ready="onReady"></ckeditor>
    </div>
</template>

// ...

methods: {
      onReady(editor) {
          const toolbarContainer = document.querySelector(  '.document-editor__toolbar' );
          toolbarContainer.appendChild( editor.ui.view.toolbar.element );
      }
}

[링크 : https://github.com/ckeditor/ckeditor5-vue/issues/120]

읽기 전용 모드로 바꾸려고 하니

readonly와 disabled가 있는데

[링크 : https://stackoverflow.com/questions/63344958/inline-editor-disable-editor-and-display-html-render-content-vue]

readonly는 readonly property라 상태보는 용도로만 사용해야 하고

[링크 : https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#property-readOnly]

setReadOnly() 함수를 이용해 상태를 변경해야 한다.

[링크 : https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-setReadOnly]

상태에 따라 toolbar의 표시를 on/off 해주는 방법도 좋을 듯.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // The editor's configuration.
        // ...
    } )
    .then( editor => {
        const toolbarElement = editor.ui.view.toolbar.element;

        editor.on( 'change:isReadOnly', ( evt, propertyName, isReadOnly ) => {
            if ( isReadOnly ) {
                toolbarElement.style.display = 'none';
            } else {
                toolbarElement.style.display = 'flex';
            }
        } );
    } )
    .catch( error => {
        console.log( error );
    } );

[링크 : https://ckeditor.com/docs/ckeditor5/latest/features/read-only.html]

저작자표시 (새창열림)

'Programming > vue.js' 카테고리의 다른 글

vue import "@" (0)	2024.04.19
vue webpack ckeditor (0)	2024.04.19
vue 입력창 포커스 설정 (0)	2024.03.28
vue proxy (0)	2024.03.26
vue.js i18n (0)	2024.02.19

Posted by 구차니

QR decoder로 로또 추첨하기

qr 디코더 소스는 아래의 npm 으로 공개된 녀석을 이용

[링크 : https://github.com/yugasun/qrcode-decoder]

귀찮으니 최대한 대충 짜기

그나저나 요즘 크롬은 https 로 강제로 돌려서 http로 해두면 되질 않고

그렇다고 사설 인증서 쓰면 또 경고 띄우고 겁나 짱나네?!

$ cat lotto.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Lotto from QR</title>
</head>
<body>
  <span id="result1">decode</span><br />
  <span id="result2">set</span><br />
  <span id="result3">random</span><br />
  <input type="button" onclick="rand();" value="추첨"/><br />
  <input type="file" onchange="previewFile();" /><br />
  <img id="lotto" src="" alt="이미지 미리보기..." />
</body>
<script src="./lib/index.min.js"></script>
<script>
function rand() {
    e = new Set()
    var val = 0;
    for(i = 0; i < 6; i++)
    {
        do {
            val = parseInt(Math.random() * 45 + 1)
        } while(d.has(val) ||  e.has(val))
        e.add(val)
    }

    var result3 = document.querySelector("#result3");
    result3.innerHTML = Array.from(e).sort((a, b) => a - b)
}

  async function qr_decode() {
    var qr = new QrcodeDecoder();
    var img1 = document.querySelector("#lotto");
    const code = await qr.decodeFromImage(img1);
    console.log(code);

    var result = document.querySelector("#result1");
    result.innerHTML = code.data;

    a = code.data.split('v=')
    b = a[1].split('q')
    c = b[1]+b[2]+b[3]+b[4] +b[5].slice(0,12)
    d = new Set()
    for(i = 0; i < c.length ; i+=2)
        d.add(parseInt(c.slice(i, i+2)))

     var result2 = document.querySelector("#result2");
    result2.innerHTML = Array.from(d).sort((a, b) => a - b)

    rand();
  }

  function previewFile() {
    var file = document.querySelector("input[type=file]").files[0];
    var reader = new FileReader();
    reader.onload =
      function () {
        var preview = document.querySelector("#lotto");
        preview.src = reader.result;
        preview.onload = function () {
          qr_decode();
        }
      }

    if (file) {
      reader.readAsDataURL(file);
    }
  }
</script>

</html>

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

javascript ... (rest parameter) (0)	2024.08.12
qr decoder (0)	2024.04.19
javascript 집합(set) 내용 출력하기 (0)	2024.04.16
js split() (0)	2024.04.12
자바스크립트 옵셔널 체이닝(optional chaining) (0)	2024.04.08

Posted by 구차니

javascript 집합(set) 내용 출력하기

개발자 도구에서 집합을 만들고 console.log()로 출력하면 잘 나오는것 같은데

console.log(d)

Set(6) [ 1, 4, 29, 39, 43, 45 ]

var result2 = document.querySelector("#result2");

undefined

result2.innerHTML = d

Set(6) [ 1, 4, 29, 39, 43, 45 ]

정작 html에 넣어 버리면 object set 이라고만 나오지 내용이 나오지 않는다.

[object Set]

그럴땐 배열로 바꾸고 join을 이용하여 합치면 된다.

result2.innerHTML = Array.from(d).join(' ');

[링크 : https://bobbyhadz.com/blog/javascript-convert-set-to-string]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

qr decoder (0)	2024.04.19
QR decoder로 로또 추첨하기 (0)	2024.04.16
js split() (0)	2024.04.12
자바스크립트 옵셔널 체이닝(optional chaining) (0)	2024.04.08
qr decoder part 2 (0)	2024.04.07

Posted by 구차니

js split()

홀따옴표임, 알파벳 하나하나 끊어내는데 쓸 수 있다.

split('')

[링크 : https://miiingo.tistory.com/292]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

QR decoder로 로또 추첨하기 (0)	2024.04.16
javascript 집합(set) 내용 출력하기 (0)	2024.04.16
자바스크립트 옵셔널 체이닝(optional chaining) (0)	2024.04.08
qr decoder part 2 (0)	2024.04.07
javascript groupby map (0)	2024.03.12

Posted by 구차니

자바스크립트 옵셔널 체이닝(optional chaining)

간단하게

해당 필드(?)가 있는지 확인하고 읽을 필요 없이 바로 확인해서 출력해주는 연산자

편리하긴 한데.. 위험하지 않나 생각되네

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
};

if( adventurer.dog != undefined) console.log(adventurer.dog); else console.log(undefined);
undefined

adventurer?.dog
undefined

Optional chaining
optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.

?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다.

따라서 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining]

함수나 객체에도 접근 가능하다.

?.()
?.[]

[링크 : https://ko.javascript.info/optional-chaining]

[링크 : https://coding-farmer.tistory.com/4]

ES2020에 추가된 기능이라고

[링크 : https://pewww.tistory.com/27]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

javascript 집합(set) 내용 출력하기 (0)	2024.04.16
js split() (0)	2024.04.12
qr decoder part 2 (0)	2024.04.07
javascript groupby map (0)	2024.03.12
javascript 숫자 (0)	2024.02.07

Posted by 구차니

golang tcp socket timeout 주기(listen, read)

listen에서 accept 되면 write timeout은 조금 도외시 해도 되지 않을까 해서

read에만 timeout 하면 될 것 같아서 검색

conn.SetReadDeadline(time.Now().Add(timeoutDuration))

[링크 : https://gist.github.com/hongster/04660a20f2498fb7b680]

d := net.Dialer{Timeout: timeout}
conn, err := d.Dial("tcp", addr)
if err != nil {
// handle error
}

[링크 : https://stackoverflow.com/questions/47117850/how-to-set-timeout-while-doing-a-net-dialtcp-in-golang]

저작자표시 (새창열림)

'Programming > golang' 카테고리의 다른 글

golang 윈도우 서비스 프로그램 작성하기 (0)	2025.02.18
golang reflect (0)	2024.02.20
golang echo i18n (0)	2024.02.19
golang package (0)	2024.02.19
golang html/template ParseFiles() (0)	2024.02.16

Posted by 구차니

qr decoder part 2

xzing이 가장 원본인것 같고

그것의 javascript 버전이 jsqrcode

[링크 : https://github.com/zxing/zxing]

[링크 : https://github.com/LazarSoft/jsqrcode]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

js split() (0)	2024.04.12
자바스크립트 옵셔널 체이닝(optional chaining) (0)	2024.04.08
javascript groupby map (0)	2024.03.12
javascript 숫자 (0)	2024.02.07
마우스로 테이블 열 변경하기 (0)	2024.02.02

Posted by 구차니

web qr decoder

pnpm은 또 머냐..

중국어가 써있으니 먼가 쓰기가 꺼려지는건.. 왜 일까!?

[링크 : https://www.npmjs.com/package/qrcode-decoder]

개발자 도구로 봐서는 외부 통신 자체는 안하는 것 같다.

[링크 : https://github.com/yugasun/qrcode-decoder]

저작자표시 (새창열림)

'Programming > node.js' 카테고리의 다른 글

node excel export (0)	2024.07.18
node.js 웹소켓 채팅 서버 예제 (0)	2022.07.14
ubuntu 18.04 / nodej.s 18.x 실패 (0)	2022.05.19
웹소켓 (0)	2022.03.25
broadway / jsmpeg (0)	2020.09.16

Posted by 구차니

구차니의 잡동사니 모음

'Programming'에 해당되는 글 1767건

qr decoder

'Programming > javascript & HTML' 카테고리의 다른 글

안드로이드 모바일 크롬 디버깅 하기

'Programming > android' 카테고리의 다른 글

vue3 ckeditor5 document editor 추가하기

'Programming > vue.js' 카테고리의 다른 글

QR decoder로 로또 추첨하기

'Programming > javascript & HTML' 카테고리의 다른 글

javascript 집합(set) 내용 출력하기

'Programming > javascript & HTML' 카테고리의 다른 글

js split()

'Programming > javascript & HTML' 카테고리의 다른 글

자바스크립트 옵셔널 체이닝(optional chaining)

'Programming > javascript & HTML' 카테고리의 다른 글

golang tcp socket timeout 주기(listen, read)

'Programming > golang' 카테고리의 다른 글

qr decoder part 2

'Programming > javascript & HTML' 카테고리의 다른 글

web qr decoder

'Programming > node.js' 카테고리의 다른 글

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

티스토리툴바