on&on

목차 Reduce unused JavaScript webpack Code Splitting lazy-loading(지연 로딩) Reduce unused JavaScript Lighthouse 검사를 받으면 performance 부분에서 Reduce unused JavaScript라는 문구를 많은 페이지에서 볼 수 있다. 직역하면 사용하지 않는 JavaScript 줄이기라는 의미로, 사용하지 않는 Javascript는 페이지 로드 속도를 느리게 만들기 때문에 이에 대한 경고 문구를 출력하는 것이다. Chrome Developer에서는 사용하지 않는 Javascript의 문제에 대해 이렇게 말하고 있다. 페이지가 로드될 때마다 브라우저는 페이지에서 무엇이든 렌더링하기 전에 JavaScript 파일을 다운로드..

목차 WebP(Web + Picture) SVG 형식 사용 이미지 스프라이트(Image Sprite) SVG 스프라이트(SVG sprite) WebP(Web + Picture) WebP란? WebP은 인터넷에서 이미지가 로딩되는 시간을 단축하기 위해 Google이 출시한 파일 포맷 WebP를 사용하면 웹 사이트에서 고품질 이미지를 표현할 수 있지만 PNG, JPEG 등 기존 포맷보다 파일 크기가 작아진다. WebP 파일을 저장할 때 압축 방식(무손실 압축, 손실 압축)을 선택할 수 있으므로 데이터 손실 없이 또는 중요하지 않은 정보의 일부만 손실하면서 이미지를 압축할 수 있다. WebP 파일을 사용해야 하는 이유 이미지는 서버에서 많은 공간을 차지한다. WebP를 사용하면 PNG, JPEG보다 크기가 작..

웹폰트 적용 성능 최적화 웹 폰트 렌더링 과정 CSSOM을 생성하는 과정에서 웹 폰트 링크로 정의된 부분을 만나면 해당 폰트 파일을 다운로드한다. 하지만 paint 과정에서 파일이 다운로드되지 않은 상태라면 브라우저는 해당 자원을 사용하는 콘텐츠의 렌더링을 하지 않는다. 이러한 과정 때문에 Mitt Romney 기사에서 NOT이 보이지 않는 사례가 발생한 것이다. 폰트 용량 최적화 WOFF2(Web Open Font Format 2.0) WOFF형식과 WOFF2은 압축된 폰트 형식이다. 이 중, WOFF2 형식이 30~50% 더 압축된 형식이다 폰트는 형식별로 크기와 지원되는 브라우저가 다르다. 아래는 내가 프로젝트에 적용했던 글꼴 Pretendard의 각 형식별 크기다. 보다시피 .woff2 확장자의 ..

aws S3로 배포한 후, Github Actions를 활용하여 배포 자동화까지의 과정을 정리해봤다. S3로 배포하는 방법은 이전에 정리했기 때문에 이번에는 자동화를 하는 과정에서 겪었던 오류에 대해서 정리해보려고 한다. 가장 먼저 aws S3 배포 시, 필요한 내용을 github settings 탭의 secret에 저장한다. settings 탭에 들어가 Secrets and variables에서의 Actions에 들어가 이미지 우측 상단에 있는 New repository secret을 누르고 키를 입력하면 된다. 다음으로 actions 탭에서 yml 파일을 작성했다. name: React build on: push: branches: - main jobs: build: runs-on: ubuntu-la..

진행중인 프로젝트를 aws S3를 사용해 배포해보려고 한다. IAM 사용자 만들기 일단 S3에 배포하기 위해서는 IAM 권한이 있어야하기 때문에 IAM 대시보드에서 사용자를 추가한다. 사용자 이름을 지정하고 사용자 탭에 지정한 이름으로 탭을 눌러보면 아래와 같은 탭을 확인할 수 있다. 이제 보안 자격 증명 탭에서 액세스 키 파트로 들어가 액세스 키를 발급받으면 된다. 액세스 키는 나중에 사용될 것이기 때문에 키를 복사해서 본인의 메모장에 저장하거나 .csv 파일로 받아놓는 것이 좋다. S3 버킷 만들기 이제 S3 탭으로 들어와 버킷 만들기 버튼을 누르면 버킷을 만들 수 있는데, 본인이 원하는 버킷 이름을 지정해주고 AWS 리전은 서울로 지정해주면 된다. 객체 소유권은 ACL 활성화됨 으로 선택하고 객체 ..

콘텐츠의 길이에 따라 브라우저 사이즈의 크기가 변화하는 것을 막기위해 GlobalStyle로 다음과 같이 지정하였다. :root { min-width: 1000px; overflow-y: scroll; } 그리고 useModal custom Hook의 open 함수와 close 함수를 아래와 같이 구현하였다. const open = useCallback(() => { setIsOpen(() => true); document.body.style.overflow = "hidden"; }, []); const close = useCallback(() => { setIsOpen(() => false); document.body.style.overflow = "unset"; }, []); 모달이 open일 때 o..

이용약관 동의 페이지를 만들던 중에 기본 체크박스의 형태를 바꿔야 했는데 styled-components를 활용하여 체크박스를 커스텀해본 적이 없기 때문에 이번 기회에 방법을 찾아보면서 공부해봤다. html 코드는 아래와 같다. 두마켓의 이용약관 및 개인정보처리방침에 대한 내용을 확인하였고 동의합니다. 실행화면 (크롬에서 제공하는 기본 UI 체크박스) HTML 삽입 미리보기할 수 없는 소스 appearnce 속성 활용하기 appearance | MDN appearance CSS 속성은 운영 체제 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는 ​​데 사용된다. appearance : none;을 설정하면 네이티브 디자인을 해제할 수 있다. 그리고 원하는 형태의 디자인으로 속성을 설정하면 된다. ..

스코프란? 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되는데, 이 때 식별자가 유효한 범위를 스코프라고 한다. 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 (식별자 결정) var x = "global"; function foo() { var x = "local"; console.log(x); // foo 함수 스코프 } foo(); console.log(x); // 전역 스코프 스코프의 종류 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위인 스코프가 결정된다. 구분 설명 스코프 변수 전역 코드의 가장 바깥 영역 전역 스코프 전역 변수 지역 함수 몸체 내부 지역 스코프 지역 변수 전역 변수는 어디서든지 참조할 수 있다. 지역 변수는 자..