본문 바로가기

반응형

JavaScript

(14)
[ Javascript ] Intersection Observer 가지고 놀기 공부하면서 Intersection Observer API의 활용 가능성이 참 많다는 것을 느꼈다. 그래서 이것저것 따라 만들어본 것을 기록하고자 이 글을 쓰게 됐다. 토스 홈페이지를 일부 참고했다. 구현을 완료하고나서 적는건데 내 생각대로 잘 안됐다. 스크롤 이벤트를 완전히 대체할 수 있겠다 싶었는데 한계가 있는 부분이 존재한다. 이에 대해서는 두 번째 섹션에서 언급하겠다. 컨텐츠 따로 띄우기 우선 초간단 예시를 먼저 구현해보자. 제목을 뭐라고 적어야할지 고민하다가 마땅한게 생각나지 않아서 아무렇게나 적었다. 컨텐츠를 포함하는 컨테이너 박스가 뷰포트에 노출되면 위처럼 효과가 작동한다. 따라서 단순히 observer에 컨테이너를 등록해주고, 각 요소에 transition을 정의한 클래스를 추가해주기만 하면..
[ Javascript ] Intersection Observer API (무한스크롤, lazy-loading 구현) 사용 배경 Intersection Observer API는 대상 요소가 상위 요소 또는 최상위 문서의 뷰포트와 교차하는 부분의 변화를 비동기적으로 관찰할 수 있는 방법을 제공합니다. 위 문장은 MDN 웹문서에서 그대로 가져와서 번역한 것이다. 여기서 핵심은 ‘비동기'다. Intersection observer가 있기 전에는 교차 탐지를 구현하기 위해 getBoundingClientRect(), 스크롤 이벤트 등을 사용했었는데, 이러한 메소드들은 메인 쓰레드에서 실행되기 때문에 성능 문제를 야기할 수 있다. Intersection Observer API는 콜백 함수를 등록해서 교차 탐지 대상(target)이 다른 요소(root)에 들어가거나 나갈때, 또는 두 요소가 교차할 때 실행되도록 한다. 즉, 동기적..
[ Javascript ] 조합, 중복조합, 순열, 중복순열 (feat. 재귀함수) 자바스크립트로 재귀함수를 활용해서 조합, 중복조합, 순열, 중복순열을 구현해보자. 아래는 공통적으로 등장하는 변수에 대한 설명이다. 1. list → 선택 배열 const list = ['a', 'b', 'c', 'd', 'e']; 2. result → 결과값이 저장되는 배열 3. items → 선택한 요소를 담는 배열 4. k → 선택하는 개수. n_C_k 에서 k를 의미한다 5. idx → list 인덱스 정보 구현하는 로직을 간단하게 얘기하면 list에서 선택한 요소를 items 배열에 담는데, items 배열의 크기가 k 가 되면 result 배열에 push 하는 것이다. 조합 직관적으로 생각해보자. a ~ e 까지 담긴 배열에서 서로 다른 세 개의 문자를 선택하려고 한다. 어떻게 할 것인가? 아..
[ JavaScript ] 프로토타입(Prototype) 자바스크립트는 프로토타입 기반 객체지향 프그래밍 언어이다. 프로토타입을 공부하면 자바스크립트의 동작 원리를 더 잘 이해할 수 있다. 아마 자바스크립트를 공부해본 사람이라면 MDN 웹문서에서 ‘Prototype’이라는 단어를 많이 봤을 것이다. 나는 주로 MDN 웹문서를 기반으로 공부하기 때문에 ‘Prototype’이 굉장히 익숙한 단어였다. 익숙하기만 하고 뭔지 모르는.. 그런 단어였다. 그래서 ‘언젠가는 공부해야지'라고 생각만 하고 정작 (귀찮아서)정리 하지는 않았다. 하지만 더이상 미루면 평생 정리하지 않을 것 같아 오늘 굳은 다짐을 하고 책상에 앉았다. 오늘의 목표는 프로토타입을 정복하는 것이다!!! 프로토타입이란? MDN 웹문서에는 아래와 같이 기술하고 있다. Prototypes are the m..
[ JavaScript ] 콜백과 비동기 콜백 함수란 무엇인가? MDN 웹문서에는 콜백 함수를 아래와 같이 정의하고 있다. A callback function is a function passed into another function as an argument 이를 직역하면 콜백 함수는 다른 함수의 인자로 넘어가는 함수를 말한다. 콜백에 대해서는 이게 전부다. 그런데 콜백 함수는 대부분 비동기 함수에서 쓰이기 때문에 '콜백 함수는 비동기 처리된다'라는 오개념이 생기기 쉽다. 하지만 이는 틀렸다. 콜백 함수라고 전부 비동기 처리되지 않는다. 아래 예시를 보자. function increase_Sync(n, callback) { console.log(n); callback(n + 1); } console.log('**** Start Script ..
[ JavaScript ] Rest parameter, Spread Syntax, 구조 분해 할당 MDN 웹문서를 참고해 사용법만 아주 간단하게 정리해봤다. Rest parameter 함수의 매개변수 이름 앞에 ...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수 인자들을 배열로 받는다. function foo(...rest) { console.log(Array.isArray(rest)); // Array console.log(rest); // [1,2,3,4] } foo(1,2,3,4); rest 파라미터는 반드시 마지막에 위치해야 한다. 아래와 같이 사용할 수 있다. // rest 앞쪽은 다른 변수로 지정해서 받을 수 있다 function foo(first, second, ...rest) { console.log(first, second); // 1 2 console.log(res..
[ JavaScript ] async/await 이 글은 promise의 개념을 알고 있어야 이해할 수 있다. 따라서 promise가 아직 뭔지 모른다면 이전 글을 보고 오도록 하자. 등장배경 같은건 생략하고 핵심만 짚어보자. 그럼 바로 시작! 1. async의 위치는 함수 선언부 앞부분으로 고정된다. 2. 함수 선언시 앞에 async를 붙여주면 그 함수는 async 함수가 된다. 3. async 함수의 반환값은 무조건 promise다. 4. await 키워드는 오직 async 함수 내부에서만 쓸 수 있다. 이정도는 암기해놓고 시작하자. 이해하려고 하면 안되고 그냥 받아들여야 한다. 왜냐하면 async/await가 이렇게 만들어졌기 때문이다. '왜?' 라고 질문을 던진다면 '태생이 이래요'라고 답할 수밖에 없다. 1번과 2번은 진짜 있는 그대로 받아들..
[ JavaScript ] Promise MDN 문서 내용을 정리해봤다. Promise 사용 이유 말고 오로지 사용법에 대해서만 알아볼 것이다. Promise란 무엇인가? Promise는 비동기 함수를 다루기 위한 목적으로 만들어진 객체로, 일반 객체와는 다르게 상태 정보를 갖는다. 아래는 MDN 문서의 그림이다. 위 그림과 같이 Promise는 네 가지 상태 정보를 가지며 각 상태의 의미는 아래와 같다. 1. pending : 비동기 처리가 아직 수행되지 않은 상태 : resolve 또는 reject 함수가 아직 호출되지 않은 상태 2. fulfilled : 비동기 처리가 수행된 상태(성공) : resolve 함수가 호출된 상태 3. rejected : 비동기 처리가 수행된 상태(실패) : reject 함수가 호출된 상태 4. settled ..

반응형