Programming/vue.js2024. 4. 18. 16:20

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가 있는데 

<template>
    <vx-card :title="editorName" v-if="loaded">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" :readonly="editorDisabled" :disabled="editorDisabled" ></ckeditor>
    </vx-card>
</template>

[링크 : 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 디코더 소스는 아래의 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' 카테고리의 다른 글

qr decoder  (0) 2024.04.19
javascript 집합(set) 내용 출력하기  (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 구차니

개발자 도구에서 집합을 만들고 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 구차니

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

split('')

 

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

Posted by 구차니

간단하게

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

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

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 구차니
Programming/golang2024. 4. 8. 15:57

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 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
golang runtime.GOMAXPROCS()  (0) 2024.02.15
Posted by 구차니

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 구차니
Programming/node.js2024. 4. 4. 19:31

pnpm은 또 머냐..

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

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

 

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

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

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

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
node.js array.sort() 주의사항  (0) 2020.02.01
Posted by 구차니
Programming/vue.js2024. 3. 28. 15:37

autofocus 만 입력해주면 알아서 autofocus=true로 설정된다.

[링크 : https://v15.vuetifyjs.com/ko/components/text-fields/]

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

vue import "@"  (0) 2024.04.19
vue webpack ckeditor  (0) 2024.04.19
vue3 ckeditor5 document editor 추가하기  (0) 2024.04.18
vue proxy  (0) 2024.03.26
vue.js i18n  (0) 2024.02.19
Posted by 구차니
Programming/web 관련2024. 3. 27. 15:20

로컬에 저장만 되서 불러서 쓰는건 줄 알았는데

서버에 요청시 request header에 cookie의 내용들이 전부 포함되서 요청된다.

 

HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 이를 이용하면 사용자의 로그인 상태를 유지할 수 있습니다. 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문입니다.

[링크 : https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies]

[링크 : https://velog.io/@msung99/인증관련-Header-그리고-쿠키Cookie]

 

'Programming > web 관련' 카테고리의 다른 글

let's encrypt 방식  (0) 2024.02.02
ajax session 인증  (0) 2024.01.26
bootstrap table 정렬기능  (0) 2024.01.26
bootstrap modal  (0) 2024.01.23
브라우저 언어 탐지  (0) 2024.01.18
Posted by 구차니