이벤트 위임 (event delegation) 비슷한 방식으로 여러 요소들을 다뤄야할 때 사용한다. 모든 요소에 이벤트를 달아주는 것이 아니라 공통 조상에 이벤트 핸들러 하나만 할당한다. 그 후 부모요소를 통해 자식 요소에 할당해주면 되는데, 이 방법을 통하면 이벤트를 하나만 할당해도 여러 요소를 한 번에 다룰 수 있다. 1 2 3 4 커스텀 이벤트 (custom event) 이벤트를 직접 만들어 dispatchEvent를 통해 실행시키는 것을 뜻한다. 이게 사실 사용을 하나 싶어서 찾아봤는데 그래픽 컴포넌트를 만들 때 사용된다고 한다. 어쨌든 쓰니까 만들어 놨겠지라는 생각을 하지만... mdn 문서를 참조하면 좋을 듯 하여 아래에 첨부한다. 1 2 3 4 https://developer.mozilla...
mdn
Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들, 특히 좌표와 관련된 것들이다. 1 2 자세한 건 mdn 문서를 참조하자. https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer.mozilla.org
Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들이다. 1 2 자세한 것은 mdn 문서를 살펴보자. 완벽히 담고 싶었지만 부족하다... https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer.mozilla.org
Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들이다. 1 2 더 많은 건 mdn 문서를 참조하자. 지난번에도 말했지만 공식문서 같은 것들이 최고인 것 같다... https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer..
Document Object Model (이하DOM)은 문서객체모델을 뜻하는 말로, html요소를 javascript를 이용해 제어하기 위해 사용한다. 아래는 문서객체모델의 메서드들이다. Hello World 1 텍스트1 2 텍스트2 3 택스트3 4 택스트4 자세한 건 mdn 문서를 참조하자. https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer..
모듈은 필요한 걸 가져다 쓰기만 하면 되는 거 같기도 하고, 깊게 파면 내 생각보다 복잡한 거 같아서 미뤄왔다. 그래도 아무 생각 없이 중괄호 쓰고 그냥 가져오고 하는 것보다 알고 쓰는 게 좋을 거 같아서 정리했다. // 모듈(Module)이란 특정 데이터들의 집합(파일) // 모듈 가져오기(import), 모듈 내보내기(export) // 가져오기(import) 선언은 모듈의 최상위 수준에서만 사용 가능 export const hello = function () { console.log('Hello world!'); } // import { hello } from './module.js'; // 기본 내보내기, 이름이 지정되어 있지 않으므로 임의의 이름을 지어 가져올 수 있음 export default..
JSON은 JavaScript Object Notaion을 줄인 말이다. package.json, package-lock.json에서 흔히 볼 수 있는 확장자이다. package.json: 개발자가 배포한 패키지에 대해 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서 자신의 프로젝트가 의존하는 패키지의 리스트 자신의 프로젝트의 버전을 명시 다른 환경에서도 빌드를 재생 가능하게 만들어, 다른 개발자가 쉽게 사용할 수 있도록 한다. package-lock.json: 버전을 확인하기 위해 만든 부가적인 문서, 그래서 그런지 엄청 길다... // JSON (JavaScript Object Notation) // 데이터 전달을 위한 표준 포맷! // 문자, 숫자, 불린, Null, 객체, 배열만 사용 // ..
표준내장객체 (standard built-in object) Object에 관한 것을 정리했다. 이는 일부일 뿐이니 자세한 내용은 mdn 문서를 참조하자. // Object.assign() // 하나 이상의 출처(Source) 객체로부터 대상(Target) 객체로 속성을 복사하고 대상 객체를 반환 const target = {a:1, b:2}; const source1 = {b:3, c:4}; const source2 = {c:5, d:6}; const result = Object.assign(target, source1, source2); const result2 = Object.assign({}, target, source1, source2); const result3 = { ...target, ....
표준내장객체 (standard built-in object) Array에 관한 것을 정리했다. 이는 일부일 뿐이니 자세한 내용은 mdn 문서를 참조하자. // length, 배열의 길이를 반환 const arr = [1, 2, 3]; console.log(arr.length); // 3 // at(), 대상 배열을 인덱싱 console.log(arr[0]); // 1 console.log(arr.at(0)); // 1 console.log(arr[arr.length -1]); // 3 console.log(arr.at(-1)); // 3 // concat(), 대상 배열과 주어진 배열을 병합해 새로운 배열을 반환 const arr1 = ['a', 'b', 'c']; const arr2 = ['d', 'e..
표준내장객체 (standard built-in object) Math에 관한 것을 정리했다. 이는 일부일 뿐이니 자세한 내용은 mdn 문서를 참조하자. //Math 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장객체 // Math.abs(), 주어진 숫자의 절댓값을 반환 console.log(Math.abs(2)); // 2 console.log(Math.abs(-2)); // 2 // Math.ceil(), 주어진 숫자를 올림해 정수를 반환 console.log(Math.ceil(3.141592)) // 4 // Math.floor(), 주어진 숫자를 내림해 정수를 반환 console.log(Math.floor(3.141592)); // 3 // Math.max(), 주어진 숫자 중 가장 큰 숫..
