단순 / async / defer 로드 DOCTYPE html> 제대로 파는 자바스크립트 // 단순로드 //async //defer 변경 전... 단순/async 방식은 html 이 로드 되기 전 실행 될 수도 있기에 에러가 날 수 있다. defer방식 사용할 것 DOCTYPE html> 제대로 파는 자바스크립트 console.log('모듈은 defer 방식으로 로드됩니다.'); 모듈로서 로드할 파일에는 type="module" 속성을 넣어줌 ⭐ 모듈은 자동으로 defer로 로드됨 ⭐ 실행코드가 들어있는 파일만 로드하면 됨

기초지만. 중요한 개념. 당연히 알고 있지만, 일급객체의 특성을 말해보라 하면 말하지 못하는 나를 위해 메모.

// 차이 1. 클래스는 호이스팅되지 않음 (정확히는 되지만...) const chain1 = new YalcoChicken('판교', 3); class YalcoChicken { constructor (name, no) { this.name = name; this.no = no; } introduce () { return `안녕하세요, ${this.no}호 ${this.name}점입니다!`; } } // 차이 2. 클래스는 new 없이 사용하면 오류 // (생성자 함수는 오류 없이 undefined 반환) const chain2 = YalcoChicken('강남', 17); 이 외에도 차이들이 있음 - 클래스에는 이후 배울 엄격 모드 적용 3.프로토타입 관련 💡 생성자 함수에 넣은 함수의 차이 - 프로..

생성자 함수의 필요성 // 얄코치킨의 체인점을 나타내는 객체들 const chain1 = { name: '판교', no: 3, introduce () { return `안녕하세요, ${this.no}호 ${this.name}점입니다!`; } }; const chain2 = { name: '강남', no: 17, introduce () { return `안녕하세요, ${this.no}호 ${this.name}점입니다!`; } }; const chain3 = { name: '제주', no: 24, introduce () { return `안녕하세요, ${this.no}호 ${this.name}점입니다!`; } }; // 이처럼 같은 형식의 객체들을 다수 만들어야 한다면? I. 생성자 함수로 객체 만들기 //..

오늘 이야기 하고자 하는 것은 자바 스크립트에서 태그의 동적 생성에 사용되는 appendChild()에 관한 오류이다. appendChild()는 DOM객체에서만 사용할 수 있다는 것이었다. var ele = document.getElementsByClassName('temp');//HTMLCollection var ele = document.getElementsByClassName('temp')[0]; // HTML DOM 객체 그렇다 인덱스 처리를 해주는 것이다. [0] 추가 jQuery는 jQury 객체를 반환한다고한다 jQuery도 [0]을 처리해줘야한다 var ele = $('#temp'); // jQuery 객체 var ele = $('#temp')[0]; // HTML DOM 객체 id는 한..

var ele = document.getElementById('temp'); var ele = $('#temp'); 이 두 개는 같으면서도 다르다. 카카오 맵 API를 사용하기 위해 안에 map 객체를 넣으려고 할 때 오류가 발생했었다. 그 오류를 찾아보니 var 변수가 가리키는 객체가 같지만 다르기 때문에 발생했던 것이다. 필자는 아래 jQuery를 사용해서 를 찾았는데, API Sample도 그렇고 위 document로 바꾸니 오류 해결하고 정상 작동되었다. *** 물론 jQuery를 써서 해결하는 방법도 알았다. document.getElementById('temp'); 는 HTML DOM 객체를 리턴하고 $('#temp') 는 jQuery 객체를 리턴한다. 그래서 혹시 HTML DOM 객체를 이용..