반응형 분류 전체보기227 [Broswer] EventTarget 과 Event, CustomEvent EventTarget 인터페이스는 이벤트를 수신할 수 있고, 수신한 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 인터페이스입니다. 즉, 이벤트의 대상이 될 수 있는 객체는 EventTarget의 세 메서드를 구현합니다. DOM Element, document, window 등 은 EventTarget 을 상속받고 있기 때문에, addEventListener() 메서드를 사용하여 이벤트에 콜백을 등록해둘 수 있는 는 것입니다. EventTarget 을 상속하는 새로운 객체 만들기 class EventObj extends EventTarget { constructor() { super(); } } const eventObj = new EventObj(); eventObj.addEv.. 2023. 9. 20. [Browser] window.addEventListener 이벤트 리스너는 웹 개발을 할때 너무나 익숙한 메서드입니다. 하지만 3번째 인자는 많이 생소한데요. 가끔 의도적으로 사용할 때가 생기면서 한번 정리해보았습니다. 목차 1. addEventListener 2.this 3. 세번째 인자 3-1. capture 속성 3-2. once 속성 3-3. passive 속성 3-4. signal 속성과 abort 3-5. useCapture 속성 4. removeEventListener 와 메모리 문제 1.addEventListener EventTarget 인터페이스를 구현한 대상은 addEventListener() 메서드를 가지고, 대상이 이벤트를 수신할 때마다 호출할 콜백을 등록할 수 있습니다. 2.this addEventListener() 내부 콜백의 this .. 2023. 9. 20. Browser 에서 얻을 수 있는 모든 길이와 좌표 그리고 스크롤 Browser 에서 얻을 수 있는 모든 길이와 좌표 그리고 스크롤 브라우저는 아래와 같이 기준으로 삼는 것에 따라서 달라지는 상대적 좌표와 절대적 좌표를 API로 제공함으로써 개발자가 유연하게 사용할 수 있습니다. 사용할 만한 모든 API 목록을 가져왔으니 핸드북 처럼 볼 수 있는 글로 남겨놓을까 합니다. 외울 때는 width,height 키워드 앞에 붙는 수식어들의 의미를 파악하면 직관적으로 외울 수 있을 것 같네요. 구분선으로 분리되어있는 것의 윗 파트는 window 객체에서 제공하는 API 이고, 아랫 부분은 Element 객체에서 제공하는 API 입니다. Browser 에서 제공하는 길이 API outerWidth, outerHeight : 브라우저 전체 크기를 반환합니다. innerWidth, .. 2023. 5. 9. 간단 명료 하게 정규식 이해하기(2) 간단 명료 하게 정규식 이해하기(2) 하위 표현식으로 묶기 html 에서 2개 이상 연속된 공백을 찾는 정규식입니다. 수량자는 바로앞 문자만 인식하기 때문에, 위와같은 조합을 하나로 묶는데 사용됩니다. 역참조(≒ 변수) \숫자 : 해당 정규식에서 사용된 n번째 하위 표현식을 참조합니다.(마치 변수처럼 활용 가능) 전방탐색, 후방탐색 ?= 를 사용하여 특정한 문자를 기준 앞으로의 문자열에서 탐색하도록 합니다. 만약 전방탐색을 하지 않으면 결과물에 포함됩니다. 이렇게 특정 태그내의 텍스트만 추출하고 싶을 때 사용할 수 있는데, 후방탐색(? 2023. 4. 9. 간단 명료 하게 정규식 이해하기(1) 간단 명료 하게 정규식 이해하기(1) 문자 찾기 정규식 내에서 작성된 문자는 동일한 문자를 찾아냅니다. 아무 문자 찾기 정규식에서는 특수 기능을 위한 "메타 문자" 가 존재합니다. 모든 문자에 해당하는 메타 문자는 점(.) 입니다. * 메타 문자를 일반 문자열로 사용하기 위한 방법이 역슬래시(\) 입니다. ex) \. ➡️ 점, . ➡️ 모든 문자열 (이를 이스케이프라고 합니다) 집합으로 찾기, 집합으로 제외하기 [] 대괄호는 내부 문자들을 OR 로 묶어냅니다. [] 대괄호를 캐럿(^) 으로 시작하면 제외의 의미로 사용됩니다. 메타 문자 찾기 앞서 설명했듯 약속된 메타 문자들은 문자 그대로 사용할 수 없기에 이스케이프(\) 를 앞에 붙여 일반 문자 취급할 수 있습니다. . : 임의의 문자 하나를 나타냅니.. 2023. 4. 9. 시간 레버리지는 빨리돌아왔다 시간 레버리지 이야기 시간레버리지 내가 정의한 시간 레버리지는, 고민하는 시간을 최소화 하고, 결과물에 초점을 맞추어 개발하여, 개발시간을 단축하는 것을 말한다. 곧 출시를 앞둔 서비스에서 이 레버리지를 쭈욱 끌어당겨 사용했다. 그리고 레버리지를 끌어당긴 만큼, 시간이 빨리 지나갔다. 하지만 이렇게 레버리지를 끌어당긴 만큼, 레버리지가 빨리 돌아왔다. 이렇게 빨리 돌아올 줄은 몰랐다. 빠르게 쌓여가는 이자 생각보다 이자가 썠다... 고민을 짧게한 만큼 변화에 너무 취약했다. 한 컴포넌트를 만들더라도, 어떻게 변화하고 또 활용할 수 있을지에 대한 고민을 충분히 하지 못해, 중복을 피할 수 없었다. 중복 조차 일관성 있어야 한다는 생각이 들었고, 그래야 수정할 때, "중복의 규칙" 을 찾아가면 그나마 나을 .. 2023. 3. 21. 이전 1 2 3 4 5 6 7 ··· 38 다음 반응형
