초경량 웹페이지 개발하기 - git repo를 DB처럼

소스코드

https://github.com/Gbintree/DevForDuck-LUCY/tree/main

• youtube_api_module.py : video 리스트 요청 & csv 저장
• index.html : github.io 페이지 GUI 와 csv 파일 데이터 연동

Step 1

Youtube API 로 video id, title, url, thumbnail image url 을 요청한다.

from googleapiclient.discovery import build

# YouTube API 키 설정
API_KEY = input("Enter your YouTube API key: ")

# YouTube API 클라이언트 생성
youtube = build('youtube', 'v3', developerKey=API_KEY)

search_keyword = input("Enter Search Keyword: ")
max_results = 10

search_response = youtube.search().list(
    q=search_keyword,
    type='video',
    part='id,snippet',
    maxResults=max_results,
    order='viewCount'
).execute()

videos = []
for search_result in search_response.get('items', []):
    video_id = search_result['id']['videoId']
    video_title = search_result['snippet']['title']
    video_url = f'https://www.youtube.com/watch?v={video_id}'
    thumbnail_url = search_result['snippet']['thumbnails']['high']['url']

    videos.append([video_id,video_title, video_url, thumbnail_url])

Step 2

결과 리스트를 csv 파일로 저장한다.

with open('Resources/videos.csv', 'w',encoding='utf-8', newline='') as csvfile:
  csv_writer = csv.writer(csvfile) # (csvfile,quoting=csv.QUOTE_NONE, escapechar='\\')
  csv_writer.writerow(['Video ID','Title', 'URL', 'Thumbnail URL'])
  csv_writer.writerows(videos)

Step 3

csv 파일을 git repo에 업로드 후 GitHub에서 제공하는 REST API 기능을 활용하여 DB처럼 접근한다.

공식 문서 : Get repository content

GET /repos/{owner}/{repo}/contents/{path}

javascript에서 URL로 호출하는 방법
https://raw.githubusercontent.com/{owner}/{repo}/{branch}{path}

// CSV 파일 URL
const csvFileURL = 'https://raw.githubusercontent.com/Gbintree/DevForDuck-LUCY/main/Resources/videos.csv';

fetch(csvFileURL)
    .then(response => response.text())
    .then(data => {
    	const lines = data.split('\n');
        
        for (let i = 1; i < lines.length; i++) {
              const cells = lines[i].split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/); 
                  if (cells.length === 4) {
                      const [video_id,title, url, thumbnail] = cells;
                      
                      // GUI 요소와 video_id, title, url, thumbnail 연동
                   }
    })

결과물

셀프 개발한 덕질용 페이지 링크
https://gbintree.github.io/DevForDuck-LUCY/

참고
https://computer-science-student.tistory.com/297