[문제 상황] javascript를 통해 DOM 을 핸들링 하는과정에서 "스타일 시트에서 사용하던 스타일 속성 이름을 그대로 입력하면 오류가 난다." [Solution] 1. Camel Case 사용 2. .['string'] 콤마로 감싸기 사용
javascript
0. Web Rendering 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진(ex. V8 in Chrome)은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM Tree이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 1. 정의 넓은 의미: 웹 브라우저가 HTML 페이지를 인식하는 방식 좁은 의미: document 객체와 관련된 객체..
jQuery 를 사용한 웹 페이지 코드를 보면 항상 등장하는것이 해당 코드 $(document).ready()이다. 1. 용도 Web Document 객체가 모두 준비되었는지를 체크하고 리턴해주는 메소드이다. 오로지 페이지를 열 때 단 한번만 실행되며 이 메소드가 true를 반환할 때 DOM은 Javascript code 실행이 준비된다. 2. 비교 $(window).on("load", function(){}) : 모든 페이지 (image, iframes)가 로드될 때 까지 기다린다. DOM은 당연히 준비된 상태이고 + BOM 까지 준비된 상태인지 확인하여 리턴 3. 예시
1. What's bootstrap? 트위치 홈페이지의 프론트엔드 디자이너들이 만들어 놓은 웹 개발 디자인 프레임워크 2. 구성 HTML CSS 대표적인 예로 자주쓰이는 것이 navbar (네비게이션 바) 3. 적용하기 위해 필요한 파일들 bootstrap.css jquery popper.js ※ bootstrap 4.0 버전부터 popper.js 포함이 필수가 되었다. 파일을 직접 로컬에 다운받아서 포함시켜도 되고 외부링크를 걸어도 좋다. ※ min이 붙으면 Minified version 으로 파일 용량을 최소하 하기위해 압축한 파일이란 뜻. 붙지 않으면 당연 Uncompressed file [외부 링크 사용 예시] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Hello, world! H..
1. Array 생성자 함수 Prototype에 Remove 메소드 정의 splice method 사용하여 정의한 Array.prototype.remove 메소드 맹점이 하나 있다. index 0 1 2 3 4 5 6 7 8 9 value 19 24 56 60 71 68 40 80 91 100 50이하의 원소는 삭제해야되는데 대체 왜 24는 살아남았는가? (19와 40은 정상적으로 삭제되었다.) remove가 일어날 때마다 배열이 재정렬 되기 때문이다. 즉 for loop 1번째 싸이클에서 19가 삭제되면 배열상태는 다음과같아진다. index 0 1 2 3 4 5 6 7 8 value 24 56 60 71 68 40 80 91 100 원래 index 1에 해당하던 원소 '24'가 index 0으로 당겨진..
Custom type => `instancof` Primitive type => `typeof` typeof num1, num2의 타입이 다르게 출력된다. num2를 생성자 new를 통해 생성했기 때문이다. const actionTypes = ['play','connect', 'disconnect', 'cancel']; const userId = undefined; console.log(typeof actionTypes); //object console.log(typeof userId); // undefined console.log(typeof undefined); // undefined console.log(typeof null); // object constructor 인스턴스의 '프로토타입'의 참조..
