인기글

• TIL scroll 이벤트가 발생하지 않는 경우 문제 원인: 팝업 레이어에서 스크롤 이벤트를 감지해서 lazy-loading으로 캐싱된 이미지를 스크롤 시마다 변경해주는 메서드가 발생하지 않음. but 팝업 레이어 바깥에서는 scroll Event가 발생하는 데에 문제가 없었다. 문제원인은 팝업 전체의 overflow: hidden 문제 해결: 내부 내부 레이어단의 height: 100% (overflow-y: auto) 였기 때문에 팝업 레이어 내부에서만 스크롤 이벤트가 발생하는 것이다. 그러나 팝업의 height를 변경하거나 팝업 스크롤 시 바깥의 스크롤이 fire 되는 것은 의도한 바가 아니기 때문에 팝업에 ref를 걸어 scroll 이벤트를 캡처해서 처리하였다. import React, { useEffect, useRef } from 'reac..

• Front CDN과 다이나믹 캐시 https://www.cloudflare.com/ko-kr/learning/cdn/caching-static-and-dynamic-content/ 정적 및 동적 콘텐츠 캐싱 | 작동 방식 동적 콘텐츠는 사용자에 따라 달라지기 때문에 캐시에서 여러 사용자에게 제공할 수 없습니다. 정적 및 동적 콘텐츠 모두를 캐싱하는 방법이 어떻게 가능한지 알아봅니다. www.cloudflare.com 동적 컨텐츠를 캐싱하기 위해서는 CDN 캐시에서 스크립트를 실행할 수 있어야한다. 캐시가 단순히 저장소의 역할이 아니라 스크립트를 실행할 수 있는 환경이라는 것이 인상깊음!

• 

  Front [반응형헤더만들기] html, css 어려웠던 부분이 몇 가지 있었다. 1. Small Screen에서 로고 정렬 아무리 display: flex justify-content: flex-start를 해도 안 먹었다. 이런 문제는 Small Screen이 아니라 wide screen에서 선언해준 것이 그대로 덮어지면서 발생한 오류였다. Wide Screen에서 선언한 것은 재정의하지 않는 이상 속성이 그대로 넘어오기 때문에 주의해야한다. header { background-color: var(--color-background); display: flex; align-items: center; justify-content: space-between; padding: var(--header-padding); } 이 코드에서 align-items:..