목록petflix (6)

해말그미의 코딩공부

Petflix - 유튜브 프로필 사진 (API 호출 함수)

🌼 채널 프로필 사진 가져오기  게시자(채널)의 프로필 사진은 동영상 데이터에 포함되어 있지 않기 때문에, 채널 정보를 따로 요청해야 한다. 게시자 프로필 사진 가져오는 방법**video.snippet.channelId**로 게시자(채널)의 ID를 가져옵니다.예: UC_x5XG1OV2P6uZZ5FSM9TtwchannelId를 사용해 channels 리소스를 요청하면, 해당 채널의 정보를 가져올 수 있다.여기서 **snippet.thumbnails.high.url**을 통해 채널 프로필 사진을 얻는다.  YouTube Data API로 동영상 데이터를 요청하고 channelId를 가져올 수 있는데 까지는 했다. 그다음은 채널 API로 프로필 사진 요청을 해야 한다.  🌼  1. axios 클라이언트 설..
petflix 2024. 11. 28. 19:11
API로 가져온 데이터를 상태에 저장해야 하는 경우(useEffect)

//youtubeApi.tsximport axios from "axios";const apiClient = axios.create({ baseURL: "https://youtube.googleapis.com/youtube/v3",});export const petsVideos = async () => { try { const response = await apiClient.get("videos", { params: { part: "snippet", chart: "mostPopular", maxResults: "16", regionCode: "KR", videoCategoryId: "15", key: import...
petflix 2024. 11. 21. 20:06
Petflix - youtube API(javascript)

🌼 youtube APIYouTube의 iframe API를 활용하여 여러 동영상을 특정 조건에 맞게 동적으로 재생하고 조작할 수 있도록 구현한 함수전체 코드export function YoutubeApi(video){ const tag = document.createElement('script'); tag.src ="https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; win..
petflix 2024. 10. 19. 22:48
Petflix - History API 라우팅

🌼 SPA( Single Page Application )에서 History API 라우팅을 많이 쓰는 이유? 1. SEO에 유리 - 해시(#)이 포함되지 않기 때문에 깔끔한 URL 구조를 제공할 수 있고, SEO 최적화에 도움이 된다.2. SPA에 최적화 - 새로고침하지 않고도 URL을 동적으로 변경할 수 있으며, 브라우저의 "뒤로 가기" 및 "앞으로 가기" 버튼도 자연스럽게 작동한다. 3. 프레임워크와 호환성 - React의 react-router-dom, Vue의 vue-router 같은 라우팅 라이브러리들이 History API를 기본적으로 지원한다. 이를 통해 복잡한 라우팅을 쉽게 구현할 수 있고, 관리도 용이하다. 🌼 HTML 코드 ♥ ..
petflix 2024. 10. 14. 23:41
Petflix - display와 visibility

🌼 display와 visibilitydisplay와 visibility는 HTML 요소를 화면에 표시하거나 감출 때 사용하는 속성이지만, 두 속성에는 중요한 차이점들이 있다. display display: none은 요소를 완전히 숨긴다. 이 상태에서는 해당 요소가 페이지의 레이아웃에서 아예 제외된다. 즉, 공간을 차지하지 않으며, 마치 그 요소가 존재하지 않는 것처럼 동작한다.반대로 display: block, display: inline 등으로 설정하면 해당 요소가 다시 레이아웃에 포함되어 공간을 차지하고 보이게 된다. 👉 display는 요소를 다시 보이게 만들 때마다 브라우저가 해당 요소의 위치와 레이아웃을 재계산해야 하므로 성능적으로 부담이 될 수 있다. 특히 복잡한 레이아웃일수록 레이아웃..
petflix 2024. 10. 12. 23:09
petflix : document.addEventListener("DOMContentLoaded")

🌼 오류 : 모듈화 작업 중 영상이 안 뜨는 문제 해결 방법  : YoutubeApi 함수에 video 배열을 인자로 전달하지 않았다.// thumbs.js에서export function thumbs() { // ... 각 비디오를 생성하는 함수 }YoutubeApi(video);// YoutubeApi.js에서export function YoutubeApi(video) { // ...} 🌼 document.addEventListener("DOMContentLoaded") 간단한 문제였지만 해결 방법을 찾는 중에 DOM 요소가 존재하지 않는 시점에 API 호출이 이루어지는 것인가?라고 생각 했다. 이것과는 상관 없었지만.. 추가적으로 공부한 것을 정리..! 1. YoutubeApi 함수는 각 비디..
petflix 2024. 9. 29. 16:36
이전 Prev 1 Next 다음