개발자 : 전임자가 남겨둔 Offset 값이 있더라고요

회사 업무 도중 데이터를 받아서 뿌려지는 일이 있었다

이상하게도 받는 값을 그대로 뿌리는 로직인데

 

데이터를 쏘는 쪽의 viewer 하고 내가 담당하는 쪽의 viewer가 같은 값을 두고 다르게 보여주더라

내쪽 viewer 로직을 차근차근 디버깅하면서 혹시나 값을 변형하는 로직이 있나 봤는데

그런 건 없었고 결국은 데이터를 쏘는 쪽 담당하시는 분께 물어보니 값을 쏘는 부분엣서 offset 값이 있었다고 하시더라...

 

그 말을 듣고 생각해 보니 offset이라는 말을 자주 쓰긴 하는데 대충 아는 척만 할 수 있는 느낌이고 설명하기가 애매해서

한번 정리해 보기로 했다.

 

영어 뜻은 아래와 같은 데.. 그다지 도움은 안된다

Offset

대표적인 사용 예시는

• 메모리 주소에서의 Offset에 경우 메모리 주소가 A이고, 데이터가 B 위치에 있다면, A로부터 B까지의 거리가 offset이라 말하기도 하고
• 배열 인덱스에서는 배열에서 시작 인덱스 0에서 떨어진 거리만큼 떨어진 요소의 위치를 찾을 때에도 그 거리를 offset이라고 말하더라

배열 같은 경우는 뭐 직접 쓰면 쓰겠는데

실제 웹 코딩에서 쓸 때가 어딨 나 생각해 보니 JS에 window.pageYOffset 기능이 있었다

 

아래 코드처럼 300px 넘게 스크롤 했을 때 이벤트를 거는 데 있는데,, 확실히 offset은 거리?라는 느낌에 가까운 단어인 거 같다

window.addEventListener('scroll', () => {
    if (window.pageYOffset > 300) {
        // 스크롤이 300px을 넘어섰을 때 동작
        console.log('Scrolled past 300px!');
    }
});

 

이걸 이용해서 애플 사이트처럼 둠칫 둠칫 이벤트를 넣던 게 기억이 났고

사용자가 어디까지 봤는 지를 로깅하기 위해 스크롤를 감지해서 이벤트도 걸었던 게.. 새록새록 기억나더라

https://www.apple.com/kr/mac/

Mac

 

또 다른 사용법은 DB에서 페이지네이션 구현할 때다.

 

처음 웹 사이트를 만들 때 우리를 괴롭히던 아주 악질적인 친구 중 하나가 페이지네이션이었다

프레임워크면 한 줄이면 되지만 그러면 멋이 없기 때문에 직접 만들었었지.. 지금은 프레임워크가 있으면 그거 쓰지만

 

지금 생각해보니 사실 기능 자체는 쉬운데, 현재 페이지가 7,8 페이지같이 애매할 때 앞의 페이지는 몇까지 보이고

뒤에 페이지는 또 몇까지를 보여줄지 같은 기획적인 게 부분이 고민이 되었었다.

 

아래 SQL 처럼 대량의 데이터를 페이지로 나눌 때 offset을 사용했었다, Limit도 같이 사용해서

20행을 건너 뛰고 10개 행의 데이터만 가져오는 식으로 이용했었다

SELECT * FROM users LIMIT 10 OFFSET 20;