본문 바로가기

JavaScript9

가로 세로 스크롤 되는 테이블 만들기 Frontend 작업을 하다 보니 다음과 같은 테이블이 필요했다. 상하 스크롤이 필요. 단, 헤더 영역은 위에 고정 왼쪽, 오른쪽 영역은 고정된 상태로 좌우 스크롤이 필요. 즉, 스크롤 영역이 각자 다르기 때문에 테이블 자체가 쪼개져 있어야 한다는 뜻이다. 나는 이 문제를 해결하기 위해 다음과 같이 생각해 보았다. 6개 영역을 div로 처리하여 css grid를 활용, 테이블처럼 느껴지도록 배치 크게 왼쪽, 오른쪽, 가운데 영역으로 분할. 왼쪽, 오른쪽, 가운데 각각에 대해 스크롤 영역을 배치. 스크롤바는 오른쪽 영역에만 보여준다. 어느 하나라도 스크롤이 이루어진다면 다른 컴포넌트에 대해서도 스크롤 (js 이용) 크게 왼쪽, 오른쪽, 가운데 영역으로 분할되는 것은 같지만 스크롤 영역을 전체 div에 대해.. 2023. 4. 24.
[TIL] copy-on-write 방법론 - js에서 퍼포먼스 테스트 함수형 프로그래밍 책을 읽다가 좋은 패턴 중 하나로 copy-on-write 원칙을 설명하는 것을 보았다. js에서는 파라미터를 함수로 넘길 때 객체의 경우 레퍼런스를 넘기게 된다. 따라서 레퍼런스 값에 직접 access하다 보면 우리가 인지하지 못하는 변화가 있을 수 있다는 것이 논조이다. 예를 들어, 전역 변수를 parameter로 넘겨주고, 함수에서는 전역변수를 변경한다면, 해당 변수를 참조하는 또 다른 함수의 경우 예기치 못한 변화로 인한 버그가 발생할 수 있다는 것이다. 책에서 추천하고 있는 방향은 다음과 같다. function f(arr) { const newArr = arr.slice(); newArr[3] = "new"; return newArr; } const arr = ["hello",.. 2023. 4. 22.
[팁] MutationObserver에 대해 알아보자 MutationObserver는 Web API로 DOM 변경을 감지할 때 사용한다. MutationObserver - Web API | MDN // 대상 node 선택 var target = document.getElementById('some-id'); // 감시자 인스턴스 만들기 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); // 감시자의 설정: var config = { attributes: true, childList: true, characterData: true }; // 감시자 옵션 포함, 대상 노드에 .. 2023. 1. 10.
[팁] IntersectionObserver에 대해 알아보자! React로 프로그래밍을 하다 보니 화면 밖으로 벗어날 때 처리가 필요했다. 내 경우에는 scroll로 화면에 벗어날 때 / 화면으로 들어올 때를 감지하는 것이 필요했다. 관련된 API를 찾아보다가, IntersectionObserver가 Web 기본 스펙에 포함되어 있어서 소개해 보고자 한다. https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API 사용 예시 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩. 스크롤 시에, 더 많은 컨텐츠가 로드 및 렌더링되어 사용자가 페이지를 이동하지 않아도 되게 하는 infinite-scroll 을 구현. 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고. 사용자에게 .. 2023. 1. 10.

티스토리툴바