pgg-dev

호이 스팅이란? var 를 사용하여 정의된 변수 및 함수의 선언문이 각각 속한 스코프의 꼭대기로 끌어올려지는 작업을 뜻한다. var a = 1; 위의 코드는 한 줄의 코드지만 자바스크립트 엔진은 아래와 같이 해석한다. 1 2 var a; a = 1; 1행 → 변수의 선언문으로써, 컴파일러 단계에서 처리한다. 2행 → 실행단계에서 처리한다. 스코프의 모든 선언문은 실행 전에 먼저 처리된다. 1 2 3 4 for (var i = 0; i

- 프로미스는 비동기 작업을 편하게 처리할 수 있도록 도입된 ES6 기능이다. - 비동기 작업을 순차적으로 진행하거나 병렬로 진행할 수 있다. - 반환 값은 항상 promise 객체이다. - 비동기작업이 많아짐에 따라서 콜백 지옥이 발생하게 되는데 이것을 프로미스가 해소해준다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 const increaseAndPrint = (n, callback) => { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); }; increaseA..

자바스크립트에는 객체지향 언어에서 빠질 수 없는 Class 개념이 없다. 대신 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다. 클래스가 없으니 상속 기능도 없기 때문에 보통 프로토타입 기반으로 상속 흉내 내어 구현하여 사용한다. es6에서 class문법이 추가되었지만 자바스크립트가 클래스 기반으로 바뀐 것은 아니다. 1 function Person(){} 함수를 정의하면 위 그림과 같이 생성 된 함수와 함수의 prototype Object가 생성된다. Person 함수는 prototype 속성을 통해 자신의 프로토타입 객체를 참조하고, 프로토타입 객체는 constructor 속성을 이용하여 자신을 생성한 함수인 Person 함수를 참조하는 구조를 가진다. 프로토타입 객..

클로저란 내부 함수가 외부 함수의 지역변수에 접근할 수 있는 것이다. 1 2 3 4 5 6 7 8 function outter(){ var title = 'coding everybody'; function inner(){ alert(title); } inner(); } outter(); 내부함수 inner에서 외부함수인 outter의 지역변수 title에 접근하여 경고창이 출력된다. 1 2 3 4 5 6 7 8 function outter(){ var title = 'coding everybody'; return function(){ console.log(title); } } var inner = outter(); inner(); //coding everybody 외부함수의 호출이 끝나도 내부함수가 외부..

처음에는 github pages로 배포했었다. 호스팅 했다는 기쁨도 잠시, 렌더링이 안된다. 바로 혼합컨텐츠 !!!!! Mixed Content 문제가 발생했다. 에러가 생긴 이유는 SSL 기반의 웹컨텐츠에서 중간에 암호화되지 않은 HTTP 기반의 콘텐츠가 발생할 경우 브라우저는 HTTP 콘텐츠를 로딩하지 않는다. 암호화된 HTTPS 콘텐츠만 안전하다고 판단하기 때문이다. 즉, 도메인은 https로 최초 연결되는데, 소스내에 사용하고 있는 open API가 http로 로드되기 때문이다. 해결법을 찾아보니 로드되는 API를 https로 변경하면 된다는데, 불행히도 사용 중인 API는 https를 제공하고 있지 않아서 http 도메인을 사용하고 있는 호스팅 업체를 찾아야 했다. 결국 닷홈이라는 무료 호스팅 ..

DOM(Document Object Model) : 문서 객체 모델 객체로 문서 구조를 표현하는 방법으로 XML 이나 HTML 로 작성한다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. DOM은 트리 형태라서 특정 node를 찾거나 수정하거나, 제거하거나 원하는 곳에 삽입할 수 있다. ex) 내가 작성한 코드가 브라우저에 의해 파싱되면 DOM이 된다. DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현. 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다. - 자바스크립트는 새로운 HTML 요소나 속성 추가할 수 있다. - 자바스크립트는 존재하는..