안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다.
비전공자 출신으로 IT 웹 기획자로서 살아남기 위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요.
온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다.
저처럼 초보자 웰컴이에용.
오늘은,
객체지향 프로그램밍 (Object Oriented Programming) 에 대해 알아봅시다.
객체지향 프로그래밍이란?
-
여러개의 객체단위로 나누어 작업하는 방식입니다.
- 가장 많이 사용되는 대표적인 프로그래밍 방식이며 JAVA, C# 등이 대표적인 객체지향 프로그래밍 언어
[자바스크립트의 프로토타입 기반 프로그래밍]
자바스크립트는 객체지향적인 언어인데
그 이유 중 하나는 프로토타입 상속(prototypeal inheritance)으로 확장과 재사용을 가능하게 해주기 때문입니다.
프로토타입 기반 프로그래밍이란?
우선, 프로토타입이란 원형이라는 뜻을 가지며 어떤 객체가 만들어지기 위해
그 객채의 부모(모태)가 되는 것을 프로토타입이라 합니다.
객체의 원형인 프로토타입을 이용하여 새로운 객체를 만들어내는 프로그래밍입니다.
이렇게 새롭게 만들어진 객체 역시 자신의 프로토타입을 가지고 있으며
이 새로운 객체의 원형을 이용하여 또 다른 새로운 객체를 만들어낼 수도 있으며 이런 방식,
구조로 객체를 확장하는 방식을 프로토타입 기반의 프로그래밍 언어라고 합니다.
자바스크립트에서 사용되는 프로토타입에는
프로토타입 프로퍼티 (Prototype Property)와 프로토타입 객체(Prototype Object) 두 가지가 있다.
[자바스크립트를 객체지향 프로그래밍이라고 부를 수 있는 이유]
이를 알기 위해서는 자바스크립트 생성자를 알아야 합니다.
자바스크립트 생성자란 ?
자바스크립트 생성자는 자바스크립트 객체를 생성하는데 사용되는 함수
자바스크립트 생성자는 new 연산자와 함께 사용되는데,
먼저 프로퍼티가 없는 새 객체를 생성한 후 생성자 함수를 호출하고,
새 객체를 this로 전달하며 객체가 사용되기 전에 설정되어 있어야 할 프로퍼티를 설정하는 역할을 합니다.
모든 Javascript 객체는 그것의 프로토타입 객체에 대한 내부 참조를 가지며
프로토타입 객체로부터 프로퍼티를 상속받습니다.
자바스크립트 프로토타입을 사용하는 이유?
객체지향적이고 상속할 수 있다.
객체가 프로토타입의 프로퍼티를 상속할 수 있어서 각 객체에 필요한 메모리의 양을 줄일 수 있다.
프로토타입에 대해 알아보자.
Prototype : 원형 (원해, 본래의 형태) 를 뜻합니다.
→ 좀 더 효율적인 개발을 위해 Prototype이 만들어짐
프로토타입에는 3가지 사용법이 있습니다.
1. function
2. Object.create( )
3. Class
아래는 Function 사용법에 대해 설명해볼게요.
[Function 사용방법]
위의 코드를 하나씩 나누어 사용방법을 이해해 봅시다.
1. person의 원형을 만드는 방법은 아래와 같습니다.
2. Prototype의 틀을 만듭니다.
3. person이라는 틀로 박현지 (사람)을 찍어냅니다.
원형을 만듦으로써 우리는 기본값을 설정할 수 있고,
코드가 중첩이 되는 것들을 prototype으로 빼놓으면 재활용할 수 있습니다.
기본값을 제공해 줌으로써 이 중첩되는 코드가 어떤 속성을 가지고 있는 지 알기 쉽게 해주는 역할을 합니다. (__prototype__)
기본값을 생성해서 기본값이 동일하다면 새롭게 덮어쓰거나 새로운 변수를 쓰지 않아도 새롭게 사용할 수 있습니다.
새로운 변수로 덮어써봅시다
terminal에 node prototype.js 실행시키면 박현지는 172, 이지민은 180으로 출력됩니다.
객체로 만들어진 person은 __proto__ 원형(prototype)을 담고 있습니다.
[하나씩 나누어 상세히 이해하기]
아래와 같이 prototype은 틀을 만들고, 그 프로토타입을 기반으로 new를 이용해서 새로운 객체를 만듭니다.
객체는 자신만의 상태와 행동을 가지며 위의 person은 혼자 행동할 수 없습니다.
그래서 person.prototype.stature = 172 로 person을 실행할 수 있는 틀을 만들어 준 것입니다.
const 박현지 = new person ()
>> 단독으로 행동하고 단독으로 데이터(property)를 변경할 수 있는 객체입니다.
>> new를 통해 생성되는 것을 '객체' 라고 합니다.
데이터를 덮어 쓸 때도 있지만 원형을 써야할 때도 있습니다.
이렇게 console.log(박현지.__proto__.stature) 하면 180으로 덮어쓴다고 해도 172로 출력됩니다.
이유는 원래 prototype이 172 이기 때문입니다.
예전값으로 돌아갈 때 사용하며 예전값으로 돌아갈 수 있다 라는 것이 중요합니다.
[예시 만들기]
prototype을 언제 사용할 수 있을까? 영화티켓으로 예시를 들어봅시다.
먼저, 각각의 상황에 맞게 데이터를 추상화하는 것을 먼저 봅시다.
추상화란, 공통적인 부분을 추려내는 작업을 말하며 실물로 볼 수 있는 것들을 데이터화 시키는 것입니다.
어떤 행위를 메인으로 하는가? 가 추상화할 때 가장 고민해야 할 부분입니다.
ticket의 price를 10000으로 지정하고, 나머지 name, placeNo, time을 빈값으로 둡니다.
그리고 평일 티켓의 함수를 만들어 그 속에 평일 티켓의 프로토타입(WeekdayTicket)을 Ticket으로 새 객체를 생성합니다.
>> 이렇게 하면 Ticket의 데이터를 WeekdayTicket이 가지고 있는 것입니다.
주말 티켓을 의 함수를 만들어 그 속에 평일 티켓의 프로토타입(HolidayTicket)을 Ticket으로 새 객체를 생성한다.
>> Ticket의 데이터를 HolidayTicket이 가지고 있습니다.
이 때 원래의 prototype의 price인 10000이 되어 있는 것을 this.price = 12000으로 덮어씁니다.
**참고**
이 때, HolidayTicket.price = 12000 이 아닌, this.price = 12000이 이유는 함수의 자기자신과 객체의 자기자신과 다르기 때문입니다.
새롭게 생성되는 new HolidayTicket()의 자기자신인 HolidayTicket.price= 12000 이라하면 아에 다른 함수자체의 price를 바꾸어주는 것이 됩니다.
그래서 객체의 자기자신인 this.price를 작성해야 합니다.
************
위의 prototype을 이용하여 두 가지의 영화의 티켓을 만들어봅시다.
1. 평일 영화 (기생충)
기생충을 평일에 볼 때 parasiteWeekdayTicket의 함수를 만들고 weekdayTicket의 객체를 생성한 후,
price를 제외한 name, placeNo, time을 담습니다.
그리고 console.log(parasiteWeekdayTicket.price) 하면,
위의 틀에 price가 없기 때문에 WeekdayTicket으로 올라갑니다.
그런데 WeekdayTicket에도 price가 없다. 그래서 prototype의 price로 올라갑니다.
그래서 prototype의 price에 10000으로 되어 있어 10000으로 출력하게 됩니다.
console.log(parasiteWeekdayTicket.__proto__) 하면 parasiteWeekdayTicket이 가지는 프로토타입을 확인할 수 있습니다.
2. 주말 영화 (클로젯)
그리고 console.log(클로젯holidayTicket.price) 하면,
위의 틀에 price가 없기 때문에 holidayTicket으로 올라갑니다.
그래서 prototype의 price에 12000으로 되어 있어 12000으로 출력하게 됩니다.
위와 같은 방식을 Prototype Chain (프로토타입 체인)이라 합니다.
현재 객체에 property가 없다면, __proto__를 타고 올라가서 (프로토타입을 타고 올라가서) 해당 property를 찾아서, 출력해준다. = prototype chain (프로토타입 체인)
'개발 이야기' 카테고리의 다른 글
| 실행 컨텍스트 (Execution Context) (0) | 2020.03.03 |
|---|---|
| [JavaScript] this에 대해 이해하기 (0) | 2020.03.03 |
| express 프레임워크 2_서버 실제 연결하기(마이리얼트립) (0) | 2020.02.06 |
| express 프레임워크 1_[node.js], [express.js] (0) | 2020.02.01 |
| [마이리얼트립] Hook 이용하여 반복 리스트 컴포넌트화(배열) (0) | 2020.01.22 |
