1. 캐시 웹 프론트엔드에서 필요한 데이터를 매번 서버에 요청해서 가져와 사용하는 것은 비효율적입니다. 서버에 부담을 줄 뿐더러 시간도 오래 걸립니다. 만약 같은 요청에 같은 데이터를 응답하는 요청이라면 데이터를 메모리에 저장해놓고 쓰는 것이 효율적일 것입니다. 이렇게 응답 데이터의 사본을 저장하는 공간을 캐시라고 합니다. 2. 캐시의 종류 종류 위치 설명 브라우저 캐시 브라우저 한 번 받아온 리소스들을 재사용하여 속도가 빨라짐 프록시 캐시 브라우저와 ISP 조직 내에서 접속하는 웹 사이트의 리소스들을 캐시하여 속도가 빨라지고 네트워크 사용량을 줄임 트랜스패어런트 캐시 ISP ISP는 이 캐시를 이용하여 ISP간 대역폭 낭비를 줄임 리버스 프록시 캐시 ISP와 웹 서버 원본 서버로의 트래픽을 줄이고, 사..
Frontend
웹 성능이란 웹 성능(Web Performance)은 웹 콘텐츠가 사용자에게 빠르게 전달될 수 있도록 하는 시스템들의 성능을 의미합니다. 즉, 웹 로딩 시간과 같다고 할 수 있습니다. 웹 성능이 중요한 이유 웹 성능이 중요한 이유는 너무나 명확합니다. 웹 서비스가 느리다는 것은 그 서비스를 이용하기가 불편하다는 뜻이고, 서비스가 불편하다면 사람들은 그 서비스를 이용하지 않을 것이기 때문입니다. 여러분도 웹 서비스가 느려서 몇 초간 로딩만 되는 경우 그냥 뒤로가기를 눌러본 경험이 있을 겁니다. 미국의 쇼핑몰인 월마트는 로딩 시간에 따른 구매율을 조사했는데, 로딩이 2초 내에 완료되었을 대 사용자의 구매가 가장 많았고, 로딩 시간이 길어질수록 구매율이 낮아지는 것을 발견하였습니다. 또 구글의 조사 자료에 따..
이 글에서는 Create React App (CRA) 를 Vite로 마이그레이션하는 과정들을 정리하였습니다. 동일한 프로세스를 겪고 있는 다른 분들에게 도움이 되기를 바랍니다. 이 글은 https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite 를 한글로 번역하여 작성하였습니다. 마이그레이션을 한 이유 저는 CRA를 정말 좋아한다는 말로 글을 시작하고 싶습니다. CRA는 많은 프로젝트(개인 및 전문)를 신속하게 세팅하고 유지보수하는 데 도움이 되었습니다. 그러나 궁극적으로 Vite로 전환하기로 결정한 몇 가지 이유는 다음과 같습니다. 전담 관리자가 없습니다. 출시가 느립니다. 이것은 React와 Webpack에 더 많은 기능이 추가..
프론트엔드 테스트를 작성하는 것은 매우 어려울 수 있습니다. 고려해야 할 사항, 선택해야 할 사항, 선택할 수 있는 경로가 너무 많습니다. 이 글에서는 더 나은 테스트를 작성하기 위한 5가지 원칙을 살펴보고 새로운 기능을 프로덕션에 적용할 수 있는 자신감을 얻을 것입니다. 시작하기 전에 이 글에서는 프론트 엔드 테스트 에 중점을 두고 있으며, React 애플리케이션 및 컴포넌트와의 상호 작용을 기반으로 설명합니다. 그럼 5가지 프론트엔드 테스트 원칙에 대해서 알아보겠습니다. 원칙 1. 사용자가 사용하는 것과 동일한 방식으로 소프트웨어를 테스트합니다. 컴포넌트가 사용자를 위해 작동하고 있다는 높은 확신을 주는 유지 관리 가능한 테스트를 작성하고 싶습니다. 그리고 프론트엔드의 경우 테스트를 위한 두 가지 대..
뒤로가기 시 페이지의 데이터가 최신화되지 않는다던가, 뒤로가기 시 문제가 있다는 이슈가 생기고 또 그 이슈가 사파리 브라우저나 IOS 웹뷰에서 발생한다는 말을 들으면 딱 생각나는 단어가 있다. (BFCache!!) "Back/Forward Cache(BFCache)"는 페이지 전체를 스냅샷 떠놨다가 뒤로가기 시 해당 스냅샷을 그대로 사용하는 캐싱 기술이며, 사파리와 파이어폭스에서 기본적으로 Enable 되어있다. 크롬에서는 현재 기준으론 기본적으로 사용되지 않고, 수동으로 켤 수는 있다. 이 글에서는 프론트엔드 개발자를 괴롭히는 BFCache가 무엇인지, 그리고 해결 방법이 무엇인지 정리하고자 한다. BFCache 란? BFCache 가 사용되는 브라우저의 경우, 다른 페이지로 이동하는 순간 기존 페이지..
