Web Development/Problem Solving (4) 썸네일형 리스트형 [Web] Light house를 이용한 페이지 최적화 Light house의 성능 지표 분석 결과First Contentful Paint (FCP): 1.9초 사용자가 처음으로 페이지의 콘텐츠를 볼 수 있는 시간. 50~89 사이이므로 평범Largest Contentful Paint (LCP): 17.6초 Lighthouse, Google의 웹 성능 지표에 따르면, LCP의 적정 시간은 2.5초 이하 : 우수, 2.5 ~ 4 : 개선 필요, 4 ~ : 성능 저조 이다. 2.5초 이하로 LCP를 떨어뜨려야 한다.LCP는 페이지의 주요 콘텐츠가 완전히 렌더링되는 시간이다. 여기서 말하는 주요 콘텐츠는 아래와 같다.- 이미지 요소(태그)- 비디오 포스터 이미지(태그의poster속성)- 백그라운드 이미지(CSSbackground-image속성)- 텍스트 블록 (,.. [Web] 페이지에 잔상이 남는 현상 처리 회사 업무 중, 페이지 전환 시 이전 페이지의 잔상을 보이지 않게 해달라는 요청을 받았습니다. 예를 들어, A 세미나 상세 페이지에서 세미나 목록 페이지로 이동한 후 B 세미나 상세 페이지로 이동할 때, B 세미나 상세 페이지에서 A 세미나 상세 페이지의 이미지가 보이는 현상이 발생했습니다.문제 원인 분석세미나 상세 페이지는 전역 변수를 주요 데이터로 사용하는 페이지였습니다. 페이지 이동 시, 이전 페이지의 데이터가 전역 변수에 남아 있어 잠시 동안 이전 페이지의 잔상이 남는 현상이 발생했습니다.초기 시도 및 문제점처음에는 전역 변수 사용을 배제하고, 페이지 내에서 새로운 state를 만들어 문제를 해결하려고 했습니다. 그러나 해당 전역 변수는 세미나 페이지 컴포넌트 외부에서 사용하는 컨트롤바에서도 사용.. [Web] dangerouslySetInnerHTML 사용 시 나타날 수 있는 문제점 dangerouslySetInnerHTML을 사용하여 동적으로 HTML 콘텐츠를 삽입할 때, 예상치 못한 태그 생략이나 삭제 문제가 발생할 수 있습니다. 이는 주로 다음과 같은 이유로 발생합니다:1. HTML 구조의 오류잘못된 HTML 구조로 인해 브라우저가 자동으로 수정하면서 태그가 생략되거나 변경될 수 있습니다. 예를 들어, 닫히지 않은 태그, 잘못된 중첩 등이 있을 경우 브라우저는 이를 자동으로 수정하며, 이 과정에서 의도치 않은 변경이 발생할 수 있습니다.2. 브라우저의 보안 정책일부 태그는 보안상의 이유로 브라우저에서 필터링되거나 제거될 수 있습니다. 특히 태그는 dangerouslySetInnerHTML로 삽입하더라도 대부분의 브라우저에서 실행되지 않거나 제거될 수 있습니다.3. React의.. [Web] 이미지 프리로딩과 브라우저 캐시 저장 원칙 이미지 프리로딩의 장점이미지를 미리 로딩하면, 필요한 시점 이전에 이미지를 미리 다운로드 받아 브라우저의 캐시에 저장할 수 있습니다. 이렇게 하면 실제로 이미지가 필요할 때는 이미 캐시된 이미지를 가져와서 다운로드 속도를 높일 수 있습니다. 이는 로딩 스피너와 CSS 효과를 통해 이미지 전환이 자연스러워 보이게 하는 것보다 실질적인 다운로드 속도를 줄이는 데 도움이 됩니다.브라우저 캐시 저장의 기본적인 원칙브라우저의 기본 캐시 동작:대부분의 브라우저는 서버로부터 받은 리소스를 캐시하려고 합니다. 이는 페이지 로드 성능을 향상시키기 위함입니다.이미지 파일은 일반적으로 캐시 가능 리소스로 간주됩니다. 따라서 브라우저는 이미지 요청이 있을 때 이를 캐시에 저장하려고 합니다.캐시 제어가 없는 경우:명시적인 Ca.. 이전 1 다음
