JavaScript (33) 썸네일형 리스트형 Request-Response Model -Client(browser)와 Server(WEB) 사이에서 데이터가 전송되는 과정을 설명한다. -Request : 클라이언트에서 서버에 접근을 요청한다. -Response : 서버에서 클라이언트가 요청한 데이터(of web Page or from web API)를 회신한다. *HTTP & HTTPS : HyperText Transfer Protocol / HTTPS은 TLS or SSL를 사용하여 암호화한 HTTP이다. 1. DNS 조회를 통해 URL을 IP주소로 변환한다 -URL : (Protocol) + (Domain name) + (Resource) *Protocol : HTTP or HTTPS -IP : (Protocol) + (IP address) + (Port number) *Domain .. Event Loop -브라우저에서 자바스크립트 런타임은 크게 JavaScript Engine, WEB APIs, Callback Queue, Event Loop로 구성된다. *JavaScript Runtime : 자바스크립트 코드가 구동되는 모든 환경을 말함 -콜백 큐는 콜백된 함수가 콜백 순서에 따라 위치하는 공간이다. 쉽게 말해 콜백 대기열이다. -이벤트 루프는 콜백 큐의 콜백 함수를 Call stack으로 전달한다. 즉, 이벤트 루프가 콜백함수의 실행을 결정한다. -이벤트 루프는 비동기적 작업을 가능하게 해주는 핵심적인 기능이다. -Asynchronous tasks는 브라우저 background(web API environment)에서 작동한다. -예를 들어, 콜스택에서 이미지 로드 작업이 실행되었다고 가정해보자. -.. [JavaScript] Promise 개요 -비동기 프로그램은 백그라운드에서 실행된다. (웹 APIs 등) -비동기 작업 결과를 처리하기 위한 handler로 callback을 사용한다. -작업의 결과는 요청한 데이터이거나 에러의 발생이다. *Callback Error Handling Design : 콜백에 error, data 두 인자를 전달하고, 조건에 따라 전달되는 인자를 달리하여 콜백이 실행되도록 한다 const fs = require("fs"); const getDataFromFile = function (filePath, callback) { fs.readFile(filePath, "utf-8", (err, data) => { if (err) callback(err, null); else callback(null, data); }.. [JavaScript] Asynchronous process 1. Concurrency Model : -자바스크립트 엔진이 동시에 발생하는 여러 작업을 처리하는 방법을 설명한다. -먼저, 자바스크립트는 Single-threaded engine이기 때문에 한 번에 한 가지의 일만 수행할 수 있다. -작업이 처리되는 main thread에서 각 작업들은 앞선 작업이 끝나야만 다음 작업이 수행된다. -이런 속성을 가진 작업 방식을 Synchronous program이라 부른다. 그리고 이런 작업을 요청하는 코드를 Synchronous code라 한다. *동기화란 사전적 의미로 작업들 사이의 수행 시기를 맞추는 것을 말한다. *이전 작업의 종료 시점과 다음 작업의 시작 시점이 항상 동일하다. -대부분의 자바스크립트 코드는 synchronous code이다. -문제는 lo.. [JavaScript] OOP3(the 4 fundamental principles) -OOP BASIC CONCEPT 1. 추상화(Abstraction) -복잡한 구현 방법은 숨기고, 노출되는 부분을 단순화 한 것 -자세한 세부 정보(작동원리, 불필요한 모든 정보)는 생략하고, 사용되는 부분과 관련하여 중요한 특성만 강조하여 객체를 정의 -클래스 정의시, 프로퍼티와 메소드만 정의한 것을 인터페이스라고 부른다 -프로퍼티와 메소드의 이름만 노출시켜서 인터페이스를 단순화한다 -추상화를 통해 복잡성을 줄이고 사용성을 높일 수 있다 *구체화의 반댓말이다. 같은 일을 하는 코드에서 공통점을 모아 함수를 만드는 것이 추상화의 좋은 예라고 볼 수 있다. 2. 캡슐화(Encapsulation) -개체의 데이터(속성)와 데이터를 처리 및 표현하는 행동(메소드)을 하나의 단위로 묶어 관리하는 것을 말한다... [JavaScript] BOM 1. BOM(Browser Object Model) 이란? -브라우저 창과 페이지에 접근하고 조작할 수 있게 하는 인터페이스이다. -현재 브라우저에 표시된 페이지와 별개의 컨텍스트에서 브라우저와 상호작용할 수 있다. 브라우저 창을 새로 띄움 창을 움직이거나 크기를 조절하고 닫음 브라우저 상세 정보를 반환하는 navigator 객체 불러온 페이지의 상세 정보를 반환하는 location 객체 사용자 화면에 대한 상세 정보를 반환하는 screen 객체 사용자가 방문한 페이지 기록을 반환하는 history 객체 XMLHttpRequest [JavaScript] OOP2 1. Inheritance between classes -DOM 엘리먼트는 다음과 같은 prototype chain 갖는다. -이와 같이, 한 객체는 여러 class로 부터 상속을 받을 수 있다. 이때, class 간에는 위계, 즉 parent-child 관계를 가짐 -객체 하나가 한 번에 여러 프로토타입 상속을 받는 것이 아닌, 위 그림처럼 chain 구조의 위계가 있는 class들로부터 유산처럼 내려온다. -prototype chain을 완벽히 이해하고 직접 관리할 수 있어야 한다! " jieun(instance)-> Student(child class) -> Person(parent class) (-> window.Object)" 1-1. Constructor functions const Perso.. [JavaScript] this keyword this.~ -모든 EC에 생성되는 특별한 변수로 현재 EC를 가리킨다. -일반적으로 this 키워드가 사용되는 함수의 소유자를 취한다. -호출될 때 this에 value가 동적으로 할당되며(선언될 때가 아님!), 호출되는 방식에 따라 가리키는 대상이 다르다. 1. Regular function : this -> undefined (in 'strict mode') *otherwise : this -> 전역 실행컨텍스트에서 호출된 함수에서는 항상 window object(global scope)를 가리킴 2. Method : this -> 호출한 객체를 가리킨다. 이때, 메소드가 작성된(선언된) 객체가 아님에 주의할 것 3. Event listener function : this -> event hand.. 이전 1 2 3 4 5 다음
