cotnmin

Javascript에서 순회를 사용할 때 주로 forEach를 사용합니다. 하지만 forEach는 반복도중 중단을 할 수 없다는 단점이 있습니다. 이를 for 문을 이용해 해결할 수 있지만 좀 더 깔끔하고 명확하게 쓸 수 있는 몇 가지 메서드를 알아보겠습니다 1. Array.prototype.some()과 Array.prototype.every() some과 every는 각 배열을 순회하며 주어진 조건의 반환값에 참이 존재하는지, 모든 값이 참인지 알려주는 메서드입니다. some은 참을 만나면 순회를 중단하고 참을 반환하며 순회를 마칠 때까지 참이 나오지 않으면 거짓을 반환합니다. every는 거짓을 만나면 순회를 중단하고 거짓을 반환하며 순회를 마칠 때까지 거짓이 나오지 않으면 참을 반환합니다. con..

1. _로 숫자 구분하기 (numeric separator) 가끔 큰 단위의 숫자를 적는 경우 한눈에 들어오지 않는 경우가 많은데, 이때 언더바(_)를 이용해 숫자를 쉽게 구분해 줄 수 있습니다. let num1 = 1000000; let num2 = 1_000_000; let num3 = 100_0000; // num1 == num2 == num3 언더바를 입력하는 위치는 꼭 3자리씩 끊어서 표시할 필요는 없습니다. 다만, 아래처럼 두 개를 이어서 나타내지는 못합니다. let num_err = 100__000; // Uncaught SyntaxError: Only one underscore is allowed as numeric separator 2. n진법 let num1 = 11; // 10진법: ..

Web API Javascript IntersectionObserver 사용해 보기 여러 Web API 중 변경사항을 감지하는 Observer들이 존재합니다. 이 중 매우 유용하게 쓰일 수 있는 IntersectionObserver, MutationObserver 등이 있는데 이 중에서 IntersectionObserver를 사용해보고자 합니다. IntersectionObserver 란? IntersectionObserver는 Web API 중 하나로 Viewport나 정해진 영역과 다른 영역이 겹치는지, 얼마나 겹치는지 감지하는데 이용하는 API입니다. 대부분 Modern browser에서 간단하게 사용가능합니다. 해당 API의 존재를 알기 전에는 주로 addEventListener('scroll', ..

HTML Object overflow 감지 HTML 내 요소에서 자식요소가 부모요소보다 클 때 css 상에서 overflow 속성을 정의해 처리를 할 수 있습니다. 하지만 이를 javascript에서 동적으로 처리를 하고 싶다면 다른 방법을 이용해야 합니다. 이때 2가지 방법을 이용할 수 있습니다. 1. scrollWidth 이용 위 이미지를 참고하면 clientWidth와 scrollWidth를 비교하여 scrollWidth가 clientWidth보다 크다면 overflow가 발생했음을 알 수 있습니다. 아래의 예제를 따라 해보면 문제없이 결과를 얻을 수 있습니다. Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor..

안녕하세요. 프론트엔드 개발자 cotnmin입니다. 자기소개 2020년 12월부터 한 스타트업에서 개발을 시작한 FE개발자입니다. 회사에서는 주로 Vue를 이용하나 사이드 프로젝트는 여러 Framework들을 다뤄보려고 노력하고 있습니다. 2023년 한 해는 이 블로그와 함께 더 가파르게 성장하는 개발자가 되고자 합니다. 블로그를 시작하게 된 계기 만 2년간 개발자로 근무하며 새로 알게 된 것이 많았는데, 막상 개발하다 보니 분명 해결했던 문제인데도 다시 찾아봐야 하는 상황들이 생기기도 했습니다. 그리고 지난 2년을 뒤돌아보았을 때 지금까지 해 온 것에 비해 눈에 띄게 남긴 것이 없다는 걸 체감하게 되었습니다. 그래서 회사에서 업무를 하거나 사이드 프로젝트를 진행해가며 이것저것 기록해보려고 합니다. 블로..