Dev Note

Axios "Promise based HTTP client for the browser and Node.js" "브라우저를 위한 Promise 기반의 클라이언트" 자바스크립트 내에 cdn을 삽입하면, XHR이라는 브라우저 내장 객체 대신 AJAX 요청을 처리할 수 있다. 즉, AJAX (비동기 처리) 요청을 Axios 클라이언트 라이브러리로 사용하는 것! XMLHttpRequest 를 Axios로 대체하는데, 비동기처리 하면서 순차적 연쇄를 보장한다. Vue.js 에서도 사용한다. GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node..

AJAX 란? Asynchronous Javascript and XML 서버와 통신하기 위해 XMLHttpRequest 객체를 활용한다. JSON, XML, HTML, 일반 텍스트형식 등 다양한 포맷을 주고받는다. AJAX의 특징 페이지 전체를 새로고침하지 않아도 실행된다 (일부분만 업데이트) => '비동기성' 페이지 새로고침 없이 서버에 요청하기 + 서버로부터 데이터를 받아 작업을 수행하기 XMLHttpRequest 객체 (를 받는다.) 서버와 상호작용 하기 위해 사용되며 전체 페이지의 새로고침 없이 데이터를 받아올 수 있다. 사용자의 작업을 방해하지 않으며 페이지 일부를 업데이트할 수 있다. 주로 AJAX 프로그래밍에 사용한다. 생성자 : XMLHttpRequest()

포인트 form 을 submit 하면 addTodo 함수가 실행되는 구조로 구현한다. 입력한 내용은 input.value 로 찾는다. (submit event에서 찾을 수 없음. 이것 때문에 헤맸다!) 새로운 리스트를 생성하고, 값을 넣고, 적절한 위치에 추가한다. 기본 이벤트를 막는다. 부가 1 - 빈 값을 입력하면 경고창이 뜬다. 부가 2 - 입력 후 인풋 창을 리셋한다. Add

태그에 내장되어있는 기본 이벤트를 막을 때 사용한다. event.cancelable 로 확인이 가능하다. 대표적으로 input 태그의 submit 이벤트, a 태그의 link 이벤트 등이 있다. 참고로 input 태그 내용물을 리셋하려면 (버튼 클릭 후 지우려면) event.target.reset() 메서드를 활용하자. GoToGoogle

Live Collection Static Collection 문서가 바뀔 때 실시간으로 업데이트 됨 업데이트 x DOM 변경 사항을 실시간으로 반영 DOM 이 변경되어도 collection 영향 x HTMLCollection, NodeList queryselectorAll() 로 반환된 NodeList liveNodes 는 라이브 콜렉션, nonLiveNodes는 논-라이브 콜렉션이다. liveNodes의 경우 class 가 'red'로 변하며, 그때마다 DOM에 반영된다. 따라서 i = 1 일 때, 요소가 2개이므로 하나 건너뛰고 빨갛게 변한다.

변수를 querySelectorAll 로 잡아서, Nodelist 를 만들었다고 해보자. 이때 3개의 요소에 각각 동일한 class 속성을 부여하고 싶다면, for 반복문을 사용하거나 forEach 헬퍼메서드를 사용하면 된다. 단, for 반복문 사용시, 반복되는 요소는 인덱스 값 (0, 1, 2) 임에 주의해야 한다. 굳이 활용하고 싶다면 파이썬처럼 inputTags에 인덱스를 잡아서 돌려주면 된다. 그런데, 적용은 되는데 에러가 뜬다. 따라서 에러문제도 있고, 이 경우 element 조작이기 때문에 forEach 메서드를 사용하는 것이 적절하다.

ParentNode.append() vs. Node.appendChild() ParentNode.append() Node.appendChild() 문자열 추가 가능 문자열 추가 불가능 반환값 없음 Node 객체 반환 여러 개 추가 가능 여러개 추가 불가능 Node.innerText vs. Element.innerHTML Node.innerText Element.innerHTML HTML도 문자열로 인식 HTML을 HTML로 인식 Element.innerHTML and XSS(Cross-site Scripting) 공격자가 웹 사이트의 클라이언트 측 코드에 악성 스크립트를 삽입해 공격하는 방법이다. 사용자의 브라우저가 악성 스크립트를 실행하며 공격자가 액세스 제어를 우회하고 사용자를 가장할 수 있다. in..

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction DOM 이란? Document Object Model 의 약자로, web document의 프로그래밍 인터페이스 구조이다. 각 요소는 객체(object)로 취급한다. 기본 데이터 타입 Document 객체 페이지 컨텐츠의 시작점. Node document 내의 모든 오브젝트는 어떠한 노드. 여러가지 DOM 타입..