진스

Promise 프로미스는 JS에서 제공하는 비동기 코드를 간편하게 처리할 수 있도록 도와주는 object 이다. 프로미스는 어떤 기능을 실행하고 나서 정상적으로 동작하면, 성공의 메세지와 함께 처리된 결과값을 전달해줌, 그러나 기능을 수행하다 예상치 못한 문제가 발생하면 error를 전달해 준다. State: pending(보류) → fulfilled(이행) or rejected(거부) Produce vs Consumer 1. Producer (생산자) 새 Promise가 생성되면 executor라는 콜백함수가 자동으로 실행됩니다. (코딩 할 때 조심!!) const promise = new Promise((resolve, reject) => { // 시간이 오래 걸리는 무거운 처리 (network, r..

1. 동기와 비동기 Javascript는 synchronous(동기적)이다 hoisting이 된 이후부터, 코드가 작성한 순서대로 실행됨 hoisting: var, function 선언 들이 코드 맨 위로 자동으로 올라가는 것 console.log(`1`); setTimeout(() => console.log(`2`), 1000); console.log(`3`); // Synchronous(동기식) callback function printImmediately(print) { print(); } printImmediately(() => console.log(`hello`)); // Asynchronous(비동기식) callback function printWithDelay(print, timeout) {..

HTTP (HyperText Transfer Protocol) 하이퍼텍스트 전송 프로토콜 하이퍼텍스트는 웹사이트에서 이용되어지는 Rink들만 얘기하는 것이 아니라 모든 리소스(문서, 이미지 파일 등)를 포함한다 브라우저 위에서 동작하고 있는 웹사이트나 웹APP 같은 Client들이 어떻게 Server와 통신할수 있는지를 정의 한 것을 HTTP라 한다 HTTP를 이용해서 Sever에서 Data를 요청해서 받아올 수 있는 방법으로는 AJAX라는 것이 있다. AJAX (Asynchronous Javascript And XML) 비동기 Javascript, XML 웹페이지에서 동적으로 Sever에게 Data를 주고 받을 수 있는 기술을 의미 대표적인 브라우저 API로는 XMLHttpRequest, fetch 가..

퀴즈 타임 Q1. 배열에서 문자열 만들기 Array.prototype.join() const fruits1 = ['apple', 'banana', 'orange']; { // My let result = ``; fruits1.forEach((item, index) => { result += item; if (index apple, banana, orange } { // Solution const result = fruits1.join(`, `); console.log(result); // > apple, banana, orange } Q2. 문자열로 배열 만들기 String.prototy..

자료구조 비슷한 타입의 데이터(object)들을 묶어서 한곳에 보관해 놓는 것 대부분의 프로그래밍 언어들은 동일한 타입의 object만 담을 수 있는데 JS는 동적타입언어라 이것저것 담을 수 있음, 그러나 동일한 타입만 담는 것을 규칙으로함. 어떤 방식/형식으로 데이터를 담냐에 따라서 굉장히 많은 타입이 존재 객체는 서로 연관된 특징과 행동들을 묶어 놓은것들을 의미함 (자료구조와 다름) 삽입, 검색, 정렬, 삭제를 고려해서 자료구조중 가장 효율적인 것을 사용하는것이 중요 자료구조중 하나가 배열이다. 1. Declaration (선언) const arr1 = new Array(); const arr2 = [1, 2]; 2. Index position (인덱스 위치) const fruits = [`🍎`, `..

Objects JS의 데이터 타입 중 하나 관련 데이터/함수 집합체 JS의 거의 모든 객체는 Object의 인스턴스 입니다 객체 는 key와 value의 집합체 (object = { key : value };) 하나의 properties는 key:vlaue로 구성됨 1. Literals and properties const obj1 = {}; // 'obect literal' 문법 const obj2 = new Object(); // 'object constructor' 문법 function print(person) { console.log(person.name); console.log(person.age); } const ellie = { name: `ellie`, age: 4 }; print(elli..

class class는 object(인스턴스)를 만들 수 있는 틀이다 class 자체에는 data가 들어있지 않음 틀(template)을 정의해서 한 번만 선언 한다 class는 정의만 한 것이라서 실재 메모리에 올라가지 않음 object class를 이용해서 data를 넣어서 만드는 것이 object다 class를 이용해서 새로운 instance를 생성하면 그게 바로 object가 되는 것 object는 class를 이용해서 무수히 많이 만들 수 있다 class를 이용해 만든 object는 실재 메모리에 올라간다 ES6에 도입 prototype-based 기반으로 그 위에 문법만 class가 추가됨 (문법적 설탕) Object-oriented programming (객체 지향 프로그래밍) class: ..

Function 프로그램의 기본 구성 요소. 서브 프로그램(=== function)은 여러 번 사용할 수 있습니다. 작업을 수행하거나 값을 계산합니다. 프로그램은 여러개의 function들로 구성되어 있는데 function 하나 하나를 sub-program이라고도 부름 함수는 입력 → 연산 → 출력 의 과정임. 1. Function declaration (함수 선언) 기본 형태: function name(param1, param2) { body... return; } 하나의 function에는 하나의 기능만 네이밍: 명령어, 동사 형태 e.g. createCardAndPoint → createCard, createPoint function is object in JS (JS에서 function은 객체임)..