최적화

프론트엔드에서 굉장히 중요한 작업 중 하나가 UX 최적화일 것이다. UX 최적화를 판단할 때 사용자들이 서비스와 얼마나 빠르게 인터렉션 할 수 있는지가 매우 중요한 요소이다. 우선 내가 하고있는 프로젝트의 위 장소 상세 페이지 초기 성능을 Lighthouse로 측정해보았다. 여러번의 측정 결과 대략 68~72점으로 좀 아쉬운 점수이다. jpeg 포맷의 이미지 2개를 받아오는데 드는 용량은 약 1MB로 상당히 큰 것을 확인할 수 있었다. 해당 페이지에서는 큰 이미지 2개를 슬라이더 형식으로 띄워주고 있으므로, 이미지 관련 Optimization만 잘 해줘도 성능을 좀 더 올려줄 수 있을 것 같다. img 태그 대신 Next/Image 흔히 이미지를 UI에 띄우기 위해 img 태그를 사용하곤 한다. 하지만 ..

프론트엔드 작업을 하다보면 기능 구현만을 신경쓰다 보면 제일 중요하다고 볼 수 있는 성능에 큰 신경을 쓰지 못하는 경우가 꽤 있다. 성능에 큰 영향을 미치는 요소 중 하나가 불필요한 렌더링이다. 불필요한 렌더링을 최소화하는 것은 프론트엔드 개발자가 극복해야하는 문제 중 하나이다. 리액트의 렌더링 과정 우선 렌더링 최적화를 이루기 위해 렌더링이 이루어지는 과정을 알아볼 필요가 있다. 렌더링이란 리액트가 컴포넌트에게 현재의 props와 state를 기반으로 UI가 어떻게 생겼으면 좋겠는지 설명하도록 요청하는 프로세스라고 나와있다. 리액트 작업에서는 주로 함수형 컴포넌트를 사용하여 작업을 하게 된다. export default function Component(){ ... return 컴포넌트 코드 } 위는 ..