웹페이지에서 이미지의 용량을 확인하기

Published in

mojitok

8 min readNov 13, 2019

안녕하세요. 플랫팜 개발자 jisoon입니다.
웹페이지에서 이미지 파일의 용량을 확인할 수 있는 몇 가지 방법을 테스트하며 response header, CORS, chrome cache 등에 대해서 파악해본 내용들을 공유합니다🙂

웹페이지에서 용량을 확인하기 위한 다양한 방법들

I. response header의 content-length 사용하기
content-length란? 수신자에게 보내지는, 바이트 단위를 가지는 개체 본문의 크기.

fetch(filename)
    .then(res => {
        const cl = res.headers.get('Content-Length');  
})

II. response type을 blob으로 설정하여 용량 확인

fetch(filename)
    .then(res => res.blob())
    .then(blob => {
       return blob.size;
})

III. response type을 arrayBuffer로 설정하여 용량 확인

fetch(filename)
    .then(res => {
        res.arrayBuffer()
        .then( buffer => {console.log(buffer.byteLength)})
 })

blob과 arrayBuffer 차이

ArrayBuffer : 일반 고정 길이 원시 이진 데이터 버퍼를 나타내는 데 사용.
ArrayBuffer의 내용을 직접 조작 할 수는 없음. 대신, 형식이 지정된 배열 객체 중 하나 또는 특정 형식으로 버퍼를 나타내는 DataView 객체를 만들고 이를 사용하여 버퍼의 내용을 읽고 쓰기 가능. ArrayBuffer는 메모리에 있으며 조작 가능하다.
Blob : 파일과 같은 불변의 원시 데이터 객체.
Blob은 반드시 JS 형식이 아닌 데이터를 나타낸다. File 인터페이스는 Blob을 기반으로하며 Blob 기능을 상속하고 사용자 시스템에서 파일을 지원하도록 확장한다.
Blob은 디스크, 캐시 메모리 및 쉽게 사용할 수없는 다른 위치에 있다.
쓰기나 수정이 필요할 경우는 ArrayBuffer가 좋지만, 필요없을 경우 Blob을 사용하는 것이 좋다.

※주의 사항 : 이미지 파일을 fetch 하기 위해서는 CORS(Cross-Origin Resource Sharing) 설정이 필요하다.

IV. window.performance의 transferSize로 용량확인

trasferSize : 가져온 리소스의 크기 나타냄
자원이 로컬 캐시나 cross-origin 자원이면 0으로 표시됨.

const p = window.performance.getEntriesByName(filename);
p.map(entry => console.log(entry.transferSize))

※주의사항 : cross domain 상황에서 transferSize를 확인하기 위해서는 response header에 Timing-Allow-Origin 설정이 필요하다.

s3에서 제공하는 Common Response Headers
Support for Timing-Allow-Origin Header
Lamda@Edge 사용하여 Timing-Allow-Origin 설정하는 방법

#. S3 & CloudFront CORS 설정하기

이미지가 저장되어 있는 AWS S3 버킷의 CORS 설정 방법

해당 버킷의 권한 > CORS 구성으로 들어간다.
CORS 허용을 원하는 주소의 설정 추가

<CORSRule>
     <AllowedOrigin>http://허용할 주소 </AllowedOrigin
     <AllowedMethod>GET</AllowedMethod
     <MaxAgeSeconds>0</MaxAgeSeconds
     <ExposeHeader>ETag</ExposeHeader>
     <AllowedHeader>*</AllowedHeader>
</CORSRule>

CloudFront의 CORS 설정 방법
1. Cloudfront에서 CORS 설정하려는 Distribution ID를 선택
2. Behavior 탭에서 Cache Based on Selected Request Headers 를 Whitelist 로 선택
3.Whitelist Headers 에서 Origin 을 add

설정 후 확인…. → w220w 파일의 용량을 못불러옴. fetch시 계속 CORS에러남!

#. 왜 그러는 거야 ?!?!😱

원본 파일 현재 상태의 w408, w300, w220w 파일들은 다 같은 S3 버킷에 존재. → CORS 설정 같이 됨.
다른 사람 컴퓨터에서는 제대로 다 보이나, 내 컴퓨터에서는 CORS 설정 오류나는 경우 존재
시크릿 모드에서 확인해도 같은 결과 발생!

→ 위의 4가지 방법 모두 사용해보아도 같은 결과 발생….😭
그런데 w220w 파일 중에서도 CORS 에러가 안나는 경우도 있고, 에러가 나는 경우가 존재 했다.

Network 확인 결과 시크릿 모드에서도 이미지 fetch 시 cache가 사용되고 있었다!!

※내 컴퓨터에서 안나왔던 이유 : w220w 이미지를 fetch 시 disk cache 캐시로 데이터 불러옴.
캐시 삭제 결과 → CORS 문제 없이 잘 불러옴!!

캐시를 삭제 / 사용안하는 방법 3가지
1. 개발자 모드의 Network → 캐시된 이미지 리스트중 하나 우클릭 → clear browser cache 클릭 → 브라우저 캐시 삭제
2. 크롬브라우저 전체 캐시 삭제방법(더보기 → 인터넷 사용 기록)
3. 개발자 모드 Network 상단의 Disable cache 사용 시 캐시 사용 안함.

#. 왜 시크릿 모드에서도 이미지의 캐시가 남아있는거지? 🤔

🤔 일반 모드에서 있던 cache가 시크릿 모드에서 유지되는가?
→ 아님. 처음 창 열면 캐시 사용하지 않음

◻︎ 크롬 시크릿 모드에서 캐시 저장 방식 :
시크릿 모드는 창이 활성화 되어있는동안에는 캐시를 유지하지만, 시크릿 모드 창을 닫을 경우 캐시를 같이 삭제.
→ 시크릿 모드에서 맨 처음 창에서 CORS 에러발생하면, 창 닫을 때 까지 캐시 유지됨.

시크릿 모드에서 모든 창을 닫은 후 다시 시크릿 모드를 열었을 때 또 CORS 에러 발생함.

🤔 시크릿 창을 모두 닫고나서 CORS 설정이 제대로 되어있다면 에러나면 안되는것 아닌가???

확인 결과, 현재 웹 페이지에서 이미지를 불러오는 방식에 의해 발생한 문제였음.

◻︎ 사이트에서 이미지를 불러오는 방식
1. <img/>로 w220w 이미지를 불러옴.
2. 해당 w220w이미지를 클릭하면 _blank로 새 탭을 열며, 선택된 이미지의 리사이징된 파일들을 fetch 하여 용량 확인.

:: 2번의 _blank로 새 탭 열 시 disk cache 사용.
→ 이전 탭에서 이미지를 불러왔으므로 cache데이터를 가져오지만, 이전 탭에서는 img 태그로 데이터 불러오므로 response header에 access-control-allow-origin이 없음. 따라서 CORS 에러 발생.