웹개발 3

JavaScript - '객체 참조', assign()

자바스크립트에서 객체는 복사되지 않고, 참조된다. 이러한 이유에서 예상하지 못했던 값의 변화로 에러를 경험하곤 한다. 사람은 현실에서든, 코드에서든 원본이 변하는 것을 좋아하지 않는다. 원본은 유일해야 하며 필요에 따라 수정할 경우 복사본을 이용하는 것이 좋다. 이런 점에서 객체를 참조하고, 원본을 수정할 수 있는 자바스크립트의 특성은 취약점이다. 자바스크립트는 prototype을 통해 얼마든지 객체 원본을 변형할 수 있다. ES2015부터 이 취약점을 해결하기 위해 assign()이라는 메서드를 제공하고 있다. 특정 객체를 전달할 때 원본을 참조하는 것이 아니라 새로 만들어서(복사) 전달하자는 컨셉이다. 사실 assign() 메서드가 등장하기 전까지는 주로 json을 활용했다. 객체를 json 형태로 ..

JavaScript - constructor, instance

Object는 Object instance를 생성하는 '생성자(constructor)'입니다. Function은 Function instance를 생성하는 '생성자(constructor)'입니다. 이 문장의 뜻을 살펴보자. 인스턴스(instance)는 '객체'로 봐도 무방하다. 생성자가 객체를 만들 때, 그 시점의 객체를 인스턴스라고 하기 때문이다. 결국 맥락의 차이이기 때문에 특별히 다른 것으로 '억지로' 생각하지 않아도 된다. 그렇다면 생성자는 무엇일까? 생성자는 인스턴스를 만드는 객체 혹은 함수를 말하는데, 함수 인스턴스를 생성하는 생성자를 'Function' 객체 인스턴스를 생성하는 생성자를 'Object'라고 한다. 우리는 자바스크립트에서 함수가 객체라는 것을 알고 있다. 그렇다면 두 생성자 F..

JavaScript - DOM(Document Object Model) 제어

DOM(Document Object Model) DOM은 브라우저가 제공하는 객체(BOM-Browser Object Model) 중 하나로 BOM의 가장 상위 객체인 Window의 하위 객체라고 볼 수 있다. 넓은 의미로 DOM은 웹브라우저가 HTML 문서를 인식하는 방식을 말하며 객체 참조를 통해 이루어진다. DOM이 제공하는 기능은 C(create), R(read), U(update), D(delete) 4가지다. DOM을 사용해보자. javaScript로 Html을 조작하기 위해 DOM을 사용해서 접근할 수 있다. let elmts = document.getElementsByTagName('div'); 이렇게 getElements라는 복수 형태를 사용하면 변수 elements는 배열 형태로 div를..

1