2024/01 3

리액트에서 DOM 사이즈 줄이는 최적화 방법

어셋 최적화를 포함한 웹서비스에서의 최적화에 관심을 가지게 되면서 작업했던 것 중 하나이다. 아이템 리스트에서 처음에 썸네일 이미지가 보이기 전에 스켈레톤 UI를 보여주곤 한다. 그래서 스켈레톤 컴포넌트를 공통으로 쓰고 있었다. 그러다 보니 단순 이미지 엘리먼트뿐만 아니라 스켈레톤 UI의 DOM도 포함됨으로써 시각적으로 좀 느린 느낌이 느껴졌다! 물론 사용자 입장에서는 크게 느끼지 못할 수 있으나, 개발자 입장에서는 사소한 느린 로딩도 알아채기가 쉽다.... 그래서 찾게 된 방법이다. 특히나 emotion이나 styled-component 같은 CSS-in-JS를 사용한다면 DOM구조가 나도 모르게 엄청 깊어지는 걸 알 수 있다. 그래서 이 최대한 DOM요소를 줄여 로드되는 시간을 줄이고자 했다. DOM..

Developer/React 2024.01.10

사파리에서 webm 영상 백그라운드가 투명하게 나오지 않는 이슈

웹에서 비디오 최적화를 위해서는 webm 확장자를 사용하는 것이 좋았다. 하지만 사파리 브라우저에서 자동 재생 이슈와 배경이 투명한 영상이 정상적으로 보이지 않고 까맣게 백그라운드 처리가 되는 이슈를 발견해서 처리하는 과정을 설명해봤다. 비디오 최적화하기 하나의 소스를 제공하는 것이 아니라, 최적화를 위해 여러 영상을 제공하고 브라우저가 렌더링 할 수 있는 영상을 사용한다. 아래의 예시에서는 브라우저가 webm 영상을 렌더링할 수 있는 경우 선택한 영상 파일이다. 그렇지 않으면 다음 요소로 이동하여 두 번째 요소는 mp4 형식의 영상을 가리키게 된다 . 브라우저가 mp4 영상을 렌더링할 수 있는 경우 해당 영상 파일을 사용하고 webm의 용량이 mp4보다 훨씬 작아 우선순위가 높기 때문에 먼저 선언해주면..

Developer/Web 2024.01.04

리액트에서 라이브러리없이 간단하게 이미지 최적화하기

서비스가 심미적이나 기능적으로 모두 구현되었다고 끝이 아님을 대부분 개발자들이 알고 있을 것이라 생각한다. 그중에 꼭 짚고 넘어가야 할 것이 어셋들(image, video, sound 등)에 대한 성능 최적화 작업이다. 성능 최적화 작업은 프론트엔드, 벡엔드, 디자이너 단에서 모두 각자의 방식으로 작업이 가능하나 그중 나는 프론트엔드 쪽에서 작업한 경험을 간단하게 정리해 보았다. 이미지 최적화하기 svg svg 이미지는 sources로 사용하는 것보다 svg그대로 사용하는 것이 성능에 좋다. import { ReactComponent as Logo } from "assets/icons/logo_bg.svg"; const LogoComponent = () => { return ( ); }; sources ..

Developer/React 2024.01.03