레몬그린 블로그

프론트엔드 웹 브라우저 크로스 테스트 가이드 이 브라우저에선 되고 저 브라우저에선 되는 우리 사이트를 살려주세요 특히 영상이요 테스트에 사용할 브라우저 Chrome (Chromium) Firefox Safari (Webkit) Opera Edge 네이버 웨일 (한국 한정) (Mobile) Android Webview, Safari Mobile Chromium, Firefox, Webkit 한번에 테스트하기 일부 캡챠나 특수한 스크립트 (봇 감지 등)이 들어간 사이트에는 사용하기 어렵습니다. WebDriver를 통해 구동되기 때문에 봇 탐지에 걸리는 경우가 많습니다. Playwright라는 헤드리스 브라우저 에뮬레이터 웹드라이버...어쩌구 패키지를 사용합니다 Node.js와 npm 설치가 필요합니다 htt..

영상을 스크롤하면서 볼 수 있는 뷰어를 만드는데, 영상을 스크롤 할 때마다 렉이 걸린다. 재생은 잘 되는데. 왜 그러는걸까? 영상을 인코딩 할 때는 GOP라는 압축 기법이 들어간다. 이 기법은 영상이 정상 프레임 + 예측 프레임들로 채워진다 이 압축 기법을 사용하면 사진의 아래처럼 예측을 하여 영상이 만들어진다. 일반적인 영상 재생에서는 이 예측이 재생 시간안에 이루어진다. 하지만 스크롤링 같은 경우는 매우 빠르게 흘러가기때문에 이러한 예측 압축을 다시 풀 시간이 없다. 이를 해결하기 위해서는 예측 프레임을 없애줌으로써, 정상 프레임인 I 프레임으로만 이루어진 영상을 만들어 사진의 위처럼 압축 없이 인코딩한다. 하지만 압축이 없어지기 때문에 약간의 크기 증가는 감안해야한다. ffmpeg -i 영상.mp4..

Bun은 Node.js와 비슷한 새로운 자바스크립트 런타임이다. 전에는 Deno가 잠깐 유행하기도했는데 Node.js와 API가 다른 탓에 인기가 길게 유지되지는 못했다. 하지만 Bun은 이것을 저격한 듯 Node와 90% 정도 호환되는 API를 가지고 있다. 그러면 한번 Bun의 장점들을 알아보자: 노드에 비해 2~3배 빠른 성능: 사파리의 JavascriptCore 엔진을 확장한 엔진을 사용하여 속도가 빠르다. Deno에 비해 뛰어난 Node.js API 지원 WebSocket, Fetch 같은 Web API도 지원하고, 노드 네이티브 API도 약 90% 지원한다. node_modules를 그대로 사용가능 Node.js의 모듈 알고리즘을 그대로 구현하여 그대로 사용가능하고, ESM, CommonJS ..

CSS로 폰트 안티앨리어싱 넣기 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 이 속성은 비표준입니다. 자세한 지원 또는 레퍼런스는 caniuse.com과 MDN의 font-smooth 항목을 참고해주세요. 파이어폭스 (macOS 버전 제외)외 Webkit 엔진 기반의 웹 브라우저는 다 작동합니다. (Edge는 Webkit 엔진이 적용된 79버전 부터) 미지원 브라우저에서 안티앨리어싱 넣는 법 transform: rotate(0.04deg) translate3d(0, 0, 0); 텍스트 렌더링 방식을 바꾸어 안티앨리어싱을 적용하는 방법입니다. 사이드 이펙트나 부작용 등에 대해선 알아보지 않아서 직접 알아보시거나 사용을 지..

Vite 사용 중에 Webpack처럼 title을 어떠한 변수나 환경변수에서 가져와서 컴파일 하는 것을 원하시는 분을 위한 기능입니다. vite-plugin-html이라는 라이브러리에서 injecting을 지원합니다. env에서 가져와서 이런식으로 집어넣을 수 있습니다. // vite.config.js import { defineConfig, loadEnv } from 'vite' import { createHtmlPlugin } from 'vite-plugin-html'; import react from '@vitejs/plugin-react' const env = loadEnv(mode, process.cwd()) export default defineConfig({ plugins: [ react()..