Object Language
Prototype-based Language Javascript
모든 객체들이 메서드와 속성들을 상속받기 위한 템플릿으로 프로토타입 객체 <Prototype>를 가진다는 의미입니다.
프로토타입 객체
person.valueof() 메소드는 호출된 객체의 값을 단순 반환합니다.
- 브라우저는 person 객체가 valueof 메소드를 가지고 있는지 체크 합니다.
- person의 프로타입 객체(person 생성자의 프로토타입)에 valueof메소드가 있는지 체크 합니다
- person() 생성자의 프로타입 객체(object 생성자의 프로토타입)가 valueOf 메소드를 가지고 있는지 체크 합니다.
프로토타입 속성
Object.prototype은 object를 상속받은 객체에서 사용 가능한 수많은 메소드들이 object의 prototype 속성에 정의되어 있음을 알 수 있습니다. javascript 전반에 걸쳐 프로토타입 체인 상속이 어떻게 구성되어 있는지 확인할 수 있습니다.
생성자 속성
모든 생성자 함수는 constructor속성을 지닌 객체를 프로토타입 객체로 가지고 있습니다. constructor 속성은 원본 생성자 함수 자신을 가리키고 있습니다.
constructor 속성에 괄호를 붙이고 실행하여 새 인스턴스를 생성하는 트릭이 있습니다. 이러한 방법은 명시적인 생성자 함수를 예측할 수 없는 상황에서 인스턴스를 생성하는 경우에 유용합니다.
프로토타입 수정
프로토타입에 메서드를 추가하면 해당 생성자로 생성된 모든 객체에서 사용이 가능합니다. 하지만 prototype에 속성을 정의하는 경우는 좋지 않은 방법입니다.
Inheritance in javascript
생성자 함수 정의
call함수의 첫 번째 매개변수는 다른 곳에 정의된 함수를 현재 콘텍스트에서 실행할 수 있도록 합니다. 실행하고자 하는 함수의 첫 번째 매개변수를 this로 전달하고, 나머지는 함수 실행에 필요한 인자들에 전달을 합니다.
- 매개변수가 없는 생성자 상속하기
- 상속하려는 생성자가 속성을 매개변수로 받지 않는다면, call() 매개변수에도 아무것도 전달할 필요가 없습니다 .call(this)를 하면 상위 객체의 속성을 상속 받습니다.
- 생성자 함수 내에서 인스턴스에 정의하는 유형으로, 직접 작성한 코드에서는 생성자 함수 내에 this.x =x 구문과 유사합니다.
- 생성자에서 직접 정의하는 유형. 생성자에서만 사용 가능합니다. object.key 같은 함수. 바로 호출 되는 유형.
- 인스턴스와 자식 클래스에 상속하기 위해 생성자의 프로토타입에 정의하는 유형. 생성자의 프로토타입 속성에 정의되는 모든 멤버를 의미 합니다.
ECMA5의 상속
class 문법으로 상속합니다. 하위 클래스를 만들려면 Javascript에서 extends 키워드를 통해서 상속받을 클래스를 명시합니다.
constructor()에서 첫 번째 super() 연산자를 정의하면, 코드를 조금 더 쉽게 이해 가능합니다.
이는 상위 클래스의 생성자를 호출하여, super() 매개변수를 통해 상위 클래스 멤버를 상속받습니다.
get/set 클래스에서 getter/setter를 추가하여, gatter는 현재 값 반환이고, setter는 그에 대응하는 값 변경을 합니다.
JSON
Javascript object notation(JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다
. json 확장자를 가진 단순 텍스트 파일 저장 가능하고, MIME타입은 application/json입니다
- json은 순수 데이터 포맷이며, 함수는 불가합니다.
- 문자열과 프로퍼티의 이름 작성시 "" 사용합니다.
- json 유효성 검사를 할수 있습니다.
객체와 문자 사이 변환
XHR 요청을 곧장 json 응답으로 변환합니다. 가끔 json 문자열을 받기도 하고, 그것을 우리 스스로가 객체로 변환시켜야 할 때도 생깁니다.
- parse() : json 문자열을 매개변수로서 수용하고, 일치하는 객체로서 변환
- stringfy() : 객체를 매개변수로 수용, json 문자열 형태로 변환
General aSynchronous programming concepts
웹앱이 브라우저에서 특정 코드를 실행하느라, 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있습니다. 이러한 현상을 Blocking이라고 부릅니다.
Blocking은 모두 수행한 후 뒤에 함수를 실행합니다. 즉, javascript는 기본적으로 single threaded 이기 때문입니다.
Threads
Thread는 기본적으로 순차적으로 작업을 수행하며, 한 번에 하나의 작업만 수행을 하게 됩니다. 이때 Main thread와 work thread가 동시에 수행되며, TaskA는 서버로부터 이미지를 가져오고, TaskB는 그 이미지를 필터를 적용하 작업이 수행된다고 가정 시에, Main Thread 수행 후 work thread에서 promise를 사용하여 Main thread를 잠시 대기시키고 위의 작업이 처리가 됩니다. 비동기 작업으로 진행되는 동안 Main thread가 차단되지는 않습니다.
Synchronous Javascript
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
alert('test');
let pElem = document.createElement('p');
pElem.textContent = "after click "
document.body.appendChild(pElem); // 버튼 클릭 이벤트 발생 후 실행이 됩니다. 순차적 방식으로
})
aSynchronous Javascript
수많은 API는 비동기 코드를 사용하여 실행되고 있습니다. 외부 디바이스에서 어떤 종류의 리소스에 액세스 하거나 가져오는 기능들이 많이 사용되고 있습니다. 네트워크에서 파일을 가져오거나, 데이터베이스에 접속해 특정 데이터를 가져오는 일, 웹캠에서 비디오 파일 액세스, 디스플레이, 헤드셋 브로드캐스팅 등이 있습니다
서버에서 이미지를 가져오면 네트워크 환경, 다운로드 속도 등의 영향을 받아 이미지를 즉시 확인할 수 없습니다.
let response = fetch('img.png');
response.blob(); // 이미지가 크면, 이부분이 에러가 나옵니다. respose가 제대로 작동하지 않습니다.
해결하는 방안은 이벤트 리스너 유형, 콜백 함수 유형 이 있습니다. callback함수를 다른 함수의 인수로 전달 할때, 함수의 참조를 인수로 전달할 뿐이지 즉시 실행되지 않고, 함수의 body에서 callback 됩니다. 정의된 함수는 때가 되면 callback함수를 실행하는 역할을 합니다.
displayImage() 함수는 Object URL로 전달되는 Blob를 받아서, URL이 나타내는 이미지를 만들어 Body에 그립니다. 중요한 포인트는 callback은 callback 함수로 넘어가기 전에, 리소스 다운로드를 완료하기 위해 XHR요청이 진행되는 동안 대기합니다.(onlaod 핸들러 사용)
Promises
Promises의 fetch() API입니다. fetch()는 XMLHttpRequest 보다 진화된 버전입니다.
let request = new XMLHttpRequest();
request.open('GET',url);
request.responseType='text';
request.onload = () =>{
poemDisplay.textContent = request.response;
}
request.send();
// fetch로 변경 하면, 아래와 같습니다. 상세한 내용은 나중에 다시 설명 하겠습니다.
fetch(url).then( (response)=> {
response.text().tehn( (text)=>{
poemDisplay.textContent = text;
})
})
fetch()는 단일 매개 변수만 전달받습니다. promise는 비동기 작업이 성공했는지 혹은 실패했는지를 나타내는 하나의 오브젝트입니다. promise라는 이름을 가진 이유는 "결과를 빨리 가지고 돌아갈게 약속해" 이런 표현 방식에서 나왔습니다.
- 두개의 then() 블럭 : 두 함수 모두 이전 작업이 성공했을때, 수행할 작업을 나타내는 callback 함수 입니다. then()을 연속적으로 사용하여, 연쇄적으로 사용할수 있습니다.
- catch()는 하나의 실패 동작이 발생하면 동작하게 됩니다. 오류 발생을 보고하는 용도로 사용할수 있습니다.
The Event Queue
promise와 같은 비동기 작업은 Event queue에 들어갑니다. 그리고 Main thread가 끝난 후 실행되어 후속으로 실행되는 Javascript 코드가 차단되는 것을 방지해줍니다.
promise와 callback
둘 다 유사합니다. promise는 이점이 있습니다
- 여러개의 비동기 작업을 수행하여, 넘겨 줄수 있습니다. then()을 이용합니다.
- promise는 callback에 비해 엄격한 Evnet queue 적용이 되며, 순서대로 호출 됩니다.
- Error처리가 더 간결합니다.