본문 바로가기

분류 전체보기

 (45)
GIF파일 최적화 gif 파일을 최적화한 방법에 대해 정리해보고자 한다. 사실 이전까지는 gif파일을 아무 생각없이 사용했던 것 같은데, gif 포맷이 비효율적인 부분도 있고 사이즈도 다른 포맷과 비교했을 때 훨씬 크다는 걸 이번에 알 수 있었다. GIF란? GIF는 우리가 흔히 볼 수 있는 이미지 포맷 중 하나이다. 움직이는 이미지랄까,,? 요즘에는 어딜가나 gif 파일이 많이 존재하는데, gif 포맷은 거의 30년전에 개발된 오래되고 비효율적인 포맷이다. 내가 정리해본 gif파일이 비효율적인 이유는 다음과 같다. 더 자세히 알아보기 GIF는 불필요하게 대역폭을 낭비해 엄청나게 많은 전송량을 발생시킨다. 더 많은 CPU 자원을 소모한다. 즉, 더 많은 배터리를 소모한다. 256색을 표현할 수 있는 컬러 팔레트와, 각 프..
Gzip 적용하기 (Cloudfront) gzip이란? gzip은 파일 압축에 쓰이는 응용 소프트웨어이다. 서버에서 html, javascript, css 등을 압축해줘서 리소스를 받는 로딩시간을 줄여주어서 성능을 개선시켜준다. 프론트 성능 개선을 위해 많이 쓰이고, 요즘 대부분의 브라우저들은 gzip압축을 지원한다. gzip의 동작원리 Gzip압축을 지원하게 되면 브라우저는 서버에게 Accept-Encoding이라는 헤더를 통해서 ‘나 Gzip지원한다’라고 알려준다. Accept-Encoding:gzip 그러면 웹서버는 이 요청을 받고 Gzip을 지원할 응답헤더에 Content-Encoding으로 ‘이건 Gzip을 지원해’라는 헤더를 넣어서 보내주게 된다. Content-Encoding:gzip Cloudfront gzip 적용방법 1. cl..
이미지 최적화 이번 성능 미션을 진행하면서 이미지 최적화했던 부분을 정리해보고자 한다. 결론부터 말하자면 10.2MB 크기의 hero.png를 webp를 적용하여 236kB 크기의 hero.webp로 최적화할 수 있었는데 생각보다 새로 배우게된 점과 새로 알게된 점이 많아서 아주아주 흥미로웠다. 이미지 최적화를 하는 이유 브라우저에서 이미지 파일을 보여줄 때는 네트워크 통신을 한다. 따라서 큰 용량의 이미지보다(원본 이미지) 작은 용량의 이미지(리사이징된 이미지)를 가져오는 것이 네트워크 비용을 생각했을 때 더 효율적이다. 실제로 리사이징된 이미지는 원본 이미지보다 용량이 몇배는 차이가 난다. 이미지 최적화 방법 PNG 대신 JPEG(JPG) / WebP 포맷 활용을 권장한다. (단, 알파 채널이 필요할 경우에는 PN..
CRA없이 React 프로젝트 구성하기 with Javascript 1. yarn 설치 yarn init 2. React 설치 yarn add react react-dom 3. Webpack 설치 yarn add -D webpack webpack-cli npx webpack init 4. Babel 설치 yarn add -D @babel/core @babel/preset-react @babel/preset-env 5. webpack.config.js 수정 devServer: { hot: true, //추가 open: true, host: "localhost", }, ... module: { rules: [ { test: /\.(js|jsx)$/i, loader: 'babel-loader', options: { presets: ['@babel/preset-react', '..
useMemo vs useCallback vs React.memo useMemo useMemo는 memoized된 값을 return하는 hook이다. 인자로 함수와 의존성 배열을 받는데, 두번째 인자로 준 의존 인자 중에 하나라도 변경되면 값을 재계산한다. 만약 의존 인자로 아무것도 전달되지 않는다면, 렌더시마다 항상 값을 새롭게 계산하여 return한다. 따라서 컴포넌트를 렌더링 할 때마다 값을 매번 계산하지 않고, 경우에 따라서만 재계산한다. 이를 통해 매 렌더시마다 소요되는 불필요한 계산을 피할 수 있다. import React, { useMemo } from 'react'; import { sum } from './util'; const Calculator = ({v1, v2}) => { const value = useMemo(() => sum(v1,v2), [..
CloudFront CloudFront란? CloudFront란 AWS에서 제공하는 CDN서비스이다. 정적, 동적, 실시간 웹서비스 콘텐츠를 사용자에게 더 빨리 전달하도록 지원한다. CloudFront는 Edge location을 사용한다. Edge location이란 컨텐츠들이 Cache에 보관되어지는 장소이다. 전세계 각 지역마다 설치되어 있어서 사용자가 어떤 컨텐츠를 요청하면 캐시에 보관된 내용을 사용자에게 뿌려주는 기능을 하는 서버이다. 어떤 웹사이트에 처음 접속시에는 원래 컨텐츠가 들어있는(웹서버 호스팅이 되어지는 곳) Origin에서 컨텐츠를 가져오고 Edge location에 캐싱한다. 그 이후 유저가 똑같은 컨텐츠를 요청하면 그때는 Origin까지 가지 않고 Edge location에서 데이터들을 가져오게 된..
S3 S3란? Simple Storage Service(S3)는 AWS에서 제공하는 인터넷 스토리지 서비스이다. 말 그대로 Storage이다. 하나의 버킷에 데이터들을 업로드하면, 인터넷을 통해 어디서든 해당 파일을 다운로드 할 수 있다. S3 기본 개념 객체(Object) 파일과 메타데이터를 구성하는 저장단위이다. 객체 하나의 크기는 1Byte부터 5TB까지 허용되며 메타데이터는 MIME 형식으로 파일 확장자를 통해 자동으로 설정되며 사용자 임의로도 지정 가능하다. 버킷(Bucket) S3에서 생성할 수 있는 최상위 디렉토리의 개념이다. 객체를 저장하고 관리한다. 계정별로 100개까지 생성 가능하며 버킷에 저장할 수 있는 객체 수와 용량은 무제한이다. S3 특징 1. S3의 버킷은 무한대의 객체를 저장할 수..
React 앱을 S3+CloudFront로 배포하기(2) - CloudFront 설정 자 지금부터는 앞에서 설정한 S3에 유저가 접근할 수 있도록 CloudFront 설정을 할 것이다. 그런데 왜 이렇게 할까? S3 설정 시 모든 엑세스 차단을 비활성화하면 어떤 사람이던지 간에 내 S3 객체에 대해서 설정, 수정 권한을 가지게 되므로 상당히 위험하다. (사실 왜 위험한지에 대해서는 더 공부가 필요하다,,,ㅎㅎ) 그런데 지금처럼 모든 엑세스 차단을 활성화하면 사용자가 웹서비스에 접근(객체를 Get)하지 못한다. 그럼 웹서비스를 어느 누구도 사용할 수가 없다 하하하하하 따라서 우리는 AWS에서 제공하는 CDN 서비스인 CloudFront를 통해서 더 좋은 성능과 안전성을 가진 애플리케이션을 유저에게 전달해주고자 한다. 이렇게 설정하게 되면 앞서 생성한 S3 bucket에는 곧 생성할 Clou..

티스토리툴바