※ 실제 게임 와우(월드 오브 워크래프트)의 공략이나 게임 개발 등과는 전혀 관련이 없는 내용입니다. 자바스크립트의 Class 개념을 학습하며 작성된 글입니다.
인스턴스? 누구세요?
자바스크립트에 입문하고 인스턴스라는 용어를 처음 알게 되었을 때, 일상에서 자주 사용하는 단어가 아니다보니 개념을 익히기가 어려웠다. 내가 알고 있는 인스턴스의 쓰임이라고는 와우의 '인스턴스 던전' 뿐이었다. 혹은 인스턴트(instant)의 오타인 줄 알았다. 인스턴스를 사전에서 찾아보면 '사례'라는 뜻으로 나와있다. 자바스크립트의 클래스를 학습하면서 객체, 인스턴스라는 단어를 자주 사용하게 되는데, 그럴 때마다 머릿속 한 편에 있던 '클래스의 인스턴스는 와우의 인스턴스 던전과 도대체 무슨 관계인걸까?'라는 물음이 해소되질 않았다. 흔한 단어가 아닌데 둘 다 사용된 걸 보면 무언가 연관이 있을 것 같은데... 그게 과연 무엇일까? 그래서 이번에는 클래스와 인스턴스, 객체지향 프로그래밍, 프로토타입 개념을 녹여 인스턴스를 파헤치는 글을 작성해보고자 한다.
인스턴스 던전은 무엇인가?
잠시 인스턴스 던전이 무엇인지 알아보자. 영어로는 Instance Dungeon이다. 게임을 안 하는 사람이라면 던전의 개념부터 알아야 하는데, 대강 '지하 미궁을 배경으로 하는, 몬스터를 잡는 게임 내 필드'라고 할 수 있다. 던전이면 그냥 던전이지, 인스턴스는 대체 왜 붙는 걸까? 검색해보니 위키피디아에 해당 항목이 있었다. (🔗 위키피디아 '인스턴스 던전' 검색 결과)
대규모 다중 사용자 온라인 RPG 게임(MMORPG)에서는 유저 간 필드가 공유되어, 남이 고생해서 얻은 아이템을 다른 유저가 홀랑 가져가버리는 비매너 행위가 발생하곤 한다. 멀티 게임 역시 인간 사회의 축소판이기 때문에 이런 저런 사건사고가 많이 일어난다. 이런 문제점을 해결하기 위해 인스턴스 던전이 생겼다. 남과 공유되는 필드가 아니라, 개인만을 위한 던전을 인스턴스 던전이라고 부른다. 덕분에 유저는 다른 비매너 유저를 신경쓸 필요 없이 자신(또는 파티)의 모험과 성취에만 집중할 수 있게 된다.
여기서 인스턴스란, '해당 영역에 들어오는 각 그룹 또는 특정 수의 플레이어에 대한 위치의 새 복사본을 생성하는 특수 영역'이다. 인스턴스의 사전적 의미를 살려보자면 내가 던전에 입장하는 순간 '나만의 던전 사례'가 생성되는 것이다. 다른 유저는 다른 사례가 될 것이다. 두 사례는 던전이라는 같은 틀을 공유하지만, 동일한 사례가 되지는 않는다. 이것이 클래스와 인스턴스의 개념이다.
클래스와 인스턴스
프로그래밍 얘기로 돌아가보자. 클래스(Class)는 비슷한 속성을 가진 어떤 것들의 공통되는 속성을 모아 정의한 추상적인 개념이다. 와우의 경우 던전을 찍어내는 클래스가 있다고 할 수 있다. 던전 내부에 등장하는 몬스터는 어떤 유형이고, 몬스터의 레벨은 어떻고, 모험을 마쳤을 때의 보상은 어떤 것들이 있고 등을 정의해둔 던전 클래스가 존재한다.
인스턴스(instance)란 클래스의 속성을 지니는 실존하는 객체를 의미한다. 인스턴스는 자신만의 고유한 속성을 가지고 있다. 던전 틀로 찍어낸 나만의 인스턴스 던전은 유저의 레벨에 맞게 몬스터의 레벨이 조절(스케일링)된다. 모험을 마쳤을 때 유저의 직업에 맞는 보상 아이템이 나온다. 마법사의 경우 마법을 쓰는데 관련한 장비나 무기, 검사일 경우 검이나 방패 등일 것이다.
객체 지향 프로그래밍
객체 지향 프로그래밍은 세상을 객체 단위의 집합으로 바라보고자 하는 프로그래밍 패러다임이다. (🔗 위키피디아 '객체 지향 프로그래밍' 검색 결과) 객체 지향 프로그래밍의 기본 요소로는 클래스, 인스턴스, 메소드가 있다. 클래스가 바로 객체 지향의 핵심이다. 클래스로 객체를 만들어내고, 각 객체는 메시지를 주고받거나 데이터를 처리할 수 있다. 클래스 기반 언어로는 Java, C++, C#, Python 등이 있다.
객체 지향 언어의 특징 중 상속을 살펴보자. 상속이란 상위 클래스의 특징을 하위 클래스가 물려받는 것으로써, 하나의 클래스가 가진 특징(데이터, 함수 등)을 다른 클래스에게 물려주고자 할 때 사용한다. 이는 똑같은 코드를 반복해서 작성하는 낭비를 줄이기 때문에 코드의 재사용성을 증대시키고 유지보수가 용이해진다. 상속받은 클래스에 데이터와 함수를 추가하거나 변경할 수 있다. 하위의 클래스에서는 상위 클래스가 가진 특징에 덧붙여 구체적인 내용을 추가할 수 있다.
자바스크립트와 객체 지향
자바스크립트는 프로토타입 기반 객체 지향 언어이다. 클래스 기반 언어가 아니지만, 객체 지향 프로그래밍 방식으로 구현할 수 있다. 객체 지향에서 추구하는 재사용성과 유지보수의 용이성을 차용하고자 하는 것이다. 자바스크립트에서는 클래스, 생성자, 메소드 모두 함수로 구현할 수 있다. 자바스크립트에서의 클래스 개념은 ES6에서 도입되었으므로, 이전에는 별도의 객체 생성 방법을 통해 객체를 구현했다.
// 객체 리터럴
var obj1 = {};
obj1.name = 'sj';
// Object 생성자 함수
var obj2 = new Object();
obj2.name = 'sj';
// 생성자 함수
function Func() {}
var obj3 = new Func();
obj3.name = 'sj';
객체 지향 프로그래밍의 상속과 캡슐화 개념은 프로토타입 체인과 클로저 등으로 구현할 수 있다. ES6에서 클래스 문법이 처음 도입되었기 때문에 이후로는 'extends' 키워드를 사용해 손쉽게 클래스 상속을 구현할 수 있게 되었다.
프로토타입
자바스크립트는 프로토타입 기반 언어이며 프로토타입을 통해 상속을 사용한다. 클래스 기반 언어에서는 상속을 이용하지만, 자바스크립트에서는 어떤 객체를 원형(프로토타입)으로 삼고 그것을 프로토타입 체인을 통해 참조하는 방식으로 상속과 유사한 효과를 얻는다. 메소드를 호출하는 과정을 살펴보자면 다음과 같다.
1. 인스턴스에서 메소드를 호출하면 이것을 먼저 자기 자신에서 찾는다.
2. 없을 경우 [[prototype]](프로토 라고 읽는다)라는 프로퍼티를 타고 생성자 함수의 프로토타입(Constructor.prototype)에 접근한다.
3. 메소드를 찾았을 경우, 검색을 중지한다.
4. 메소드를 찾지 못했을 경우, 다시 프로토를 타고 상위 생성자 함수의 프로토타입에서 메소드를 찾는다.
실행 컨텍스트의 스코프 체이닝과 유사한 흐름으로 진행된다. LexicalEnvironment의 outerEnvironmentReference를 타고 상위 스코프로 식별자를 찾아 나서는 것과 같다. 이렇게 계속 프로토 프로퍼티를 타고 상위의 프로토타입에서 메소드를 검색하는 것이 프로토타입 체이닝이다. 자바스크립트에서의 상속은 이런 방식으로 이루어진다.
자바스크립트에서 클래스를 사용하는 것도 프로토타입을 기반으로 삼고 있기 때문에, 클래스 문법은 프로토타입을 보다 쉽고 간편하게 사용할 수 있는 문법 설탕이다. 문법 설탕의 다른 예시로는 JSX가 있다. 순수 자바스크립트만으로도 JSX를 구현할 수 있지만 코드가 길어지고 가독성이 매우 떨어진다. JSX를 사용하면 코드가 더 짧고 간단해지는데, 복잡한 문법을 쉬우면서 편리한 문법으로 바꾸어 사용하는 것이 문법 설탕이다.
다시, 인스턴스 던전으로
고민이 해결됐다. 왜 인스턴스 던전이라고 부르는 지 깨달았다. 사실 와우를 직접 해본 적은 없다. 나에겐 자바스크립트가 개발 입문 언어이기 때문에 클래스 기반 언어도 사용해본 적이 없다. 그렇지만 모두 자바스크립트라는 매개체를 통해 이해하게 되었다. 프로토타입을 제대로 이해하고 나니 그동안 절절매던 클래스도 쉽게 이해가 되었다. 클래스가 프로토타입의 문법 설탕이었다니! 그런데 그 설탕이 더 어려워보였다니! 자바스크립트가 허점도 많고 골칫덩이 언어 취급을 받기도 하지만 날 개발의 길로 이끌어준 언어이기도 하고 오묘한 매력이 있어서 내겐 애정이 크다. <코어 자바스크립트> 책을 드디어 마쳤는데 뿌듯하고 속시원하다. 인스턴스 던전의 수수께끼도 궁금증을 풀었으니 이제 인스턴스하면 머릿속에서 자동완성되는 인스턴스 던전으로부터 날 해방시켜주었으면 한다. 🤣
참고 레퍼런스
https://wowpedia.fandom.com/wiki/Instance
https://poiemaweb.com/js-object-oriented-programming
https://ko.javascript.info/classes
<코어 자바스크립트> https://www.yes24.com/Product/Goods/78586788
'개발 > JavaScript' 카테고리의 다른 글
[JavaScript] 코어 자바스크립트 - 8. 클래스 (0) | 2023.06.18 |
---|---|
[JavaScript] 코어 자바스크립트 - 7. 프로토타입 (0) | 2023.06.11 |
[JavaScript] 코어 자바스크립트 - 6. 클로저 (0) | 2023.06.07 |
[JavaScript] 코어 자바스크립트 - 5. 콜백 함수 (0) | 2023.03.23 |
[JavaScript] 코어 자바스크립트 - 4. this (0) | 2023.03.06 |