빅데이터 부트캠프 81일차

Context

- 실행할 코드에 필요한 환경 정보(변수, 변수값, ...)들을 저장한 객체

- Record = 변수, 변수값
- Outer = 외부 환경 참조

- 클로저(closure) = 자기가 갖고 있지 않은 외부 변수를 참조하는 함수 (자기가 갖고 있는 변수를 사용하면 클로저가 X)

- 스코프(scope) = 변수에 접근할 수 있는 범위 (global, local)

- 렉시컬 스코프(Lexical Scope) = 함수가 호출된 시점에서의 값을 참조하는 것이 아니라 생성 당시 환경의 값을 참조하는 스코프의 특징

 

삼항연산자

- [(조건) ? 참일때 실행문 : 거짓일때 실행문] 형식으로 조건문을 입력하는 것

 

DOM (Document Object Model, 문서 객체 모델)

- XML이나 HTML 문서의 태그들을 웹 브라우저의 메모리에 올려 JavaScript로 사용하기 위해 만들어진 웹 문서

- 종류로 Core DOM(모든 문서 타입), HTML DOM(HTML 타입), XML DOM(XML 타입)이 존재

- 웹 페이지는 일종의 문서(document) 개념 

- JavaScript로 HTML DOM을 이용하여 HTML 요소나 속성을 추가, 제거, 변경시킬 수 있음

- 모든 HTML 요소는 HTML DOM을 통해 접근 가능

 

 노드(Node)

- 노드(Node) = HTML 문서의 요소들을 JavaScript를 적용할 수 있도록 객체화 시킨 것

- head, body 등의 태그 뿐만 아니라 태그 안의 텍스트 속성들도 모두 Node에 속함

종류

- 문서노드 = document
- 요소노드 = HTML 각각의 요소
- 텍스트노드 = HTML 요소 내부의 텍스트
- 속성노드 = HTML 속성
- 주석노드 = 주석
- 루트노드 = HTML 태그

관계

1. 부모 - 조상, 상위
2. 자식 - 후손
3. 형제/자매

 

document

- 웹 페이지 그 자체를 의미하는 객체이자 DOM 트리의 최상위 객체

- 특정 HTML 요소를 선택할 수 있는 여러 메소드들이 존재

- HTML 요선 선택 메소드의 결과값을 이용하여 특정 태그의 CSS 요소 추가 가능

ex) document.getElementById('A').style.color = 'gold'; => id가 A인 태그의 글자색 금색으로 설정

      document.getElementsByClassName('A')[1].style.textAlign = 'center';

      => 클래스명이 A인 태그중 인덱스 번호 1인 태그의 텍스트를 가운데 정렬 설정

 

HTML 요소 선택 메소드

- getElementsByTagName(태그명) = 해당 태그명을 가진 요소 모두 선택

- getElementsByClassName(클래스명) = 해당 클래스명을 가진 요소 모두 선택

- getElementsByName(속성값) = 해당 name 속성값을 가진 요소 모두 선택

- getElementById(아이디명) = 해당 아이디명을 가진 요소 선택 (elements가 아닌 element는 ID만)

- querySelector(선택자) = 해당 선택자로 선택되는 요소 중 맨 앞 순서 선택

- querySelectorAll(선택자) = 해당 선택자로 선택되는 요소 모두 선택

※ 선택자(Selector)로 id명, class명, tag명 입력 가능

 

HTML 태그값 추출

- innerHTML = 해당 HTML 내용 전체 추출

- innerText = 해당 HTML 요소 내부의 텍스트만 추출

- textContent = 해당 HTML 요소 내부의 텍스트만이 아닌 요소 내부의 또 다른 요소의 텍스트까지 모두 추출

 

ex) const aTag = document.getElementById('aTag');
  aTag.innerHTML = '<a href="H">링크</a>'; => 웹 페이지에 하이퍼링크 생성 및 '링크' 텍스트 출력
  aTag.innerText = '<a href="H">링크</a>'; => 웹 페이지에 하이퍼링크 생성 X,  '<a href="H">링크</a>' 텍스트 출력

 

HTML 요소 생성/수정 메소드

- createElement() = 요소 생성

- appendChild() = 선택한 요소에 자식 요소 추가 

ex) const h3 document.createElement("h3") = <h3></h3> 생성     

      h3.innerHTML = 'B';     

      document.body.appendChild(h3) = <h3>B</h3>

 

- 요소명.remove() = 해당 요소 제거

- 요소명.replace(a, b) = 해당 요소에서 b를 a로 변경

 

이벤트(Event)

- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생

- JavaScript는 발생한 이벤트에 반응하여 특정 동작을 수행함

- 대표적으로 마우스 클릭(click) & 더블클릭(dblclick), 마우스 커서 위로(mouseover) 등이 존재

- 이벤트 리스너(Event Listener) = 이벤트가 발생했을 때 그 처리를 담당하는 함수 

- addEventListener('이벤트명', 이벤트 발생시 실행될 함수) = 이벤트 리스너 등록 메서드

- JavaScript에서 e = event 객체를 의미

 

- e.target = 이벤트가 발생 요소(자식) 반환

※ e.target.value = 이벤트가 발생한 요소가 입력받은 값 반환, e.target.속성명 = 이벤트가 발생한 요소의 해당 속성 반환

- e.currentTarget = 이벤트가 발생하는 요소(부모) 반환

 

- e.stopPropagation() = 이벤트 전파 취소

※ 이벤트 전파(event propagation) = 웹 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정

- e.preventDefault() = 이벤트 기본 동작 실행 취소

ex) 클릭 이벤트로 설정했을 경우 클릭 했는데도 이벤트 리스너 실행 X

 

이벤트 종류 확인 가능 사이트

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

 

BOM(Browser Object Model, 브라우저 객체 모델)

- 브라우저에 계층적으로 내장된 객체

종류

- window(최상위 객체), location(URL 정보), document(현재 문서)

- history(URL 히스토리), screen(외부환경), navigator(브라우저명 및 버전정보) 
  

CallBack Function(콜백 함수)

- 다른 함수의 파라미터로 넘겨지는 함수

- 함수 안의 변수를 인자로 받아 함수를 재실행시킴

- 동기(Synchronous) = 특정 코드의 실행이 완료된 후 다음 코드를 실행하는 방식

- 비동기(Asynchronous) = 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 방식

(자바스크립트의 특성)

- setTimeout(함수, 지연시간) = 콜백함수의 실행을 지정된 밀리초만큼 지연 (비동기 방식으로 실행)

ex) console.log("a");      setTimeout(function() {console.log("b");},2000);      console.log("c");==> a c b 순으로 출력

- 콜백 지옥(CallBack Hell) = 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용하여 가독성이 떨어지고 로직 변경이 힘들어지는 문제 상황

 

Promise(프로미스)

- 실제 정상 기능이 수행된 상태에 데이터가 담겨 있는 객체(자바스크립트 비동기 처리에 사용)

- new Promise(function(resolve, reject) {}); (resolve, reject = 콜백 함수)

- 프로미스 객체 생성시 기본 상태 = pending

 

상태

- pending(대기) = 비동기 처리 로직이 미완료된 상태

- fulfiled(이행) = 비동기 처리가 정상적으로 완료되어 프로미스가 결과값을 반환해준 상태

- rejected(거절) = 비동기 처리 실패 혹은 오류가 발생한 상태

 

- 콜백 함수 resolve() 실행 = fulfiled 상태로 전환

- 콜백 함수 reject() 실행 = rejected 상태로 전환

 

메소드

- .then()을 통해 결과값을 받을 수 있음

- .then().catch()를 통해 실패 처리의 결과값을 받을 수 있음

- .finally()를 통해 실패/성공에 상관없이 실행할 코드 설정 가능