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 코드 리뷰가 무엇인지, 코드 리뷰를 왜 해야 하며, 어떤 방식으로 운영해야 하는지에 대해서 최근에 많은 고민들을 하게 되었습니다. 사람마다, 회사마다, 팀마다 코드 리뷰에 대한 생각들이 각기 다르기 때문에 이를 상황에 맞게 정의하고 방법을 찾는 것이 중요했습니다. 이를 위해 꽤 오랜 시간 동안 프론트엔드 팀에 코드 리뷰 문화를 정착시키기 위한 여러 가지 시도들과 노력들을 했었고, 이를 거치면서 경험한 것들과 생각했던 것들을 정리하려 합니다. Why Code Reviews? 풀려고 하는 문제가 무엇인지를 정확히 알아야 그 문제를 풀기 위한 알맞은 노력을 기울이고 방법을 찾아낼 수 있기 때문에 "코드 리뷰를 왜 해야 하는가?"에 대한 명확한 정의를 하는 것이 굉장히 중요하다고 생각했습니다. ..

22년 1분기를 한번 정리하고 새로운 2분기 목표를 정해 열심히 달렸던 4월 한 달이었다. 세상은 정말로 빠르게 변하고, 예측하지 못한 사건들이 산발적으로 여러 가지 원인들과 함께 발생한다. "예측" 보다는 "대응을 위한 준비"를 어떻게 잘할 수 있을지에 대한 고민들로 4월 한 달을 채워나갔다. 투자원칙 2020년 여름 정도부터 시작한 경제공부는 나에게 여러모로 많은 것들을 가져다주었다. 가장 큰 변화라면 내가 배우고 공부하는 분야를 기하급수적으로 확장시킨 것이다. 이전까지는 프론트엔드 개발 공부와 얄팍한 디자인 공부가 사실상 전부였다면, 투자로 시작한 경제 공부는 경제뿐 아니라, 인문학, 정치학, 지리, 역사, 철학 등 다양한 학문들에 발을 담그도록 만들었다. 관심이 가는 여러 기업들을 조사하고, 기업..

Overview Nextjs가 편리한 점은 웹 사이트 최적화를 위해 고려해야 하는 여러 가지 사항들을 대부분 "미리" 고려해서 default 옵션으로 제공해 주고 있다는 것입니다. 이번 포스팅에서는 Nextjs에서 웹 사이트 최적화를 위해 제공하는 기능 중의 하나인 Next/Image 가 내부적으로 어떻게 동작하는지에 대해 살펴보려고 합니다. 공식 문서에서 찾아볼 수 있는 내용들은 포함되어 있지 않으며, 실제로 nextjs 라이브러리가 어떻게 구현되어 있는지를 소스 코드를 기준으로 설명합니다. Image Optimization next/image 를 사용하려면 html의 img 태그 대신에 다음과 같이 next/image를 import 해서 사용하면 됩니다. 사용법이 굉장히 간단하고, next/image..

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