[개발] 스팀잇 본문 마크다운 뷰어 만들기 #1 - 태그와 멘션에 링크 걸기.

<p dir="auto">스팀잇과 본문을 최대한 동일하게 보여주도록 하는게 가장 좋다. 사용률로 봤을 때 사실 상 표준이기 때문이다. 그렇다면... 스팀잇에서 본문을 어떻게 보여주고 있는지 분석이 필요하다. <p dir="auto"><del>나도 잘 활용하고 있다.<span>스팀잇에서 글을 쓸 때 사용자는 가지각색의 방법으로 쓴다. 마크다운을 쓰기도 하고 html 태그를 직접적으로 쓰기도 한다. 점점 명성도가 올라갈 수록 활용 능력은 능수능란해진다. 최근 <a href="/@kyunga">@kyunga님이 <a href="/trending/kr"> #kr 유저들의 마크다운 활용 능력을 극대화시켜주고 있는 것 같다. <p dir="auto">스팀잇의 포스팅 데이터는 이런식으로 저장이 되고 있다. <pre><code>{ title : '제목' , body : '여기가 본문이다. <img src='http://sslfdkjkdlsjf.com/dkfkd.png'> http://steemit.com/@nhj12311 이런 식이고...' , created : '18년 6월 4일' ............. } <p dir="auto">문제는 정형화되지 않아서 적절하게 파싱해서 보여줘야 한다는 거다. 이럴 때 글쓰기 도구에서 등록될때 정형화되지 않은 부분을 포스팅 시( 즉 포스팅 트랜잭션 저장 시에 ) 정형화된 태그나 마크다운으로 변경해주면 좋았을걸... 보여주는 화면에서 별도로 파싱해야 하는 불편함이 생긴다. <p dir="auto">마크다운이나 태그를 적용한 이미지의 경우 <pre><code> 또는 <img src="경로" /> <p dir="auto">와 같은 식으로 태그를 매기지만 스팀잇이나 비지는 그냥 경로만 복사해서 붙여넣어도 이미지 태그를 알아서 붙여주어 보여주게끔 된다. 그러니까 원본 데이터는 https://경로.jpg 와 같은 식으로 되어있고 실제로 조회를 할 때 < img src="" /> 같은 식으로 보여준다는 소리다. <p dir="auto">따라서 본문을 보여주고자 하는 서드 파티에서는 적절하게 본문 텍스트에서 이미지나 경로, 유투브 영상 등의 태그와 경로를 인식해서 적절히 치환해주어야 알맞은 화면을 보여줄수 있게 된다. <p dir="auto">그렇다면 당연히 이미 검증되고 사용되고 있는 스팀잇의 치환 방식을 안쓸 이유가 없다. 스팀잇에서 사용하는 프레임워크는 리액트.js 같은데 리액트를 잘 몰라 소스를 보는데 좀 헤매기는 했고 치환해주는 부분을 발췌해서 자바스크립트 함수로 돌아갈수 있게 아주 약간 수정했다. <p dir="auto">스팀잇 소스 원형이 궁금하신 분은 <a href="https://github.com/steemit/condenser" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">스팀잇 소스 깃헙에서 <a href="https://github.com/steemit/condenser/blob/master/src/shared/HtmlReady.js" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">/src/app/util/HttpReady.js소스를 보면 된다. <p dir="auto"><sub><br /> <b><span>첫번째. <a href="/trending/kr"> #kr 과 같은 태그에 링크 걸어주기.<br /> 스팀잇은 trending 으로 링크를 걸지만 저는 created로 걸었음.<br /> <pre><code>function addTagLink ( html ) { html = html.replace(/(^|\s)(#[-a-z\d]+)/gi, tag => { if (/#[\d]+$/.test(tag)) return tag; // Don't allow numbers to be tags const space = /^\s/.test(tag) ? tag[0] : ''; const tag2 = tag.trim().substring(1); const tagLower = tag2.toLowerCase(); console.log(tag); //if (!true) return tag; return space + "<a href='https://steemit.com/created/"+tagLower+"'>" + tag + "</a>"; }); return html; } <p dir="auto"><br /> <p dir="auto"><sub><br /> <b><span>두번째. <a href="/@nhj12311">@nhj12311 과 같은 멘션에 링크 걸어주기.<br /> <pre><code>function addMentionLink ( html ) { html = html.replace( /(^|[^a-zA-Z0-9_!#$%&*@＠\/]|(^|[^a-zA-Z0-9_+~.-\/#]))[@＠]([a-z][-\.a-z\d]+[a-z\d])/gi, (match, preceeding1, preceeding2, user) => { const userLower = user.toLowerCase(); const preceedings = (preceeding1 || '') + (preceeding2 || ''); // include the preceeding matches if they exist return preceedings + '<a href="https://steemit.com/@' + userLower + '">@' + user + '</a>'; } ); return html; } <hr /><br /> <p dir="auto">이 외에도 여러가지 처리들이 되어있다. 이렇게 표준 마크다운이 아닌 것을 지원하기에 우리가 글을 더 아무렇게나 작성해도 된다는 장점이 있지만(?) 보여줄 때에도 마크다운 파서만 이용해서는 동일한 수준으로 보여줄 수 없다는 이슈가 발생한다. 그래도 유저 편의성을 위한 처리는 당연하다고 보여지며 많은 블로그들이 지원하는 웹 에디터 수준의 편집이 가능했으면 좋겠다.