꼬박로그 꼬박로그

최근 프로젝트를 진행하면서 스크롤에 가려진 Dom Element가 실제 사용자의 눈에 보였을 때 event를 발생시켜야 하는 요구사항이 있었습니다. 처음에는 해당 div에 scroll 이벤트를 걸어서 구현을 하면 되겠다 생각이 들었지만 실제로 구현하기에는 어려움이 있었고, 레퍼런스를 찾아보던 중 레이지 로딩 기법과 IntersectionObserver API를 알게 되었습니다. 레이지 로딩이란? 효울적인 메모리 관리를 위하여 웹페이지를 호출했을 때 눈에 보이는 곳의 이미지를 먼저 로딩하고 눈에 보이지 않는 즉, 스크롤해야만 볼 수 있는 영역의 이미지는 스크롤을 하면 로딩해주는 방식입니다. IntersectionObserver InterSectionObserver는 크롬 51버전부터 사용할 수 있는 Web..

Vue는 컴포넌트가 렌더링 될 때 성능을 위해, DOM 트리를 활용하여 변경된 부분만 렌더링을 진행합니다. 컴포넌트나 객체가 변경되는지 여부를 판단하여 데이터를 로드하고 다시 렌더링 합니다. key라는 특수한 속성은 Vue의 가상 DOM 알고리즘이 새로운 노드 목록을 이전 목록과 비교할 때, VNode를 식별하기 위한 힌트로 사용됩니다. key가 없으면 Vue는 엘리먼트 이동을 최소화하고, 같은 유형의 엘리먼트를 제자리에서 패치/재사용하려는 알고리즘을 사용합니다. key를 사용하면, key의 순서 변경에 따라 엘리먼트를 재 정렬하고, 더 이상 존재하지 않는 키가 있는 엘리먼트는 항상 제거/삭제됩니다. key는 언제 사용하는가? key를 가장 많이 사용하는 부분은 아마도 v-for일 것입니다. 2.2.0 ..

async & await async & await 문법은 ES8부터 도입된 가장 최근에 나온 비동기 처리 패턴입니다. 기존의 비동기 처리 방식은 callback과 promise의 단점을 보완하고 가독성이 높은 코드를 작성할 수 있도록 도와줍니다. async function async function foo(){ return 1; } 함수의 앞에 async라는 예약어를 선언하게 되면 해당 함수는 Promise를 반환합니다. Promise가 아닌 값을 반환하더라도 이행 상태(fullfilled)의 Promise로 값을 감싸 이행된 Promise가 반환되도록 합니다. async function foo(){ return 1; } foo() .then(response => { console.log(response..

비동기( Asnchronous) 처리란? 한 가지의 요청이 처리되는 동안 다른 요청도 처리되는 방식으로 요청이 완료되지 않아도 다음 처리가 진행되는 것을 의미합니다. CallBack callback은 어떤 함수에서 인자로 받아들인 함수를 함수 내에서 다시 호출하는 기능을 callback이라고 합니다. function add10(num, callback){ setTimeout(() => { callback(num + 10) }, 1000); } add10(10, function(response){ console.log(response); // 20 }) Callback Hell callback은 연속적으로 사용하게 되면 가독성이 떨어지게 되어 유지보수가 힘들어진다는 단점이 있습니다. add10(10, re..

오늘 했던 일 키보드 이벤트(KeyboardEvent) 키보드 이벤트 자바스크립트는 addEventListner를 통하여 사용자가 키보드의 키를 누르거나 놓을 때 이벤트를 발생시킬 수 있습니다. 누를 때는 keydown, 놓을 때는 keyup 타입을 발생시킵니다. 키보드 이벤트는 window, document 또는 특정 요소(element)에서 모두 발생시킬 수 있고, 이벤트를 처리하기 위한 콜백 함수를 전달해야 합니다. window.addEventListener('keydown', (e) => console.log(e)); 위 코드를 콘솔에 작성하고 키 1을 눌러보면. 1이라는 키에 대한 다양한 정보가 담겨 있는데, key라는 속성에는 누른 키 값이, keyCode속성에는 해당 키의 아스키코드 값이, ..

오늘 했던 일 Prototype Chain Inheritance Pattern Prototype 자바스크립트에서의 모든 함수는 객체로 이루어져 있습니다. 따라서 객체 생성 시 prototype이라는 프로퍼티를 가지게 됩니다. function Car() {}; Car.prototype 객체는 constructor와 __proto__ 프로퍼티를 가지고 있습니다. 모든 객체는 __proto__ 프로퍼티를 가지고 있고, __proto__ 프로퍼티를 prototype link라고도 부릅니다. 위의 콘솔에서 constructor는 생성자 함수 그 자체를 가리키고 있습니다. Prototype Chaining function Car(name, color){ this.name = name; this.color = col..

오늘 했던 일 Object Oriented Programming(객체 지향 프로그래밍) Object Oriented Programming(객체 지향 프로그래밍) 객체 지향 프로그래밍이란? 객체 지향 프로그래밍은 문제를 여러 객체 단위로 나눠 작업하는 방식을 말합니다. 객체 지향 프로그래밍의 가장 큰 특징은 클래스를 이용해 연관 있는 함수화 변수를 하나로 묶어 객체(인스턴스)를 생성하여 사용합니다. 객체 지향 프로그래밍의 특징 캡슐화(Encapsulation) 캡슐화는 객체의 필드(속성), 메소드를 하나로 묶고, 내용을 외부에 감추는 것을 말합니다. 외부 객체는 객체 내부의 구조를 얻지 못하며 객체가 노출해서 제공하는 필드와 메소드만 이용할 수 있습니다. 캡슐화는 외부의 잘못된 접근으로 인해 객체의 손상을..

오늘 했던 일 구조 분해 할당 구조 분해 할당 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a);//10 console.log(b);//20 console.log(rest);//[30, 40, 50] 배열 구조 분해 기본 변수 할당 let arr = ['one', 'two', 'three']; let [one, two, three] = foo; console.log(one);// 'one' console.log(two);// 'two' console.log(three);// 'three' Default 변수에 기본값을 할당하면,..