노력하는 개발자 - 여름

예를들어 [ 1, 4, 7, 9, 0 ] 의 배열을 [ 7, 0, 4, 1, 9 ] 처럼 무작위로 섞거나 [ '자동차', '배', '자전거', '기차', '트럭' ] 의 배열을 [ '트럭', '자전거', '배', '자동차', '기차' ] 로 무작위로 섞을려면 어떻게 해야할까? 내가 찾은 방법은 새로운 Set을 만들고 기존 array에서 랜덤하게 index하나를 선택(Math.random을 이용)하여 Set에 선택한 요소를 추가하고 기존 array에서 삭제하는 방법이다. Set의 요소 개수가 기존 array의 최조 요소 개수가 될때까지 반복한다! startGame() { let array = [] for (let i = 0; i < itemCnt; i++) { array.push(i) } // sample..

javascript - 화면에 보여지는 오브젝트 감지 (IntersectionObserver) #1 - 안좋은 방법 앞선 글에서 Element.getBoundingClientRect() 메서드를 이용해서 화면에 오브젝트가 보여지는지 안보여지는지 방법에 대해서 알아보고 성능상의 문제와 같은 단점도 살펴보았습니다. 뷰포트 내부에서 어떤 요소가 교차되는지를 파악한다는 말은 가시성 상태인지 아닌지 판단하는 것과 같은말입니다. 역사적으로, 어떤 요소가 가시성 상태인지 또는 두 요소의 상대적 가시성을 감지하는 것은 뚜렷한 솔루션이 없는 어려운 작업이었습니다. 사용자가 액세스하는 브라우저와 사이트를 느리게 만드는 경향이 있을 수 있기 때문입니다. 여기서 잠깐, 그렇다면 왜 이런 솔루션들이 필요한 것일까요? 인터섹션 ..

어떤 요소가 지금 내가 스크롤하는 화면에 있는지 없는지 알 수 있을까요? 이를 다르게 표현하면 어떤 요소가 '부모컨테이너' 내부에서 또는 '뷰포트'라는 전체창 내부에서 교차(intersection)가 되는지를 확인한다는 것입니다. 즉, 이를 인터섹션을 감지한다 라고 합니다. - intersection detection 먼저 예를 들어보겠습니다~ 화면에 1번부터 20번까지 20개의 박스가 있고 각각의 사이즈는 300x300 화면의 높이는 1000입니다. 화면에 들어오는 박스에게 active 클래스를 부여해서 색상을 purple로 바꿔보고 싶다고 가정하겠습니다. 다음과 같은 생각의 흐름으로 이어집니다. "오브젝트(box)가 화면의 어디에 있는지 알아야겠구나" 이를 검색하면 다음과 같은 함수를 이용하라고 나옵..