본문 바로가기
반응형

엘리11

드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (13편) async / await 1. Promise로 비동기 네트워크 호출 코드 만들기 function fetchUser() { // resolve나 reject를 호출하지 않으면 Promise가 pending 상태에 머무르게 된다. return new Promise((resolve, reject) => { // do network request in 10 secs.. resolve('ellie'); }); } // 동기적으로 처리하게 되면 네트워크와 통신하는 10초 동안 사용자는 빈 화면을 보게 된다. const user = fetchUser(); user.then(console.log); console.log(user); 2. async // async // 함수 앞에 async라는 키워드를 쓰면 자동으로 .. 2021. 11. 19.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (12편) Promise - 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있게 하는 Object - 정해진 기능을 성공적으로 처리하면 메세지와 함께 결과값을 반환, 처리하지 못하면 에러를 전달해줌 - 콜백함수 대신에 유용하게 쓰일 수 있음 파일을 읽어오거나, 네트워크 요청 하는 것들은 시간이 걸리는 작업이기 때문에 비동기로 처리하는 것이 좋음 만약, 동기적으로 처리하게 된다면 작업을 하는 동안 다음 코드가 실행되지 않는 번거로움이 발생하기 때문이다. Promise는 만드는 순간에 excuter 함수를 실행하기 때문에, 원하지 않을 때도 네트워크 통신이 일어날 수 있음을 유의해야 한다. 'use strict'; // Promise is a JavaScript object for asynchoronous op.. 2021. 11. 18.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (11편) 비동기 처리의 시작 콜백 이해하기 'use strict'; // JavaScript is synchronous : 자바스크립트는 동기적인 언어다. // Execute the cod block in order after hoisting. // hoisting: var, function declaration 은 맨 위로 선언됨 console.log('1'); setTimeout(() => console.log('2'), 1000); // 1000msc = 1초 console.log('3'); // Synchronous callback function printImmediately(print) { print(); } printImmediately(()=> console.log('hello')); // Asyn.. 2021. 11. 16.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (10편) JSON HTTP (Hypertext Transfer Protocol) - 웹사이트, 웹 어플리케이션과 같은 클라이언트가 어떻게 서버와 통신할 것인지 정해놓은 규약 - 클라이언트가 서버에게 데이터를 요청 (request), 서버는 클라이언트 요청에 맞게 응답(response) Hypertext - HyperLink, 문서, 이미지 파일 등을 포함한 것들을 말함 AJAX (Asynchronous JavaScript And XML) - 웹 페이지에서 동적으로 서버와 데이터를 주고 받을 수 있는 기능을 말함 - 대표적으로 XHR(XMLHttpRequest)라는 Object가 있음, 브라우저 오픈 API에서 제공하는 것들 중의 하나 - 최근에는 새로 추가된 fetch() API를 통해서 데이터를 쉽게 주고 받을.. 2021. 11. 16.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (9편) 강의 시작 전 Quiz 내 답안 // Q1. make a string out of an array const fruits = ['apple', 'banana', 'orange']; let toString = fruits.toString(); console.log(toString); // Q2. make an array out of a string const fruits2 = '🍎, 🥝, 🍌, 🍒'; let toArray = fruits2.split(', '); console.log(toArray); // Q3. make this array look like this: [5, 4, 3, 2, 1] const array = [1, 2, 3, 4, 5]; console.log(array.reverse()); .. 2021. 11. 15.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (8편) 배열에 관한 내용 간단한 개념 정리 - 비슷한 종류의 데이터를 묶어 놓는 것 = 자료구조 - Object : 서로 연관된 것들끼리 묶어 놓는 것 - 비슷한 타입의 Object들을 묶어 놓는 것을 자료구조라고 이해하면 된다. 배열을 정의하는 방법과 인덱스를 활용하는 법 // 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; // 2. Index position const fruits = ['apple', 'banana']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); // 배열의 인덱스에 해당하는 값을 출력한다. console.log(fruits[fruits.l.. 2021. 11. 15.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (7편) Object // Objects // one of the JavaScript's data types. // a collection of related data and/or functionality. // Nearly all objects in JavaScript are instances of Object // object = { key : value };, object는 key와 value의 집합체이다 // 1. Literals and properties // Object를 만드는 방법 const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person.. 2021. 11. 15.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (6편) 간단한 개념 정리 클래스 : 연관된 속성(fields), 메소드(methods)가 포함된 것을 말함 간혹 메소드가 없이 데이터만 들어 있는 클래스도 존재하는데 이를 데이터 클래스라고 말한다. 클래스의 내부적으로 보여주는 변수, 밖에서 보이는 변수를 구분 짓는 것을 '캡슐화(encapsulation)'라고 한다. 클래스를 이용해서 상속, 다형성이 일어날 수 있음. 이런 모든 것들을 말해서 객체지향이라고 한다. 클래스 (= 템플릿) - 한번만 선언할 수 있음 - 어떤 종류의 데이터만 들어올 수 있다라는 틀만 정의해 놓는다고 볼 수 있음 ex) 붕어빵 틀 오브젝트 - 클래스를 이용해서 새로운 인스턴스를 생성하면 오브젝트가 된다 - 오브젝트는 클래스를 이용해서 많이 만들 수 있다 - 클래스는 틀만 정의해놓은 것.. 2021. 11. 11.
드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (4편) 3편에 관한 보충 설명 (변수, 객체에 관해서) // Variable, rw(read/write) // Constant, r(read only) // primitive type : 메모리에 값이 그대로 저장됨 // object type : 객체를 가리키는 reference 값이 메모리에 저장됨 // Note! // Immutable data types : primitive types, frozen objects ( i.e. ojbect.freeze()) // Mutable data types : all object by default are mutable in JS // 기본적으로 JS의 모든 객체는 값이 변경될 수 있는 mutable data type으로 본다. Operators, Numeric Ope.. 2021. 11. 11.
반응형

티스토리툴바