🤔 무한 스크롤이란? 컨텐츠를 페이징하는 기법 중 하나로 스크롤을 이용해 맨 아래까지 도달할 때 새로운 컨텐츠를 불러오는 방식을 말한다. 🪄 구현 방식 스크롤을 끝까지 내렸을 때 fetch된 새로운 데이터를 엘리먼트에 계속 추가(appendChild)하는 방식으로 구현한다. 구현 방식은 크게 두 가지이다. 1. scroll 이벤트를 이용한 방법 - 전통적인 방식 - window의 scroll 이벤트가 일어날 때마다 브라우저 화면의 높이, 스크롤바의 위치를 이용해 body(컨텐츠)의 끝까지 다다랐으면 새로운 데이터를 가져오는 방식을 말한다. - window.innerHeight : 클라이언트에서 보여지는 화면 중 탭, url 주소창, 북마크 탭을 제외한 브라우저의 높이 - window.scrollY : 현..
🤔 캐시를 구현하는 이유 특정 값의 데이터를 저장해두면 이후에 그 특정 값에 대한 데이터가 필요할 경우, 요청을 보내지 않고 저장된 데이터를 가져와 바로 사용할 수 있고 불필요한 요청을 줄일 수 있다는 이점이 있다. 🖱️ 구현 방법 특정 값에 대한 데이터를 SessionStorage에 저장하여 구현할 수 있다. SessionStorage를 사용하는 이유는 브라우저가 닫히기 전까지 데이터가 유지된다. 만약 영구적으로 데이터를 저장하고 싶다면 LocalStoage를 사용할 수 있다. 구현은 정말 간단하다!!! import { getItem, setItem } from "./storage.js"; const $root = document.querySelector(".root"); const $input = d..
실무에서는 화면에 태그를 추가할 때 createElement로 만들어 실제 DOM에 추가하지 않는다고 한다. 그 대신 document.createDocumentFragment로 documentFragment를 생성해 내부에 여러 태그를 추가한 후, 해당 documentFragment를 실제 DOM에 추가하는 방식을 사용한다고 한다. 그럼 documentFragment의 사용이 DOM의 효율성과 어떤 관련이 있을까? DocumentFragment 기본적으로 DOM과 동일하게 동작하나 실제 DOM에는 영향을 주지 않는다. DOM 트리 외부에, 메모리 상에서만 존재하는 DOM을 생성하기 때문에 실제 DOM 구조에는 변경이 일어나지 않아 브라우저가 화면을 랜더링하지 않는다. 따라서 페이지의 성능 영향을 최소화할..
클로저를 이해하기 위해 '실행 컨텍스트(EC)'의 개념이 필요합니다. 먼저 '실행 컨텍스트(EC)' 부터 간략히 알아볼까요? 실행 컨텍스트(Execution Context) 실행 가능한 코드가 실행되기 위해 필요한 환경을 말합니다. 즉, 자바스크립트가 실행되는 환경이며 코드가 실행되기 위한 모든 정보가 저장되어 있습니다. 실행 컨텍스트의 종류 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트가 존재합니다. 1. 전역 실행 컨텍스트(Global Execution Context) default context 단 한 개만 정의되는 컨텍스트입니다. Call Stack에 가장 먼저 추가되어 앱이 종료할 때 삭제됩니다. 함수 밖의 코드를 위해 존재합니다. 2. 함수 실행 컨텍스트(Function Execution Co..
spread 전개 구문으로 배열에서의 spread 활용과 객체에서의 spread 활용 예제를 통해 이해해보자. [배열] spread spread 연산자를 통해 배열 메서드인 concat, push, unshift 등을 쉽게 구현할 수 있다. let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; // result1과 arr1.concat(arr2)는 같은 결과를 갖는다. let result1 = [...arr1, ...arr2]; console.log(result1); // [1, 2, 3, 4, 5, 6] // result2와 arr3.push(10)는 같은 결과를 갖는다. let result2 = [...arr1, 10]; console.log(result2); // [1, 2..
이전 글에서 이어지는 내용입니다. 프로토타입(Prototype) 이해하기 1 프로토타입을 이해하기 위해서는 ES6 클래스 개념이 등장하기 이전, 클래스라는 개념 없이 객체를 생성할 수 있었던 생성자 함수의 이해가 필요하다. 생성자 함수(Constructor functions) 다른 언어의 dmswl98-dev.tistory.com 이전 글의 핵심은 '인스턴스는 생성자 함수의 프로토타입과 연결됨'이었다. 과연 인스턴스는 생성자 함수의 프로토타입과 어떻게 연결될까? 이는 프로토타입 상속과 프로토타입 체인에 의해 설명된다. 아래 글을 모두 읽은 뒤 다시 보길 바란다. 프로토타입 상속(Prototypal inheritance) 이전 글의 코드를 다시 살펴보자. const Animal = function(spec..
프로토타입을 이해하기 위해서는 ES6 클래스 개념이 등장하기 이전, 클래스라는 개념 없이 객체를 생성할 수 있었던 생성자 함수의 이해가 필요하다. 생성자 함수(Constructor functions) 다른 언어의 클래스 개념을 생성자 함수를 통해 구현할 수 있으며 생성자 함수는 다음 조건을 충족해야 한다. 항상 함수명의 첫 글자는 대문자여야 한다. 화살표 함수가 아닌 선언문 함수나 표현문 함수로 작성되어야 한다. 화살표 함수는 자신만의 this를 가지지 않기 때문이다. new 연산자로 생성자 함수를 호출해야 한다. prototype을 이해하기 위해서는 this라는 개념이 필요하다. this를 복습하고 읽는 것을 추천드린다. 'use strict'; const Animal = function(species..
