Muscardinus

Vanilla JS 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 const navElem = document.querySelector("#nav"); const navItems = Array.from(navElem.children); const contentsElem = document.querySelector("#contents"); const contentItems = Array.from(contentsElem.children); const scrollSpyObserver = new IntersectionObserver( entries => { // 최초에는 observe가 다 되지만 // 추후에는 intersect가 되는 el, 이제 안 되는 el 두개만 나온다. const { targ..

Intersection Observer를 사용하여 끝부분이 intersect가 됐을때 Data를 새로 fetch하는 방식으로 하면 된다. 만약, Intersection을 사용하기 싫다면, debounce를 사용하는 것이 옳다고 생각한다. Throttle의 경우 일정 시간마다, fetch를 발생시킬 경우 불필요한 자원이 소비되기 때문에, 마지막 행위만 처리되는 debounce가 더 적합한거 같다. Vanilla JS const app = document.querySelector("#app"); const fetchMoreTrigger = document.querySelector("#fetchMore"); let page = 0; const fetchMore = async () => { const targe..

https://programmers.co.kr/learn/courses/30/lessons/81302#fn1 코딩테스트 연습 - 거리두기 확인하기 [["POOOP", "OXXOX", "OPXPX", "OOXOX", "POXXP"], ["POOPX", "OXPXP", "PXXXO", "OXXXO", "OOOPP"], ["PXOPX", "OXOXP", "OXPOX", "OXXOP", "PXPOX"], ["OOOXX", "XOOOX", "OOOXX", "OXOOX", "OOOOO"], ["PXPXP", "XPXPX", "PXPXP", "XPXPX", "PXPXP"]] [1, 0, 1, 1, 1] programmers.co.kr function solution(places) { const answer = [];..

https://programmers.co.kr/learn/courses/30/lessons/77485?language=javascript 코딩테스트 연습 - 행렬 테두리 회전하기 6 6 [[2,2,5,4],[3,3,6,6],[5,1,6,3]] [8, 10, 25] 3 3 [[1,1,2,2],[1,2,2,3],[2,1,3,2],[2,2,3,3]] [1, 1, 5, 3] programmers.co.kr function solution(rows, columns, queries) { const answer = []; let arr = Array.from(new Array(rows + 1), () => new Array(columns + 1).fill(0)); for (let y = 1; y x1; j--) st..

For Loop에서 여러 개의 element에 대해서 각각의 transition을 주기 위해서는 다른 방식으로 접근해야한다. 이럴 때, 사용하는 것이 transition-group이다. Toggle Add {{ number }}

transition에 name 속성과 css를 통한 방법 이외에 Javascript로 animation을 제어할 수 있다. Toggle Hey 각각의 함수는 해당 element를 알려주는 인자를 공통적으로 가지고 있다. 그리고, enter와 leave는 끝을 알려주는 두 번째 인자를 갖는다. 또한, Vue는 js 전에 css가 있으면 css를 우선시하기 때문에, js로 구현할 경우 transition 속성에 :css="false"를 넣는 것을 추천한다. JS를 통해서 animation을 구현할 때는 해당 resource를 사용한다. https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API ..

우리가 animation 효과를 주기 위해서 CSS로 처리하는 경우가 있다. 하지만, Vue에서는 animation을 transition 기법을 사용하여 처리할 수 있다. 위에서 볼 수 있듯이, Vue에서는 Transition을 enter과 leave에 대해서 각각 세 단계로 나눈다. Toggle Hello world! 코드에서 볼 수 있듯이, Transition에 name 속성에 클래스의 이름을 넣고 (transition이 얼마나 걸릴지를 duration 속성에 넣어도 된다.) style에서 from/active/to를 상황에 맞게 넣으면 된다. Toggle Hello world! Another hello! 두 개의 자식에 대해서 할 때는, 구별을 주기 위해서 key값을 넣는다. 또한, transiti..

컴포넌트를 상황에 따라서 동적으로 보이게 하고 싶을때가 있다. 이런 때, Dynamic Component를 사용한다. Home About component라는 것을 선언한다. 여기에 component를 선언한다는 것을 의미하고, :is에 컴포넌트의 이름이 나타나게 하면된다. 컴포넌트가 Unmount되면 기존에 가지고 있는 data도 날라간다. 이를 방지할려면, 이럴 경우, 컴포넌트가 unmount되지 않는다. 하지만, component가 사라지면서 어떠한 행위를 하고 싶으면 어떡할까? 그럴 경우, Home Page Vue에서는 activated와 deactivated라는 함수를 지원한다.