Steemit 포스트를 Naver 블로그로 보내기 #2 - 비출력 문자 에러 처리

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@junn·
0.000 HBD
Steemit 포스트를 Naver 블로그로 보내기 #2 - 비출력 문자 에러 처리
Github : <a href="https://github.com/junn279/steemjs_example/blob/master/naver_open_api.php" target="_blank" rel="noopener">https://github.com/junn279/steemjs_example/blob/master/naver_open_api.php</a>

지난 포스팅 (https://steemit.com/kr/@junn/steemit-openapi-naver-export-using-php)을 테스트 하는 중에 재밌는 현상을 발견했습니다. 제목을 어떻게 붙여야할지 몰라. 비출력문자 에러라고 했습니다만..

지난 포스팅의 방식으로 네이버에 글을 하나 보내니 아래와 같은 문제가 생깁니다.

이상한 ? 문자가 하나 붙는 것입니다.

<hr />

<img class="alignnone wp-image-2074 size-full" src="https://junn.in/wp-content/uploads/2018/01/screen-12-3.png" alt="" width="756" height="572" />

<hr />

소스를 보고 무엇이 문제인지 확인해봤습니다.

첫번째 문제는 &amp;nbsp; 문자를 네이버로 그냥 보내면 ?로 표시가 되었습니다.

이 부분은 
```
$str = str_replace("&nbsp;"," ",$str);  
```
함수로 수정이 가능합니다.

그런데 이렇게 해도 문제가 생깁니다. 그래서 직접 변환된 HTML을 보니 아래 항목에서 에러가 발생합니다.
```
< p >  ~~~ < / p >
```
사이에.. 딱 이 위치에서 네이버에서 ? 문자를 발생시킵니다.

<img class="alignnone size-full wp-image-2085" src="https://junn.in/wp-content/uploads/2018/01/screen-3.png" alt="" width="274" height="112" />

오늘 친구들과 이야기 중에, 특수문자(예를 들면 /r/n과 같은 개행문자) 때문이 아닐까라는 가설을 들었고. 이를 확인해보고자 했습니다.

보통 개행문자는 다음 함수로 처리합니다. 

```
$text = preg_replace('/\r\n|\r|\n/','',$text);
```

그러나 변환시켰을 때 계속 에러가 발생합니다. 그래서 (혼자 재밌는) 생각이 들어 파이썬으로 한번 시도해본 방법입니다.

<strong>사실 이것 소개하려고 글 씁니다. 다른 방법이 있으면 알려주시면 좋을 것 같습니다ㅠ</strong>

<img class="alignnone size-full wp-image-2087" src="https://junn.in/wp-content/uploads/2018/01/screen-6-1.png" alt="" width="384" height="204" />

저 문자열은 제가 쓴 것이 아니라, 에러가 난 위치에서 HTML 소스보기로 복사해왔습니다. 실제로 칸 수를 세어보면 12칸입니다.

그런데 위의 코드처럼 글자수를 출력하면 문자 수가 15로 출력됩니다!

그래서 &lt;p&gt; 이후에 공백에 대해서 하나씩 문자를 찍어봅니다. 그랬더니 문자가 깨져서 나오는 것을 발견합니다.

<img class="alignnone size-large wp-image-2088" src="https://junn.in/wp-content/uploads/2018/01/screen-8-2.png" alt="" width="184" height="288" />

즉 출력되지 않은, 공백(escape)문자도 아닌 것이 붙어서 이것이 네이버 블로그에서 ? 처리를 만들어버린 것입니다. 사실 네이버에서 걸러주면 제일 좋지만, 제가 힘이 없으니..

아무튼 저것을 지워야 합니다. 그런데 애초에 출력 문자가 아니니 지울수 없습니다. 그래서 ascii 코드로 찍어봅니다.

<img class="alignnone size-full wp-image-2089" src="https://junn.in/wp-content/uploads/2018/01/screen-9-2.png" alt="" width="608" height="162" />

<img class="alignnone size-large wp-image-2090" src="https://junn.in/wp-content/uploads/2018/01/screen-10-2.png" alt="" width="152" height="278" />

php  ord 함수를 쓰면 아스키값이 불러집니다. (32 = escape). 뭔지 모르는 3문자(?)의 값을 받아왔습니다.

그리고 이 값을 문자치환에 쓰려면 16진수로 바꿔야 합니다.  (각각 E2,80,8B)

<img class="alignnone size-full wp-image-2091" src="https://junn.in/wp-content/uploads/2018/01/screen-11-3.png" alt="" width="782" height="234" />

그리고 이를 이용해 다시 문자열을 정리해주면 끝. 출력이 잘 됩니다.

<hr />

<img class="alignnone size-full wp-image-2072" src="https://junn.in/wp-content/uploads/2018/01/screen-14-3.png" alt="" width="744" height="511" />

<hr />

재밌는 것은 저 비출력문자들을 하나씩 제거해줘버리면 다른 문제가 발생해버립니다.

<img class="alignnone size-full wp-image-2082" src="https://junn.in/wp-content/uploads/2018/01/screen-11-2.png" alt="" width="800" height="246" /> <img class="alignnone size-full wp-image-2071" src="https://junn.in/wp-content/uploads/2018/01/screen-16-3.png" alt="" width="590" height="260" />

<hr />

아마 저 셋중에 무언인가는 정상적인 문자에 필요한 코드가 아닌가 생각합니다.

아마 사용하다보면 더 많은 오류가 관찰될지도 모르겠습니다만, 이런식으로 하나씩 해결해나가면 완전한 자동화가 가능하겠습니다.

&nbsp;

== 덧 ==
이렇게 글을 올리니 네이버 블로그에서 보기가 살짝 좋지 않습니다. 글자 크기, 줄간격도 그렇고요,
이럴 때 네이버 블로그에서 아무것도 바꾸지 말고 "수정"-> "확인"만 해도 스타일이 예쁘게 적용됩니다.
API를 써서 올린 글에는 어떤 meta tag나 style을 안붙여주더군요... ㅠ
네이버 개발자 포럼에 건의해놓긴했는데 적용될지는 지켜봐야겠습니다.

== 18.01.09 ===
잠깐 구글링을 해보니 재밌는? 문서(http://www.utf8-chartable.de/unicode-utf8-table.pl?start=8192&number=128) 가 하나 발견됩니다. 아래의 3개의 아스키 코드가 다음을 의미한다고 하네요,

e2 80 8b	ZERO WIDTH SPACE

왜 하나씩 지우면 문제가 되는지 이해가 됩니다.
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,