P O P U L A R
Babylon.js VS Three.js 반복되는 비슷한 일에 지쳐가던 찰나에 웹 환경에서 3D를 구현할 수 있는 babylon.js를 공부할 기회가 생겼다. babylon.js를 사용해야 한다고 전달받고는 three.js가 예제도 많고 커뮤니티도 더 큰 걸로 기억하는데 왜 babylon.js인가 싶어서 조금 찾아보았다. Babylon.js Three.js 장점 - microsoft가 개발 - typescript 지원 - 빠른 이슈 처리 - 쉬운 접근성 - 많은 예시 코드 - 큰 커뮤니티 단점 - 적은 예시 - 불편한 공식문서 - 버전에 따른 낮은 api 안정성 간단히 보면 위 표 정도가 되는데, 사실 babylon.js의 장점 2개만 봐도 어떤 것이 실제 프로덕트에 적용하는 것이 좋을지 나오는 것 같긴..
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..