nata_developer

1.document.createElement() HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 HTMLUnknownElement를 대신 반환합니다. 참고-https://developer.mozilla.org/ko/docs/Web/API/Document/createElement Document.createElement() HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 HTMLUnknownElement를 대신 반환합니다. developer.mozilla.org 2.docu..

JavaScript 2020. 8. 7. 17:40

*인프런의 프론트엔드 개발자를 위한 웹팩(캡틴판교)를 참고하였습니다. 1.WEBPACK이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 1-1)왜 WEBPACK을 사용하려 할까? 파일 안의 변수 등이 충돌할 수 있기 때문에 파일 단위로 변수를 관리하고 싶은 욕구를 충족하고자 WEBPACK이 등장하였다. 1-2)WEBPACK으로 해결하고자 하는 문제 자바스크립트 변수 유효 범위 브라우저별 HTTP 요청 숫자의 제약 사용하지 않는 코드의 관리 Dynam..

JavaScript Library 2020. 8. 7. 17:30

*Udemy의 The Complete JavaScript Course 2020: Build Real Projects! 참고 1.PROMISE const getIDs = new Promise((resolve, reject) => { setTimeout(() => { resolve([523, 883, 432, 974]); }, 1500); }); const getRecipe = (recID) => { return new Promise((resolve, reject) => { setTimeout( (ID) => { const recipe = { title: "Fresh tomato pasta", publisher: "Jonas" }; resolve(`${ID}: ${recipe.title}`); }, 1500..

JavaScript 2020. 8. 7. 17:09

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고 1.비동기 프로그래밍 맛보기 const second = () => { setTimeout(() => { console.log("Async Hey there"); }, 2000); }; const first = () => { console.log("Hey there"); second(); console.log("The end"); }; first(); /* Hey there The end Async Hey there */ console.log(Hey there) 뒤에 sencond()가 있음에도 세번째 console.log인 The end가 먼저 출력되었다. setTimeout이 web..

JavaScript 2020. 8. 7. 15:50

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고 1.CLASS //ES5 var Person5 = function(name, yearOfBirth, job) { this.name = name; this.yearOfBirth = yearOfBirth; this.job = job; } Person5.prototype.calculateAge = function() { var age = new Date().getFullYear - this.yearOfBirth; console.log(age); } var john5 = new Person5('John', 1990, 'teacher'); //ES6 class Person6 { construc..

JavaScript 2020. 8. 7. 15:17

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고 1.SPREAD OPERATOR function addFourAges (a, b, c, d) { return a + b + c + d; } var sum1 = addFourAges(18, 30, 12, 21); console.log(sum1); //ES5 var ages = [18, 30, 12, 21]; var sum2 = addFourAges.apply(null, ages); console.log(sum2); //ES6 const sum3 = addFourAges(...ages); console.log(sum3); const familySmith = ['John', 'Jane', ..

JavaScript 2020. 8. 7. 14:54

1.ARROW FUNCTION const years = [1990, 1965, 1982, 1937]; // ES5 var ages5 = years.map(function(el) { return 2016 - el; }); console.log(ages5); // ES6 let ages6 = years.map(el => 2016 - el); console.log(ages6); ages6 = years.map((el, index) => `Age element ${index + 1}: ${2016 - el}.`); console.log(ages6); ages6 = years.map((el, index) => { const now = new Date().getFullYear(); const age = now - ..

JavaScript 2020. 8. 7. 14:10

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고 1.LET, CONST // ES5 var name5 = 'Jane Smith'; var age5 = 23; name5 = 'Jane Miller'; console.log(name5); // ES6 const name6 = 'Jane Smith'; let age6 = 23; name6 = 'Jane Miller'; console.log(name6); // LET function varTest() { var x = 1; if (true) { var x = 2; // 상위 블록과 같은 변수! console.log(x); // 2 } console.log(x); // 2 } function..

JavaScript 2020. 8. 7. 12:54