코딩하는 등산가

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. async & await Promise를 좀 더 간편하고, 간결하고, 또한 동기적으로 실행되는 것처럼 보이게 해줍니다. 1. async - Promise를 사용한 경우 function fetchUser() { return new Promise((resolve, reject) => { 'ellie'; }); } const user = fetchUser(); user.then(console.log); console.log(user); - resolve와 reject를 사용하지 않았기 때문에 pending 상태에 then으로 받지도 않았기 때문에, ..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 프로미스(Promise) 자바스크립트에서 비동기를 간편하게 처리해주는 오브젝트입니다. - 자바스크립트에서 콜백함수 대신에 비동기적으로 사용할 때, 유용하게 쓸수 있는 오브젝트입니다. - state 프로세스가 기능을 수행하고 있는 중인지, 기능 수행이 성공했는지, 실패했는지를 이해하는 것이 중요함 - Producer Vs Consumer 필요한 데이터를 제공하는 것과 제공된 데이터를 쓰는 것에 대해서 차이점을 잘 이해해야 합니다. 1. Promise 만들기 새로운 Promise를 만들었을 때, executor 이 자동적으로 실행됩니다. - Pro..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 비동기 처리 및 콜백에 대한 이해 1. 동기와 비동기 - hoisting(호이스팅)은 함수 또는 var를 어디에 선언을 하든, 맨 위로 올라가는 것을 말합니다. console.log('1'); setTimeout(() => console.log('2'), 1000); console.log('3'); - 출력이 되는 순서는 setTimeout(() => console.log('2'), 1000); - 이 함수의 경우 브라우저에 보냈다가 1초 후에 콜백함수를 실행해달라고 하면 실행이 됩니다. setTimeout(() => console.log('2..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. JSON HTTP -> HyperText Transfer protocol의 약자로 서로 주고 받을지를 규약 한 프로토콜 - XMLHttpRequest 브라우저 api에서 제공하는 오브젝트중 하나로, 간단하게 서버에 데이터 요청 및 응답받을 수 있습니다. - fetch() API fetch() API를 통해서도 데이터를 주고받을 수 있습니다. 요즘에는 XML을 가독성 및 사이즈 크기 때문에 잘 사용되지 않고, JSON을 많이 사용합니다. - 데이터를 주고 받을 때, 가장 간단하게 쓰는 파일 포맷 - 텍스트를 기반으로 가볍다. - 쉽게 보기 편함 ..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 유용한 9가지 배열 함수들 1. Join { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(','); console.log(result); } - Join은 배열에 있는 모든 value를 더해서 string으로 반환해주는 것입니다. - 값을 중간자로 받아서 넣어주면, 배열 사이 사이에 구분자를 넣어주게 됩니다. { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(', and');..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 비슷한 종류의 데이터들을 묶어서 한데에 보관하는 것을 자료구조라고 합니다. 자료구조에 대해서 검색, 삽입, 정렬, 삭제에 대해서 공부를 해두면 좋습니다. 배열의 경우는 인덱스로 접근이 가능하기 때문에 삽입과 삭제가 편합니다. 배열 배열의 정의 const arr1 = new Array(); const arr2 = [1, 2]; - 배열을 만들 때는 위와 같이 2가지로 만들어 주면 됩니다. 배열의 인덱스 const fruits = ['apple', 'banana']; console.log(fruits); console.log(fruits.leng..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 오브젝트(Object) 오브젝트는 자바스스크립트의 데이터 타입중 하나입니다. 1. 오브젝트 생성 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); // with JavaScrip..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 클래스 클래스는 연관있는 데이터를 묶어놓는 컨테이너같은 역활을 합니다. 클래스에서도 안에서 볼 수 있는 변수와 밖에서만 볼 수 있는 변수를 나눠놓습니다. 이런것들을 캡슐화라고 합니다. 클래스를 이용해서 상속과 다형성이 일어날 수 있는데, 이 모든 것이 가능한 것은 객체지향이라고 합니다. - template - declare once - no data in - 붕어빵 만드는 기계 오브젝트 - 클래스로 실제 데이터를 넣어서 만드는 것 - instance of a class - created many times - data in - 팥 붕어빵, 크..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 함수 함수는 프로그래밍에서 중요한 역활을 합니다. 때로는 sub program이라고 불리기도 합니다. - 프로그램을 구성하는 기번 빌딩 블록 - 재사용이 가능함 - 한가지 일 또는 계산을 진행함 1. 함수 정의(Function declaration) // function name(param1, param2) { body... return; } // one function === one thing // naming: doSomething, command, verb // e.g. createCardAndPoint -> createCard, cre..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. Operator 1. String concatenation(문자열 합치기) // 1. String concatenation console.log('my' + ' cat'); console.log('1' + 2); console.log(`string literals: 1+2=${1 + 2}`); - 앞서 말했듯 `` 백틱을 이용하면 좀 더 편하게 출력을 할 수 있습니다. 2. Numeric operators(숫자 연산) //2. Numeric operators console.log(1 + 1); // 더하기 console.log(1 - 1); ..