Overview web.dev에서 소개하는 Web Performance에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. JavaScript 최적화 Apply instant loading with the PRPL pattern Reduce JavaScript payloads with code splitting Remove unused code Minify and compress network payloads Serve modern code to modern browsers for faster page loads ..

Overview web.dev에서 소개하는 Web Performance에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. 이미지 및 비디오 지연 로드 Use lazy-loading to improve loading speed Lazy-loading images Lazy-loading video Browser-level image lazy-loading for the web Use lazysizes to lazy-load images Use Lazy Loading to Improve Loading Speed 지연 ..

Overview 콴다 프론트엔드 팀에서 최근 효율적인 프로젝트 관리를 위해 "모노레포(monorepo)"를 도입했습니다. (레포 이름도 굉장히 Semantic 한 "qanda-frontend"입니다) 팀 내에서 모노레포를 도입하자는 이야기는 작년 2분기 정도부터 조금씩 나오기 시작했지만, 이런저런 이유들과 고민들로 미뤘었다가 올해 1분기 말부터 본격적으로 리서치를 시작했고, 검색 결과 페이지(search-result-web), 콴다 과외(tutor-web), 콴다 메인 페이지(qanda-ai-web, qanda-ai-user-web)등의 주요 프로젝트들을 마이그레이션 하기 시작하면서 지난주 목요일 "모노레포 레이드(Raid)"를 종료했습니다. 모노레포를 도입하면서 Yarn Workspace와 같은 모노레..

Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. 이미지 최적화 Choose the right image format Choose the correct level of compression Use Imagemin to compress images Replace animated GIFs with video for faster page loads Serve responsive images Serve images with correct dimension..

Javascript에서의 Strict Mode와 React에서의 Strict Mode, 그리고 Typescript에서의 Strict Mode는 동일한 이름을 갖지만 각각의 역할과 기능이 다릅니다. 이번 포스팅에서는 이를 정리합니다. Javascript Strict Mode Javascript에서의 Strict Mode(엄격 모드)는 다음과 같은 특징을 갖습니다. 기존에 조용히 무시되던 에러들을 Throwing 한다. Javascript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡는다 ECMAScript의 차기 버전들에서 정의될 문법을 금지한다. Examples 암묵적 전역 선언하지 않은 변수를 참조하면 Reference 에러를 발생시킵니다 'use strict' x = 1; console.log(..

Overview Web.dev에서 소개하는 Chrome DevTools에 대한 내용들을 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. Table Of Contents Chrome DevTools는 페이지가 로드되거나 실행되는 동안 발생하는 모든 것에 대한 심층 분석을 제공합니다. 성능 패널 UI에 익숙해지려면 런타임 성능 분석 시작하기를 참조하십시오. 다음 DevTools 기능이 특히 관련이 있습니다. CPU 조절로 덜 강력한 장치를 시뮬레이션합니다. 네트워크 조절로 느린 연결을 시뮬레이션합니다. 기본 스레드 활동 보기로 기록하는 동안 기본 스..