JavaScript로 클래스 구현하기?
안녕하세요. 최근에 Windows Sidebar Gadget 관련해서 테스트 프로그램을 작성하느라 오랜만에 웹 프로그래밍을 해보게 되었습니다. 일반적으로 웹 프로그래밍이 클라이언트 측에서는 서버에서 보내온 HTML 코드를 사용자에게 보여주는 역할을 하기 때문에 많은 기능이 서버측 코드에 의해서 작성 됩니다. 대부분의 비지니스 로직이 서버상의 ASP나 JSP, PHP, ASP.NET 등의 서버 코드에 의해서 동작하게 됩니다.
또한 클라이언트에서 웹 서버 사이에 요청과 응답이라는 단계가 완료되면 연결이 끊어지고 다른 작업이 필요하면 다시 서버에게 어떤 작업을 요청하게 됩니다. 이러한 connectless라는 특성때문에 웹 프로그래밍 환경은 많은 제약사항을 가지고 있었는데 AJAX라는 기술이 발달하면서 클라이언트 기반 프로그래밍으로 웹 개발 환경이 많이 바뀌었습니다.
즉, 클라이언트 측에서 구현할 수 있는 기능들이 다양해졌다는 의미입니다. 이러한 개발 환경의 변화의 중심에는 JavaScript가 있다고 생각합니다. Gadget의 경우 클라이언트에서 대부분의 코드를 가지고 실행되기 때문에 기존의 웹 프로그래밍과는 달리 서버에 의존적이 아닙니다. Gadget을 구현하는 과정의 반 이상이 JavaScript를 이용해서 로직을 구현하는 것이라고 해도 과언이 아닐 정도로 중요한 부분을 차지합니다.
그러던 중에 우연히 아래와 같은 MSDN 매거진 아티클을 발견하게 되었는데, 재밌는 내용이 많이 있어서 소개하고자 합니다.
개체지향기술을 이용한 고급 웹 프로그램 만들기
https://msdn.microsoft.com/ko-kr/magazine/cc163419.aspx
위 문서에 보면 JavaScript를 이용해서 클래스를 만들고, 상속을 구현하고, 네임스페이스를 구현하는 등 OOP 적인 프로그램을 개발하는 방법에 대해서 자세히 설명하고 있습니다. 시간 되실 때 꼭 한 번 읽어보시기 바랍니다.
또 서론이 길어졌습니다. 자. 간단히 JavaScript를 이용해서 클래스를 구현하는 방법을 알아보도록 하지요.
name, age, year라는 속성과 Show라는 메쏘드를 가지는 Student라는 클래스를 만드는 방법은 다음과 같습니다.
별도의 클래스 선언 과정없이 함수를 정의하듯이 다음과 같이 코드를 작성하면 됩니다. 이는 일반적인 OOP 언어에서 클래스의 생성자(constructor) 함수와 같은 모습을 하고 있습니다. 멤버 변수의 선언도 별도로 필요없고 클래스의 내부 범위에 속한다는 것을 명시하기 위해 this 객체를 이용해서 this.name과 같은 형식으로 표현하면 됩니다.
function Student(name, age, year)
{
// member variables
this.name = name;
this.age = age;
this.year = year;
// member methods
this.Show = Show;
}
마지막 줄에 Show는 멤버 메쏘드 구현의 예를 들기 위한 것인데, 아래와 같이 같은 이름으로 함수를 구현함으로써 멤버 함수를 간단히 구현할 수 있습니다. 아래 Show 함수의 구현부에는 Student 클래스의 멤버 함수라는 것은 명시적으로 드러나 있지 않지만 this 객체를 이용해서 내부 멤버 변수인 name, age, year의 값에 접근하는 것을 확인할 수 있습니다.
function Show()
{
var strMsg = "Name:"+ this.name;
strMsg += ", Age:" + this.age;
strMsg += ", Year:" + this.year;
alert(strMsg);
}
이렇게 만들어진 Student 클래스로 실제로 인스턴스를 만들어서 사용하는 방법을 알아보겠습니다. 이 또한 간단히 다음과 같이 작성할 수 있습니다.
var student1 = new Student("David", 22, 3);
student1.Show();
var student2 = new Student("Michael", 21, 2);
student2.Show();
student1, student2 객체를 2개 만들 때 각 인스턴스에 대한 속성 값을 지정하고 Show() 메쏘드를 호출하고 있습니다.
다음은 위 내용을 테스트하기 위한 예제 html 페이지의 전체 내용입니다.
<html>
<head>
<script language="javascript">
function Student(name, age, year)
{
this.name = name;
this.age = age;
this.year = year;
this.Show = Show;
}
function Show()
{
var strMsg = "Name:"+ this.name;
strMsg += ", Age:" + this.age;
strMsg += ", Year:" + this.year;
alert(strMsg);
}
function
</script>
</head>
<body>
Using Javascript as an OOP language.
<script language="javascript">
var student1 = new Student("David", 22, 3);
student1.Show();
var student2 = new Student("Michael", 21, 2);
student2.Show();
</script>
</body>
</html>