스팀잇과 본문을 최대한 동일하게 보여주도록 하는게 가장 좋다. 사용률로 봤을 때 사실 상 표준이기 때문이다. 그렇다면... 스팀잇에서 본문을 어떻게 보여주고 있는지 분석이 필요하다.
스팀잇에서 글을 쓸 때 사용자는 가지각색의 방법으로 쓴다. 마크다운을 쓰기도 하고 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;
}
이 외에도 여러가지 처리들이 되어있다. 이렇게 표준 마크다운이 아닌 것을 지원하기에 우리가 글을 더 아무렇게나 작성해도 된다는 장점이 있지만(?) 보여줄 때에도 마크다운 파서만 이용해서는 동일한 수준으로 보여줄 수 없다는 이슈가 발생한다. 그래도 유저 편의성을 위한 처리는 당연하다고 보여지며 많은 블로그들이 지원하는 웹 에디터 수준의 편집이 가능했으면 좋겠다.
글 보니 또 규식이 형이 생각나네요... 예전에 직장에서 같이 일했던 형이였는데 이름이 정규식이여서 정규식 잘 할 줄 알았지만 그렇지 않았었는데 ... 잘 사시고 계신가 음...
정규식이 예전엔 그냥 이멜주소 정도로 쓰였었는데 요즘은 그활용도가 많이늘어난거 같아요...
ㅋㅋㅋㅋㅋㅋㅋㅋ 워 신박한 이야기군요. 이름이 정규식이라닛 ㅋㅋㅋㄱ
정규식ㅋㅋㅋ 왠지 크게되실 이름같은데용ㅋㅋㅋ
레..레귤러 익스프레션..이신가요? ㅋㅋㅋㅋ
늘 좋은 글 감사합니다.👍👍
제가 팔 만큼 파 봤는데, 새로울게 없네요ㅋㅋ
Github 에 있는 html 소스 다 넣어봤..어요..ㅋㅋㅋ건진게 없네요 헤헹 노가다 했드아그래서 이제 레이아웃 스타일 연구나 좀 더 해보려고요!
근데 이거 네드가 일 좀만 해주면 다 해결될 문제 아닌가요 흑흑
아마 데이터가 체인에서 빠지는 업글이 되면 휘황찬란한 포스팅이 가능해질거라 생각합니다. ㅋㅋㅋ
지금도 뷰해주는곳을 바꾸면 가능할지도 모르겠습니다. 테스트좀 해봐야겠네용.
와, 꿀팁이네요!!!
[코인코리아] 마크업 디벨롭 할 때, 참고 하겠습니다~! :)
처음엔 html 을 썼는데, 지금은 마크다운이랑 섞어서 써요. 그렇게 다양하게 활용은 못하고 있는듯 하지만요...ㅋ
좋은 정보 감사합니다.
저도 소스 공부좀 해봐야겠습니다. 에헴~
스팀잇 처럼 보여주기위한 작업중이시군요.!
정규식은 볼때마다 느끼는거지만 알아보기 힘드네요 ㅠㅠ
언제부턴가 글자에 링크걸면 띄어쓰기가 한 칸씩 늘어나던데 이건 왜그런지 모르겠더군요.
감사합니다.
리스팀할께요.
규식이형 싫어!!! 공부를 해도 해도 안늘더라고요;;
그때그때 찾아쓰는게 나은듯 ㅠㅠ
@시리즈
검색 결과 '[개발]스팀잇본문마크다운' 시리즈가 총 0건 검색되었습니다.
[개발] 스팀잇 본문 마크다운 뷰어 만들기 #1 - 태그와 멘션에 링크 걸기.
@시리즈
@시리즈
검색 결과 '[개발]스팀잇' 시리즈가 총 2건 검색되었습니다.
[개발] 스팀잇 글을 댓글로 검색을? steem.apps 댓글 봇 오픈 - 검색 + 멘션 + 리스팀 댓글 알림 busy용
[개발] 스팀잇 본문 마크다운 뷰어 만들기 #1 - 태그와 멘션에 링크 걸기. busy용
@시리즈
검색 결과 '[개발]스팀잇' 시리즈가 총 1건 검색되었습니다.
[개발] 스팀잇 글을 댓글로 검색을? steem.apps 댓글 봇 오픈 - 검색 + 멘션 + 리스팀 댓글 알림
[개발] 스팀잇 본문 마크다운 뷰어 만들기 #1 - 태그와 멘션에 링크 걸기.
@시리즈
검색 결과 '[개발]스팀잇' 시리즈가 총 2건 검색되었습니다.
[개발] 스팀잇 글을 댓글로 검색을? steem.apps 댓글 봇 오픈 - 검색 + 멘션 + 리스팀 댓글 알림, [busy용 링크]
[개발] 스팀잇 본문 마크다운 뷰어 만들기 #1 - 태그와 멘션에 링크 걸기., [busy용 링크]
@시리즈
검색 결과 '[개발]스팀잇' 시리즈가 총 2건 검색되었습니다.
|--|[개발] 스팀잇 글을 댓글로 검색을? steem.apps 댓글 봇 오픈 - 검색 + 멘션 + 리스팀 댓글 알림, [Busy용 링크] |
[개발] 스팀잇 본문 마크다운 뷰어 만들기 #1 - 태그와 멘션에 링크 걸기., [Busy용 링크] |
@시리즈
검색 결과 '[개발]스팀잇' 시리즈가 총 2건 검색되었습니다.
@시리즈
nhj12311님의 글 검색 결과 '[개발]스팀잇' 시리즈가 총 2건 검색되었습니다.