Programming/vue.js2024. 4. 22. 17:35

vue.js node.js 메모리 누수?

vue에서 npm run server 하는데, 아래처럼 메시지가 나오고 멈춰있어서

[70%] sealing finish module graph ESLintWebpackPlugin_1

 

top 으로 보는데 node 가 32G의 메모리는 가상으로 잡고 있는걸 보고 기겁..

    PID USER      PR  NI    VIRT    RES    SHR S  %CPU  %MEM     TIME+ COMMAND                                                  
  61734 root      20   0   31.8g   1.0g  41728 R 100.0   6.7   3:02.32 node           

 

아무튼 가상메모리 관련해서 문제가 있는거 아닌가 해서 우회법을 찾는데 영.. 되질 않네

[링크 : https://divlook.tistory.com/10]

[링크 : https://evan-moon.github.io/2019/08/08/fix-webpack-dev-memory-leak/]

 

NODE_OPTIONS=--max-old-space-size=4096

Note: If you have specified export NODE_OPTIONS=<value> in your package.json, it'll override what you set in the NODE_OPTIONS environment variable in the config.yml (either at the container, job, or step respective level)

[링크 : https://support.circleci.com/hc/en-us/articles/360009208393-How-Can-I-Increase-the-Max-Memory-for-Node]

저작자표시 (새창열림)

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

vue created mounted, method computed  (0) 2024.05.09
vue webpack  (0) 2024.04.19
vue import "@"  (0) 2024.04.19
vue webpack ckeditor  (0) 2024.04.19
vue3 ckeditor5 document editor 추가하기  (0) 2024.04.18
Posted by 구차니
Programming/vue.js2024. 4. 19. 19:06

vue webpack

도대체 이 망할(?) webpack은 처음부터 되어있던거 아닌가?

ckeditor 넣어서 하려니 멀 어떻게 해야 할지 감이 안돈다.

 

[링크 : https://cli.vuejs.org/guide/webpack.html]

[링크 : https://reintech.io/blog/integrating-vue-js-with-webpack]

 

저작자표시 (새창열림)

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

vue created mounted, method computed  (0) 2024.05.09
vue.js node.js 메모리 누수?  (0) 2024.04.22
vue import "@"  (0) 2024.04.19
vue webpack ckeditor  (0) 2024.04.19
vue3 ckeditor5 document editor 추가하기  (0) 2024.04.18
Posted by 구차니
Programming/vue.js2024. 4. 19. 18:07

vue import "@"

node.js 에서 alias로 정의되는 소스 디렉토리의 경로

[링크 : https://mikkeller.tistory.com/26]

[링크 : https://stackoverflow.com/questions/42749973/what-does-the-mean-inside-an-import-path]

 

저작자표시 (새창열림)

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

vue.js node.js 메모리 누수?  (0) 2024.04.22
vue webpack  (0) 2024.04.19
vue webpack ckeditor  (0) 2024.04.19
vue3 ckeditor5 document editor 추가하기  (0) 2024.04.18
vue 입력창 포커스 설정  (0) 2024.03.28
Posted by 구차니
Programming/vue.js2024. 4. 19. 15:36

vue webpack ckeditor

기능 하나 추가하려니 -build- 라는걸 쓰니까, 이미 빌드된거라 다른걸 추가하면 충돌나면서

ckeditor-duplicated-modules 이런 에러가 발생한다.

 

해결하려면 online builder로 zip 파일을 받거나

vite나 webpack을 이용하여 원하는 플러그인을 추가한 다음 빌드해서 써야 하는 것으로 보인다.

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

[링크 : https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/vuejs-v3.html#webpack]

[링크 : https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source-webpack.html]

 

[링크 : https://2jun0.tistory.com/27]

저작자표시 (새창열림)

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

vue webpack  (0) 2024.04.19
vue import "@"  (0) 2024.04.19
vue3 ckeditor5 document editor 추가하기  (0) 2024.04.18
vue 입력창 포커스 설정  (0) 2024.03.28
vue proxy  (0) 2024.03.26
Posted by 구차니
Programming/javascript & HTML2024. 4. 19. 08:55

qr decoder

이전 예제는 모바일 크롬에서 안되서 다시 찾아봄

 

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

저작자표시 (새창열림)

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

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
Posted by 구차니
Programming/android2024. 4. 19. 00:05

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

 

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 구차니
Programming/vue.js2024. 4. 18. 16:20

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

<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 구차니
Programming/javascript & HTML2024. 4. 16. 11:58

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 구차니
Programming/javascript & HTML2024. 4. 16. 11:12

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 구차니
Programming/javascript & HTML2024. 4. 12. 18:57

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 구차니

티스토리툴바