전체 글
-
버블링과 캡처링Web Dev/8. 메모 2021. 6. 17. 10:15
https://ko.javascript.info/bubbling-and-capturing 버블링과 캡처링 ko.javascript.info 이 문서가 가장 잘되어있다. 이벤트가 동작하면 일단 window객체에서 타깃으로 이벤트가 내려갔다가(캡처링), 다시 상위로 전파되는 동작(버블링)이 일어난다. 이때 대부분은 이벤트 핸들러가 상위로 전파되는 버블링단계에서 동작하는데, elem.addEventListener(..., {capture: true}) 이렇게하면 캡처링단계에서 동작하게 할 수도있다. 이때 버블링되는것을 막고 싶으면 e.stopPropagation을 사용할 수 있다. * 추가: e.preventDefault https://developer.mozilla.org/ko/docs/Web/API/Eve..
-
스택으로 큐, 큐로 스택 메모Web Dev/2. JS 알고리즘 2021. 6. 15. 14:17
https://bellog.tistory.com/143 [리트코드(LeetCode)] 큐로 스택 구현하기, 스택으로 큐 구현하기 - Python leetcode.com/problems/implement-queue-using-stacks Implement Queue using Stacks - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get.. bellog.tistory.com 자주 받는 질문인데, 자주까먹어서 찾아본 자료. 1. 스택으로 큐를 구현할때 - 스택 두개를 준비한다 - 큐의 성질은 뺄때 먼저 넣은게 먼저 나온다는 것(FIFO) - 스택a..
-
두시간 알고리즘 12일차.. 다이나믹 프로그래밍 몇문제 풀기Web Dev/2. JS 알고리즘 2021. 6. 15. 14:00
1. 최소 교정 비용 문제 // 5.1 최소 교정 비용 문제 // 재귀 호출 을 사용하는 풀이와 설명 // str1에 뭔가 해서 바껴야함 const editDistance1 = (str1, index1, str2, index2) => { if(index1 >= str1.length - 1){ return str2.length - index2; } if(index2 >= str2.length - 1){ return str1.length - index1; } if(str1[index1] === str2[index2]){ return editDistance1(str1, index1+1, str2, index2 + 1); } // 삭제 let d = editDistance1(str1, index1+1, str2..
-
제너레이터와 프로미스, Generator와 PromiseWeb Dev/1. JS 문법 관련 2021. 6. 14. 01:19
https://davidwalsh.name/async-generators Going Async With ES6 Generators ES6 JavaScript generators can be used async tutorial. davidwalsh.name Generator와 Promise가 같이 쓰이면 갑자기 가슴이 답답해지면서 머리가 일을 안하겠다고 해서, 찾다보니 설명이 정말 잘되어있는 글을 드디어 만났다! function request(url) { // this is where we're hiding the asynchronicity, // away from the main code of our generator // `it.next(..)` is the generator's iterator-res..
-
간단 메모 - 렌더 트리, 크리티컬 렌더링 패쓰Web Dev/8. 메모 2021. 6. 14. 00:59
https://velog.io/@mu1616/Critical-Rendering-Path#:~:text=Critical%20Rendering%20Path%EB%8A%94%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80,%EA%B3%BC%EC%A0%95%20%EB%98%90%EB%8A%94%20%EC%88%9C%EC%84%9C%EB%A5%BC%20%EB%A7%90%ED%95%9C%EB%8B%A4.&text=%EC%9D%B4%20%EA%B3%BC%EC%A0%95%EC%9D%84%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0,%EB%A5%BC%20%EA%B0%9C%EC%84%A0%ED%95%A0%20%EC%88%98%20%EC%9E%88%EB%8B%A4. Critic..
-
간단메모 - 리페인트와 리플로우Web Dev/8. 메모 2021. 6. 14. 00:48
https://webclub.tistory.com/346 Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법 Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법 리플로우와 리페인팅에 대해 알아봅니다. Reflow 발생 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의(자신, webclub.tistory.com 매번 조금씩 가물가물 하는 내용. Reflow 돔의 크기 같은게 변경되서, 자기자신부터, 자식 부모, 부모의 부보까지 수치를 다시 계산해서 그리고, 렌더트리를 생성하는 과정이다. Repaint 이러고 나서 렌더트리를 다시그리게 되는데 이를 Repaint라고 한다 어떤 div의 크기가 변경된다면 아래의 동작이..
-
-
GraphQL아주 조금만 살펴보기 - ReactWeb Dev/8. 메모 2021. 6. 5. 00:58
오늘도 좀 쉬는김에 GraphQL쪽을 더 보기로 했다. GraphQL이 페이스북 팀에서 처음 고안됬을때는 UI에서 바로 사용할 수 있는 형태로 데이터를 서버에서 뽑아올려고 했던건데, 지금은 GraphQL은 그보다 훨씬 많은 것들을 하고있다고한다. 오랜 짬이 있는 분은 React에서 GraphQL을 어떻게 쓰고 있는지, 캐슁 전략 등에 대해서 좀 개괄적으로라도 알게되면 좋겠다는 목표를 가지고 세미나를 들었다. 공부 자료 https://frontendmasters.com/courses/client-graphql-react/ ⚛️ Learn to connect GraphQL to React using Apollo Client and React hooks! Use queries and mutations to i..