Enjoy Programming

https://web.dev/uses-text-compression/?utm_source=lighthouse&utm_medium=devtools 텍스트 압축 활성화 텍스트 압축을 활성화하여 웹 페이지 로드 성능을 향상시키는 방법에 대해 알아보십시오. web.dev https://cloud.google.com/cdn/docs/dynamic-compression 동적 압축 | Cloud CDN | Google Cloud 의견 보내기 동적 압축 미리보기 이 제품 또는 기능에는 Google Cloud 서비스 약관의 GA 출시 전 제공 서비스 약관이 적용됩니다. GA 이전 제품 및 기능은 지원이 제한될 수 있으며, GA 이전 제품 및 기 cloud.google.com

그동안 코드 스플릿 스플릿 듣기만 했다. 그리고 react에 lazy loading 있다는 것도 알았다. 몇번 써본거 같긴하다. 하지만 제대로 알지 못하고 썼었다. 그러다보니 의미도 없었다... 오늘 이사님과 이야기하던중 오랜만에 접속시 chunk에러가 나는 것을 확인했다고 하신다. 오늘 할 일을 대부분 마치고 chunk에 관해 알아보았다. 우선 간단히 chunk는 react 파일이 빌드 배포될때 모든 코드가 하나의 번들로 묶이게 된다. 번들링은 가져온 파일을 하나의 파일 즉 번뜰로 병합하는 프로세스이다. 이 번들js는 웹페이지에 포함되어 한번에 전체 앱을 로드 할 수 있다. 근데 이게 앱이 커짐에 따라 번들도 커지게 되는데 로드가 오래 걸릴 수 있다. 그래서 code split을 하게 되는데 여러 방법..

nextjs를 사용하면서 img 태그를 사용하면 waning이 뜬다 next/image를 사용해달라고 nextjs는 기본적으로 이미지 최적화의 기능을 제공한다. 그 중 기본적으로 들어가는 lazy loading 기능이 있는데 참 유용하다 예를 들어 페이지를 로드하면 해당 페이지의 이미지를 전부 로딩 하는것이 아닌 viewport상에 나타는 이미지만 로드한다 그리고 로드하기전 alt를 제공해서 blur처리된 blob 이미지를 먼저 보여줌으로써 느려보이지 않게 해주고 사이트 최적화를 진행해준다. 간단히보면 next js showcase 페이지를 보자 먼저 로드된 이미지들이 있고 network를 비워줬다. 그리고 slow 3g로 변경 후 스크롤을 내려보면 그다음 보여줄 이미지를 다운로드 하기 시작하고 로드되기..

어제 하루 미치는 줄 알았다.. grahpql을 사용하고 있기에 apollo codegen은 어마어마한 유용함과 편리함을 제공한다. 어제 마이페이지 리뉴얼및 리팩토링 작업을 하며 backend schema가 변경 되어야할 상황이 생겨서 이것저것 요청하고 변경한다음 codegen을 실행했떠니!!! 하.. 이게 뭐고... 브랜치 삭제후 시도도 해보고 별짓을 다해봤다... 우선 작업은 진행되어야 하기에 손으로 다 작성하다가.. 그냥 동료분께 codegen실행해서 pr날려달라고 했다.. 그거 받아서 머지... 그렇게 몇번을 작업하고 해결하기위해 어제 밤 .. 오늘 아침 지금까지 이러고 있다가 해결했다.. 우선 여기저기 뒤적이면 거의 이런게 나온다 https://github.com/yarnpkg/yarn/issu..

test

자바스크립트는 아니지만 Web APi인 URL.createObjectURL()은 객체를 가리키는 URL을 DOM string 으로 반환한다. 객체 URL을 해제하려면 revokeObjectURL 을 사용하면된다. 예를 들어 input에 파일을 업로드하고서 해당 이미지의 blob형태의 url을 바로 변환하여 표기를 해주는 상황 같을떄 쓸 수있는 정적 method이다. 잘 기억해 두자~!~! https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL URL.createObjectURL() - Web API | MDN URL.createObjectURL() 정적 메서드는 주어진 객체를 가리키는 URL을 DOMString으로 반환합니다. develope..