TIL : 23번째- 221229 [12-5-목]

I. INTRO : 지난시간 복습

1)

지난 시간 new안쓰고 하기와 / new 쓰기

new 쓰면 일반함수가 아니라 new한 객체 초기화임

어떤 용도로 할것인지 미리 염두해두고 정의해야한다.

 

대문자 함수명은 얘는 객체를 생성하고 초기화할때 써야겠다는 의미

이름부터 목적어나 주체(데이터)같은 느낌이다.

 

 

2) 문제시 됨 왜?

function Exam(){
        this.kor = 30;
        this.eng = 20;
        this.math = 40;

        this.total = function(){
            return this.kor + this.eng + this.math;
        }
    }

    var exam = new Exam();
    console.log(exam.total());

    var exam1 = new Exam();
    console.log(exam1.total());

예상 1 : 은닉성 /

 

 

예상 2 : total 은 여러번해서 메모리 낭비 : O

똑같은 것을 두번이상 가짐 -> 캡슐화

 

예상 3 : 리턴에 this가 있어서 스택에서 pop이 안되고, 메모리가 계속 쌓임

 

II. OOP

1. 캡슐화 하기

(1) Exam 함수로 exam객체 두개 이상을 만들 경우

function Exam(kor ,eng ,math){
    this.kor = kor || 0; //입력이 없을 시 기본값으로 0으로 하겠다.
    this.eng = eng || 0;
    this.math = math || 0;

    this.total = function(){
        return this.kor + this.eng + this.math;
    }

    this.avg = function(){
        return this.total() / 3;
    }
}

var exam = new Exam();
console.log(exam.total());

var exam1 = new Exam();
console.log(exam1.total());

동일하게 중복됨

2. 개선된 캡슐화

(1) Prototype을 이용한 캡슐화

중복된 것을 방지하자

 

방법으로 프로토타으로 객체 정의 하자!

function Exam(kor ,eng ,math){
    this.kor = kor || 0; //입력이 없을 시 기본값으로 0으로 하겠다.
    this.eng = eng || 0;
    this.math = math || 0;

    // this.total = function(){
    // 	return this.kor + this.eng + this.math;
    // }

    // this.avg = function(){
    // 	return this.total() / 3;
    // }
}

Exam.prototype.total = function(){
        return this.kor + this.eng + this.math;
    }

var exam = new Exam();
console.log(exam.total());

var exam1 = new Exam();
console.log(exam1.total());


// var isEquals = exam.total() === exam1.total(); //
// 프로토 없이 하면은 false 라고 나옴

var isEquals = exam.total() === exam1.total(); //true 라고 나옴
    //프로토 있으면...

console.log(isEquals);

이 경우에는 total 함수가 메모리에서 서로 동일하게 이용한다.

그래서 동일하다.

 

(2) Prototype이란?

1) 

JS는 미리 정의할수없음 객체 만들고, 그 녀석을 기본타입으로 씀

 

예) 파포는 정의는 미리할수없지만, 한번 만든게 마음에 들면 기본타입(프로토타입)으로 계속 찍어내기 가능

=> 이후 도형 하면 만든것으로 바로나옴

 

//정의 할 수없는 곳에서 반복되는 형태는 프로토 타입으로 이용이 가능하다.
    var examProtoType = {
            background : 'green',
            borderWidth : 100
        }

    Exam.prototype = examProtoType;
    
	var exam = new Exam();
    var exam1 = new Exam();
    
    console.log(exam.background);
    console.log(exam1.background);

만들고 정의는 만복된 만듬이 존재한다.

이것을 계속하면 코드가 반복되게 코드가 메모리에 누적이 된다.

 

 

앞으로 존재한는 모든 객체들이 함께 공유하는 정보를 가지고있다.

이런게 있으면 프로토타입으로 할거야 즉 상속아닌 상속의 효과를 가진다.

 

 

하지만 성적 프로토타입인데 모두가 같은점수일수없다. 개별화 시켜야한다.

함수라고 하는것은 공유할 수 있는 것이다.

값은 개별화, 연산은 공유

그래서 각 성적은 따로, total avg는 공유이다. 결과는 같지만 메모리 효율성이 달라진다.

var examProtoTotal = {
    total : function(){
        return this.kor + this.eng + this.math;
    },

    avg : function(){
        return this.total()/3;
    }

}

이러한것은 ES6에서도 마찬가지임 다만 표현법이 달라졌을 뿐이다.

 

JS는 모두가 프로토타입을 가질수있다.

★

console.log(exam1.prototype2.total); //안됨

console.log(exam1.total); //됨

 

왜?

 

2) 배열과 프로토타입

var ar = [];
ar.total = function(){
    return 40;
}

console.log(ar.total());

var ar2 = [];
console.log(ar2.total());

ar2 아래 콘솔 오류 뜸

이러한 것을 보면 프로토타입은 매번 새로운 객체가있을 때 마다 다시 선언해주어야한다
이러한 점이 번거롭기 때문에 프로토타입은 주로 생성자(함수)에 선언해주는 것이 바람직하다.

 

ar2 어떻게 함?

 

모든 배열에 추가하고싶다.

Array.prototype.total = function(){
    return 40;
}

이렇게 한다.

프로토타입은 생성자가 될수있는 놈만, 즉 함수가 될수 있는 놈만 가능하다.

 

ar은 배열이지 함수가 아니기 때문에 생성자가 없다. 이런 경우 프토토타입이 없다고도 볼수있다.

ar에 프로토타입에 이용하기 위해서는 부모객체인 Array에서 상속받을 수 있는 방법을 이용한다.

Array는 함수이다. 그러므로 가능하다.

 

다시말하면 배열은 이미 new를 이용해서 선언되었다.

이 경우 배열은 함수가 아니기 때문에 상위 window같은 Array에 프로토타입을 넣어준다.

배열이 아니라 함수의 경우 그 함수에서 접근가능한 key,value형식의 object방식으로 프로토타입을 넣어준다.

 

 

3)생성자 찾기 (인스턴스 객체를 생성하고 초기화하는 특별한 메서드)

모든객체는 자기의 생성자가 누구인지 알고있다.

console.log(ar.constructor)

console.log(ar.constructor === Array); 
//즉 ar.constructor 하면 Array가 나온다

 true

 

4) 생성자의 type : 함수

Array.prototype.avg = function(){
    console.log("나야 평균~");
}

//위 아래동일함
ar.constructor.prototype.avg = function(){
    console.log("나야 평균~");
}


console.log(ar.constructor.prototype.avg === Array.prototype.avg); 
//true

위 아래 동일 한 것임

 

5) 함수인가 객체인가?★

.avg 로 붙일수 있는건 객체이기 때문이다. 

// ****** ex) .avg라고 묶여서 prototype은 객체라서 생성자를 확인할 수 있다.
 console.log(Array.prototype);        // 따라서, prototype은 객체가 맞다..(앞에서 중괄호로도 묶였다.)

 

 

6) 상속개념으로 ★

console.log(ar.constructor.prototype.constructor.prototype);

따라서 이런 경우 모든 객체는 프로토타입이 될 수 있다.

 

 

(3) 자식 객체 정의하기 ★

-create 

 

객체까지는 만들어졌지만, 

// 자기 객체: Object.create() 이용!!
        // - 프로토타입을 갖는 자식 객체가 만들어진다.(아무 속성이 없는 자식 객체)

        function Exam(kor, eng, math){
            this.kor = kor || 0;        
            this.eng = eng || 0;
            this.math = math || 0;

        }

        Exam.prototype.total = function(){
            return this.kor+this.eng+this.math;
        }

        
        var exam = new Exam();
                                             // 원래 prototype을 만들기 위해서는 .prototype으로 만들어줘서 길어지는데 이렇게 1줄로도 가능하다.
        var exam2 = Object.create(exam);     // 생성자가 정해지지 않은 형태이다. 1회성으로 자식 객체를 생성.

        console.log(exam);
        
        console.log(exam2);

 

 

 

III. 브라우저 플랫폼

C는 플랫폼(운영체제)는 여러개이다. 맥, 윈도우,리눅스 등

맥용으로 해야지 맥이 플랫폼 

서로 호환X 플램폼 정하면 해당 플랫폼만 가능하다.

 

크롬OS는 크롬브라우저가 OS이다. 물론 실질 운영체제는 리눅스이다.

맥 OS도 마찬가지로 리눅스이다. 이렇게 껍대기만 만드는것이 많다.

삼성이 타이젠 만든이유는 구글이 유료화할거같아서...

 

BOM / DOM /CSSOM

 

1. HTML5에서 확장된 플랫폼의 기능

(1) 브라우저 객체

문서상의 창을만들고, 문서상에서 사용자의 입력처리도 한다. 하지만 당장은 아니고,

동적문서는 최소화하고, 멀티미디어중 SVG나 캔버스를 이용하자 그중 우리는 캔버스 주로 이용할 것이다.

 

브라우저가 스크립트언어에게 객체로서 나를 이렇게 이용할수있어 라고 하는게 API이다.

플랫폼을 직접 이용하기 어렵고 인터페이스가 있다.

 

인터페이스가 객체화 되어있다.

브라우저 => 객체로서 나를 이용 => 인터페이스(직접이용X) => API

 

(2) 최상위 객체인 window객체

브라우저 안에서 가장 최상위 창: window

모든것을 포함하는 가장 큰 객체이다. 즉 전역객체라고도 한다

브라우저가 있으면 윈도우도 있다.

이 틀을 사이즈변경, 닫거나 하는 일을 할 수있다.

<script>
	window.open(); //팝업창으로 뜬다.
</script>

이 외 닫거나 크기변경이 가능하다. 이러한 것이 윈도우 이용하는 API이다.

 

최근에는 잘 안쓴다 왜냐하면 모바일 때문인데, 모바일은 꽉차게 쓰기 때문이다.(화면이 작아서)

 

window.alert(); //이거도 안쓴다. 대채제있다.
//문서에있는 문서창으로 이용한다.

window.loaction

직접 사용자가 입력하는대신에 location으로 url을 세팅할수있다.

window.location.href = "http://www.newlecture.com";

이렇게 하면 나옴

 

window.history

이런것으로 앞으로 가기 뒤로 가기 가능

 

window.document

안에 내용들을 관리하기 이 경우 트리구조로 가능하다.

자식은 자식노드 부모는 부모인데 부모노드라고한다.

 

노드는 나무를 빗댄다. 가계부에 나무가 있다.

(node란 가지가 뻣어지는 마디)

 

이미지노드 폼노드 /혹은 자식노드 부모노드라고한다.

각 노드는 객체이다.

객체를 하나하나 붙이거나 자르거나 바꿀 수있다.

 

 

2. 코딩 연습을 위한 Game Programming

JS는 윈도우 API직접사용이 어렵다. web 플랫폼을 사용해서 개발을 한다

 

당분간 프론트앤드로 프로그래밍을 주로 할 것이다.

백의 톰캣과 달리 프론은 Live로 이용한다.

 

Live(프론) => 요청 => 톰캣(백) 

크로스 사이트 요청을 한다.(Cross Origin......)

 

(1) 플랫폼 API 프레임워크 절차언어

1) 자바 플랫폼

 

구동코드 >[OS플랫폼] >API > [WEB플랫폼] > API (framework) , (ex: DOM /CANVAS)

 

DOM <= Body 문서객체

Canvas <= GameCanvas

 

캔버스가 윈도우 역할한다

 

여기서 윈도우의 역할은? 

이쪽 저쪽 세상을 소통하게 해주는 윈도우를 인터페이스라고한다.

직접 게임에 못들어가니 게임에서 내용을 확인할 필요하고, 걔를 이용하기 위한 입력창이 필요하다

이러한 입력창이 윈도우다.

저쪽창에서 내 명령한것을 움직이는것을 보여주는것이 윈도우다.

 

내가 직접 못들어가니 명령을 전달하거나, 수행결과를 보여주는 창역할을 한다.

입출력하는 녀석이다.

 

우리는 저쪽세상을 만드는것이다. 그쪽 세상 객체들이 어떤것이 있을지 보자

 

만들 때 슈팅게임보다 실질 삶에 도움되는것을 해보자!

 

 

(2) OOA (객체분석)

뭘 만들고싶은지 고민하기

1) 시나리오에서 개체 식별하기

 

<이벤트>

load / click / key down

 

---

1. 보충

1) 함수인지 객체인지 / 상속인지/ create 개념 어려움

 

2) Object 생성자 함수 (생성자 함수 이름은 파스칼케이스 이용.)

What (정의) : 생성자(constructor) 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말한다.

Why (존재이유)  : 빈객체를 생성하고, 이후 프로퍼티등을 추가해서 객체 완성하기 위해서이다.

How (방법) : 객체가 가지고 있지 않은 프로퍼티를 대입하면 객체는 프로퍼티를 추가하고 값 할당한다

가지고 있다면 기존 프로퍼티에 값이 변경된다.

e.g. (예) :

 

3) 생성자 함수

What (정의) : 객체 생성하기 위한 탬플릿(자바의 클래스같은)처럼 사용해서 프로퍼티가 동일한 객체를 쉽게 생성할 수있다. 

Why (존재이유)  : Object생성자 방식은 동일한 프로퍼티를로 객체를 생성할 때 마다 다시 선언해주는 등으로 불편함이 상존한다.이러한 경우 생성자 함수를 이용하면 용이하게 이용이 가능하다. 

How (방법) : 생성자 함수를 만들고, 후에 new를 이용해서 참조변수에 대입(이 경우 인스턴스 생성)하면 가능하다.

가장 쉽게 말하면 일반 함수에다가 new를 붙여서 참조변수에 대입하면 기존함수는 생성자 함수가 될 수있다. 다만 이러한 경우 혼동을 방지하기 위해서 첫글자는 대문자로 해준다.

 

e.g. (예) :

 

 

4) 프로토타입 객체

What (정의) : 부모객체를 프로토타입객체 라고도 한다. (JS모든 객체는 부모객체와 연결됨, 상속 개념처럼 이용가능함 )

/ 생성자로 만들어진 객체들 간에 공유 프로퍼티를 만드는 것을 의미한다.

Why (존재이유)  : 상속을 위해서 사용된다.

How (방법) : [[Prototype]] internal slot은 모든 객체 자신의 프로토타입객체(부모객체)로서 갖고있다.

e.g. (예) :

 

5) constructor 프로퍼티

What (정의) : 객체 입장에서 자신을 생성하는 객체(생성자) 가르킴

Why (존재이유)  :

How (방법) :

e.g. (예) :

 

2. 회고 

피해갈수없는 부분이다.
잘 따라가다가 어느순간부터 따라갈수없는데 머릿속은 여전히 충돌하고있다.

더욱더 잘 준비해야지~