면접 회고

부족한 대답

svg 이미지 스프라이드

이미지 스프라이트란?

여거 개의 이미지를 하나의 이미지 파일로 결합하여 관리하는 방법

장점

• http 요청 감소
• 로딩속도 최적화
  • http 요청을 줄일 수 있기 때문에 header와 같은 불필요한 자원을 줄일 수 있다
  • 따라서 브라우저의 입장에서는 스프라이트 이미지 한 장을 불러오는 것이 더 빠름

단점

• 이미지를 추가하거나 삭제할 때마다 새로운 이미지를 제작해야 하기 때문에 유지관리가 복잡하다.
• 또한, 개별 이미지는 변경된 이미지만 새롭게 캐싱하면 되지만 이미지 스프라이트는 전체적으로 재캐싱된다.

이미지스프라이트를 적용한 것이랑 개별 이미지랑 전체적으로 보면 동일한 크기이지 않나? 어떻게 이미지 스프라이트를 한 이미지가 더 빠르지?

이미지 스프라이트를 적용하기 전과 후 데이터 크기는 일반적으로 동일하거나 비슷할 수 있음.

그러나 이미지 스프라이트가 더 빠른 이유는 네트워크 요청 처리 방식과 효율성에 있음

• 네트워크 요청 수
  • 개별 이미지는 이미지 개수만큼 발생함
  • 따라서 각 이미지 마다 HTTP 헤더를 전송하기 떄문에 헤더 오버헤드가 발생할 수 있음
• 네트워크 지연 (latency)
  • 개별 이미지는 요청당 지연이 누적됨
• 병렬 요청 제한 회피
  • 대부분 브라우저는 도메인당 병렬로 처리할 수 있는 HTTP 요청 수에 제한이 있기 때문에 병목이 생길 수 있음
  • HTTP/2를 사용할 땐 자잘한 이미지는 개별로 처리하는 것이 더 나음

base64

이진 데이터를 ASCII 문자열 형식으로 64진법으로 변환해 나타내는 이진 텍스트 인코딩 체계 그룹
24비트의 이진 데이터를 4개의 문자로 인코딩하는 것
a-z, A-Z, 0-9, +, /, =(패딩)

일반적으로 URL로부터 안전하기 때문에 데이터 URL에서 데이터를 인코딩하는 데 사용 가능

 

1. 데이터를 ASKII 코드로 변환
   1. b: 98 (1100010)
   2. o: 111 (1101111)
   3. n: 110 (1101110)
   4. g: 103 (1100111)
2. 위의 이진 숫자 결합 1100010110111111011101100111
3. 6비트 그룹으로 나눔 110001 | 011011 | 111101 | 110110 | 0111
4. 마지막 그룹에 0 두 개 추가해서 6비트로 만들기 110001 | 011011 | 111101 | 110110 | 011100
5. 10진수로 변환 49 | 27 | 61 | 54 | 28
6. base64 인코딩 테이블에 따라 숫자를 문자로 변환 x | b | 9 | 2 | c
7. 8비트를 6비트로 변환하기 때문에 xb92 | c 로 나눠짐
8. 나머지는 패읻으로 채움  xb92 | c===

base64를 사용하면 기본 이미지를 사용하는 것 보다 데이터의 크기가 대략 33% 증가한다.

3바이트 데이터를 4개의 문자로 변환하면서 크기가 증가한다. (원본 데이터 x (4/3) => 33% 증가)

위와 같이 빈 문자를 패딩 값으로 채우고, 바이너리 데이터를 텍스트로 변환하기 때문에 원래의 압축되지 않은 바이너리보다 데이터 표현이 비효율적이다.

 

참고로 이미지 한 프레임은 8비트 3개로 이루어져 있고(R(8) G(8) B(8)) base64는 한 프레임당 6비트 4개로 이루어져 있다. 따라서 논리적으로는 크기 차이가 없지만 실제로는 크기 차이가 존재한다.

styled-component와 tailwind css의 차이

사용자가 느끼는 차이점이 있을까??

Styled Component : CSS-in-JS

• 스타일이 js로 정의되기 때문에 js 실행 시점에 동적으로 CSS가 생성됨
• 초기 렌더링 시 js 실행에 의존해 js가 차단되거나 느리면 스타일 적용 지연될 수 있음
• 컴포넌트가 많아질수록 CSS 생성 및 주입에 따른 런타임 오버헤드 증가 가능
• CSS크기가 JS 번들 크기에 포함됨 => 번들이 커지고 네트워크 비용 증가 가능
• 더 세밀하고 동적 스타일링 가능

 

tailwind CSS

• 미리 컴파일된 css 클래스 형태로 HTML에 적용됨
• CSS 파일은 정적으로 제공되므로 HTML과 동시에 스타일 렌더링 가능
• 따라서 초기 로딩 속도가 빠르고 FOUC 문제가 적음
• 런타임 성능이 더 안정적
• 정적 CSS 파일로 분리되어 제공되고, PurgeCSS로 미사용 클레스가 제거되어 CSS 크기 압축 가능
• 렌더링이 빠르고 즉각적인 스타일 적용 가능
• 고정된 CSS 클래스이기 때문에 렌더링 오버헤드 작음