[번역] TopHN - Vue.js와 RethinkDB로 만든 재미있는 번외 프로젝트

다소 문장들이 매끄럽지 않은 부분들이 있습니다. 이해해주시고 읽어주시면 감사하겠습니다. (번역툴과 잡지식 총동원)
원문 글은 아래 링크를 통해 확인하실 수 있습니다.
원문 url: http://devan.blaze.com.au/blog/2017/3/3/tophn-a-fun-side-project-built-with-vuejs-and-rethinkdb

구석창에서 실행되는 TopHN을 통해 실시간으로 위아래 버블링되는 뉴스를 볼 수 있습니다. (맞아요, 프로젝트 실제코드는 웃기지 않습니다!)

지난 몇 년 동안, 나는 노화된 두뇌에 끊임없이 밀어넣기 위해 노력했고, 그 중의 제일 좋은 한 가지 방법은 매달마다 새로운 프로그래밍 언어, 프레임워크 또는 방법론을 배우고 기술들을 보관하는 것입니다.

나는 항상 순수한 SQL시스템을 위해 수십년간 이 시스템을 사용해 왔기 때문에, NoSQL 데이터베이스와 관련된 애증 관계를 가지고 있었습니다. 또한 Javascript 프론트엔드 프레임워크를 사용하기 위해 약간의 노력을 기울였으며 해당 영역에서의 기술능력을 향상시키고자 했습니다.

그래서 지난 주말에 RethinkDB 뿐만 아니라 Vue.js로 더러워지기로 결정했습니다. React vs Vue vs Angular 등에 관해 프로그래머들 사이에 자연스러운 농담이 많이 있었고, 나는 나의 개발 스타일에 더 잘 어울리는 것을 스스로 확인하고 싶었습니다. Angular1과 모바일 앱을 개발(Cordova, Ionic 사용)하면서 많은 작업을 이미 마쳤으며, 언급했던 Angular v2 또는 그 외 프레임워크 사용시 쉽게 전환이 가능한지 확인하고 싶었습니다.

긴 이야기를 잠깐 하자면, 나는 Angular2뿐 아니라 React에서도 머리를 쓰는데 약간의 어려움을 겪었습니다. 결국 Vue.js가 더 자연스러워 보였고 Angular1과 가까웠습니다. 개념을 이해하고 짧은 순서로 기본 앱을 작성하기 시작했습니다.

RethinkDB는 최근에 부모회사와 함께 문을 닫았지만, 데이터베이스 자체는 오픈소스로 계속 운영될 것처럼 보였습니다. RethinkDB 관리 콘솔의 외관뿐만 아니라 다양한 플랫폼에서의 설치가 용이하다는 점을 항상 염두에두고 개발용 Mac에 설치하기로 결정했습니다.

프로젝트

가장 중요한 질문은 무엇입니까? 나는 쓸데없는 프로젝트 대신 실제로 유용한 것을 만들고 싶었습니다. 그러던 중 지난 주에 Hacker News를 둘러 보던 중, 뇌리를 스쳐지나갔습니다.

Hacker News를 검색, 최신기술의 기사를 따라가는 것을 좋아하지만, 반복적으로 하는 일 중 하나는 (a) 몇 분 간격으로 주요 ‘Top News’화면을 새로고침하여 사람들이 무슨 이야기를 하고 있는지 확인하는 것입니다. 그리고 Top30만 보는것, (c) 지속적으로 내 카르마 밸런스를 확인합니다. 화면에 게시 된 모든 항목에 위 또는 아래로 덩어리(?)가 있는지 확인합니다.

이 세 가지가 사이트의 기본활동이라고 생각합니다.(기사읽기는 별도). 그래서 경량화된 번외 프로젝트 더 쉽게 만들 수 있는지 확인했고, TopHN이 탄생했습니다!

간단히 말해 TopHN은 무엇입니까? 음, 기본적으로 웹 화면에서 최고의 뉴스 활동을 실시간으로 보여줍니다. 사실 이미 많이 다른 Hacker News 실시간 피드들이 있고, 많은 것들이 내가 만든 것보다 훨씬 좋습니다. 그러나 내 솔루션이 매우 구체적이기를 바랬습니다. 대부분의 다른 사람들은 주석과 기타 세부사항을 표기하지만, 내 솔루션은 내와 관련된 중요하고 중요한 것들을 ‘대시보드’ 스타일로 보기를 원했습니다. (다른 대부분의 사용자들도 그럴 것입니다.)

먼저, HackerNews API를 살펴보기로 결정했습니다. 나는 이 것이 Google의 Firbase에 기반한 것을 보게되어 기뻤습니다. 나는 2년 전 몇가지 모바일 프로그램 작업을 하면서 Firebase를 사용했으며 실제로 변경사항을 게시하는데 사용한 비동기식 ‘푸시’시스템을 매우 좋아했습니다. Firebase 피드를 직접 사용할지에 대해 고민했지만, 데이터 조작과 폴링을 수행하고 있었기 때문에 No라고 결정했습니다. 왜냐하면 Firebase피드를 더 많은 폴링 요청으로 어지럽히고 싶지는 않았습니다. 대신 RethinkDB에 있는 HN 데이터 셋을 복제하여 시도하였습니다.

나는 클라우드서버에 RethinkDB 서버전용으로 설치했습니다. 이 것은 지시에 따르는 케이크조각이였습니다. 동일한 서버 중 하나인 Firbase에서 HN API 피드를 수신하고 현재 데이터를 가져와 내 RethinkDB 데이터베이스에 있는 스냅 샷을 저장하려는 작은 목적으로 Node.js 앱 (약 30줄의 코드)을 만들었습니다.

Hacker News는 실제로 멋진 피드를 게시합니다. 매 30초마다 상위 500개 기사의 목록이 JSON문자열로 전세계에 푸시되고 있습니다. 또한, 20~30초마다 변경 목록을 푸시하는 전용 피드를 가지고 있습니다. 여기에는 시스템에서 변경되거나 입력 된 기사 및 설명 ID 목록과 상태를 변경한 모든 사용자의 ID가 포함됩니다. (프로필이 변경되거나 다른 사람이 자신의 카르마를 증가/감소, 댓글 등이 변경된 경우)

2개의 피드를 복제된 데이터 세트를 빌드하기 위한 기초로 사용하기로 결정했습니다. ‘Top 500’ 피드가 푸시 될 때마다 기사의 ID를 파악하고 RethinkDB에서 이미 존재하는지 확인하고, 그렇지 않은 경우 누락을 요청합니다. 기사를 개별적으로 처리하고 RethinkDB에 있는 기사를 가져옵니다. 이 작업을 수행한지 며칠 만에 데이터베이스에 수만 개의 기사가 생겼습니다.

또한 ‘변경 사항’ 피드를 검사하기 위해 기사를 스캔하여 이미 가지고 있는지 확인하고, 그렇지 않은 경우 복사를 진행합니다. 사용자들도 동일합니다. 사용자가 ‘변경 사항’ 피드에 언급 될 때마다 업데이트된 프로필을 가져와서 RethinkDB에 저장합니다.

위의 스크린 샷은 RethinkDB 관리 콘솔을 보여줍니다. 이 콘솔은 서버 성능을 확인하고 쿼리를 테스트하고 데이터 테이블과 샤드(shards)를 관리하는 도구입니다.

여기까지는 그런대로 잘 진행되었습니다. 복제 된 데이터베이스는 몇 초마다 데이터로 가득 차 있었습니다. 자, 질문입니다. 무엇을 해야할까요?

나는 RethinkDB에도 ‘changes()’ 기능이 있어서 데이터 변경사항을 게시할 수 있다는 사실에 너무 좋았습니다. 그러나 Firebase 도구와 달리 이들은 클라이언트 전용 도구가 아니며 기능을 사용하기 위해 일종의 서버 플랫폼이 필요했습니다. 그래서 내가 결정한 것은 다른 Node.js 앱을 서버 백엔드로 사용하고 Vue.js를 인터페이스 요소의 프론트엔드로 사용하는 것이였습니다.

또한 둘 사이의 연결이 필요하여 socket.io를 사용합니다.
이 것 없이 클라이언트에서 서버 변경사항의 대해 푸시(Push)/풀링(Pulling) 하는 기본적인 방법이 없어서 실망했습니다. 하지만 우리는 새로운 것을 배우는데 노력하고 있으며, 소켓 운영 앱은 해보지 않은 일이였습니다. (적어도 처음부터)

따라서 하루가 끝날 무렵, 두 번째 Node.js 앱은 다른 서버에서 사용자가 사이트를 방문할 때까지 기다릴 것입니다. 이제 사용자는 몇 가지 작업을 수행할 수 있습니다. 그들은 단순히 사이트의 최상위 URL을 방문하여 실시간으로 Top 30 피드를 볼 수 있습니다. 그리고 나는 거의 실시간이라고 보고 있습니다. 새로운 기사가 게시되거나 Top 30을 위아래로 움직이면 페이지 뷰는 이 기사를 위아래로 버블링하여 최신 점수와 코멘트 카운터를 표시합니다.

사용자가 자신의 HN 사용자 이름을 입력하기로 선택한 경우 페이지는 마지막으로 몇 분 동안 변경된 표기법과 함께 사용자의 카르마(Karma) 점수를 실시간으로 표시합니다. 사람들을 흥분시키기 위한 혀영심(?) 척도 같은 것은 없습니다!

또한 사용자 이름을 입력하면 지난 10개 정도의 댓글과 기사가 페이지에 표시되어 의견에 대한 응답을 주시할 수 있습니다.

두 번째 Node.js 서버는 기본적으로 푸시(Push)/풀(Pull) 서버입니다. 이 서버에 연결된 모든 웹 브라우저에 상위 30개 목록 변경사항을 자동으로 밀어넣어줄 것입니다. 또한 사용자가 사용자 이름을 지정한 모든 브라우저에 대해 사용자 지정 푸시 이벤트 처리를 설정합니다. 예상할 수 있듯이, 여기에는 약간의 관리 및 서버 리소스가 필요하기 때문에 많은 사람들이 동시에 로그인하는 HackerNews의 죽음을 감수하는 경험을 하지않기를 바랍니다. 왜냐하면 나는 이 것이 얼마나 큰 소리로 들릴지 모르겠지만, 그 비명을 지르기 전에 얼마나 커질지 확신할 수 없기 때문입니다.

Vue.js 구성 요소는 순수하게 그 위치에서 서버 푸시에서 JSON 데이터 패킷을 수신한 다음 적절히 형식을 지정하고 새로 고치지 않고도 웹페이지를 표시하도록 합니다.

내가 여기서 어떻게 이 것을 만들었는지에 대해 자세히 설명하지 못했지만 관심이 있거나 많은 요청이 있는 경우 일부 코드 스니펫을 게시하고 다양한 구성방법에 대해 설명할 수 있습니다.

전반적으로 파트타임코딩으로 약 4~5일정도 진행된 것에 대해 매우 만족합니다. 이 도구는 유용한 도구라고 생각합니다. 상단 캡쳐이미지에서 볼 수 있듯이 좁은 크롬창을 옆으로 펼친 뒤 뉴스를 위아래로 볼 수 있습니다. 웹페이지도 완전히 반응형이며 이동성을 위해 대부분의 모바일 브라우저에서 작동합니다.

Hacker News 회원입니까? https://tophn.info를 확인하고 당신의 의견을 알려주세요.