500개의 링크를 한번에 다운로드 하는 방법. (feat. Rolling Stone's 500 Greatest Songs of All Time)

오랜만에 들어가보니.. 다운 페이지가 짤려있음...

---

링끄 : https://play.rgbplace.com/#/RollingStoneMagazines500GreatestSongsOfAllTime

 

롤링 스톤 역사상 가장 위대한 노래 500곡

 

Billy Joel - Piano Man

 

 

 

 

빌리 조엘의 피아노 맨.

 

멜로디도 좋지만, 가사는 더 멋지다.

 

 

 

검색해서 보다보니, 피아노 맨이 '롤링 스톤 역사상 가장 위대한 노래 500곡' 에 선정되어있다는 글을 보았다.

 

'이렇게 좋은 곡과 비슷한 수준의 노래가 500곡이나 더 있다고??'

 

찾아보지 않을 수 없었다.

 

https://archive.org/details/RollingStoneMagazines500GreatestSongsOfAllTime...

Rolling Stone Magazine's 500 greatest songs of all time... : Candy Bar : Free Download, Borrow, and Streaming : Internet Archive

 

생각보다 쉽게 링크를 찾을 수 있었지만

 

필자는 다운로드 해서 듣는 것을 더 좋아하기 때문에, 방법을 찾아보았다.

 

 

우선 해당 페이지의 링크를 확보했다. 개발자 도구를 통해 쉽게 링크를 찾을 수 있었다.

개발자 도구로 mp3 를 검색하면 나온다.

 

그런 다음, 에디터를 통해 mp3 만 추출했다. (intelliJ 파워!)

 

이후, 어떤 방식으로 다운로드를 해보면 좋을까 시나리오를 짜봤다.

 

 

1. textarea 태그에 링크를 담는다.

 

2. setInterval 로 순차적으로 다운로드 받는다.

 

끝.

 

 

VueJS 에서 작업 진행.

 

간단하게 만들어볼까 하다 이것저것 붙이게 되었다.

 

셋팅값의 첫번째 자릿수가 0이 안들어도록 vue-the-mask 모듈을 추가하고,

 

vue-the-mask 모듈을 쓰지않고도 구현은 가능하다.

 

비동기 다운로드를 위한 axios 모듈을 추가했다.

 

다운로드 화면 예시.

실제로 1로 해놓으면 아카이브 쪽 서버나 클라이언트에 부담이 올 수 있으니, 5~10이 좋아보인다. (3 이하는 안되게 수정 예정.)

** 이후 vuetify의 rules 를 추가해줬다. vuejs 는 정말 갓프레임워크다.

 

 

아래 textarea 태그에서 다운로드 할 링크를 변경할 수도 있으니, 일일이 다운로드 하기 어려운 코드들을 넣어놓고 다운로드 할 수도 있긴하다.

 

 

그렇게 Vuetify 로 깔끔하게 완성.

 

디테일하게 기능들을 넣다보니 시간이 배로 소요되었다.

 

완성된 페이지

 

 

다음은 룰렛이나 개선해볼까..

 

 

ps. 500곡 중에 아직 피아노맨 만큼 좋은 노래는 못찾은것 같다 🤣