Jaddong's Lab

  • 홈
  • 태그
  • 방명록

DOM 1

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

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

Developer/React 2024.01.10
이전
1
다음
더보기
250x250
프로필사진

Jaddong's Lab

Front-end web developer based in Seoul.

  • 분류 전체보기 (82)
    • Developer (80)
      • JavaScript 튜토리얼 번역공부 (11)
      • Javascript (12)
      • React (18)
      • Web (5)
      • 알고리즘,자료구조 (3)
      • CSS (4)
      • Coding (7)
      • GTM | GA | SEO (10)
      • GitHub (2)
      • Activity (1)
      • Tools (5)
      • 재밌는거 ꒰⸝⸝•。•⸝⸝꒱ (2)
    • Writing (0)
      • Diary (0)
      • Tips (0)

Tag

구글태그매니저, 개발, React, 전자상거래, 자바스크립트, 프론트엔드, css, Developer, vscode, 리액트, 카페24, GA, Cafe24, yarn, 구글애널리틱스, javascript, GTM, 마케팅, 향상된전자상거래, frontend,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © AXZ Corp. All rights reserved.

티스토리툴바