roqkf

비동기 쉽게 이해하기 커피숍에서 커피를 주문하려고 줄을 선다고 했을 때, 먼저 온 A가 주문해서 커피를 받을 때까지 B는 주문조차 할 수 없다고 하면 우리는 이를 blocking이라고 부른다. => 하나의 작업이 끝날 때까지 이어이지는 작업을 막는다! [B는 A가 커피를 받는 시점과 B가 주문을 시작하는 시점이 같다] => 이와 같은 상황을 "동기적"이다라고 한다. callback review 다른 함수(A)의 전달인자로 넘겨주는 함수 parameter를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행할 수도, 아니면 나중에 실행할 수도 있다 function B(){ console.log('called at the back!'); } function A(callback){ cal..

prototype 최소 하나 이상의 다른 객체로부터 상속받으며, 상속되는 정보를 제공하는 객체 자바스크립트의 모든 객체는 프로토타입이란 객체를 가지고 있다. 모든 객체들은 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다. prototype 객체 자바스크립트의 모든 객체들은 자신의 부모 역할을 하는 객체와 연결이 되어 있다. 여기서 부모 역할을 하는 객체가 프로토타입 객체 or 프로토타입이라고 한다! prototype 프로퍼티 함수 객체만 가지고 있는 프로퍼티 함수 객체가 생성자로 사용될 때, 이 함수를 통해서 부모 역할을 하는 객체(프로토타입)을 가리킴 proto 프로퍼티 함수를 포함해서 모든 객체가 가지는 인터널 슬록 객체 입장에서는 자신의 부모 역할을 하는 prototype 객체를 가리킴 pr..

절차적 언어와 객체 지향 언어 절차적 언어: 초기의 프로그래밍 언어들 (C, 포트란 등), 순차적인 명령의 조합 - 절차 지향: 프로그램이 기능 중심, "무엇을 어떤 절차로 할 것인가" 객체 지향 언어: "클래스"라고 부르는 데이터 모델의 청사진을 사용해서 코드 작성(Java, C++, C# 등) - 객체 지향: 기능이 아닌 객체가 중심, "누가 어떤 일을 할 것인가" OOP 프로그램 설계 철학 모든 것은 로 그룹화 4가지 주요 개념(캡슐화, 상속, 추상화, 다형성) OOP 4가지 주요 개념 1. Encapsulation (캡슐화) - 데이터와 기능을 하나의 단위로 묶는 것 - 은닉: 구현은 숨기고, 동작은 노출 - 느슨한 결합에 유리함: 언제든지 구현을 수정 가능 - 코드나 데이터의 은닉에 포커스가 맞..

객체 지향 프로그래밍 프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지 정의해 객체들 간의 상호작용을 통해 프로그램을 만드는 것 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴 - 객체: 실생활에서 쓰는 모든 것 하나의 모델이 되는 청사진을 만들고, 👉 "class" 그 청사진을 바탕으로 한 객체를 만드는 👉 "instance" 프로그래밍 패턴 👉 객체 지향 프로그래밍 class 정의하기! ES5 VS ES6 function Car(brand, name, color){ // 인스..

일급 객체 대표적인 일급 객체 중 하나는 함수! 변수에 할당할 수 있다 다른 함수의 전달인자로 전달될 수 있다 다른 함수의 결과로서 리턴될 수 있다 함수를 변수에 할당할 수 있다(함수를 배열의 요소, 객체의 값으로 저장할 수 있다!) 1. 변수에 함수를 할당하는 경우 const square = function(num){ // 변수 square에 함수 할당 return num * num } let output = square(5) // 함수가 할당된 변수 square를 통해 호출 console.log(output) // 25 고차 함수 함수를 전달인자로 받을 수 있고, 함수를 리턴하는 함수 콜백 함수: 다른 함수의 전달인자로 전달되는 함수, 어떤 작업이 완료됐을 때 호출하는 경우가 많아 답신 전화를 뜻하는..

DOM(Document Object Model)이란? HTML 요소를 Object처럼 조작할 수 있는 Model HTML의 아주 작은 부분까지 접근할 수 있는 구조를 DOM이라고 한다. DOM을 이용하면 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다. document 객체에 구현돼 있다. DOM은 '트리 구조'다! (부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복) HTML에 JavaScript를 적용하는 방법 - HTML 파일과 같은 디렉토리에 존재하는 index.js를 불러온다. 웹 브라우저가 작성된 코드를 해석하는 과정에서 요소를 만나면 HTML 해석을 잠시 멈추고 요소를 먼저 실행한다! 등장과 함께 실행된다는 점! 요소를 추가하는 방법 요소에 추가 가 끝나기 전에 추가 D..