로니의 개발 이야기

1. DOM 요소에 접근 및 선택하기 document property DOM의 최상위 객체인 document 객체는 DOM을 정의하는 속성을 가진다. get method

이것은 Ire Aderinokun이 작성하고 bitsofco.de에 게시된 ' Understading the Critical Rendering Path'를 번역하고, 수정한 글이다. 여기에서 원본 article 읽기

이것은 Ire Aderinokun이 작성하고 bitsofco.de에 게시된 ' What, exactly, is the DOM? '을 번역하고, 수정한 글이다. 여기에서 원본 article 읽기 1. DOM은 무엇일까? 문서 객체 모델 (Document Object Model) DOM은 웹 페이지에 대한 인터페이스로, 현재 웹페이지의 문서 모델을 의미한다. 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하게 되는데 이를 DOM이라고 한다. DOM은 기본적으로 여러 프로그램들이 페이지의 콘텐츠, 구조, 스타일에 접근할 수 있게 하고 수정할 수 있도록 API를 제공한다. 또한 사용자의 동작에 반응할 수도 있게 된다. DOM의 최상위 객체인 document 객체는 HTML 전체 페이지를 표현..

1. Object.create()을 사용해보기 만약 이 superObj 라는 객체를 부모로 하고, 상속받는 자식 객체를 만들고 싶으면 어떻게 하면 될까? 아래와 같은 형식을 이용하면 된다. 실제 코드에 적용해본 것이다. 이를 통해서 부모 객체의 상속을 받는 subObj 객체를 만들 수 있었다. subObj 객체가 잘 만들어졌는지 객체의 property를 입력해주고 출력을 진행해보았다. 그 결과 정상적으로 잘 출력이 되는 것을 확인할 수 있다.

1. 일반적인 객체 지향 프로그래밍의 상속 객체 지향 프로그래밍은 크게 두 가지 요소로 나누어져 있다. 첫번째는 class, 두 번째는 그 class를 통해 만들어진 object가 있다. 객체 지향 언어에서의 상속은 sub class가 super class의 자식이 되고, 그 sub class를 통해서 객체를 생성한다. 따라서 이 객체가 어떤 기능을 하는지는 class단에서 결정되기 때문에 다른 객체의 상속을 받는 것은 불가능하다. 2. 자바스크립트에서의 객체 상속 __proto__ 자바스크립트에서는 객체가 직접 다른 객체로부터 상속을 받을 수 있다. 따라서 sub object(기능을 추가하고 싶은 객체)가 super object로부터 직접 기능을 상속받을 수 있다. 다른 객체로부터 상속을 받고 싶을 때..

1. super를 왜 사용하는가? 부모 클래스의 기능을 수행하면서, 부모가 하지 못하는 기능을 자식 클래스만 하도록 하기 위해 super를 사용한다. 2. super의 사용 예시 예를 들어, 아래와 같은 부모, 자식 클래스가 있다고 가정해보자. 여기에 third라는 항목을 추가하고 싶다면? 어떻게 하면 될까? 부모 클래스에 있는 것들을 가져오고, 새로운 항목을 추가하여 코드를 짜 봤다. 이대로 실행시키면 될까? 다음과 같이 ReferenceError가 발생된다. 에러에 따르면, 'this'에 접근하기 전 또는 자식 클래스에서 return 하기 전에 자식 클래스에서 super 생성자를 호출해야 한다고 말한다. 따라서, 자식 클래스에서 super 생성자를 사용해야만 정상적으로 작동한다는 뜻이다. 첫번째로 s..

1. Javascript 에서 상속을 사용하는 이유? 어떤 클래스의 원래의 기능을 최소한으로 유지하면서, 새로운 기능을 추가하고 싶은데 클래스 안에 코드를 추가하기에는 너무 부담스러울 때 상속을 사용하게 된다. 물론 코드를 복사해서 새로운 클래스를 만들 수 있지만, 그 경우에는 중복이 발생하기 때문에 상속이 필요한 것이다. 2. 상속의 사용 예를 들어, 이 Person이라는 클래스에 평균을 내는 method를 추가하고 싶다고 해보자. 이를 복사해서 새로운 클래스를 하나 더 만들어서 avg method를 정의한다. 하지만, 중복된 코드를 제거하고 싶다는 생각이 들기 시작한다. 그래서 사용하는 것이 상속(inheritance)이다. PersonPlus라는 클래스는 Person이라는 클래스를 확장했다는 의미이..

1. Javascript class에서 method 구현 1) prototype 이용 클래스를 선언하고, 외부에서 프로토 타입을 통해 함수를 구현한 예이다. 결과 값은 정상적으로 합계 30이 출력 되는 것을 볼 수 있다. 2) 내부 메소드로 구현하기 클래스 안에 메소드를 선언함으로써, 위의 코드와 같은 결과물을 얻을 수 있다. 그렇다면 'dongle' 이라는 객체에서 sum을 다르게 정의 즉 재정의하고 싶다면 어떻게 하면 될까? 형식 : 객체 이름. 내부 메소드 이름 = function() { return 리턴할 내용; } 이 형식대로 재정의를 하면 된다. console 창에서도 반영이 잘 되어있을까? 하는 의문이 들 수 있다. 이 콘솔 로그는 sum()을 출력하기 위해서 다음과 같은 순서를 갖는다. '..

1. Javascript class의 constructor function 클래스 안에 method를 쓸 때는 function 함수명(){} 이 아니라 함수명(){}의 형식으로 적는다. 객체의 초기 상태를 지정하기 위해, 객체가 만들어지기 전에 실행하도록 약속되어 있는 함수가 있는데, 이 함수의 이름은 constructor이다. 좌측의 코드는 Person이라는 함수를 만들고, 그 함수에 'new'를 부여했을 때 생성자 함수로써 역할을 하여 객체를 생성해주는 것이고 우측의 코드는 Person 이라는 클래스를 만들고, 그 클래스 안에 constructor 함수를 사용함으로서 객체를 초기화시키고 객체를 생성해 준다. 좌측 우측의 결과 값은 동일하게 나온다.

1. prototype이 왜 필요할까? 이 코드에서는 sum이라는 function이 Person 생성자 함수에 의해 객체를 만들 때마다 반복적으로 만들어진다. 이는 컴퓨터의 메모리가 낭비된다. 만약에 이렇게 객체를 생성하는 작업을 수억 번 반복한다면, 시간과 메모리가 소모되기 마련이다. 이렇게 생성자 안에서 method를 만드는 것은 생산성이 떨어질 수 밖에 없다. 2. prototype 을 이용해 재사용성 높이기 프로토 타입은 생성자를 통해서 만든 객체들 모두가 공통적으로 사용하는 속성을 만드는 방법이다. 한번만한 번만 실행이 되기 때문에 성능을 절약할 수 있고, 한 번만 정의되기 때문에 메모리도 절약할 수 있다. 그렇다면, 이 sum 이라는 함수의 프로토 타입이 지정되어있는데 내가 원하는 어떤 객체에..