※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그에서 읽어주세요. ※ 이 글은 프론트엔드 개발자를 위한 자바스크립트 프로그래밍의 글을 참고한 것입니다. 자바스크립트에서 생성자 패러다임은 유용하기도 하지만 단점도 있습니다. 바로, 인스턴스마다 메서드가 생성된다는 것입니다. ECMAScript에서 함수는 객체이므로 함수를 정의할 때마다 새로운 객체 인스턴스가 생성되는 것이나 마찬가지입니다. 논리적으로 생성자는 다음과 같습니다. // 다음 두 함수는 논리적으로 동등함. // 1. function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function () { ale..

※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그 에서 읽어주세요.※ 글 중 모르는 단어나 개념이 있으실까봐 맨 아래에 참고할만한 사이트들을 남겨둡니다.1. 객체지향 프로그래밍(Object-Oriented-Programming)객체지향 프로그래밍은 현실 세계에 존재하는 객체(Object)를 소프트웨어 세계에서 표현하기 위해 객체의 핵심적인 부분만을 추상화해 모델링 하려고 하는 프로그래밍 패러다임을 말합니다.이해가 잘 안되신다면 객체를 사물이나 과일로 바꿔 이해하면 쉽습니다.붕어빵을 예로 들자면, 팥 붕어빵이라는 객체를 소프트웨어 세계에서 구현하기 위해 팥 붕어빵의 핵심적인 특징(붕어 모양, 팥)을 생각해 모델링 하고자 하는 것입니다.각 객체들을 독립적인 기능을 지닙니다. 하지만 ..

※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그에서 읽어주세요. 먼저, 드래그가 가능한 요소로 만들기 위해서는 draggale attribute과 ondragstart 전역 이벤트 핸들러를 추가해 줄 필요가 있음. Mozilla에 ondragstart도 함께 넣어주라고 돼있어서 같이 적어 두지만, dataTransfer과 관련한 일을 할 필요가 없을 시에는 작성 안 해도 상관없는 듯하다. // boolean: 드래그 가능 여부 (true 또는 false) function dragstart_handlerName(ev) { console.log("dragStart"); // 데이터 전달 객체에 대상 요소의 id를 추가합니다. ev.dataTransfer.setData("text/p..