자바스크립트로 태그매니저 고급 활용하기 - 1. DOM과 자바스크립트의 자료형

본 게시물은 패스트 캠퍼스 'GA4 완벽 탑재, 구글 애널리틱스 완전 정복 시그니처 패키지 Online' 강의 수강 후 정리용으로 작성되었습니다.

 

강의 홍보 : https://fastcampus.co.kr/mktg_online_siga4

[GA4 완벽 탑재, 구글 애널리틱스 완전 정복 시그니처 패키지 Online. | 패스트캠퍼스

가장 최신의 구글 애널리틱스부터 루커스튜디오, 구글 애즈 등 구글 마케팅 툴 6종까지 한 번에! 계속 변화하는 구글 마케팅 플랫폼에 맞추어 무한 업데이트까지 약속합니다.

fastcampus.co.kr](https://fastcampus.co.kr/mktg_online_siga4)

---

1. 자료형

• 프로그램에서 다룰 수 있는 값의 종류

 

FROM Chat GPT

자바스크립트의 자료형에 대해 설명해 드리겠습니다. 자바스크립트는 동적 타입 언어로, 변수의 자료형이 실행 시간에 동적으로 결정됩니다. 다음은 자바스크립트에서 주요한 자료형에 대한 설명입니다:

1. 원시 자료형(Primitive Data Types):
   • 숫자(Number): 정수 및 부동 소수점 숫자를 나타내는 데 사용됩니다.
   • 문자열(String): 문자의 시퀀스를 나타내는 데 사용됩니다.
   • 불리언(Boolean): true 또는 false 값만 가집니다.
   • null: "값이 없음" 또는 "무효"를 나타내는 특별한 값입니다.
   • undefined: 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.
   • 심벌(Symbol): 고유하고 변경할 수 없는 값으로 주로 객체 속성의 키로 사용됩니다.
2. 참조 자료형(Reference Data Types):
   • 객체(Object): 객체는 키-값 쌍의 컬렉션으로, 함수, 배열, 클래스, HTML 요소 등을 나타내는 데 사용됩니다.
   • 배열(Array): 순서가 있는 값의 리스트를 나타내며, 숫자로 인덱싱 됩니다.
   • 함수(Function): 재사용 가능한 코드 블록을 나타냅니다.
   • 날짜(Date): 날짜와 시간 정보를 다루는 데 사용됩니다.
   • 정규 표현식(Regular Expression): 문자열 패턴을 검색하고 처리하는 데 사용됩니다.

자바스크립트는 동적 타입 언어이므로 변수의 자료형은 할당된 값에 따라 자동으로 결정됩니다. 또한, 변수의 자료형은 언제든지 변경할 수 있습니다. 예를 들어, 동일한 변수는 숫자에서 문자열로 변경할 수 있습니다.

javascriptCopy code
let numberVar = 42; // 숫자
numberVar = "Hello"; // 이제 문자열

이러한 유연성은 자바스크립트의 강력한 특성 중 하나이지만, 주의해서 사용해야 하며 혼란을 줄 수 있는 버그를 일으킬 수 있습니다. 변수의 자료형을 주의 깊게 다루고 유지하는 것은 프로그래밍 에러를 방지하는 데 도움이 됩니다.

 

 티스토리 블로그에서 검사로 개발자 도구 화면이 나타난다.

 

• Elements : 웹사이트에 있는 컴퓨터 코딩된 HTML들이 요소별로 정리된 항목들을 보여준다.

 

 옆으로 가면 Console이다.

• Console : 간단한 프로그래밍을 내가 코딩을 해서 값을 볼 수 있게끔 메모장을 역할을 함.

Clear버튼을 눌러 내용을 지워준다. 

 

• 자료형 : 프로그래밍에서 어떤 값의 타입을 의미한다.

        - 예를 들어

→ 변수 a에다가 1을 할당하겠다.(변수 a에다가 1이라는 값을 임시적으로 넣어두겠다.) 

→ 숫자형 데이터

---

→ 문자형 데이터 : 자료형에서 문자형 데이터는 큰따옴표("") 안에 넣기 때문에 계산이 되지 않는다.

 

---

 

• a == 1; : a가 1가 같으냐?('='하나는 할당)

→ Boolean 값

 

---

• 컴퓨터에서 여러 가지 값을 하나의 변수(a)에다가 저장할 때 저장을 해서 
• var a = ["apple", "banana", "orange"] → 이렇게 기재를 해주면 하나의 변수 안에 여러 값들이 저장되는데 이 여러 값들이 위의 0~2 같은 Index번호에 저장이 된다.  

→ 배열

---

 

 

 

• 0, 1, 2에 각각의 값을 저장하는 것은 배열이라고 한다.

각각의 내가 정해주는 변수의 이름들을 저장해서 데이터를 저장하는 것 ({})→ 객체(Object)

 

2. DOM

 

FROM Chat GPT

DOM은 Document Object Model의 약어로, 웹 페이지의 구조와 내용을 표현하는 방법 중 하나입니다. DOM은 웹 브라우저에서 웹 페이지를 표현하고 조작하는 데 사용되는 프로그래밍 인터페이스입니다.

DOM은 다음과 같은 주요 특징을 가지고 있습니다:

1. 계층 구조: DOM은 웹 페이지의 요소(태그), 속성, 텍스트 내용 등을 트리 구조로 표현합니다. 이 트리 구조는 문서의 계층 구조를 반영하며, HTML 문서의 요소는 부모, 자식, 형제 관계로 표현됩니다.
2. 웹 페이지 접근: DOM을 사용하면 JavaScript와 같은 스크립팅 언어를 통해 웹 페이지의 요소에 접근하고 조작할 수 있습니다. 이를 통해 동적으로 웹 페이지를 수정하거나 사용자 상호작용에 반응하는 웹 애플리케이션을 만들 수 있습니다.
3. 요소 및 속성 조작: DOM을 사용하면 웹 페이지의 요소를 추가, 제거, 수정할 수 있습니다. 또한 요소의 속성을 변경하거나 내용을 읽고 쓸 수 있습니다. 이를 통해 동적 콘텐츠 생성 및 페이지 업데이트가 가능해집니다.
4. 이벤트 처리: DOM은 웹 페이지에서 발생하는 이벤트(클릭, 마우스 이동, 키보드 입력 등)를 감지하고 처리할 수 있습니다. 이를 통해 사용자 상호작용에 대응하는 웹 애플리케이션을 만들 수 있습니다.

DOM은 웹 개발에서 중요한 개념이며, 웹 페이지의 구조와 콘텐츠를 동적으로 제어하는 데 사용됩니다. 대부분의 현대적인 웹 애플리케이션은 DOM을 활용하여 사용자 경험을 개선하고 상호작용성을 제공합니다.

 

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8#/media/%ED%8C%8C%EC%9D%BC:DOM-model.svg

 문서를 객체 형태로 관리한다. → DOM