[Elice AI_4기] 3주차 내용 정리

Hyes_y·2022년 2월 4일

엘리스_AI_4기

목록 보기

3/6

3주차 학습 내용 정리

2022.01.25 - 2022.01.29
몰랐던 것 위주로 정리

 - javascript(기초)
 - javascript(심화)

🚩 Javascript(기초)

1. DOM (Document Object Model)

문서 객체 모델이라고도 하며 객체 지향 모델로써 구조화된 문서를 표현하는 형식
HTML , XML 의 프로그래밍 인터페이스
DOM을 이용하여 프로그래밍 언어가 문서의 스타일 등을 변경할 수 있음
프로그래밍 언어와 독립적
트리 구조로 되어있음

🥕 종류

Core DOM : 모든 문서 타입을 위한 DOM
HTML DOM : HTML 문서를 위한 DOM
XML DOM : XML 문서를 위한 DOM

🥕 Document 객체

Document = 웹 페이지
웹 페이지 내 HTML 요소에 접근할 때는 반드시 Document 객체를 이용

🥕 Document 메서드

HTML요소 선택/생성, 이벤트 핸들러 추가, 객체 선택시 사용
HTML요소 선택
-document.getElementById() : 해당 id의 요소를 선택
-document.getElementsByClassName() : 해당 클래스의 요소들을 선택
-document.getElementsByName() : 해당 name값을 가지는 요소들을 선택
-document.querySelector() : 해당 선택자를 가지는 요소를 하나 선택
-document.querySelectorAll() : 해당 선택자를 가지는 요소를 전체 선택
HTML 요소 생성
-document.createElement() : 지정된 html 요소 생성
-document.write() : html 출력 스트림을 통해 텍스트 출력
-document.선택 메서드.innerHTML : 선택 메서드로 얻어온 태그 밑에 추가(createElement보다 간편함)
이벤트 핸들러 추가
-요소.onclick = function(){}
-요소.addEventListener(이벤트속성, 실행함수)

2. Node 객체

HTML DOM에서 정보를 저장하는 계층적 단위
Node Tree : Node들의 집합, Node간 관계를 표현

🥕 종류

문서 노드(document node) : HTML 문서 전체를 나타내는 노드
요소 노드(element node) : 속성 노드를 가질 수 있는 유일한 노드(html의 모든 요소)
주석 노드(comment node) : 문서의 주석
속성 노드(attribute node) : 요소 노드에 관한 정보를 가진 노드(모든 html 요소의 속성, 자식 노드에는 포함되지 않음)
텍스트 노드(text node) : 문서의 모든 텍스트

🥕 노드 정보

요소.nodeName 과 같이 사용 가능
nodeName : 노드 이름 반환
nodeValue : 노드 값 반환
nodeType : 숫자값 반환, 요소 노드(1), 속성 노드(2), 텍스트 노드(3), 주석 노드(8), 문서 노드(9)

3. 이벤트

웹 브라우저가 알려주는 html 요소에 대한 사건의 발생
이벤트 타입 : 발생한 이벤트의 종류
이벤트 핸들러 : 이벤트가 발생했을 때 그 처리를 담당하는 함수

🚩 Javascript(심화)

✔ 어려움 주의

0. 자바스크립트 실행 과정

javascript → 인터프리터 언어(but 컴파일 언어의 특징도 가지고 있음)
-인터프리터 언어 : 코드를 한 줄씩 읽고 실행
-컴파일 언어 : 전체 코드를 읽고 실행
javascript - 싱글 스레드 환경에서 비동기 동작 처리
실행 시 코드가 없어도 this/variable object/scope chain 을 초기화
-scope : 코드가 현재 실행되는 환경, 맥락을 의미
-this : 레퍼런스 변수( window(global_scope 환경에서), object(객체에 속한 메서드 실행시) 를 의미)
-this/variable object/scope chain 세 개를 통틀어 실행 환경(execution context) 라고 함
콜스택 : 실행 환경이 쌓이면서 생기는 부분

1. 실행 컨텍스트(Execution Context)

자바스크립트 언어 스펙(명세)에 명시되어 있는 개념
자바스크립트 코드가 실행되는 환경
코드에서 참조하는 변수, 객체(함수 포함), this 등에 대한 레퍼런스가 존재
전역에서 시작하며 함수가 호출될 때 콜스택에 쌓이게 됨

🥕 종류

전역 실행 컨텍스트(Global Execution Context) → 자바스크립트 실행 시 만들어짐
함수 실행 컨텍스트(Function Execution Context) → 함수 실행 시 만들어짐

2. this

🥕 Dynamic Binding(동적 바인딩)

this가 함수의 호출 환경에 따라 동적으로 세팅되는 것
함수 호출 환경
1.함수 호출 - 함수 직접 호출
2.메서드 호출 - 객체의 메서드 호출
3.생성자 호출 - 생성자 함수를 호출
4.간접 호출 - call, apply등으로 함수를 직접 호출
5.그 외 - 콜백함수(특정 동작 이후 불려지는 함수/ 다른 함수의 인자로 보내지는 함수) 호출
bind / apply / call 등으로 this가 가리키는 것을 조작 가능

✅ 화살표 함수를 사용하는 경우 this는 함수가 생성된 환경을 가리키도록 고정
(this = 호출된 함수를 둘러싼 실행 컨텍스트)
✅ 일반 함수를 사용하는 경우 this는 함수가 호출된 환경을 가리키며 동적으로 변경 가능
(this = 새롭게 생성된 실행 컨텍스트)

3. Closure 함수

일급 객체 : 변수와 같이 대상을 다룰 수 있는 객체
✔ javascript에서는 함수도 일급 객체

✅ 함수의 일급 객체 성질

함수를 다른 함수의 인자로 넘기면, 다른 함수 내부에서 그 함수를 호출 가능
함수 안에 함수를 선언하면 리턴을 통해 외부에서도 사용 가능
함수의 실행이 끝나도 내부 변수 유지 가능

🥕 closure 함수

함수의 일급 객체 성질을 이용
함수가 생성될 때 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장
함수와 함수가 사용하는 변수들을 저장한 공간을 클로저라고 함
팩토리함수 : 함수를 생성해서 리턴하는 함수
내부에서 선언한 변수는 계속 살아있음

4. ES6 Rest, Spread Operator

🥕 Rest Operator

함수의 인자, 배열, 객체 중 나머지 값을 묶어서 사용
항상 마지막에 위치
객체의 rest operator 는 객체로 저장
배열의 rest operator 는 배열로 저장

// Rest Operator 예제

function Rest(arg, ...rest){
    console.log("arg:", arg);
    console.log("rest:", rest);
  }
  
Rest(1, 2, 3, 4);
// arg: 1
// rest: (3) [2, 3, 4]

function sumArray(sum, arr) {
    if (arr.length === 0) return sum;
    const [head, ...tail] = arr;
    return sumArray(sum + head, tail);
  }

sumArray(0, [1, 2, 3, 4, 5]);
// 15

🥕 Spread Operator

묶인 배열 혹은 객체를 펼침
✨등장 순서✨에 따라 객체의 필드가 덮어씌워질 수 있음

// Spread Operator 예제

function Spread(x, y, z){
	console.log(x);
  	console.log(y);
  	console.log(z);
}

Spread(...[1, 2, 3]);
// 1
// 2
// 3

let o = {
  name: "Daniel",
  age: 23,
  address: "Street",
  job: "Software Engineer",
}
let o2 = { ...o, name: "Tom", age: 24 }
let o3 = { name: "Tom", age: 24, ...o }
o2.name // Tom
o2.job // Software Engineer
o3.name // Daniel

iterable 성질을 가진 객체는 spread operator로 합칠 수 있음
iterable 성질이 없는 경우(ex.일반 객체) 에러 발생
spread operator 로 객체를 복사할 때 객체나 배열 필드의 경우 reference만 복사됨
( deep copy를 하기 위해선 별도의 작업 필요 )

5. 자바스크립트의 변수 정의 과정

🥕 자바스크립트 엔진

자바스크립트 코드를 읽어 실행하는 프로그램
코드는 엔진을 통해 파싱되고 실행된다
chrome 브라우저의 경우 v8엔진(made by google) 사용
node.js : 브라우저 외의 환경에서 자바스크립트 코드를 실행하도록 하는 프로그램
node.js 는 여러 프로그램으로 구성되며 v8사용
같은 코드를 실행해도 브라우저와 node.js의 실행 결과가 다를 수 있음

🥕 자바스크립트 코드 실행

코드 실행 전 실행 컨텍스트(두단계) 생성
생성 단계 → 변수 선언 읽음
실행 단계 → 변수 값 할당

🥕 렉시컬 환경 (Lexical Environment)

함수의 렉시컬 환경 → 함수가 사용하는 변수들을 둘러싼 환경
특정 변수의 값은 함수의 렉시컬 환경 안에서 찾을 수 있음
실행 컨텍스트 안에 정의된 variable object 로 이해할 수 있음
생성단계 → 함수 선언문 / 표현식/ 변수 등을 실행 컨텍스트에 저장
- 변수의 경우 실행 컨텍스트의 렉시컬 환경 구성
- 함수 선언문 외에 변수는 값이 저장되지 않음
실행단계 → 변수에 값을 할당하는 구문을 만나면 실행 컨텍스트에 값을 저장 → 한 줄씩 읽어나가며 실행

6. Hoisting

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것
선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨

🥕 변수 선언 타입별 hoisting

✔ 생성 단계에서

var → undefined 로 초기화
let, const → 초기화되지 않음 → hoisting 발생하지 않음

✔ 선언 타입별 특징
var , let → 변수에 재할당 가능
const → 재할당 불가능

var → 함수 스코프
let, const → 블록 스코프

🥕 hoisting 참고

7. 자바스크립트 내장 객체

🥕 globalThis

전역 객체를 지칭하는 변수
브라우저: window / node : global
환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리키게함

🥕 window

DOM document를 포함하는 창을 나타내는 객체
전역 스코프에서 선언된 변수는 모두 window의 property

🥕 document

브라우저에 로드된 웹페이지
문서의 title, URL 등의 정보를 얻음
element 생성, 검색 등의 기능 제공
동적으로 원소 생성

🥕 Number

number 원시타입(primitive value)을 감싸는 객체
유의미한 상수값, 숫자를 변환하는 메서드 등을 제공한다
NaN : Not a Number
isNaN() : 전역함수, 입력값을 숫자로 변환했을 때 NaN 이 되는지 검사

🥕 Math

기본적인 수학 연산 메서드, 상수 다루는 객체
BigInt 타입과 호환 x, Number 타입만을 인자로 다룬다

🥕 Date

특정 시점의 날짜를 표시하기 위한 객체
날짜 관련 작업을 위한 여러 메서드 포함
Date.getDay() → 요일을 0(일) - 6(토) 로 구한다 (연월일시분초밀리초 다 가능)
setDate() → 시간 설정
toDateString() → 특정 포맷의 문자열 반환
getTime() → 1970.1.1 시점부터 흐른 시간을 밀리초 단위로 반환
Date.now() → 현재 시간의 밀리초(실시간)
a = new Date(); → 생성 시점의 시간 정보
Date 객체로 타임존 정보 획득 가능
문자열로 된 시간을 Date 객체로 변환하면, Date 객체가 생성

🥕 String

문자열 원시타입의 래퍼 객체
여러 메서드 포함
includes() → 문자열 검색에 성공시 true, 실패시 false 반환
toUpperCase() → 대문자 변환
replace() → 문자열 검색해서 타겟 문자열로 변환
split() → 특정 문자열 기준으로 분리, 없을 시 글자별로 분리
indexOf() → 특정 문자열을 검색하여 인덱스 리턴, 없을 시 -1

🥕 json

json 객체와 관련된 메서드를 담은 객체
JSON.stringify() → 객체를 json문자열로
JSON.parse() → json문자열을 객체로

✅ 정리

✏ closure, Lexical environment 등 javascript의 전반적인 실행 환경 개념에 대해 이해를 완벽하게 하지 못함
✏ bind의 개념도 다시 학습 필요!

Hyes_y

나도 하고 싶다, 개발.

이전 포스트

[Elice AI_4기] 2주차 내용 정리

다음 포스트

[Elice AI_4기] 3주차 내용 정리

엘리스_AI_4기

3주차 학습 내용 정리

🚩 Javascript(기초)

1. DOM (Document Object Model)

🥕 종류

🥕 Document 객체

🥕 Document 메서드

2. Node 객체

🥕 종류

🥕 노드 정보

3. 이벤트

🚩 Javascript(심화)

0. 자바스크립트 실행 과정

1. 실행 컨텍스트(Execution Context)

🥕 종류

2. this

🥕 Dynamic Binding(동적 바인딩)

3. Closure 함수

🥕 closure 함수

4. ES6 Rest, Spread Operator

🥕 Rest Operator

🥕 Spread Operator

5. 자바스크립트의 변수 정의 과정

🥕 자바스크립트 엔진

🥕 자바스크립트 코드 실행

🥕 렉시컬 환경 (Lexical Environment)

6. Hoisting

🥕 변수 선언 타입별 hoisting

🥕 hoisting 참고

7. 자바스크립트 내장 객체

🥕 globalThis

🥕 window

🥕 document

🥕 Number

🥕 Math

🥕 Date

🥕 String

🥕 json

[Elice AI_4기] 2주차 내용 정리

[Elice AI_4기] 4주차 내용 정리

0개의 댓글