Dev-FE (10) 썸네일형 리스트형 [WEB] #1. 무한스크롤 만들기 무한스크롤을 아직까지 사용해본 적은 없으나, 기술연습이나 과제 등으로 활용되어 정리하고자 함 #1. element 속성을 이용한 무한 스크롤 #2. Intersection Observer API를 이용한 무한 스크롤 #2.1. IntersectionObserver API (component) #2.2. useIntersection Hook #1. element 속성을 이용한 무한 스크롤 document.documentElement.scroll 속성을 이용하여 활용한 방식으로 예전에 많이 활용하던 방식 리스트 중 특정 데이터 자동 포커싱 등에 활용 그림1. 은 html로 그려지는 요소(element) 의 사이즈 속성 정보를 표현 브라우저에 나타나는 부분을 viewport 라고 볼 때, clientHeigh.. [CSS,JS] 동적 색상값(HEX) 얻기 디자이너 없이 작업할 경우 간혹 다양한 컬러값이 필요한 경우가 있다. (토이프로젝트, 백오피스 데모 같은) 근무하는 동안에도 몇 번 활용했고, 토이프로젝트에서도 활용하게 되어 기록하고자 한다. #1. 랜덤 hex 생성의 기본 로직 hex를 생성하는 랜덤함수는 아래와 같다. const hex = '#' + Math.round(Math.random() * 0xffffff).toString(16); 무작위성 난수가 필요하므로 Math.random() 을 이용하여 0~1사이의 랜덤값 추출 0xffffff 값 (수) 만큼 값을 곱하여 n개의 정수 추출 Math.round() 를 이용하여 소수점 제외 난수로 얻은 값의 미세한 값변화를 필요로하지 않는다면 Math.ceil, Math.floor 모두 사용가능 .toS.. 이전 1 2 다음
