자바스크립트14 Object.assign 에 대해 자바스크립트 4장에서 객체 복사에 대한 내용을 다루다가 Object.assign() 을 통해 복사가 가능하다는 얘기를 잠깐 했었는데, 자세히 모르니 이번 기회에 짚고 넘어가보자 Object.assign() 우선 MDN 에서 하는 설명을 보면 The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object. 대상 객체로 하나 또는 그 이상의 열거 가능한 프로퍼티를 타겟오브젝트 복사할 때 사용.. 한다고 하는데, 글만 봐서는 잘 모르겠다. 우선 문법을 살펴보면, Obj.. 2022. 7. 13. Apply,Call,Bind 에 대해 apply, call, bind 서버 사이드인 java 의 this 와 javascript 의 this 가 헷갈리는 부분이 많은데, this 와 관련된 내용인 call, apply, bind 에 대한 내용이 5장(참조 타입) 에 나와 이 부분은 따로 정리해보고자 한다. this 우선 this.. java 에서는 자기 자신을 가리키지만, javascript 에서는 다르다. javascript 에서의 this 는 함수가 어떻게 호출되었는지에 따라 다르게 동적으로 매핑? 된다. var foo = function() { console.log(this); } foo(); // this == window var obj = {foo : foo}; obj.foo(); // this == obj var instance .. 2022. 7. 13. 22. 고급테크닉 다루는 내용 고급 함수 쉽게 조작할 수 없는 객체 타이머 조작 커스텀 이벤트 1. 고급 함수 단순한 절차적인 방식, 복잡하고 동적인 방식, 클로저, 함수 포인터 등을 사용하는 다양성 1.1 안전한 타입 탐지 typeof 나 instanceof 처럼 내장된 타입 탐지는 완벽하지 않음 Object 의 toString() 메소드를 이용 Object.prototype.toString.call(value) == "[object Function]" window.JSON && Object.prototype.toString.call(JSON) == "[object JSON]" 1.2 스코프 확인 생성자 (scope-safe constructor) new 연산자 없이 객체를 생성하면 this 가 전역에 묶여버리는 문제가.. 2022. 7. 13. 17. 에러 처리와 디버깅 다루는 내용 브라우저의 에러 보고에 대한 이해 에러 처리 자바스크립트 코드 디버그 1. 브라우저의 에러 보고에 대한 이해 주요 웹 브라우저는 자바스크립트 에러를 사용자에게 보고하는 기능을 갖추고 있음 대개 개발자에게만 쓸모있는 정보이므로 개발할 때는 에러 보고 기능을 켜야함 2. 에러 처리 기대할 수 있는 최선의 경우는 사용자가 무슨 일이 일어난 건지 모른 채 다시 시도해보는 것이며, 최악의 경우는 화를 내고 다시 방문하지 않는 것 2-1. try-catch try 절에서 에러가 생기면 코드 실행을 즉시 멈추고, catch 절을 실행 catch 에 담기는 정보는 브라우저에 따라 다르지만, message 프로퍼티는 존재 finally 절은 항상 실행됨 function trycatchFunction() { .. 2022. 7. 13. 13. 이벤트 다루는 내용 이벤트 흐름에 대한 이해 이벤트 핸들러 다루기 여러 가지 타입의 이벤트 메모리와 성능 1. 이벤트 흐름에 대한 이해 자바스크립트와 HTML 의 상호작용은 문서나 브라우저 창에서 특정 순간에 일어난 일을 가리키는 이벤트에 의해 처리됨 이벤트는 리스너(핸들러) 로 추적하며 리스너는 이벤트가 일어날 때만 실행됨 1.1 이벤트 버블링 익스플로러의 이벤트 흐름 문서트리에서 가장 깊이 위차한 요소에서 시작해 거슬러 올라가는 방식 click me 요소를 클릭하면 document 의 순서대로 발생 1.2 이벤트 캡처링 이벤트 버블링과는 반대로 최상위 노드에서 시작 오래된 브라우저에서는 지원하지 않으므로 이벤트 버블링을 주로 사용함 1.3 DOM 이벤트 흐름 이벤트 캡처링 단계, 타깃 단계, 이벤트 버블링 .. 2022. 7. 13. 11. DOM 확장 다루는 내용 선택자 API 에 대한 이해 HTML5 DOM 확장 사용 브라우저 전용 DOM 확장 사용 1. 선택자 API CSS 선택자로 패턴을 만들고 그에 맞는 DOM 요소를 선택하는 능력 (Ex. jQuery) 1-1 querySelector() CSS 쿼리를 받고 패턴에 일치하는 첫 번째 자손 요소를 반환 없으면 null var body = document.querySelector('body'); // ID 가 'div1' 인 요소 var div1 = document.querySelector('#div1'); // 클래스가 selected 인 것 중 첫 번째 var selected = document.querySelector('.selected.. 2022. 7. 13. 이전 1 2 3 다음