어느날 갑자기 광고가 사라졌습니다예전에는 google adsense만 사라진적은 있었지만 daumadfit도 동시에 사라지기는 처음 입니다.  


Maximum call stack size exceeded


좌측 사이드 바에 애드핏은 아예 안나오고 우측 상단 애드센스는 형태만 보이는 현상입니다광고 정책이 변경 되었나 양쪽에서 보내온 메일이 있나 확인해 봐도 없고 하여 크롬 개발자 도구를 열어 보았더니 못보던 오류가 주르륵 나타납니다.


Maximum call stack size exceeded


Uncaught RangeError: Maximum call stack size exceeded

    at fix-regexp-well-known-symbol-logic.js:80

    at String.<anonymous> (es.string.replace.js:37)

    at RegExp.<anonymous> (fix-regexp-well-known-symbol-logic.js:99)

    at String.replace (<anonymous>)

    at String.replace (eval at <anonymous> (shCore.js:17), <anonymous>:1:4637)

    at fix-regexp-well-known-symbol-logic.js:88

    at String.<anonymous> (es.string.replace.js:37)

    at RegExp.<anonymous> (fix-regexp-well-known-symbol-logic.js:99)

    at String.replace (<anonymous>)

    at String.replace (eval at <anonymous> (shCore.js:17), <anonymous>:1:4637)

2VM82:1 Uncaught RangeError: Maximum call stack size exceeded

    at String.replace (eval at <anonymous> (shCore.js:17), <anonymous>:1:1)

    at fix-regexp-well-known-symbol-logic.js:88

    at String.<anonymous> (es.string.replace.js:37)

    at RegExp.<anonymous> (fix-regexp-well-known-symbol-logic.js:99)

    at String.replace (<anonymous>)

    at String.replace (eval at <anonymous> (shCore.js:17), <anonymous>:1:4637)

    at fix-regexp-well-known-symbol-logic.js:88

    at String.<anonymous> (es.string.replace.js:37)

    at RegExp.<anonymous> (fix-regexp-well-known-symbol-logic.js:99)

    at String.replace (<anonymous>)

es.string.replace.js:35 Uncaught RangeError: Maximum call stack size exceeded

    at String.<anonymous> (es.string.replace.js:35)

    at RegExp.<anonymous> (fix-regexp-well-known-symbol-logic.js:99)

    at String.replace (<anonymous>)

    at String.replace (eval at <anonymous> (shCore.js:17), <anonymous>:1:4637)

    at fix-regexp-well-known-symbol-logic.js:88

    at String.<anonymous> (es.string.replace.js:37)

    at RegExp.<anonymous> (fix-regexp-well-known-symbol-logic.js:99)

    at String.replace (<anonymous>)

    at String.replace (eval at <anonymous> (shCore.js:17), <anonymous>:1:4637)

    at fix-regexp-well-known-symbol-logic.js:88


뭔일인지 몇번 읽다보니 shCore.js가 눈에 많이 들어옵니다.  티스토리에서 본것 같기도 하고 찾아볼만한 부분은 거기밖에 없으니 관리자 페이지로 들어갑니다.


Maximum call stack size exceeded


관리자 메뉴의 스킨편집을 선택하고 HTML을 확인해 보았습니다.


Maximum call stack size exceeded


<!-- syntaxhighlighter start-->

<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shBrushCss.js"></script>

<script type="text/javascript" src="./images/shBrushJava.js"></script>

<script type="text/javascript" src="./images/shBrushSql.js"></script>

<script type="text/javascript" src="./images/shBrushJScript.js"></script>

<script type="text/javascript" src="./images/shBrushCpp.js"></script>

<script type="text/javascript" src="./images/shBrushXml.js"></script>

<script type="text/javascript" src="./images/shAutoloader.js"></script>

<link type="text/css" rel="stylesheet" href="./images/shCore.css">

<link type="text/css" rel="stylesheet" href="./images/shThemeRDark.css">

<script type="text/javascript">

SyntaxHighlighter.all();

</script>


shCore.js를 예전에 뭔가 하려고 넣었는데 지금은 잘 생각이 나지 않는군요생각이 나지 않는다는건 별로 사용을 안한다는 것이니 삭제를 하기는 그렇고 주석 처리를 해 보았습니다.


Maximum call stack size exceeded


언제 무슨일이 있었냐는듯 광고가 잘 나옵니다요즘 설정 값을 변경하기는 커녕 글을 올릴 시간도 없었는데 지금까지 아무일 없다가 왜 갑자기 오류가 발생하는지는 좀더 살펴 봐야 할것 같습니다.


- copy coding -

오류 : cannot reshape array of size 463275 into shape (1,28,28,1)

이미지를 비교할 때 자주 발생하는 오류입니다.  tensorflow는 이미지를 잘게 나누어 array로 보유하고 있고 이미지를 서로 비교할 때 두개의 사이즈가 동일해야 하며 만일 차이가 있다면 크기를 수정 작업 해서 비교 작업을 진행 해야 합니다.

 

58.png의 이미지가 있고 사이즈는 28x28 입니다. 이걸 원본으로 한다고 가정하고.


tensorflow reshape array


tensorflow_model03.png355x435 입니다. 이것과 비교하는 경우


tensorflow reshape array


이렇게 사이즈가 차이가 나는 경우 그대로 비교 한다면 오류가 발생 합니다.


tensorflow reshape array


이 소스를 실행하면 아래처럼 오류가 발생 합니다.


tensorflow reshape array



해결 : 사이즈 조절

결국은 비교하려는 이미지의 사이즈 조절을 해서 비교를 해야 합니다.


tensorflow reshape array


하단부처럼 이미지 사이즈를 수정하고 다시 실행을 하면


tensorflow reshape array

오류가 없이 결과가 3이라고 잘 실행이 됩니다이미지 사이즈 수정 방법은 여기서 사용한 방법 이외에 여러가지 방법이 있습니다.

 

전체 소스

import tensorflow as tf

import matplotlib.pyplot as plt

from PIL import Image

mnist = tf.keras.datasets.mnist

import cv2

 

 

mnist = tf.keras.datasets.mnist

(x_train, y_train),(x_test, y_test) = mnist.load_data()

x_train, x_test = x_train / 255.0, x_test / 255.0

 

model = tf.keras.models.Sequential([

  tf.keras.layers.Flatten(),

  tf.keras.layers.Dense(512, activation=tf.nn.relu),

  tf.keras.layers.Dropout(0.2),

  tf.keras.layers.Dense(10, activation=tf.nn.softmax)

])

 

model.compile(optimizer='adam',

              loss='sparse_categorical_crossentropy',

              metrics=['accuracy'])

 

model.fit(x_train, y_train, epochs=5)

score = model.evaluate(x_test, y_test)

 

############ 추가 소스 ##################

img = cv2.imread("F:/tensordata/number/tensorflow_model03.png", cv2.IMREAD_GRAYSCALE)

plt.imshow(img)

plt.show()

 

img = cv2.resize(255-img, (28, 28))

test_num = img.flatten() / 255.0

test_num = test_num.reshape((-1, 28, 28, 1))

 

print('The Answer is ', model.predict_classes(test_num))

plt.show() 



 

간단하게 사용할 수 있는 web editor를 하나 추가할 일이 있어서 naver에서 만들었으니 믿을만 하겠지 하고 설치를 하기로 하였습니다그런데 그냥 설치 하는 방법은 매뉴얼만 보면서 하면 되는데 요즘에는 화면 그리는 툴들을 많이 사용하고 있어서 javascript function 안에서 구현을 해야 하는 상황이 발생하여 다음에 또 써야할 일이 발생하면 사용하려고 작성 합니다예전에 HTML Tag만 가지고 구현하느라 1주일 걸린적이 있는데 그 소스는 어디 갔는지 모르겠네요.

 

순서

1. Source 다운로드

2. 일반적인 설치 방법

3. javascript 내에서 설치 방법

 

 

1. Source 다운로드


기존에 사용하던 개발자 url에서는 다운로드가 되지 않고 github에서 다운로드를 해야 합니다.

https://github.com/naver/smarteditor2

그리고 smartEditor 3.x 버전은 공개를 하지 않는다고 하네요저는 2.x 버전 만으로도 충분.


naver_smarteditor2


Clone or download를 클릭해서 확장된 메뉴 중 Download ZIP을 선택하면 압축된 형태로 다운로드가 진행 됩니다다운로드가 완료 되면 파일이 있는 디렉토리로 이동하여 압축풀기를 해줍니다디렉토리 구조를 보면 dist workspace 두개가 있는데 이중에 dist를 이용하여 작업을 진행 합니다.


naver_smarteditor2



2. 일반적인 설치 방법

 

그냥 html, jsp, php등에 설치 하는 방법은 네이버 매뉴얼에 잘 설명이 되어 있습니다.

http://naver.github.io/smarteditor2/user_guide/

 

간단하게 요약해서 설명 하면


2.1 압축을 푼 파일을 적당한 곳에 복사


dist 아래에 있는 파일들을 웹 서버에 복사를 하는데 웹에서 path를 잡을 수 있는 곳이면 아무 곳이나 가능하지만 너무 깊이 숨겨 놓으면 안되겠죠.

 

2.2 js 추가


smartEditor의 기본이 되는 javascript 파일을 작업하려는 파일 상단에 추가 합니다.


 <script type="text/javascript" src="상위경로/js/service/HuskyEZCreator.js" charset="utf-8"></script>


2.3 Textarea 추가

 

웹 에디터를 사용할 textarea를 작업 파일에 추가 합니다.  id는 나중에 사용해야 하므로 적당한 명칭을 부여 합니다.


<textarea name="weditor" id="weditor" rows="10" cols="100"></textarea>


2.4 editor 생성 javascript

 

2.3에서 생성한 textarea에 웹 에디터를 추가하기 위한 javascript를 작성 합니다매뉴얼에서 복사해서 사용하면 됩니다.

elPlaceHolder에 위에서 작성한 id를 입력 합니다.

sSkinURI에는 복사한 path를 잘 맞추어 기입합니다.


<script type="text/javascript">

 

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

    oAppRef: oEditors,

    elPlaceHolder: "weditor",

    sSkinURI: "경로/SmartEditor2Skin.html",

    fCreator: "createSEditor2"

});

 

</script> 



2.5 결과



naver_smarteditor2


2.6 전체 소스


좀 허접하지만 2.5에 있는 모양을 만들기 위해 제가 만든 test.html 전체 소스입니다.


webeditor

  

<script type="text/javascript" src="./dist/js/service/HuskyEZCreator.js" charset="utf-8"></script>

 

<textarea name="weditor" id="weditor" rows="10" cols="90"></textarea>

 

<script type="text/javascript">

 

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

    oAppRef: oEditors,

    elPlaceHolder: "weditor",

    sSkinURI: "./dist/SmartEditor2Skin.html",

    fCreator: "createSEditor2"

});

 

</script> 


좀 허접이 아니고 진짜 허접하네요.  dist에 있는 파일을 바로 메인에 복사해서 사용했습니다.

 

 

3. javascript 내에서 설치 방법

 

일반적인 방법으로 설치를 해보았다면 이것도 별거 없습니다그냥 function 안에서 구현을 한것 이외에는 나머지 스크립트는 동일 합니다.

 

3.1 구현 방법


$.getScript() jQuery를 이용하여 javascript 내에서 javascript를 불러옵니다그리고 불러온 js를 이용한 코드를 내부에 기입하면 됩니다.

 

textareabutton을 화면에 표시되고 HTML Tag를 적용시킬 수 있는 부분에 설정을 해줍니다툴에 따라 component, element, division등등이 될 수 있겠죠버튼도 이벤트를 직접 호출 할 수 없는 경우에는 가상으로 만들어서 사용하면 됩니다.

 

textarea를 먼저 정의하지 않으면 id를 찾을 수 없어 Cannot read property 'parentNode' of null / HuskyEZCreator.js 오류가 발생 할 수 있습니다.


naver_smarteditor2


 

3.2 전체 소스

 

화면 초기화가 완료되는 함수에 넣어서 구현한 내용입니다.


function onLoadedFunction()

{

           this.eleTxt.setHtml(‘<textarea name="ir1" id="ir1" rows="10" cols="100"></textarea>’);

this.eleBtn.setHtml(‘<button class=”saveBtn”>저장</button>’);

 

           $.getScript("./dist/js/service/HuskyEZCreator.js", function() {

                     var oEditors = [];

                     nhn.husky.EZCreator.createInIFrame({

                                oAppRef: oEditors,

                                elPlaceHolder: "ir1",

                                sSkinURI: "./dist/SmartEditor2Skin.html",

                                fCreator: "createSEditor2"

                     });

                      $(document).on('click', '.saveBtn', function () {

                    

                                var val2 = oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);

                                this.contents = $('#ir1').val();

                                alert(this.contents);

                                this.onSubmitBtnClick();

                     });

           });

          

};


3.3 결과 화면

 

위의 코드를 실행하면 나오는 결과 화면 입니다.


naver_smarteditor2



4. size 조절

 

화면에 따라 에디터의 사이즈를 조절해야 하는 경우가 발생 합니다.  그런데 html을 아무리 찾아보고 비슷한걸 수정해도 사이즈는 변경이 안되는데 사이트 변경은 js 파일에서 관리 합니다.

 

/dist/js/service에 가면 SE2BasicCreator.js 파일이 있습니다.  위치는 버전에 따라 하나 윗단계인 js에 들어 있기도 합니다. SE2BasicCreator.js 파일을 열고 아래와 같은 내용을 찾아서 수정 합니다.


 

            var htDimension = {

                     nMinHeight:205,

                     nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,

                     nHeight:elIRField.style.height||elIRField.offsetHeight,

                     nWidth:elIRField.style.width||elIRField.offsetWidth

           };


 

높이 : nMinHeight:205

가로 : nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,

 

화면에 따라 사이즈가 여러개 필요하다고요?

그럼 SmartEditor2xxx.html 파일과 SE2BasicCreator.js 파일을 여러개 복사해서 이름을 변경하고 각 html 파일에서 다른 js 파일을 불러오면 됩니다.



1

+ Recent posts