P O P U L A R
최근에 다른 코드 영상을 보다가 vs code 창이 투명한 것을 보았다. 투명한 vscode에 첫눈에 반했고 나는 바로 어떻게 해야 vscode를 투명하게 할 수 있는지 검색에 들어갔다. 결론부터 말하자면 window 환경에서는 GlassIt mac 환경에서는 Vibrancy를 다운로드하여 사용하면 된다. 처음에 검색했을 때는 GlassIt만 나오거나(GlassIt은 mac을 지원하지 않는다.) 다른 방법을 시도해 보았지만 작동하지 않았다. 그렇게 계속 찾던 와중 검색 결과 하단에 Virancy 링크가 보였고, 설치했고, 성공했다. 하지만 처음에 봤던 코드 동영상에서는 vibrancy를 적용한 것보다 훨씬 투명했다. 아마도 window 환경이고 glassIt을 사용하고 있는 것 같다. glassIt만큼 ..
L A S T E S T
-
[React] PIP 직접 구현해보기
1. Picture-in-Picture API 시도해보기 프로젝트 진행 중 PIP 기능을 구현해야하는 상황이 생겼다. 그래서 처음에는 WebApi로 제공되는 PIP API를 이용하여 간단하게 구현할 생각이었다. 하지만 PIP API를 사용하기 위해서는 영상 데이터를 보여주는 방식이 video 태그여야했다. 그러나 프로젝트에서는 iframe을 이용한 유튜브 embed 방식을 사용하고 있었기 때문에 PIP API를 사용하여 구현하는 방법은 포기해야했다. 2. PIP 직접 구현해보기 직접 PIP 기능을 구현하기 위해서는 현재 프로젝트에서의 PIP 기능에 충족되어야하는 조건들을 간단히 정리할 필요가 있었다. 대략 정리하고 보니 7개 정도의 조건이 나왔다. 1. 페이지 이탈 시 PIP 활성화 2. PIP 활성화..
-
[HTML] youtube embed Cheat Sheet
Auto play youtube embed autoplay를 위해서는 mute 설정 값이 필수적이다. 만약 mute 값을 0으로 수정하면 자동 재생은 실행되지 않는다. 그 이유는 2018년 4월 이후로 구글이 정책상 뮤트되지 않은 상태로 자동재생되는 것을 막았기 때문이다. Infinite Loop loop : 단일 동영상 플레이어의 경우 1로 설정하면 플레이어가 첫 번째 동영상을 반복해서 재생합니다. 재생목록 플레이어(또는 맞춤 플레이어)에서는 플레이어가 전체 재생목록을 재생한 다음 첫 번째 동영상부터 다시 시작합니다. 지원되는 값은 0 및 1이며 기본값은 0입니다. 참고: 이 매개변수는 AS3 플레이어 및 AS3 또는 HTML5 플레이어를 로드할 수 있는 IFrame 삽입에서 제한적으로 지원됩니다. 현..
-
[Next.js] Next.js 13 Study
* 표시는 이해한 내용을 정리한 것 Next.js 13 업데이트 사항 next.js blog에서 아래와 같은 기능들을 13 버전에 업데이트되었다고 소개하고 있습니다. 해당 기능들을 순차적으로 살펴보고자 합니다. app Directory (beta): Easier, faster, less client JS. Layouts React Server Components Streaming Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement. New next/image: Faster with native browser lazy loading. New @next/font (beta): Automatic self-hosted fonts with ze..
-
[React] IntersectionObserver를 사용한 infinite scroll 구현하기
라이브러리를 사용하지 않고 IntersectionObserver를 이용하여 무한 스크롤 구현해보기 기본 사용방법 let options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } let observer = new IntersectionObserver(callback, options); IntersectionObserver를 이용한 무한 스크롤 구현 custom hook // useInfiniteScroll hook import React, { useEffect, useRef } from 'react'; export default function useInfinite(callback: () => vo..
-
[React] Swiper.js Cheat sheet
1. Custom Navigation import { Navigation } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; import { Swiper as SwiperCore } from 'swiper/types'; function CustomSlider() { const swiperRef = useRef(); const [init, setInit] = useState(true); const [prevDisabled, setPrevDisabled] = useState(false); const [nextDisabled, setNextDisabled] = useState(false); return ( {/* Custom Prev Bu..