엘리스AI트랙56 [4주차] Promise 2월 9일 자 학습 내용 정리입니다. ✅ Promise Promise는 비동기 작업을 표현하는 자바스크립트의 객체로 비동기 작업의 진행(pending), 성공(fulfilled, resolved), 실패(rejected) 상태를 표현한다. 즉, 비동기 처리의 순서를 표현할 수 있다. let error = false; const promise = new Promise((resolve, reject) => { if(!error) resolve("success"); else reject("error"); }); Promise의 생성자는 new Promise(callback)이며 callback 함수는 resolve와 reject의 두 가지 인자를 받는다. Promise가 성공하면 resolve를 호출하고 실패.. 2022. 2. 9. [4주차] 자바스크립트 제어 흐름 2월 9일 자 학습 내용 정리입니다. ✅ 자바스크립트의 제어 흐름 자바스크립트는 다른 멀티 스레드 프로그래밍 언어(ex. JAVA, c++)와는 다른 방식으로 비동기 동작을 처리한다. 자바스크립트 엔진은 하나의 메인 스레드로 구성되어 있는데 메인 스레드는 코드를 읽어 한줄씩 실행한다. 그리고 브라우저 환경에서 유저 이벤트를 처리하고 화면에 그리는 역할을 담당한다. setTimeout(() => { console.log("Hello World"); }, 1000); 동일한 setTimeout 구문에 대해서 자바와 자바스크립트를 비교해보자면 다음과 같다. 자바스크립트의 경우 setTimeout 구문을 만나면 비동기 API가 작동해 함수를 큐에 저장한다. 이 큐는 자바스크립트 엔진 위가 아닌 별도의 환경에서 .. 2022. 2. 9. [3주차] 자바스크립트의 내장객체 1월 29일 자 학습 내용 정리입니다. ✅ 자바스크립트의 내장객체 자바스크립트는 여러 용도에 활용하는 객체를 내장하고 있다. ✔️ globalThis 전역 객체를 지칭하는 변수이다. 전역 객체는 환경에 따라 다른데 브라우저 환경은 window, node 환경은 global 객체를 지칭한다. globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리키게 한다. ✔️ window DOM document를 포함하는 창을 나타내는 객체이다. 전역 스코프에 선언된 변수는 모두 window 객체의 프로퍼티가 된다. window 객체를 통해 현재 창의 정보를 얻거나 조작할 수 있다. (참조 https://cansweep.tistory.com/310) ✔️ document 브라우저에 로드된.. 2022. 1. 30. [3주차] 자바스크립트 엔진과 Hoisting 1월 29일 자 학습 내용 정리입니다. ✅ 자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램이다. 작성한 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱되고 실행된다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 생성한다. 실행 컨텍스트는 두 단계를 통해 생성되는데 바로 생성 단계와 실행 단계이다. 생성 단계에서는 엔진이 변수 선언을 읽고 실행 단계에서는 엔진이 변수 값을 할당한다. ✔️ 생성 단계 자바스크립트 엔진은 생성 단계에서 함수 선언문, 함수 표현식, 변수 등을 읽어 실행 컨텍스트에 저장한다. 함수 선언문의 경우 함수 명과 함수 전체가 저장되지만 함수 선언문 외의 변수의 경우 값이 저장되지는 않고 실행 컨텍스트의 렉시컬 환경을 구성한다. 함수의 렉시컬 .. 2022. 1. 29. [3주차] this와 Rest, Spread 연산자 1월 28일 자 학습 내용 정리입니다. ✅ this가 가리키는 것 ✔️ Dynamic binding 자바스크립트에서 함수가 호출되는 상황은 4가지로 나눌 수 있다. 함수 호출 : 함수를 직접 호출. 메서드 호출 : 객체의 메서드를 호출. 생성자 호출 : 생성자 함수를 호출. 간접 호출 : call, apply 등의 function 객체의 메서드로 함수를 간접 호출. 이 외에도 콜백함수의 호출이 있다. 콜백함수는 특정 동작 이후 불려지는 함수인데 보통 다른 함수의 인자로 보내지는 함수를 의미한다. (callback 참조=> https://cansweep.tistory.com/260?category=995363 ) 함수의 호출 환경에 따라 this는 동적으로 세팅된다. 이렇게 this가 환경에 따라 바뀌는 .. 2022. 1. 28. [3주차] 실행 컨텍스트와 클로저 1월 28일 자 학습 내용 정리입니다. ✅ 자바스크립트에서 함수가 실행되는 과정 ✔️ 어떤 코드도 없이 실행되는 경우 자바스크립트 엔진은 어떤 코드도 없이 실행되는 경우에 대해서도 this, 변수들(Variable Object), Scope Chain을 초기화한다. 즉, 실행 환경을 초기화하는 것이다. 이처럼 빈 코드를 실행했을 때 초기화는 다음과 같이 진행된다. this : window Variables : {} Scope Chain : [] Scope는 코드가 현재 실행되는 환경, 맥락을 의미한다. 따라서 Variables와 Scope Chain은 가리킬 것이 없으니 빈 객체와 배열로 초기화 되었지만 this는 window 객체를 가리킨다. this는 코드가 실행되는 시점에 환경이 가리키는 객체를 의.. 2022. 1. 28. [3주차] DOM과 이벤트 1월 26일 자 학습 내용 정리입니다. ✅ DOM 문서 객체 모델(DOM, Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 방식이다. DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스이며 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다. DOM은 트리구조로 이루어져 있다. DOM은 세 가지로 나눌 수 있다. Core DOM : 모든 문서 타입을 위한 DOM HTML DOM : HTML 문서를 조작하고 접근하는 표준화된 방법. 모든 HTML 요소는 HTML DOM을 통해 접근 가능. XML DOM : XML 문서에 접근하고 다루는 표준화된 방법. 모든 XML 요소는 XML DOM을 통해 접근 가능. Documen.. 2022. 1. 26. [2주차] JavaScript의 조건문과 반복문 1월 20일 자 학습 내용 정리입니다. ✅ 조건문 조건문이란 주어진 조건에 따라 결괏값을 출력하는 구문이다. 조건으로는 비교 연산자 또는 논리 연산자를 사용한다. if문 if(조건) { ... } if문에 주어진 조건이 참이라면 중괄호 안의 코드를 실행한다. 코드가 한 줄로 간단한 형식이라면 중괄호를 생략하고 작성해도 된다. if ... else문 if(조건) { ... } else { ... } if문의 조건이 참이라면 if문의 코드를 실행하고 if문의 조건이 거짓이라면 else문의 코드를 실행한다. if ... else if ... else문 if (조건) { ... } else if (조건) { ... } else { ... } 여러 개의 조건 분기를 생성할 때 사용한다. if문이 거짓이라면 다음 .. 2022. 1. 20. [2주차] JavaScript의 연산자 1월 20일 자 학습 내용 정리입니다. ✅ 산술 연산자 산술 연산자는 두 개 이상의 값을 피연산자로 받아 하나의 값을 반환한다. 표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)가 있으며 JS는 표준 산술 연산자 외에도 나머지(%), 거듭제곱(**) 등을 제공한다. 숫자에 적용 var a = 10, b = 2; console.log(a+b); console.log(a-b); console.log(a*b); console.log(a/b); console.log(a%b); console.log(a**b); // output // 12 // 8 // 20 // 5 // 0 // 100 기본적으로 숫자에 산술 연산자를 사용한 경우 해당 연산자로 계산한 값이 반환된다. 사칙연산(+, -, .. 2022. 1. 20. 이전 1 2 3 4 5 6 7 다음
