language/javascript
Promise 개념부터 활용까지
❓ Promise - js에서 제공하며, 비동기를 간편하게 처리할 수 있도록 도와주는 object - 정해진 기능 수행 후 성공 시 성공 메시지와 결과값 전달 - 기능 수행 시 문제 발생 시 에러 전달 - 비동기적인 것을 수행하기 위해 Callback함수 대신에 유용하게 사용 가능 ❗ Point - 1. State: process가 heavy한 operation을 수행 중인지, 기능 수행을 성공/실패 했는지 - 2. Producer(정보제공자) / Consumer(정보사용자)의 차이점 Promise는 class ➡ new 키워드를 통해 생성할 수 있다. 생성자: executor라는 콜백함수 전달 executor 안에서는 다시 resolve와 reject 콜백함수 전달 resolve: 기능 정상 수행 후 ..
→2021.11.30
language/javascript
비동기 처리의 시작, 콜백 이해하기
1. 동기와 비동기 1-1. synchronous javascript는 synchronous(동기적)이다. hoisting이 된 이후부터, 코드가 작성한 순서에 맞춰서 하나씩 동기적으로 실행된다. hoisting: var, function 선언들이 자동적으로 최상단으로 올라가는 것 정해진 순서에 맞게 코드가 실행되는 것 console.log('1'); console.log('2'); console.log('3'); 1-2. asynchronous 언제 코드가 실행될지 예측할 수 없는 것 setTimeout은 브라우저 API이므로, 브라우저에게 요청을 보내게 된다. 응답을 기다리지 않고 바로 console.log('3')으로 넘어가게 된다. console.log('1'); setTimeout(functio..
→2021.11.30
language/javascript
JSON 개념정리
- HTTP Client와 Server가 어떻게 Hypertext를 주고받으며 통신할 수 있는지 정의한 것 Client가 data request, Server는 적절한 response 전송 - AJAX (Asynchronous JavaScript And XML) HTTP를 이용해서 Server로부터 data 받아올 때 사용하는 방법 웹페이지에서 동적으로 Server와 data 주고받을 수 있는 기술 ex) XHR (XMLHttpRequest), fetch() API - XML Mark up 언어 중 하나 HTML과 같이 data를 표현할 수 있는 한 가지 방법 불필요한 태그들이 많이 들어가서 파일 크기가 커지고, 가독성이 나빠진다. - JSON (JavaScript Object Notation) { ke..
→2021.11.26
language/javascript
유용한 10가지 배열 함수들
// Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(' '); console.log(result); } // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; const result = fruits.split(', '); console.log(result); } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array = [1, 2, 3, 4, 5]; const result = array.reverse(); console.log..
→2021.11.26
language/javascript
배열 개념과 APIs
Object - 서로 연관된 특징과 행동들을 묶어놓는 것 자료구조 - 비슷한 type의 object들을 묶어놓는 것(dynamically typed language) - 다른 언어의 경우에는 동일한 type의 object만을 묶을 수 있다. 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; 2. Index position const fruits = ['🍎', '🍌']; console.log(fruits); // ['🍎', '🍌'] console.log(fruits.length); // 2 console.log(fruits[0]); // 🍎 console.log(fruits[1]); // 🍌 console.log(fruits[2]); // und..
→2021.11.25
language/javascript
Object
1. Literals and properties const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person) { console.log(person.name); console.log(person.age); } const ellie = { name: 'ellie', age: 4 }; print(ellie); // js는 object를 정의한 후에도 property 추가 가능 ellie.hasJob = true; console.log(ellie.hasJob); // true // property 삭제 또한 가능 delete ellie.hasJob; ..
→2021.11.25
language/javascript
클래스와 오브젝트의 차이점
class - 연관있는 data들을 한곳에 묶어놓는 컨테이너 - 속성(fields), 행동(methods) - data class: 관련있는 data(field)만 정의된 클래스 - 캡슐화: 클래스 내에서 내부적으로 보여지는 변수, 외부에서 보여지는 변수를 나눔 - 상속과 다형성 1. Class 붕어빵을 만들 수 있는 틀 template(틀)만 정의, 실제 data는 들어있지 않다. 한 번만 선언한다. 2. Object 클래스를 이용해서 실제 data를 넣어서 만드는 것 클래스를 이용해서 생성된 새로운 instance 여러 번 생성될 수 있다. 3. javascript의 class ES6에 도입되었다 기존의 prototype을 기반으로 문법만 추가되었다. (syntactical sugar) 4. Clas..
→2021.11.25
language/javascript
Function
1. Function - 재사용이 가능하다. - 한 가지의 task를 수행하거나 value를 계산하기 위해 사용된다. - object의 일종이다. 1-1. Function declaration function name(param1, param2) { body... return; } 2. Parameters premitive parameters: 메모리에 value가 그대로 저장, value가 전달 object parameters: 메모리에 reference가 저장, reference가 전달 3. Default parameters (added in ES6) function showMessage(message, from = 'unknown') { // from이 undefined일 때, default 값 명..
→2021.11.25

• 이전
• 1
• ···
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• ···
• 13
• 다음