아래같은 형태의 컴포넌트를 여러 카테고리 게시판에서 공통으로 사용할 수 있도록 수정한다고 하자. 공통 컴포넌트 (하위 컴포넌트) - slot 적용 전 //게시글 제목과 작성자 이름 리스트를 뿌려주는 컴포넌트 {{ elem.title }} by {{ elem.userName }} | {{ elem.timeago}} 대부분의 형태는 비슷한데 세부적인 것들이 다르다면 예를들어, 익명 게시판이 존재해 딱 그 게시판만 사용자 이름을 표시하지 않도록 작성하고 싶다면 그 컴포넌트만을 위해 새로운 컴포넌트를 만들 필요 없이 을 사용하면 된다. 을 사용하면 변동이 있을 수 있는 부분을 상위에서 처리하도록 할 수 있다. 주의할 점은 상위와 하위 컴포넌트에서 slot의 name 속성 값을 동일하게 설정해 주어야 한다. 공통..

결론★ 1.Iterable은 순환이 가능한 값이다. 2.Iterable은 Iterator를 리턴하는 [Symbol.interator]() 함수를 가진다. 3.Iterator는 { value:값, done: bool값 }형태 객체를 리턴하는 next()함수를 가진다. 4.Iterable은 for...of, 전개 연산자, 구조분해, 나머지 연산자 등과 함께 사용할 수 있다. ex) for...of는 next() done:true가 될 때까지 순환한다. 5.Generator는 Iterable이자 Iterable을 생성하는 함수이다. 함수명에 *를 붙여 선언한다. 6. Generator에서 순회할 값 앞에 yield 키워드를 붙여준다. 그럼 이터레이터가 next()로 단계적 순회하듯, 제어가 가능하다. (for..

IntersectionObserver는 간단히 말해 관찰 대상이 viewport영역에 들어오고 나가는 것 (즉, 가시성)을 감시하는 역할을 한다. 사용법) ① new IntersectionObserver(callback[, options]); 생성자로 인스턴스를 생성한다. ② 관찰 대상을 등록해 준다. const observer = new IntersectionObserver((entries, observer) => { console.log(entries); }); observer.observe(targetElem); 첫번째 매개변수인 callback 함수는 entries, observer라는 두가지 매개변수를 받는다. entries -더 보이거나 덜 보이게 되면서 통과한 최소한의 자극을 나타내는 Int..

window.addEventListener('mousemove', function(e){ mousePos.x = -1 + (e.clientX / window.innerWidth)*2; mousePos.y = 1 - (e.clientY / window.innerHeight)*2; spaceElem.style.transform = `rotateX(${mousePos.y*8}deg) rotateY(${mousePos.x*8}deg) `; });

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll Window.scroll() The Window.scroll() method scrolls the window to a particular place in the document. developer.mozilla.org ※MDN에 기본적인 설명 참조 window.scroll(x좌표 ,y좌표) //이렇게 사용하거나 window.scroll({ //이렇게 세세한 옵션을 줄 수 있다. top: 100, //y축(상,하)방향으로 left: 100, //x축(좌,우)방향으로 behavior: 'smooth' 또는 'auto' //스크롤 이동 시 스크롤의 움직임을 설정 }); See the Pen XWd..

타겟 요소.offsetTop은 스크롤(속도)의 영향을 받지 않아야 하는 것, 고정적이어야 하는 것을 필요로 할 때 유용하다. offsetTop은 기본적으로 document의 상단에서 해당 요소가 얼마나 떨어져 있는지의 값을 나타낸다. 그런데 만약, 내가 구하고자 하는 요소의 offsetTop값이 문서가 기준이 아니라 타겟의 부모 요소를 기준으로 하고 싶다면 (쉽게 말해, 문서 상단에서 타겟 요소 상단 까지 사이의 거리가 아닌, 부모 요소의 상단에서 해당 요소 상단부분 까지의 거리) position 속성을 이용해서 offsetTop의 기준 값을 바꿀 수 있다. 우리가 position: absolute를 사용할 때 처럼, 기준으로 잡을 부모 요소에 position: relative를 해주면 된다.