본문 바로가기

Programing/JavaScript64

개발자도구만으로 유튜브 자동자막 txt 파일로 스크래핑하기 여러 이유로 유튜브에서 몇 시간짜리 영상을 검토해야 하는 일이 올 수 있다.그런데 몇 십분이면 그걸 다 보고 있겠지만 십 수 시간이 되는 경우 영상을 다 보고 있는 것도 고통스럽지 않겠는가. Whisper AI나 vrew 같은 툴을 써서 보다 정확한 자막을 추출해낼 수 있지만, 복잡하고 또 돈이 들기 때문에그 정도는 아니고 대강 정도만 파악이 필요한 경우 웹 브라우저의 개발자 도구만으로도 자막과 타임스탬프를 추출할 수 있다. 단 유튜브에서 자동자막을 생성해준 경우만 가능하다.웬만하면 자동자막이 잘 생성이 되지만, 여러 언어가 섞여 있거나 음질이 좋지 않은 경우에는 자동자막이 생성되지 않는 것 같다.그런데 우리나라 영상에서는 그런 경우를 잘 못 봤고 인도인 유튜브에서 그런 현상이 많았던 것 같다. 유튜브 .. Programing/JavaScript 2024. 8. 26.
JSON.stringify :: JSON serialization (직렬화) 자바스크립트로 프로그래밍을 하다 보면 JSON이라는 데이터 형식에 익숙할 것이다. 풀 네임은 JavaScript Object Notation인데, 이름 그대로 자바스크립트 객체를 말한다. const jsObject = { name: "John", age: 30, city: "New York"}; 위와 같은 형태가 JavaScript 객체인데, 이것은 프로그래밍을 위해 사용되는 데이터 구조이다.자바스크립트 코드 내에서 사용되는 데이터 구조라는 의미이다. 그런데 우리가 데이터를 서버와 주고 받을 때 사용하는 JSON은 이와 약간 차이가 있다. { "name": "John", "age": 30, "city": "New York"} 위의 데이터 형태가 JSON 문자열인데, key.. Programing/JavaScript 2024. 8. 12.
브라우저 콘솔에서 특정 클래스 스크래핑 // span 태그의 클래스 이름 배열const classNames = ["_ap3a", "_aaco", "_aacw", "_aacx", "_aad7", "_aade"];// 클래스 이름을 모두 포함하는 span 태그 선택const spans = document.querySelectorAll('span');const collectedTexts = [];spans.forEach(span => { // span 태그가 모든 클래스 이름을 가지고 있는지 확인 const hasAllClasses = classNames.every(className => span.classList.contains(className)); if (hasAllClasses) { collectedTexts.push(span.t.. Programing/JavaScript 2024. 8. 5.
API key 환경 변수로 설정하기 (.env) 예를 들어 아래와 같이 fetch를 하는 코드에 API Key가 필요하다고 가정하자. tanstack 쿼리는 리액트 라이브러리이지만 기본적인 fetch 함수에도 통용이 되는 개념이다. import { useQuery } from '@tanstack/react-query';import axios from 'axios';function useFetch() { const apiUrl = 'API URL 또는 Key'; const { data, error, isPending } = useQuery({ queryKey: ['data'], queryFn: async () => { try { const response = await axios.get(apiUrl); r.. Programing/JavaScript 2024. 6. 22.
배열.length : 배열의 아이템 개수 렌더링 하기 상황원본 배열 데이터가 있고, 이것이 몇 건인지 렌더링하여 사용자가 직관적으로 데이터의 개수를 파악할 수 있도록 하여 사용자 경험을 높이고자 한다.방법 setIsAsc(!isAsc)}> {isAsc ? '최신순' : '과거순'}{sortedData.length} 건원본데이터배열.length 메서드로 아이템의 개수를 알 수 있다. Programing/JavaScript 2024. 6. 17.

티스토리툴바