[KUIT] 3주차 워크북 보충(JavaScript)

이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.

---

프로토타입

자바스크립트 객체는 Prototype이라는 내부 프로퍼티가 존재한다.

거의 모든 객체가 생성 시점에 이 프로퍼티에 null이 아닌 값이 할당된다.

 

객체 내부에 없는 프로퍼티를 호출하게 되면?

→ 해당 프로퍼티를 찾지 못하면 바로 [[Prototype]]링크를 따라가 프로퍼티를 탐색한다.

 

모든 일반 객체의 최상위 프로토타입 연쇄는 내장 Object.prototype이고 이 지점에서도 찾지 못하면 탐색이 종료된다. (undefined 반환)

 

 

두 객체를 서로 연결짓는 가장 일반적인 방법은 함수 호출 시 new키워드를 앞에 붙이는 것이다.

new키워드는 일반 함수 호출 + "객체" 생성이라는 잔업을 더 부과하는 지시자이다.

const f = new Foo()를 실행하면 Foo 함수가 실행되고, 객체가 생성되어 변수 f에 할당된다.

 

 

• constructor는 내가 선언한 생성자 함수(Foo)를 가리킨다. new 키워드와 함께 함수를 호출할 경우 constructor함수를 실행하고 부수효과로 객체가 생성된다.생성자 함수가 아니라 함수를 생성하는 호출이라고 생각하는것이 맞다
• prototype은 생성자 함수에 정의한 모든 객체가 공유할 원형이다.
• proto는 [[Prototype]]링크이다. 생성자 함수에 정의해두었던 prototype을 참조한다.

 

출처: https://velog.io/@adam2/자바스크립트-Prototype-완벽-정리

---

그러면 자바스크립트에는 클래스가 없어요?

→ ES5까지는 없었는데요. ES6부터는 있습니다.

 

출처: https://velog.io/@jhsung23/JS-자바스크립트에-클래스-없다며

---

자바스크립트에서 객체는 어떻게 만들어요?

 

1. Object() 생성자 함수 사용

//Object()를 이용해서 foo 빈 객체 생성
var foo = new Object();

 

2. 객체 리터럴 이용

var foo = {
	name : 'foo',
	age : 30,
	gender: 'male',
	func1: function () {
		console.log('Hello World')
	}
}

 

3. 생성자 함수 이용

// Person() 생성자 함수
var Person = functino(name) {
		this.name = name;
}

// foo 객체 생성
 var foo = new Person('foo');
console.log(foo.name) // foo

 

출처 : https://velog.io/@ko12ztwe/자바스크립트-객체생성방식

---

var는 함수 레벨 스코프를, let과 const는 블록 레벨 스코프를 가진다는데, 이 둘의 차이가 뭐에요?

 

var는 함수 레벨 스코프를 가집니다. 때문에 블록 내부에 선언되어도 외부에서 접근 할 수 있습니다.

{
	var age = 20;
}

console.log(age) // 20

 

 

let과 const는 블록 레벨 스코프를 가집니다. 즉 {} 내부에 변수를 선언하면 해당 블록 내부에서만 생명 주기를 유지합니다.

{
	let age = 20;
}

console.log(age) // age is not defined

 

출처: https://velog.io/@ko12ztwe/var-let-const의-차이점에-대하여

---

블로킹/논블로킹, 동기/비동기의 차이가 뭐에요?

제어권 : 자신(함수)의 코드를 실행할 권리

→ 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려준다.

 

블로킹과 논블로킹은 A 함수가 B 함수를 호출했을 때, 제어권을 어떻게 처리하느냐에 따라 달라진다.

 

블로킹은 A 함수가 B 함수를 호출하면, 제어권을 A가 호출한 B 함수에 넘겨준다.

논블로킹은 A함수가 B함수를 호출해도 제어권은 그대로 자신이 가지고 있는다.

 

동기와 비동기의 차이는 호출되는 함수의 작업 완료 여부를 신경쓰는지의 여부의 차이이다.

 

동기: 함수 A가 함수 B를 호출한 뒤, 함수 B의 리턴값을 계속 확인하면서 신경쓰는 것

비동기: 함수 A가 함수 B를 호출할 때 콜백 함수를 함께 전달해서, 함수 B의 작업이 완료되면 함께 보낸 콜백 함수를 실행→ 함수 A는 함수 B를 호출한 후로 함수 B의 작업 완료 여부에는 신경쓰지 않는다.

 

출처: https://velog.io/@nittre/블로킹-Vs.-논블로킹-동기-Vs.-비동기

---

얕은 복사와 깊은 복사

얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사한다.

 

얕은 복사: 해당 메모리 주소의 값이 변경되면 원본 객체 및 복사 객체의 인스턴스 변수 값은 같이 변경된다.

 

깊은 복사: 객체가 참조 타입의 멤버를 포함할 경우 참조값의 복사가 아닌 참조된 객체 자체가 복사되는 것을 의미한다.

원본의 참조는 더 이상 하지 않는다.

→ 복사된 값 변경해도 원본의 값은 변경되지 않음

 

출처: https://velog.io/@y_jem/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC

---

그러면 Spread Operator는 얕은 복사에요 깊은 복사에요

→ Spread Operator로 복사한 객체(배열)은 1depth의 값에서만 깊은 복사를 실행!

→ 1차원 배열에서는 깊은 복사를 잘 수행하지만, 다차원 배열이면 깊은 복사가 잘 안될수도?

 

출처: https://velog.io/@yukyung/Spread-Operator%EB%8A%94-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%9D%BC%EA%B9%8C-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%9D%BC%EA%B9%8C

---

Promise와 Async/Await의 차이

→ 에러 핸들링은 어떻게 하느냐의 차이!

Promise를 활용할 때에는 .catch() 문을 통해 에러 핸들링이 가능

async/await은 에러 핸들링 할 수 있는 기능이 없어 try-catch 문을 활용해야!

 

출처: https://velog.io/@pilyeooong/Promise와-asyncawait-차이점

---

DOM API

정적인 웹페이지를 변경하는 유일한 방법

→ DOM을 변경하는 것!

→ 이때 필요한 것이 DOM API

 

 

document.getElementById(id) → id 값으로 요소 노드 한 개 선택

document.querySelector(cssSelector) → css 선택자로 요소 노드 한 개 선택

document.getElementsByClassName(class) → class 값으로 요소 노드를 모두 선택

document.getElementsByTagName(tagName) → 태그 명으로 요소 노드를 모두 선택

document.querySelectorAll(selector) → CSS 선택자로 요소 노드를 모두 선택

 

출처:  https://seokzin.tistory.com/entry/JavaScript-자주-사용하는-DOM-API-정리

---

innerHTML의 사용을 지양해야 되는 이유

innerHTML은 자식요소를 하나의 문자열로 얻는다.

→ 마크업을 포함하여 리턴

→ 마크업을 포함해 값을 추가하는 것은 XSS에 취약

 

---

XSS가 뭔데요?

XSS는 웹 페이지에 악성 스크립트를 삽입하는 방식으로 이루어지는 공격

스크립트 내용에 따라서 쿠키나 세션 토큰 등의 탈취가 가능해서, 이를 인증이나 세션관리에 사용하고 있는 사이트에 침입하거나 심각한 피해를 입힐 가능성이 있다

 

출처: https://tecoble.techcourse.co.kr/post/2021-04-26-cross-site-scripting/

---

그럼 어떡하죠?

→ innerHTML을 사용하지 않고 새로운 콘텐츠를 추가하는 방법을 사용하자!

• createElement(tagName)
  • 태그이름을 인자로 전달하여 요소를 생성한다.
• createTextNode(text)
  • 텍스트를 인자로 전달하여 텍스트 노드를 생성한다.
• appendChild(Node)
  • 인자로 전달한 노드를 마지막 자식 요소로 DOM 트리에 추가한다.
• removeChild(Node)
  • 인자로 전달한 노드를 DOM 트리에 제거한다.

출처: https://seokzin.tistory.com/entry/JavaScript-자주-사용하는-DOM-API-정

---

documentElement와 body

document를 HTML 구성요소로 본다면 크게 head와 body로 구성할 수 있다.

 

document.documentelement는 이러한 head, body를 둘러싼 최상위 HTML element(요소)를 반환

→ documentelemnt.childnodes는 이러한 최상위 HTML frame을 구성하는 자식 요소들을(head, body) 반환

 

document.body는 document의 body에 접근하여 body를 이루고 있는 elements(contents, components 등 모두 포함)에 대한 정보를 얻을 수 있다

 

출처: https://velog.io/@gyrbs22/개발지식-documentelement와-body

 

 

---

json-server 최근 버전에서 json의 id는 string만 지원한다

db.json에서 id를 number로 했더니 오류가 발생했다.

→ json-server의 최근 버전에서는 id를 string만 지원한다!!

 

출처: https://stackoverflow.com/questions/77798989/using-integers-for-ids-created-not-found-error-in-json-server