간단히 말해서, 직접 만들 수 있는 CDN(Content Delivery Network) 라고 볼 수 있습니다. CDN 은 간단히 말해 세계에 널리 퍼진 중계서버들의 집합이라고 보시면 됩니다. 보통 S3 와 같은 일반적인 정적 호스팅을 통해 웹 컨텐츠를 이용자들에게 제공하게 되면, 예를 들어 한국에 해당 정적 서버를 호스팅하는 컴퓨터가 위치하고 있다고 가정하면 유럽과 같은 다른 먼 나라의 이용자들에게는 한국에 거주하는 이용자들에 비해 빠른 로딩 속도를 제공하기 어려울 것입니다. 물리적인 거리가 증가함에 따라 컨텐츠를 로드하는데 걸리는 시간 또한 증가할 것이기 때문입니다. 이 비효율을 없애기 위해, 전세계에 뿌려져 있는 각종 중계서버들, 즉 CDN이 웹 자원을 대신 전달하는 역할을 해줄 수 있습니다. 프론..

Cloud Front 의 자세한 사용법에 대해 알고 싶다면 다음의 두 글을 참고하시기 바랍니다 (이 글을 읽으려면 Cloud Front Quick Start 글의 캐싱 정책 설정 부분만이라도 읽어보시길 권장드립니다). https://codingmoondoll.tistory.com/entry/Cloud-Front-%EB%9E%80 Cloud Front 란? 간단히 말해서, 직접 만들 수 있는 CDN(Content Delivery Network) 라고 볼 수 있습니다. CDN 은 간단히 말해 세계에 널리 퍼진 중계서버들의 집합이라고 보시면 됩니다. 보통 S3 와 같은 일반적인 정적 호 codingmoondoll.tistory.com https://codingmoondoll.tistory.com/entry/%..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://web.dev/prioritize-resources/ https://www.youtube.com/watch?v=R_D0rL094F4 https://beomy.github.io/tech/browser/preload-preconnect-prefetch/ 기본 지식 이해 브라우저의 기본 다운로드 우선순위 브라우저는 기본적으로 '이 자원이 얼마나 중요할 것 같은지'를 판단하여 우선순위를 매깁니다. 따라서 , 태그를 통해 다운로드 되는 자원은 '높은(high)' 우선순위를 가지게 됩니다. 하지만 만일 해당 태그에 'async' 속성이 명시되어 있다면 해당 자원은 '낮은(Low)' 우선순위를 가지게 됩니다. prefetch prefetch 는 '다..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=4YCBBoSg2fk 웹 어플리케이션의 폰트는 어느 이용자의 컴퓨터에나 설치되어 있을만한 기본 폰트를 사용해도 좋지만 디자인 등의 다른 요소를 고려해서 외부의 폰트를 다운로드 받아 적용하는 것이 일반적입니다. 하지만 단순히 인터넷에서 가져다 쓰는 웹 폰트는 최적화가 안되어 있는 경우가 많아 실제로 적용이 되기 까지 오래걸리는 경우가 많습니다. 특히 알파벳을 일렬로 나열할 뿐인 영어와는 다르게 한국어와 같이 글자들을 조합해서 사용하는 폰트들은 엄청난 용량을 자랑하는 만큼, 반드시 최적화를 해줘야 합니다. 게다가 설정에 따라, 웹폰트가 적용되기로 지정된 문자들은 웹폰트가 다운로드 되기까지 아예 글자..

이 글은 아래의 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=Z_28syzkv-0 최근엔 초월적인 압축률을 자랑하는 webp 이미지 형식이 등장하면서 웹에서 이 형식의 이미지를 활용하는 경우가 많아졌습니다. 하지만 무작정 webp 이미지를 사용해도 괜찮은 걸까요? 그러고보니 이미지 형식은 png 도 있고, jpg 도 있고 정말 많은 형식들이 있는데 이들의 차이점은 무엇이고 어떤 이미지가 어떤 경우에 적합하다고 볼 수 있는 것일까요? JPG, JPEG 높은 압축률 (손실이 생길 수 있음) 투명 배경 사용 불가 단조로운 컬러 팔레트 이미지 퀼리티가 크게 중요하지 않고 용량을 줄이는데 집중하고 싶을 때 사용합니다. PNG 낮은 압축률 투명 배경을 사용 가능 ..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://jeonghwan-kim.github.io/series/2020/01/02/frontend-dev-env-webpack-intermediate.html https://www.youtube.com/watch?v=2QYpkrX2N48 https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images 어플리케이션에서 이미지가 차지하는 비율은 절반을 넘어가는 일이 많습니다. 그만큼 이미지를 압축하는 일은 이용자가 웹사이트의 컨텐츠를 빨리 받아보기 위해 아주 중요한 일입니다. 이번에도 이미지를 압축할 수 있는 가장 간단하고 유용한 방법을 먼저 선택하..