들어가며, 회사에서 디자인 시안에 따라 개발을 하던 중, 탭 메뉴를 눌렀을 때 background-image를 다르게 보여줘야 했다. 컴포넌트에 배경이미지를 적용하면 컴포넌트 내, 즉 컴포넌트 크기만큼만 사용할 수 있기 때문에 전체너비를 다 차지하지 못한다. 어떻게 해야할 지 고민을 하던 와중, 탭을 눌렀을 때 변하는 상태에 따라서 배경이미지 css를 조절하면 어떨까라는 생각에 도달했다. 본문 먼저 가장 부모 컴포넌트를 만들어준다. 가장 바깥 부모에서 상태관리를 해준 이유는 가장 바깥 컴포넌트에 배경이미지를 적용해야하기 때문이다. 위에서 말했듯이, 전체 너비에 배경이미지를 적용하기 위해선 만들어낸 컴포넌트가 아닌 가장 바깥 컴포넌트에 적용한다. // App.jsx import React, { useSta..
1. 웹 성능 최적화란? 웹 프론트 환경에서는 각종 리소스들을 화면에 띄우고 업데이트 하는 과정에서 지속적으로 비용을 소모한다. 따라서, 웹 프론트엔드 성능 개선을 위해서 개발자는 최소한의 데이터로 빠른 시간에 사용자가 불편함을 느끼지 않는 최적의 화면을 띄워야 한다. 상품 관리자, 프로덕트 매니저에게 웹 페이지가 얼마나 빨리 로딩되는지가 서비스 사용자 경험(UX, User Experience)에 영향을 주며 매출 및 수익에 영향을 줄 수 있으므로 웹 성능 최적화를 대략적으로 이해하는 것이 중요하다. 결과적으로, 웹 프론트엔드 개발자의 웹 성능 최적화 작업으로서 사용자에게 좋은 사용자 경험을 제공할 수 있고 비즈니스의 성공과도 직결될 수 있다. 2. 최적화를 왜 해야할까? · 비즈니스 관점 웹 성능 최적..
