자바스크립트에서 제공하는 비동기를 간편하게 처리 할 수 있도록 도와주는 객체 정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행이 되어지면 성공의 메세지와 함께 처리된 결과 값을 전달 합니다. 만약, 기능을 수행하다가 예상치 못한 문제가 발생하면 error 를 전달 합니다. 사용하는 이유 네트워크에서 데이터를 받아오거나 큰 데이터를 읽어오는 과정은 시간이 걸리는데 동기적으로 처리하면 앞선 일들을 처리하는 동안 다음 라인의 코드가 실행되지 않기 때문에 시간이 걸리는 일 들은 promise 를 통해 비동기적으로 사용하는 것이 좋습니다. promise 의 상태 promise는 state와 result 2가지 숨김 프로퍼티를 갖고 있습니다. result는 resolve(value)가 호출되면 value..
Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자 AJAX 란 자바스크립트를 통해서 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 입니다. Ajax 를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다 XMLHttpRequest API는 비동기 통신에 자주 사용되며, 최근에는 fetch API가 자주 사용됩니다. 비동기 통신 요청을 보낸 후 응답과는 상관없이 동작하는 방식 웹페이지를 리로드 하지 않고도 통신이 가능한 구조 AJAX 의 장점 상호작용성이 좋아집니다. 서버의 새로운 컨텐츠를 전체 페이지를 다시로드할 필요 없이 동..
내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리킵니다. 어휘적 환경(Lexical Environment) // (1) // one : 초기화 X, addOne : function let one; // (2) one : undefined, addOne : function one = 1; // (3) one : 1, addOne : function -> 전역 Lexical function addOne(num){ console.log(one + num); } addOne(5); // (4) 함수가 실행되는 순간 새로운 Lexical 환경이 만들어집니다. num : 5 (1) : 코드가 실행되면 스크립트 내에서 선언한 변수들이 Lexical 환경 에 올라갑니다. (4) 에서 함수가 넘겨받..
ES6 부터 추가 되었습니다. 정의 함수의 한 종류이며, 객체를 생성하기 위한 템플릿(틀) 입니다. 클래스 안에는 속성(field), 행동(method) 이 있습니다. class 는 객체의 데이터 와 이를 조작하는 메서드 를 하나로 추상화 합니다. 문법 class Person{ constructor(name, age){ // 속성 this.name = name; // 객체를 초기화 하기 위한 값 this.age = age; } // 행동 speak(){ console.log(`${this.name} : hello`) } } // object , 새로운 object를 만들 때 new 키워드를 사용 합니다. const hyunho = new Person('hyunho', 26) console.log(hyun..
필요한 재료들을 넣어주고 찍어내는 붕어빵 판과 같습니다. 문법 function User(name, age){ // 첫 글자는 대문자로 this.name = name; this.age = age; } let user1 = new User("Mike", 30); let user2 = new User("Jan", 17); let user3 = new User("Tom", 20); new 연산자를 사용하여 호출 사용하는 이유 객체 리터럴 { ... } 을 사용하면 객체를 쉽게 만들 수 있습니다. 하지만 일일이 객체를 만드는 것보다 훨씬 빠르고 일관성 있게 만들 수 있습니다. 동작 원리 function User(name, age){ // this = {}; -> 빈 객체가 임시적으로 만들어짐 // 새로운 프로퍼티..
먼저, 자바스크립트 엔진에 대해 알아야 합니다. 자바스크립트 엔진 자바스크립트 엔진 안에는 Memory Heap 과 Call Stack 로 나뉘어 있습니다. Memory Heap 데이터를 만들 때, 즉 변수를 선언해서 오브젝트를 할당하거나 문자 또는 숫자를 할당하게 되면 전부 메모리 힙에 저장 됩니다. 메모리 할당이 일어나는 곳 Call Stack 함수를 실행하는 순서에 따라서 차곡차곡 쌓아놓는 것 코드 실행에 따라 호출 스택이 쌓이는 곳 LIFO(Last In First Out) : 제일 나중에 들어온 것이 제일 처음으로 나갑니다. 런타임 환경 자바스크립트 언어 자체에는 멀티 스레딩이 없습니다. Process 운영체제 위에서 연속적으로 실행되고 있는 프로그램 독립적으로 메모리에서 실행 합니다. 각각의 ..
브라우저는 이벤트가 발생하면, capturing -> bubbling 순으로 이벤트를 감지 합니다. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 요소에게 전달되어 가는 특성을 의미합니다. 상위의 화면 요소란? HTML 요소는 기본적으로 트리 구조를 갖습니다.여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 하며 body 태그를 최상위 요소라고 부르겠습니다. const one = document.querySelector(".one"); const two = document.querySelector(".two"); const three = document.querySelector(".three"); one.ad..
함수 프로그램 안에서 각각의 작은 기능들을 수행하는 것 재사용이 가능 합니다. 하나의 함수는 한 가지의 일만 하도록 만드는 것이 좋습니다. 함수의 이름을 보고 함수의 기능을 알 수 있어야 합니다. // 기본형 function 함수명 (){ 코드 }; 함수명() // 호출 // 매개변수 function 함수명 (매개변수){ 코드 }; 함수명(매개변수) // 호출 콜백함수 ? 함수 안에 함수를 전달해서 상황에 맞게 함수를 부르는 것 즉, 파라미터(매개변수)로 함수를 전달하여 함수의 내부에서 실행되는 함수를 콜백함수라 합니다. const printYes = function () { console.log('yes') } const printNo = function print() { console.log('no'..
