HYE-ON HYE-ON

∞ 페이징과 무한 스크롤 데이터가 많은 리스트를 보여주는 방법에는 크게 두 가지가 있습니다. 첫 번째는 게시판에서 주로 볼 수 있는 페이징 방식이고 두 번째는 인스타그램이나 페이스북 등에서 볼 수 있는 무한 스크롤 방식입니다. 페이징은 위 사진과 같이 한 페이지당 나오는 데이터의 개수가 정해져 있고 주로 1부터 시작하는 페이지를 옮겨가며 여러 건의 데이터를 순차적으로 조회하는 방식입니다. 무한 스크롤은 페이지를 나누지 않고 특정 이벤트 (주로 스크롤 이벤트)가 발생하는 경우 기존에 나와있는 데이터 이후 건들을 조회해 노출하는 방식입니다. 🤔 왜 이 포스트를 작성했나요? 얼마 전 새로운 리스트 페이지를 구현할 일이 생겼습니다. 쌓인 로그를 단순히 보여주기만 하는 리스트 페이지이기 때문에 굳이 페이징 처리를..

자바스크립트에서 빈 값 등을 검사할 때 || 연산자를 사용하거나 함수의 인자로 들어오는 값을 체크할 경우 Default Value를 지정하여 사용합니다. 이때 || 연산자에서 우변에 있는 문장을 실행하는 경우와 Default Value가 세팅되는 경우의 차이점을 정리하고자 포스트를 작성하였습니다. || 연산자 MDN document에 따르면 논리 연산자 ||(OR)는 피연산자 중 하나의 값을 반환하므로 Boolean 외의 다른 값과 함께 사용하면 Boolean 값이 아닌 것을 반환할 수 있습니다. val1 || val2이라는 문장이 있었을 때, val1을 true라고 판단한다면 val1을, 아니면 val2를 리턴합니다. 이때 false라고 판단되는 자바스크립트의 경우는 아래와 같습니다. null NaN ..

서로 다른 객체 배열이 있을 때 두 객체 배열에 공통적으로 들어있는 객체 요소를 찾아내는 방법에 대해 설명합니다. let enterprise = [ { name: 'SULU', species: 'Human' }, { name: 'KIRK', species: 'Human' } ]; let yorktown = [ { name: 'BEN', species: 'Human' }, { name: 'DEMORA', species: 'Human' }, { name: 'SULU', species: 'Human' } ]; 위와 같이 배열 enterprise와 yorktown에는 객체(Object)들이 들어있습니다. yorktown에 존재하는 객체 중 enterprise에도 동일하게 들어있는 객체를 찾고자 한다면 어떻게 해..