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..

Overview web.dev에서 소개하는 Web Security에 대한 내용들을 여러 챕터에 걸쳐서 정리합니다. 모든 내용들을 다 다루지는 않고, 개인적으로 중요하다고 생각하는 부분들을 추려서 중점적으로 정리했습니다. 자세한 내용들은 아래 Table of Contents의 링크를 통해 확인하실 수 있습니다. 성능 예산 수립 Performance budgets 101 Your first performance budget Incorporate performance budgets into your build process Use Lighthouse for performance budgets Using bundlesize with Travis CI Using Lighthouse Bot to set a perf..

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

Overview iPhone X 등 notch가 있는 디바이스들에서 웹뷰의 Element를 Inspect 해야 할 일이 생겼었습니다. 최신 Chrome브라우저(포스팅 날짜 기준 Version 87.0.4280.88 (Official Build) (x86_64)) 에서 기본적으로 iPhoneX에 대한 디바이스 시뮬레이션을 제공하지만, notch 등 safe-area가 제공된 환경이 아닌, 스크린 크기만 맞춰진 환경을 제공하기 때문에 safe-area에 대한 테스트가 어렵다는 단점이 있습니다. 따라서 디바이스 환경을 재현할 수 있는 다른 환경이 필요하게 되었고, notch가 있는 iPhone12 mini에서 테스트할 수 있는 환경을 찾아보게 되었습니다. 물론 디바이스가 없는 경우 Xcode에서 제공하는 시뮬..

Overview 회사에서 새롭게 읽게 되는 여러 코드들을 통해, 그리고 코로나 19의 거리두기 강화로 인한 재택근무로 인해 접하게 되는 콘텐츠의 양과 질이 동시에 높아졌던 한 주였던 것 같다. 무엇보다 월간 750만 유저가 사용하는 글로벌 서비스(Qanda)를 프로덕션 하는 회사이니만큼, 그만큼의 트래픽을 감당하기 위한 여러 아키텍처들을 보고, 또 질문하면서 어깨너머로 다양한 코드들을 익힐 수 있어서 굉장히 좋은 경험을 했던 한 주였다. Nextjs Nextjs는 React JS에서 서버 사이드 렌더링(SSR)을 할 수 있도록 지원해주는 프레임워크이다. 사용해 본 결과, React JS에서 Next JS를 사용한다는 느낌보다는 Nextjs 프레임워크 내에서 React를 사용하는 느낌이 더 강했다. 공식 ..