긍정적 자기부정

여러 시행착오를 통해 DOM으로 작동하는 웹앱을 만드는 방법론에 대해서 어느 정도 알게 된 것 같다. 만드는 순서 1) 다루고 싶은 부분을 정의 2) 이벤트 핸들러 안에 사용되어 여러가지 조건에 부합하는지 확인할 함수를 정의 3) 만든 함수를 이용하여 이벤트 핸들러에 조건을 부여함. 4) 이벤트 핸들러와 엘리먼트를 연결함 함수의 재사용 이벤트 핸들러 안에서 어떤 조건들을 지정하는 것보다는, 이벤트 핸들러 외부에서 조건을 부여하는 함수를 만드는 것이 재사용 등에 훨씬 좋은 것을 알 수 있었다. addEventListner addEventListner는 인자로 들어간 함수에 어떠한 인자를 부여하는 것으로 보인다. 생활코딩에서 관련 부분을 잠깐 찾아보니 addEventListner는 인자로 전달한 event ..

아래는 자바스크립트 코드. console.log('welcome JavaScript') let msgElement = document.querySelector('#container'); console.log(msgElement); 개발자 모드에서 콘솔창을 보면 아래 두 결과는 다르다. head태그 안에 넣은 것은 #container를 찾지 못하고 null을 반환함. 그 이유는 브라우저가 html 코드를 위에서부터 차례대로 해석하다가 script 태그를 중간에 javascript 파일을 불러와서 실행하기 때문이다. 따라서 모든 html 태그를 읽고 script를 실행할 수 있도록 body 태그 끝나기 직전에 넣자! Tweet List hello world code states Tweet List hello..

CRUD Ceate createElement: 요소를 생성한다. document.createElement('div') createDocumentFragment: 아직 잘 모르겠다! 우선 이런 것이 있다는 것만 알고 넘어간다! untitledtblog.tistory.com/44 DocumentFragment를 이용한 JavaScript 성능 최적화 자바스크립트의 DOM 객체는 연산을 수행할 때마다 DOM tree라는 자료구조에 접근해야 하기 때문에 자바스크립트의 성능을 저하시키는 주된 요인 중 하나이다. 따라서, 자바스크립트의 성능을 최 untitledtblog.tistory.com ko.javascript.info/modifying-document#document-fragment 문서 수정하기 ko.ja..

DOM vs. HTML HTML 문서가 웹 브라우저에서 기능하기까지의 프로세스가 있다. (Critical Rendering Path라고 함) 이때, 이 과정은 크게 두 가지로 나눠진다. 1) HTML 문서를 parsing하여 무엇을 브라우저로 보여줄까 결정하기 2) 사용자가 보는 화면을 구현하기 이 때, 과정1)을 통해 만드러진 결과를 Render Tree라고 부른다. 이 Render Tree는 두 가지 정보를 포함한다. 하나는 스타일 정보, 나머지는 DOM이다.(구성 요소 정보) DOM을 정의해보자면 HTML 문서를 객체의 형태로 표현한 것이다. (객체와 좀 다른 점도 있다고 한다. 그러나 기본적으로 객체로 표현하여 다른 프로그램에서 사용할 수 있게 만든다는 것은 변함 없다.) DOM의 구조는 Node..