이번 시간에는 스팀잇에 등록된 글을 가져와서 출력하는 화면을 구현하겠습니다. 저도 학습하면서 구현하는 중이기 때문에 설명이 부족할 수 있습니다. 양해부탁드립니다. ___ ###### 이전글 - [스팀잇(Steemit)기반 앱 만들기 #1](https://steemit.com/@anpigon/steemit-1-10f53977c621e) ___
### 스팀잇 최신글을 가져와서 출력하는 화면 만들기
앱을 실행했을 때 처음에 보여질 메인화면를 생성하고 라우터(router)에 추가할 것입니다. 라우터에 대한 설명은 [여기](https://router.vuejs.org/kr/)를 참고하세요. App.vue 파일에서 `` 부분을 아래와 같이 수정합니다. ```html ...

... ``` `` 태그는 라우터에 의해 해당하는 컴포넌트를 렌더링하여 보여주는 영역입니다. 그리고 router/index.js 파일에서 `routers` 부분을 아래와 같이 수정합니다. ```js import Main from '@/components/Main' // Main 컴포넌트 임포트 export default new Router({ routes: [ { path: '/', name: 'Main', component: Main } ] }) ``` `/`경로로 접근하게 되었을때, `` 영역에 `Main` 컴포넌트가 렌더링된 화면이 보여질 것입니다. 마지막으로 최근글을 가져와서 출력할 화면인 components/Main.vue 파일을 생성합니다. ```html ``` 그럼 아래와 같은 화면이 보일 것입니다. 우리는 스팀잇의 최근글을 가져와서 카드형태의 목록으로 보여줄 것입니다. ![img](https://i.imgur.com/YbaYbgQ.png) ___
### 스팀잇에서 최신글 가져오기 이제 스팀잇 라이브러리(steem.js)를 사용해서 스팀잇에서 최근글을 가져오겠습니다. > steem.js에 대한 자세한 사용방법은 [github](https://github.com/steemit/steem-js)에서 **doc**와 **examples**를 참고하세요.
아래와 같이 터미널을 열어 **steem.js**을 설치합니다. ```bash $ npm install steem --save ``` 설치하는데 시간이 좀 걸리네요. 설치가 완료될때 까지 기다립니다. 저의 경우에는 아래와 같은 오류가 발생하였는데, 다시 설치를 시도하니 설치가 잘 되었습니다. :-) ```bash ... npm WARN gentlyRm not removing C:\workspace\steemit-app\node_modules\@babel\template\node_modules\.bin\babylon as it wasn't installed by C:\workspace\steemit-app\node_modules\@babel\template\node_modules\babylon npm ERR! path C:\workspace\steemit-app\node_modules\glob-parent\package.json.1597626054 npm ERR! code EPERM npm ERR! errno -4048 npm ERR! syscall rename npm ERR! Error: EPERM: operation not permitted, rename 'C:\workspace\steemit-app\node_modules\glob-parent\package.json.1597626054' -> 'C:\workspace\steemit-app\node_modules\glob-parent\package.json' ... ``` Main.vue 파일을 열어서 아래와 같이 script 코드를 추가합니다. ```html ``` `data`에는 글을 가져와서 저장할 `discussions` 변수를 선언합니다. `methods`에는 스팀잇에서 글을 가져오는 `getDiscussions` 함수를 구현합니다. `created` 함수에는 컴포넌트가 생성되면, `getDiscussions` 함수를 호출하도록 하겠습니다. 콘솔창(Console)을 보면 아래와 같이 스팀잇에서 최근글을 가져와서 출력한 것을 볼 수 있습니다. ![img](https://i.imgur.com/KHenBJI.png) > 크롬 브라우저에서 콘솔창을 보려면 개발자 도구를 열어서_{(단축키: Ctrl + Shift + i)}, Console 탭을 선택하면 됩니다. ___
### 화면에 데이터 출력하기 이번 다음 단계에서는 가져온 데이터를 화면에 출력 해보겠습니다. 우리가 가져온 `discussion`데이터의 구조는 아래와 같습니다. ```json { "id": 58212397, "author": "anpigon", "permlink": "steemit-1-10f53977c621e", "category": "kr", "parent_author": "", "parent_permlink": "kr", "title": "스팀잇(Steemit)기반 앱 만들기 #1", "body": "스터디 목적으로 스팀잇 기반...", ... } ``` > `root_`, `parent_` 와 같은 prefix가 있는 데이터가 여러군데 보입니다. > `author`, `permlink`와 `parent_author`, `parent_permlink`, `root_author`, `root_permlink`, `root_title` 의 차이점은 저도 잘모르겠습니다.ㅠㅠ
위의 데이터 구조에 맞추어 화면에 출력 할 수 있도록 Main.vue 파일을 수정합니다. ```html

{{ d.author }} ({{ d.author_reputation }})

{{ d.created }} · {{ d.category }}

{{ d.body.substr(0, 100) }}...

좋아요 {{ d.net_votes }}명 · 댓글 {{ d.children }}명 ${{ d.payout_value }}

favorite_border 좋아요

comment 댓글달기

reply 공유하기

``` 그리고 `getDiscussions` 함수를 아래와 같이 수정합니다. ```js steem.api.getDiscussionsByCreated(query, (err, result) => { console.log(err, result) if (!err) this.discussions = result }) ``` `steem.api.getDiscussionsByCreated` 함수로 가져온 `result` 데이터를 `this.discussions`에 넣어주고 있습니다. 아래와 같이 출력됩니다. 하지만 못생기게 출력되었어요.ㅠㅠ ![img](https://steemitimages.com/300x0/https://i.imgur.com/1pn8TFu.png) 그래서 제목과 내용을 출력하는 부분에 style를 추가하고 아래와 같이 수정하였습니다. ```html ``` 수정하고 나면 아래와 같이 나타납니다. 짠~ ![img](https://steemitimages.com/300x0/https://i.imgur.com/f5Z45OW.png)
#### 이미지 출력하기 이미지가 포함되어 있는 글인 경우에 이미지를 출력해보도록 하겠습니다. `getDiscussions` 함수에서 `result` 데이터 가져오는 부분을 아래와 같이 수정합니다. 그리고 `discussions`변수에는 필요한 데이터만 가지고 있도록 정리하였습니다. ```js this.discussions = result.map((item) => { const metadata = JSON.parse(item.json_metadata) // 메타데이터 JSON 파싱 const image = metadata.image ? metadata.image[0] : '' // 이미지 URL return { image: image, author: item.author, author_reputation: item.author_reputation, title: item.title, created: item.created, body: item.body.substr(0, 200), category: item.category, permlink: item.permlink, url: item.url, payout_value: item.payout_value, net_votes: item.net_votes, children: item.children } }) ``` 이미지를 출력하는 `` HMLT 태그를 아래와 같이 수정합니다. ```html ```
#### 보상금액(payout) 계산하기 글에 보상된 페이금액은 아래와 같이 계산합니다. ```js const totalPayoutValue = parseFloat(item.total_payout_value.split(' ')[0]) const curatorPayoutValue = parseFloat(item.curator_payout_value.split(' ')[0]) const pendingPayoutCalue = parseFloat(item.pending_payout_value.split(' ')[0]) item.payout_value = (totalPayoutValue + curatorPayoutValue + pendingPayoutCalue).toFixed(2) ```
#### 저자 명성(author reputation) 계산하기 저자 명성은 아래와 같이 계산합니다. ```js item.author_reputation = steem.formatter.reputation(item.author_reputation) // 저자 명성 ```
#### 글 등록시간을 경과 시간으로 보여주기 글 등록시간을 "2초 전", "5분 전", "1시간 전" 과 같은 형태로 보여줍니다. ```js const now = new Date() const created = new Date(item.created + 'Z') const elapsedSeconds = (now - created) / 1000 // 경과 시간(초) if (elapsedSeconds < 60) { item.created = Math.round(elapsedSeconds) + '초 전' } else if (elapsedSeconds < 360) { item.created = Math.round(elapsedSeconds / 60) + '분 전' } else if (elapsedSeconds < 8640) { item.created = Math.round(elapsedSeconds / 60) + '시간 전' } else if (elapsedSeconds < 207360) { item.created = '어제' } else { item.created = (now.getFullYear() !== created.getFullYear() ? created.getFullYear() + '년 ' : '') + (created.getMonth() + 1) + '월 ' + created.getDate() + '일' } ```
#### 글 내용에서 HTML 제거하기 스팀잇 글 내용은 HTML과 마크다운을 혼용해서 사용하기 때문에, 마크다운을 HTML로 변환해줄 필요가 있습니다. 터미널에서 아래 명령어를 실행하여 `remarkable` 를 설치합니다. ```bash $ npm install remarkable --save ```
사용방법은 아래와 같습니다. ```js import Remarkable from 'remarkable' const md = new Remarkable({ html: true, linkify: true }) ```
이제 글 내용에서 HTML 코드를 제거하겠습니다. ```js item.body = md.render(item.body).replace(/<\/?[^>]+(>|$)/g, '') ```
아래 화면은 지금까지 작업한 결과물입니다. ![img](https://i.imgur.com/lbs2WEY.png) 모바일에서는 아래와 같이 보입니다. ![img](https://steemitimages.com/300x0/https://i.imgur.com/lJ49TL7.png)
전체 소스 내용은 [github](https://github.com/anpigon/steemit-app)에서 볼 수 있습니다. > - github: https://github.com/anpigon/steemit-app
여기까지 읽어주셔서 감사합니다.

Kangaroo Valley Safari

{{ d.title }}