본문 바로가기

분류 전체보기104

이벤트 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 removeEventListener로 제거 가능한 이벤트 핸들러 addEventListener로 등록한 이벤트 핸들러는 removeEventListener로 제거할 수 있다. 이 때 등록할 때 사용한 것과 동일한 함수를 전달해야 제거가 가능하므로 다음 같은 상황에선 제거되지 않는다. 불가 : 전달한 인수가 일치하지 않는 경우 const $submitButton = document.getElementById('submitButton') const handleClickSubmitButton = ()=> { event.preventDefault(); // 기본 제출 동작 방지 conso.. 2023. 11. 20.
서브도메인에 gtag로 심은 이벤트가 추적되지 않을 때 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 이벤트를 추적하려는데 이벤트가 오지 않는다 최근에 마케팅팀과 서비스에 gtag 심는 작업을 했다. gtag는 웹서비스에서 사용자 행동을 추적하고 분석하는 데 활용하는 태그이며, 구글에서 제공한다. 꽤 간단하게 생겼다. gtag('event', 'event_name', { 'key': 'value', }); 그 중 에디터 페이지에 클릭 이벤트를 심는 작업이 있었는데, 어라? 로컬에서 확장자 프로그램으로 확인할 때는 이벤트가 잘 넘어갔는데 배포 후 살펴보니 기록되는 이벤트가 없다. 특이한 점은 page view, scroll 등의 기본 이벤트는 잘 기록되는데 내가 등록한 커스텀 이벤트.. 2023. 11. 12.
브라우저의 렌더링 과정 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 브라우저의 주요 역할은 웹페이지 렌더링이다 브라우저의 주요 역할은 사용자가 요청한 웹페이지를 렌더링하는 것이다. 브라우저는 서버로부터 필요한 리소스(HTML, CSS, JS, 이미지, 폰트 등의 정적 파일 또는 서버에서 동적으로 생성한 데이터)를 요청하고 이를 응답받아 브라우저에 시각적으로 렌더링한다. 이 과정을 좀 더 상세하게 나타낸 것이 아래의 도식이다. 하나씩 살펴보도록 하자. 사용자가 주소창에 원하는 URL을 입력하고 엔터 키를 누르면, 입력한 URL의 호스트 이름이 DNS(Domain Name System)를 통해 해당 서버의 IP 주소로 변환되고, 이 IP 주소를 갖는 .. 2023. 11. 10.
Set, Map 어디에 사용할까? 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 Set, Map Set 수학적 집합을 구하기 위한 자료구조로, 중복되지 않는 유일한 값들의 집합이다. 배열과 다르게 요소 순서에 의미가 없어 인덱스로 접근할 수 없다. 인수로는 순회 가능한 데이터 컬렉션(이터러블)을 받기 때문에 배열, 문자열, Map, Set 등이 모두 가능하다. const set = new Set('kelly') console.log(set) // Set { 'k', 'e', 'l', 'y' } console.log(set[0]) // undefined console.log(set.has('k')) // true Set을 생성하고 요소를 다루는 방법 const .. 2023. 11. 3.
실행 컨텍스트 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 실행 컨텍스트 소스코드를 실행하려면 몇가지 재료가 필요하다. 먼저 코드 내에서 사용되는 변수, 함수 등의 식별자를 알아야 하며, 코드를 어떤 순서로 실행할 것인지에 대한 정보도 필요하다. 이렇게, 코드가 어떤 식별자를 사용할 수 있는지 실행 순서는 어떻게 되는지를 관리하는 영역이 바로 실행 컨텍스트다. Execution Context Stack : 코드의 실행 순서를 관리한다. Lexical Environment : 변수, 함수, 클래스 등의 이름인 식별자와 그 식별자를 등록하고 관리하는 scope를 관리한다. 실행 컨텍스트 스택 실행 컨텍스트 중에서 코드의 실행 순서를 관리하는 .. 2023. 10. 27.