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

스팀잇과 본문을 최대한 동일하게 보여주도록 하는게 가장 좋다. 사용률로 봤을 때 사실 상 표준이기 때문이다. 그렇다면... 스팀잇에서 본문을 어떻게 보여주고 있는지 분석이 필요하다.

스팀잇에서 글을 쓸 때 사용자는 가지각색의 방법으로 쓴다. 마크다운을 쓰기도 하고 html 태그를 직접적으로 쓰기도 한다. 점점 명성도가 올라갈 수록 활용 능력은 능수능란해진다. 최근 @kyunga님이 #kr 유저들의 마크다운 활용 능력을 극대화시켜주고 있는 것 같다. 나도 잘 활용하고 있다.

스팀잇의 포스팅 데이터는 이런식으로 저장이 되고 있다.

{
title : '제목'
, body : '여기가 본문이다. <img src='http://sslfdkjkdlsjf.com/dkfkd.png'> http://steemit.com/@nhj12311 이런 식이고...'
, created : '18년 6월 4일'
.............
}

문제는 정형화되지 않아서 적절하게 파싱해서 보여줘야 한다는 거다. 이럴 때 글쓰기 도구에서 등록될때 정형화되지 않은 부분을 포스팅 시( 즉 포스팅 트랜잭션 저장 시에 ) 정형화된 태그나 마크다운으로 변경해주면 좋았을걸... 보여주는 화면에서 별도로 파싱해야 하는 불편함이 생긴다.

마크다운이나 태그를 적용한 이미지의 경우

![](경로)
또는 <img src="경로" />

와 같은 식으로 태그를 매기지만 스팀잇이나 비지는 그냥 경로만 복사해서 붙여넣어도 이미지 태그를 알아서 붙여주어 보여주게끔 된다. 그러니까 원본 데이터는 https://경로.jpg 와 같은 식으로 되어있고 실제로 조회를 할 때 < img src="" /> 같은 식으로 보여준다는 소리다.

따라서 본문을 보여주고자 하는 서드 파티에서는 적절하게 본문 텍스트에서 이미지나 경로, 유투브 영상 등의 태그와 경로를 인식해서 적절히 치환해주어야 알맞은 화면을 보여줄수 있게 된다.

그렇다면 당연히 이미 검증되고 사용되고 있는 스팀잇의 치환 방식을 안쓸 이유가 없다. 스팀잇에서 사용하는 프레임워크는 리액트.js 같은데 리액트를 잘 몰라 소스를 보는데 좀 헤매기는 했고 치환해주는 부분을 발췌해서 자바스크립트 함수로 돌아갈수 있게 아주 약간 수정했다.

스팀잇 소스 원형이 궁금하신 분은 스팀잇 소스 깃헙에서 /src/app/util/HttpReady.js소스를 보면 된다.

_{첫번째. #kr 과 같은 태그에 링크 걸어주기.
스팀잇은 trending 으로 링크를 걸지만 저는 created로 걸었음.}

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;
}

_{두번째. @nhj12311 과 같은 멘션에 링크 걸어주기.}

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;
}

---

이 외에도 여러가지 처리들이 되어있다. 이렇게 표준 마크다운이 아닌 것을 지원하기에 우리가 글을 더 아무렇게나 작성해도 된다는 장점이 있지만(?) 보여줄 때에도 마크다운 파서만 이용해서는 동일한 수준으로 보여줄 수 없다는 이슈가 발생한다. 그래도 유저 편의성을 위한 처리는 당연하다고 보여지며 많은 블로그들이 지원하는 웹 에디터 수준의 편집이 가능했으면 좋겠다.