자바스크립트에는 Java 의 Vector 나 Map 과 같은 형태의 클래스들이 존재하지 않는다. 이는 프로그래밍하는데 상당한 불편함으로 다가온다. 없어도 상관은 없다. 하지만 불편하다. (^^)
앞으로 내가 쓰는 글에서 만들어지는 라이브러리는 대부분 클래스의 형태로 작성될 것이다. 이러한 형태가 재사용 가능하고 패키징 하기 편리한 라이브러리를 만드는 지름길이 될테니깐...

먼저 사용자 정의 객체를 만드는 방법을 알아보자. 각설하고 소스 써내려간다.

[user.html]
<html>
<head>
<script language=javascript>
<!--
function User(name, age) {
    this.name = name;
    this.age = age;

    this.getName = function() {
        return this.name;
    }
    this.getAge = function() {
        return this.age;
    }
}
 
function _getName() {
    return this.name;
}
 
function _getAge() {
    return this.age;
}
 
/**
 * 클래스 테스트
 */
function window.onload() {
    var user = new User("ggonsika", 18);
    d1.innerHTML = user.getName() + "의 나이는 " +?user.getAge() + "살 입니다.";
}
//-->
</script>
</head>
 
<body>
<div id="d1"></div>
</body>
</html>
 
OUTPUT : ggonsika의 나이는 18살 입니다.
 
 
위의 예제는 User 라는 클래스를 정의하고 이 객체를 만들어 사용하는 방법을 보여준다.
사용자는 이름과 나이라는 속성을 가지며 getName 과 getAge 라는 메쏘드를 갖는다. 일반적인 사용자를 나타내는데 매우 적절한 변수타입으로 사용될 수 있으리라 본다.
 
그런데 위의 예제에는 몇가지 문제점이 내포되어 있다.
 
첫째, 자바스크립에는 접근제한자(Java 의 public 또는 Private)가 존재하지 않는다. 따라서 관례적으로 메쏘드명 앞에 "_" 문자를 붙여서 클래스 내부에서만 사용되는 메쏘드(즉 private Method)임을 나태낸다. 그러나 이 User 클래스를 가져다 쓸때, 프로그래머는 자유롭게 _getName, _getAge 메쏘드를 호출할 수 있다. 이러한 private 의미의 메쏘드가 자유롭게 호출 가능하다는 것은 원래의 클래스 설계의도와는 다르게 사용될 수 있다는 단점이 존재한다.
 
둘째, 라이브러리 형식의 js 파일들은 여러개가 include 되는 것이 일반적이다. 지금껏 우리가 많이 사용하던 메쏘드들중 getName(), size() 와 같은 메쏘드들은 대부분의 클래스가 가지고 있는 메쏘드들이며, 동시에 여러 라이브러리가 include 되었을 때 메쏘드 충돌은 피할 수 없다.
 
이러한 문제점을 해결하기 위해, 클래스 내부에서 직접 메쏘드를 구현하는 방식을 사용하여 위의 예제를 수정해본다.
 
 
[user.js]
<!--
function User(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        return this.name;
    }
 
    this.getAge = function() {
        return this.age;
    }
}
//-->
 
[user1.html]
<html>
<head>
<script language=javascript src="user.js"></script>
<script language=javascript>
<!--
function window.onload() {
    var user = new User("유건상", 18);
    d1.innerHTML = user.getName() + "의 나이는 " + user.getAge() + "살 입니다.";
}
//-->
</script>
</head>
<body>
<div id="d1"></div>
</body>
</html>
 
이 예제는 클래스 내부에서 private 메쏘드를 구현함으로써 위에서 설명했던 두 가지 문제점을 해결했다. 그러나 이러한 방식이 어디서나 사용가능한 것은 아니다. 비지니스 로직이 복잡해지고 소스 라인이 길어진다면 하나의 메쏘드에 모든 코드를 넣을수는 없기 때문이다 (이렇게 할수 있다 하더라도 유지보수에는 치명적일 수 밖에...).
이러한 문제를 해결하기 위해서는 라이브러리 설계 시점에서 메쏘드 명을 적절하게 선택하여야 한다. 차후에 더 논의하기로 한다.
추가적으로 User 클래스의 정의부분을 자바스크립트 라이브러리 형태인 .js 파일로 분리해냄으로써 HTML 이 좀더 깔끔해 진 모습을 확인할 수 있을 것이다.
 
이제 위의 예제는 많은 의미를 내포한다. 자! 이제 자바스크립트 common_library 프로젝트의 서막은 올라간 것이다... 짝짝짝...

번호 제목 글쓴이 날짜 조회 수
246 [Gemini] ajax 와 fetch 의 차이 황제낙엽 2025.01.04 3419
245 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 3987
244 브라우저에서 이미지를 편집(crop 등) 할 수 있는 오픈소스 Cropper.js 황제낙엽 2024.11.16 3842
243 [ChatGPT] json data 의 정렬 [1] 황제낙엽 2024.07.23 3352
242 DOMContentLoaded 이벤트와 window.onload 이벤트 황제낙엽 2024.07.15 3669
241 fetch() 사용 예제들 황제낙엽 2024.07.09 3380
240 [Copilot] Vanilla JavaScript에서 외부 스크립트 파일에 정의된 함수들을 로드 황제낙엽 2024.06.21 3758
239 [Copilot] ES6 모듈(module) 문법 황제낙엽 2024.06.21 3805
238 [Copilot] JSON 객체 내부 데이터를 순회하면서 조회하는 코드 황제낙엽 2024.06.02 3270
237 [Copilot] JavaScript로 서버에 특정 값을 POST 방식으로 전달하고 응답을 기다리지 않고 바로 종료 황제낙엽 2024.05.31 3615
236 json 데이터 내의 변수명에 prefix 로 type 표현하기 황제낙엽 2024.04.15 3361
235 fetch() 함수 사용 예제 file 황제낙엽 2023.11.23 3605
234 현재 document 의 host 와 port 를 얻는 방법 황제낙엽 2023.10.03 4209
233 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 3660
232 How to build a file upload service with vanilla JavaScript file 황제낙엽 2023.08.22 3715
231 (Bard) JavaScript로 JSON 배열을 작성하는 방법 황제낙엽 2023.08.21 3672
230 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 3703
229 navigator.mediaDevices 황제낙엽 2023.08.21 3798
228 Barcode Detection API 황제낙엽 2023.08.06 3854
227 정규식을 이용한 이메일 검증 스크립트 file 황제낙엽 2023.06.25 2894