코딩하는 등산가

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

자바스크립트 기초 강의(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); ..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 프로그래밍에서 가장 중요한 것은? 입력 & 연산 & 출력 1. let let name = 'ellie'; console.log(name); name = 'hello'; console.log(name); let이라는 키워드를 이용해서 name을 만들면 포인터 형식으로 데이터를 가리킵니다. ellie에서 hello로 변경됨 블록 안에서 만들어진 변수는 블록 밖에서 접근할 수 없습니다. 블록 밖에서 만들어진 변수는 블록 안, 밖에서 접근할 수 있습니다. // 1. Use strict //added in ES5 //use this for Valia ..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 1. Hello 콘솔 출력 main.js 작성 결과 출력 index.html 작성 Live Server 실행 및 확인 js파일을 head에 넣는 경우 - js 파일을 헤드에 넣는 경우 js가 큰 경우에는 느려질 수 있습니다. js파일을 body에 넣는 경우 - 사용자가 페이지를 보기 전에 fetching 과 실행 시간을 기다려야 합니다. js파일을 head + async를 설정하는 경우 - 다운로드 받는 시간을 절약할 수 있습니다. - But, 조작 시점이 HTML이 정의되어 있지 않으면 위험합니다. js파일을 head + async를 설정하..