분류 전체보기
-
[React] PIP 직접 구현해보기Dev 2023. 6. 21. 14:44
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 SheetDev 2023. 4. 17. 16:22
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 StudyDev 2023. 4. 17. 11:10
* 표시는 이해한 내용을 정리한 것 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 구현하기Dev 2023. 4. 17. 10:57
라이브러리를 사용하지 않고 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 sheetDev 2023. 4. 15. 21:14
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..
-
[Extension] mac에서 vs code 창 투명하게 하기Dev 2023. 4. 15. 20:58
최근에 다른 코드 영상을 보다가 vs code 창이 투명한 것을 보았다. 투명한 vscode에 첫눈에 반했고 나는 바로 어떻게 해야 vscode를 투명하게 할 수 있는지 검색에 들어갔다. 결론부터 말하자면 window 환경에서는 GlassIt mac 환경에서는 Vibrancy를 다운로드하여 사용하면 된다. 처음에 검색했을 때는 GlassIt만 나오거나(GlassIt은 mac을 지원하지 않는다.) 다른 방법을 시도해 보았지만 작동하지 않았다. 그렇게 계속 찾던 와중 검색 결과 하단에 Virancy 링크가 보였고, 설치했고, 성공했다. 하지만 처음에 봤던 코드 동영상에서는 vibrancy를 적용한 것보다 훨씬 투명했다. 아마도 window 환경이고 glassIt을 사용하고 있는 것 같다. glassIt만큼 ..
-
[Mac] 사용중인 port killDev 2023. 4. 5. 09:52
사용중인 port를 죽이기위해서는 pid가 필요하다. 따라서 우선 아래 코드를 터미널에 입력해 pid를 찾는다. 사용중인 port PID 정보 확인 lsof -i tcp:3000 // 3000은 확인할 port를 의미, 예를 들어 local:3000이면 3000 위 코드를 실행시켜 pid를 찾았다면 아래 코드를 입력하여 실행중인 port를 죽일 수 있다. 사용중인 port kill kill -9 Reference https://stackoverflow.com/questions/3855127/find-and-kill-process-locking-port-3000-on-mac Find (and kill) process locking port 3000 on Mac How do I find (and kill)..
-
타입스크립트 프로그래밍 4장Dev 2023. 3. 3. 14:41
💡 타입스크립트의 함수에 대하여 다룬다. 4.1 함수 선언과 호출 타입스크립트에서의 함수 자바스크립트에서 함수는 일급 객체이다. 즉, 함수를 객체처럼 사용할 수 있다는 의미이다. 따라서 함수를 변수에 할당하거나, 함수를 반환하거나 하는 등의 작업을 할 수 있다. 타입스크립트는 이러한 자바스크립트 함수의 특성을 타입에 잘 녹여냈다 타입스크립트로 선언한 함수의 예를 보면 다음과 같다. function add(a:number,b:number){ return a + b } 보통 타입스크립트에서 함수를 선언할때 매개변수 타입은 지정하고, 반환 타입은 지정하지 않는다. 왜냐하면 반환 타입은 타입스크립트가 충분히 추론할 수 있기 때문에 굳이 개발자가 직접 지정해주는 수고를 할 필요가 없다. 물론 지정하고자 한다면, ..