<div id="readability-page-1" class="page">






<nav id="global-navigation">


</nav>
<main id="wrap" aria-hidden="false">

<div>






<article>
<header id="global-header">



<div>
<h2>[confluence to tistory-7]표 변환</h2>
<ul>
<li role="text" aria-label="2021년 10월 10일 21시 50분에 작성된 글."><time datetime="2021-10-10T21:50">2021.10.10 21:50</time></li>
<li><a href="/category/%EA%B0%9C%EB%B0%9C%20%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83" aria-label="개발 이것저것">개발 이것저것</a></li>
</ul>
</div>


</header>
<div id="article"><p data-ke-size="size16">구현하면서 기능들을 테스트 하다보니 이번에는 표를 변환하는 과정이 엄청 애를 먹였다. 해결하고 나서 보니 정말 아무것도 아닌 것들이었는데 내용이 다음과 같았다.</p>
<ul data-ke-list-type="disc">
<li>티스토리에 게시된 표의 모양이 예쁘지 않음</li>
<li>html2text 모듈 사용시 표 변환이 안됨</li>
</ul>
<p data-ke-size="size16">사실 두 문제 모두 각각의 상황에서만 보면 금방 디버깅 하여 해결했을 문제들 이었음에도 테스트 과정에서 공교롭게 두 문제를 동시에 마주하는 바람에 제대로 초점을 잡지 못해 삽질을 엉뚱하게 하다가 시간을 많이 보내었다. 선택과 집중이 중요함을 다시 한번 느낄 수 있었던 과정이었다.</p>
<h3 id="id-[confluencetotistory-7]표변환-티스토리에게시된표의모양이예쁘지않음" data-ke-size="size23">티스토리에 게시된 표의 모양이 예쁘지 않음</h3>
<p data-ke-size="size16">해당 내용은 말 그대로, confluence api가 제공해주는 게시물의 html 컨텐츠를 티스토리에 게시했을 때 발생하는 문제였다. 변형 없이 티스토리에 게시되는 표의 형태는 아래와 같았다. 보기에는 표처럼 보이기는 하기 때문에 큰 문제가 없게 보이기도 하지만, 일반적인 방법(티스토리의 기본 에디터)를 통해 표를 만들면 나오는 디자인이랑은 괴리감이 있는 모습이었다.</p>
<figure width="527" height="212" data-origin-width="527" data-origin-height="212" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/GU2zW/btrhlAKHnI2/P9iwGtmMxtnqhhDZtm0Khk/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/GU2zW/btrhlAKHnI2/P9iwGtmMxtnqhhDZtm0Khk/img.png" width="527" height="212" data-origin-width="527" data-origin-height="212" data-ke-mobilestyle="widthOrigin"></span></figure>
<p data-ke-size="size16">하지만, 문제의 원인은 의외로 컨플루언스 쪽의 리턴 html의 형식이 아니라 오히려 티스토리에서 지원하는 표의 형태가 html, markdown 등의 문법과 매끄럽게 호환되지 않는 문제였다. 정상적으로 생성된 표의 디자인은 아래와 같은 형태를 가지고 있는데, 바로 위에 보여지는 모습과는 확실히 다른 모양이다.</p>
<figure width="741" height="402" data-origin-width="741" data-origin-height="402" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/9tGw7/btrhdkQlyJ9/mA7PImrhkAUIyMYCGyNVf1/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/9tGw7/btrhdkQlyJ9/mA7PImrhkAUIyMYCGyNVf1/img.png" width="741" height="402" data-origin-width="741" data-origin-height="402" data-ke-mobilestyle="widthOrigin"></span></figure>
<p data-ke-size="size16">티스토리에서 지원하는 디자인의 표 형식을 사용하기 위해서는 다음과 같은 내용을 따라야 한다.</p>
<p><del>(왜 저렇게 만들었는지 정말 1도 이해가 안된다.)</del><del>다양한 디자인을 적용하기 위해 이러한 방식을 채택한 것처럼 보이는데 역시 짜증나는 방식이다.</del></p>
<ul data-ke-list-type="disc">
<li><code>&lt;th&gt;</code> 태그를 사용하면 안된다. 오직 <code>&lt;td&gt;</code> 만 사용해라.</li>
<li><code>&lt;thead&gt;</code> 와 <code>&lt;tbody&gt;</code> 를 사용해서 구분하려하면 안된다. 아에 둘중 하나만 써서 모든 내용을 몰아넣거나, 쓰지 않아야 한다.</li>
<li>디자인을 입히려면 <code>&lt;table&gt;</code> 태그의 attribute 항목으로 <code>data-ke-style</code> 를 key 로 하여 다른 값을 지정함으로써 디자인을 적용할 수 있다. 값으로는 <code>style0</code> 부터 <code>style15</code> 까지 있는것으로 보이니, 자유껏 적용해 보면 될 듯 하다.</li>
</ul>
<p data-ke-size="size16">예를 들면 아래와 같다.</p>
<div data-hasbody="true" data-macro-id="8032a1e6-c87a-4157-a70b-892ca0b59749" data-macro-name="code">
<pre data-syntaxhighlighter-params="brush: html; gutter: false; theme: Confluence" data-theme="Confluence"><code>&lt;table class="confluenceTable" data-layout="default" data-ke-align="alignLeft" data-ke-style="style12"&gt;
        &lt;tr&gt;
            &lt;td class="confluenceTh"&gt;&lt;p&gt;&lt;b&gt;구분&lt;/b&gt;&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTh"&gt;&lt;p&gt;&lt;b&gt;정보&lt;/b&gt;&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTh"&gt;&lt;p&gt;&lt;b&gt;비고&lt;/b&gt;&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;API 경로&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;&lt;code&gt;https://api.imgbb.com/1/upload&lt;/code&gt;&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;매서드&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;POST&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;Query 파라미터1&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;key&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;값: api token&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;Form 데이터&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;image&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;값: 이미지 바이너리&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;호출 목적&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;페이지 html로 export&lt;/p&gt;&lt;/td&gt;
            &lt;td class="confluenceTd"&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;/td&gt;
        &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
<h3 id="id-[confluencetotistory-7]표변환-html2text모듈사용시표형태가완성이안됨" data-ke-size="size23">html2text 모듈 사용시 표 형태가 완성이 안됨</h3>
<p data-ke-size="size16">서비스화를 염두에 두고 여러가지 기능들을 추가하다 보니, Confluence로부터 리턴받은 html을 기준으로 티스토리에 포스팅 기능만을 지원할 것이 아니라, <code>마크다운 파일</code>이나 <code>PDF</code>로도 다운로드 받을 수 있도록 하면 좋겠다는 생각이 들었다. 직접 로직을 구현하면 더 좋았겠지만, 찾아보니 이미 너무 잘 만든 모듈이 있길래 후다닥 다운로드 받아 사용해 보았다. 모듈의 이름은 <a href="https://github.com/aaronsw/html2text" rel="nofollow">html2text </a>였다.</p>
<figure width="1757" height="406" data-origin-width="1757" data-origin-height="406" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/cMcRRQ/btrhfxO1zOn/NDkavnkjdfBIOYKYci3Kc1/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/cMcRRQ/btrhfxO1zOn/NDkavnkjdfBIOYKYci3Kc1/img.png" width="1757" height="406" data-origin-width="1757" data-origin-height="406" data-ke-mobilestyle="widthOrigin"></span></figure>
<p data-ke-size="size16">하지만 역시나 너무 순조롭게 흘러갈리가 없었다. 다른 항목들은 웬만해서는 정상적으로 변환이 되는데, 표는 제대로 변환이 되지 않고 모든 셀이 개행처리 되어 표처럼 보이지 않고, 한줄씩 자리를 차지하고 출력이 되는 것이었다. 순간 2.2K나 Star를 받은 모듈의 완성도를 의심했다.</p>
<p><del>(순식간에 2.2K명을 호구로 만들어 버리는 상상)</del></p>
<p data-ke-size="size16">사실 이 부분에서 삽질을 하느라 시간을 보낸 것이 가장 바보같았는데, 정말 간단한 내용이었다. confluence의 api가 리턴하는 html의 표 항목을 자세히 살펴보면 모든 셀의 내부에 <code>&lt;p&gt;</code> 태그가 하나씩 더 붙어있는 것을 볼 수가 있었다.</p>
<div data-hasbody="true" data-macro-id="ad3028b3-7196-4535-b125-be1546036711" data-macro-name="code">
<pre data-syntaxhighlighter-params="brush: html; gutter: false; theme: Confluence" data-theme="Confluence"><code>&lt;td class="confluenceTd"&gt;&lt;p&gt;API 경로&lt;/p&gt;&lt;/td&gt; &lt;-- 원본
&lt;td class="confluenceTd"&gt;API 경로&lt;/td&gt; &lt;-- 수정본</code></pre>
</div>
<p data-ke-size="size16">이 <code>&lt;p&gt;</code> 태그들을 모두 없애주면 정상적으로 동작하는 것을 확인할 수 있었다!</p>
            </div>




<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>



















</article>


</div>
</main>

<nav id="pagination">

</nav>












	            
            
            
                        
                        
                                       
                                               
        
</div>

모두의 근삼이

염근철

구현하면서 기능들을 테스트 하다보니 이번에는 표를 변환하는 과정이 엄청 애를 먹였다. 해결하고 나서 보니 정말 아무것도 아닌 것들이었는데 내용이 다음과 같았다. 티스토리에 게시된 표의 모양이 예쁘지 않음 html2text 모듈 사용시 표 변환이 안됨 사실 두 문제 모두 각각의 상황에서만 보면 금방 디버깅 하여 해결했을 문제들 이었음에도 테스트 과정에서 공교롭게 두 문제를 동시에 마주하는 바람에 제대로 초점을 잡지 못해 삽질을 엉뚱하게 하다가 시간을 ..

[confluence to tistory-7]표 변환

댓글