Chrome Extension을 이용한 트위터 RT 추첨기 사용법과 제작기

@후기에 저희 이름 넣어주세요

적어드렸습니다 김O현, 신O아, 이O하 님.

@@신상 까인다

@@OO(닉네임)으로 해주면 안 돼?

@OO(닉네임)으로 해줘!!

@@@아니 OOO(닉네임) 이유 ㅠ

 

아마도 설치법을 모르실 수 있으니까.

사용법

https://github.com/queeeeeeee/TwitterRandomRT로 들어갑니다. 

그러면 요런 개발자스러운 사이트가 나옵니다.

여기서 초록색 Code를 누르면 나오는 팝업에서 Download Zip을 눌러줍니다. 그러면 다운이 끝납니다.

압축을 풀어서 이런 파일들이 나오면 정상.

크롬에서 chrome://extensions/로 들어갑니다. 

 

여기서 오른쪽 위에 보시면 "개발자 모드" 같은게 있습니다. 켜줍니다.

그러면 요렇게 새로운 버튼이 3개 생깁니다.

가장 왼쪽의 "압축해제된 확장 프로그램을 로드합니다." 를 누르고, 압축 해제한 폴더를 선택합니다.

요렇게 뜨면 성공.

트윗의 리트윗 페이지를 열고, 오른쪽 위에 퍼즐 모양 버튼을 누릅니다.

그리고 이걸 눌러줍니다.

그럼 요런 팝업이 나옵니다. 추첨하기를 한번 누르고 기다리시면... 점점 스크롤이 내려가면서 리트윗 한 모든 유저를 파악합니다. 

그렇게 끝까지 스크롤이 된 후에.

요렇게. 랜덤한 한 분의 계정을 회색으로 표시해 줍니다. 당첨되셨다는 뜻입니다. 

 

!! 만약 추첨하기를 눌렀는데 아무 일도 일어나지 않는다면 (스크롤이 내려가지 않는다면 ) 리트윗 페이지를 연 그 상태로 새로고침(F5)을 해주세요.   그러고도 안되면... 디엠 해주시기 바랍니다............... 

 

그럼 이제부터 진짜 후기.

모든 것의 시작. 한 트친(이자실친) 이 API 없이 알티츄첨을 만들어 달라고 했다.

흠... 사실 딱히 어려워 보이진 않았다. 

문제가 있다면 

내가

웹을

모른다는 거?

 

근데 뭐 맨날 어떻게든 했으니까

이번에도 어떻게든 해보기로 한다.

 

나는 JS를 굉장히 싫어한다....

지난번에 웹페이지를 만들 일이 있어서 사용해 보았는데.  개발하다 보면

이게 되네? 거나

이게 되면 안 되잖아!!! 두 개의 반응이 주로 나온다.

 

그래서 그냥 익숙한 C#으로 하는 방법을 찾아봤다.

왠지 C#이니까 가능해 보였다. 

그리고 진짜로 가능했다.....

이게 왜 됨?

C#이니까 그냥 넘어가자. C#은 보통 다 되더라.... 

문제는 Blazor를 포함한 ASP.NET라이브러리들을 깔기에 C드라이브가 비명을 지르고 있었다.. 

공간이 되긴 하는데 보통 저 정도는 남겨둬야 한다. 

그리고 아무리 생각해도

이런 경우는 보통... "가능은 하다" 수준이다.

내 오랜 경험 (이래 봤자 3년)이 그렇게 말하고 있었다. 

무엇보다 C#을 쓰게 되면 어찌 되든 컴파일시간이 또 걸리니까.... 

 

그래서 눈물을 머금고 자기 합리화와 함께 JS로 다시 프로젝트를 시작했다. 

 

첫 번째 아이디어는 이랬다. 

대충.. HTML에서 리트윗 만들 때 쓴 태그? 클래스? ( 아직도 웹을 잘 모른다 )를 기준으로 걔를 다 긁어오면 되지 않을까?

하고 트위터에서 F12를 눌러 HTML을 열어봤다.

어....

이게뭐지?

멍했다.

아무리 봐도 난독화가 되어있거나... 그런 수준이었다. 

나중에 찾아보니 리액트 네이티브? 에서 만들면 이렇게 된다고 하더라.

웹은 잘 모르니까 그냥 그런가 보다.. 했다 

 

그래도 클래스명은 안 바뀌지 않을까? 했는데

매번 바뀌는 것 같았다. 바뀌지 않는다고 해도.. 애초에 직접 지은 이름이 아니라면 언제 바뀔지 모른다고 생각했다. 

그래서 이 방법은 포기했다.

 

그렇게 HTML을 눈에 힘 풀고 읽으면서 두 번째 방법을 생각하고 있던 때.

무언가 보였다.

오, 한글.

생각해 보니 저런 라벨, 텍스트는 바뀔 일이 적다.

멜론머스크가 갑자기 내일부터 트위터를 튜위터로 바꿔서 리튜윗이 되지 않는 이상.

( 근데 생각해 보니까 멜론머스크면 그럴만하다 무섭다 )

그래서 이러한 라벨을 기준으로 검색을 했다.

이렇게 하는 게 맞는 건진 모르겠는데.. 일단 되니까. 넘어갔다 

영어랑 한글 둘 다 검색했다. 

 

그리고 이제 이 아래에 있는 저 요소들을 기반으로 검색했다. 

 

그렇게 1차 완성을 했었다... 근데 

어?

그런가?

아니지 이건 HTML이니까... 한 번에 로드하고 숨겨뒀다가 보여주겠지....라고 생각했는데

F12를 열고 리트윗 페이지를 스크롤하니까

로딩과 동시에 HTML이 스르륵 바뀌기 시작했다. 

 

난 바보였다. 그럼 당연히 그러겠지 1.2만 개 리트윗을 한 번에 불러오겠냐??? 

그치만 난 게임개발할 때 그렇게 했었는데.... ( 이 정도로 많은 데이터를 다뤄본 적이 없었다 )

이런 걸 Virtual List라고 한다고 한다. 

 

어? 그럼 어떡하지?  

어?

어?

어?

어?

어?

어?

어?어?

어........

 

어... 트윗 내릴까?

트윗 내리고 깃허브 내리고.. 블로그 내리고 다 내리고....

어......

어떻게든 수습해 보기로 했다. 이미 알티를 타버린 상황에서... 일단 링크를 지우고 수정에 들어갔다. 

 

찾아보니까 scroll()이라는 게 있었다. JS에서 스크롤을 강제로? 할 수 있었다. 진짜 웹은 별별 게 다 되는구나...

 

그래서 처음 생각은 이걸 다 스크롤해 가면서 HashSet<T>나 List<T> 정도 되는 거에 담아서. ( 근데 이게 JS에 있는지는.. 나중에 생각하려 했다. HashSet<T>은 결국 있는 걸 확인하긴 했다. )

그중에 랜덤을 돌리자!!라고 생각을 했다.

근데 이게 맞을까?

몇천 개가 될지도 모르는 트윗들을 다 담는 게.. 과연 맞을까?

 

그리고 이쯤에서 구버전의 문제를 하나 더 알아냈다.

그냥 무조건 리트윗 창 아래에서 @로 시작하는 텍스트면 다 긁어오는 방식이었는데,

만약 누가 닉네임을 @너구리 로 한다면 당첨자가 @너구리가 될 수도 있는 거였다.

어.... 

사실 닉네임보다는 바이오도 걸린다는 게 문제였다. 바이오에는 다른 계정을 써둘 수 도 있으니까... 

 

그래서 이 부분도 갈았다.

그냥 끝까지 스크롤하면서 최대 스크롤 깊이를 측정하고,

0부터 최대 스크롤까지 중 랜덤한 위치로 스크롤을 해본다. 

버츄얼 리스트여도 오른쪽의 슬라이드바는 초기화된다거나 하지 않으니까!! 

 

그리고 그 상태에서 로딩된 것들 중 랜덤한 하나를 골라서, 그 위치를 그냥 색을 칠해버리는 거다.

이렇게.... 

그러면 결국 랜덤하게 한 명이 추첨된다.

내 프로그램은 그 당첨자가 누군지 모르지만 

그래도 당첨자가 누구인지 사용자만 알면 그만 아닐까? 

 

작성 시간 기준 1.6만 알티를 탄 프로그램은... 이렇게 얼레벌레하게 제작되었고 얼레벌레하게 동작한다.

아직도 웹이라는 건 하나도 모르겠다.

 

나는 확률과 통계를 하지 않았다... 이과라서 미적분을 해야 했다.

그래서 이게 확률적으로 모두에게 공평한가? 에 대해서는 잘 모르겠다. 

어... 음.... 

만약 이 글을 보시는 분 중 

이것의 확률이 공평하지 않다고 생각하신다면.........

어...........

죄송합니다 그렇게 됐습니다. 

메이플 개발팀을 이해할 것 같기도 하고.... 

끝.

썸네일용 뽀미 ( 제 고양이는 아니고.. 트친 고양이 입니다. )

박제완료.

킹받는데서 가려드렸습니다.