** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 리액트의 다양한 훅 중 useMemo, useCallback 를 언제 사용하면 좋을지에 대한 고민을 나눠보려 합니다. 1. useMemo()와 useCallback()은 무엇을 위한 Hook 인가? useMemo 와 useCallback 을 사용하기 전에 리액트의 특징인 "리렌더링"에 대한 이해가 필요합니다. 리액트는 SPA(Single Page Application) 로 리렌더링 최적화를 위해 가상돔을 사용합니다. 그렇다면, 언제 렌더링이 발생할까요? - state 변경이 있을 때 - props 변경이 있을 때 - 부모 컴포넌트가 업데이트 될 때 - shouldComponentUpdate에서 ..

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 지도에 marker를 사용할 때 필수 기능 중 하나가 바로 "클러스터링"입니다. 클러스터링이란 아래와 같이 zoom의 정도에 따라 마커의 수를 조정하는 것입니다. Mapbox 지도 라이브러리에서는 SuperCluster를 사용하여 클러스터링을 구현할 수 있습니다. 클러스터링 적용 중에 getClusters() 메소드의 return 값이 계속해서 [], empty array 가 출력되어서 애를 먹었었는데 그 해결과정을 공유하려 합니다. Q1. cluster 객체가 아직 초기화되지 않아서 [] 가 return 되는 것일까? const index = new Supercluster({ radius: 4..

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 안녕하세요! 코딩하다보면 그럴 때 있지 않나요 ~ 한 줄로 코드를 끝내는 능력자이고 싶다! ㅋㅋㅋ(하지만 현실은... 벌써 몇 백줄 넘어가는 중... 🥲) 하지만 조금씩 스킬을 늘려나가다 보면 그런 날도 오겠죠?! 서론은 여기까지하고 이번에는 한 줄로 Array 초기화 하는 방법을 알아보려 합니다. 보통 배열 초기화는 아래와 같은 코드로 수행합니다. var data = []; var length = 5; // user defined length for(var i = 0; i < length; i++) { data.push(createSomeObject()); } 이런 코드를 한 줄로 끝낼 수는 ..

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 효율적인 이벤트 핸들링을 하려면 어떻게 해야할까요? 각 Dom element 마다 이벤트를 거는 것이 아니라 상위의 dom element 에 이벤트를 걸고, 이벤트가 발생한 target 을 찾아 이벤트를 핸들링하는 것입니다. 이러한 방법을 이벤트 위임(Event Delegation)이라고 합니다. 코드로 살펴봅시다! STEP 01 _ Event Delegation 예제코드 "테이블 내의 td 클릭 시 하이라이트 효과"를 주어야 하는 경우로 가정해봅니다. 1) event.target 사용 $('.table').on('click', (e) => { let target = event.target; /..

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 정말 코딩의 세계는 무궁무진한 것 같습니다. provider는 당연히 module에서만 import 하는 것이라고 생각했는데 component 별로 import가 가능하더군요! (lazy loading의 진수를 보여주는! 👍🏻) 구글링 하다가 좋은 영문글을 발견하여 번역해보려 합니다! STEP 01 _ 준비하기 먼저, 각 provider를 비교하기 위한 예제 코드(5개 파일)를 이해 해봅시다. SimpleService ChildComponent ParentComponent AppComponent AppModule 1. SimpleService class SimpleService { value: ..