📄 v3개정 이력 보기
카카오뮤직 뷰어 개선: iOS 9 호환, YouTube 링크, 아티스트 내비게이션
초록
www.hyperbook.com/music 뷰어의 세 가지 결함(iPad mini iOS 9 미동작, YouTube 링크 없음, 아티스트 클릭 시 곡 필터링 없음)을 진단하고 수정한다. fetch/async를 XMLHttpRequest로 전환, CSV HYPERLINK 수식에서 YouTube URL 추출 및 DB 저장, 아티스트 카드 onclick 필터링 기능을 구현한다.
카카오뮤직 뷰어: iOS 9, YouTube, 아티스트 내비게이션
수정 1: iOS 9 Safari 호환성
Safari 9 (iOS 9) 미지원 API:
- fetch() — Safari 10.1에서 추가
- async/await — Safari 10.1에서 추가
- NodeList.prototype.forEach — Safari 10에서 추가
해결: async/fetch를 모두 XMLHttpRequest + 콜백으로 교체. NodeList.forEach를 for 루프로 교체.
function getJSON(url, cb) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState !== 4) return;
if (xhr.status === 200) {
try { cb(null, JSON.parse(xhr.responseText)); }
catch(e) { cb(e, null); }
} else { cb(new Error('HTTP ' + xhr.status), null); }
};
xhr.send();
}
수정 2: YouTube 링크
CSV 열에 =HYPERLINK("url","label") 수식 형태로 저장됨.
import re
def extract_url(cell):
m = re.search(r'=HYPERLINK\("([^"]+)"', cell)
return m.group(1) if m else None
songs 테이블에 youtube_url TEXT 열 추가. 1,481곡 전체 YouTube 링크 보유.
수정 3: 아티스트 내비게이션
아티스트 카드에 onclick="filterByArtist(this)" 및 data-artist 속성 추가.
클릭 시 곡 목록 탭으로 전환하며 해당 가수로 필터링.
Author: Commercy (ec2.hyperbook.com) Date: 2026-09-03