javascript3 [JavaScript] 정규표현식의 전역 플래그와 .test() 문제 전역플래그 g 를 사용한 정규 표현식에서 .test() 함수 사용 시 True가 반환되어야 하는 조건에서 True와 False를 번갈아가며 반환시키는 문제 let exp = /[a-z]/g let arr = Array.from('abcdef') for( e of arr.values()) console.log(exp.test(e)) // 출력 : // true // false // true // false // true // false 위와 같은 반복문에서 정규표현식 조건에 부합함에도 불구하고 True와 False가 번갈아가며 나오는 문제가 확인되었다. 원인 전역플래그 g와 .test() 함수를 함께 사용할 때, 검색에 성공할 경우 다음 검색을 위해 성공한 다음 Index를 LastIndex로 저장하.. 2023. 7. 2. [JavaScript] 이벤트 전파(Event flow) HTML은 여러 요소들이 중첩되어 쌓여있다. HTML BODY DIV 때문에 위 태그, , 에 모두 onClick Event를 설정해둔 채로 div를 클릭했을때, HTML은 중첩된 3개의 요소들 중 우리가 실행을 원하는 것이 어떤 onClick 함수인지 판단이 어려워진다. 그래서 중첩된 요소들의 onClick 함수를 모두 실행한다. 이 때 onClick 함수가 호출되는 순서는 아래와 같이 Capture phase와 Bubble phase 두 가지로 나누어진다. 위 이미지에서 Target은 직접 클릭이 발생한 최상위 요소를 가리킨다. 이벤트가 발생하면 event.target.nodeName으로 해당 요소를 확인할 수 있다. Current target은 본인 요소를 말한다. 이벤트가 호출되었을 때 this... 2023. 7. 2. [React] Scroll event를 이용하여 Infinite scroll 구현하기 Infinite scroll을 구현하는 데에는 여러 방법이 있는데 아래 예시는 그 중 Scroll event를 이용하여 Hook을 만들었다. 현재 유저가 보고있는 View의 위치와 Document의 전체 길이를 비교하여 View가 Document의 가장 하단인지 확인한다. 가장 아래일 때 isFetching에 True를 세팅한다. ※ lodash의 throttle 함수를 이용하여 "Scroll" event가 과도하게 호출되는 것을 막는다. isFetching이 변경되면 이를 의존성 배열로 갖는 useEffect 함수가 실행된다. useEffect 함수 내에서는 isFetching이 True일 경우 매개변수로 전달된 Callback함수를 실행한다. Callback 함수는 Element를 추가하는 기능을 수.. 2023. 7. 2. 이전 1 다음