지난 포스팅 때에는 타입스크립트 문법으로 유추했지만 오늘 다시 보니 그냥 기본문법으로 구현된 것 일수도 있겠다 유추되었다.
var FullCalendar = (function (exports){ /* 코드 생략 */ }({}));
자바스크립트 기본서 책을 한번 읽고나서 객체인줄 알았으나 책을 두번째 읽으며 블로그에 정리하고 다시 파일을 보니우측에 function이라는것이 이제서야 눈에 들어왔다.
식별자 변수명이 대문자인것으로 보아 생성자 함수로 유추된다.
익명 함수문법을 사용한 생성자 함수 선언이다.
선언적 생성자 함수로 구현하면 아래와 같지 않을까?
function fullcalendar (exports) { } var fullCalendar = new FullCalendar();
마지막 괄호의 중괄호를 없는셈 치면 영락없는 자기호출 함수이다.
자기호출 하는 생성자 익명함수 즉, main.js 파일을 로드하면 바로 자기자신을 실행시켜 객체를 생성하게 된다.
그렇다면 함수를 호출하는 ()안의 {}는 무엇일까?
그것은 바로 new FullCalendar({ }); 로 해석할 수 있다.
new FullCalendar({ });
객체를 생성하면서 빈 객체를 매개변수로 주입한것이다.
왜 빈 객체를 주입했을까?
선언적 문법의 경우 함수선언부의 매개변수 experts는 함수를 호출할때의 매개변수 expeorts의 인자값을 받는 형태이다
function fullcalendar (exports) { } var fullCalendar = new FullCalendar(exports);따라서 인자값 exports는 { } object 객체 형태 다시말해 빈 객체 형태임을 알 수 있다.
빈객체 exports는 main.js의 최 하단부 14707라인 부터 14955라인까지 200개가 넘는 속성에 대해 추가하고 속성값 초기화를 진행한다.
그리고 마지막에 return을 통해 생성자함수에 초기화를 진행한 값을 반환한다.
Object.defineProperty(exports, '__esModule', { value: true });위의 코드도 확인할 수 있는데 ECMAScript5에서 추가된 Object객체의 메서드임을 확인할 수 있다.
defineProperty 메서드는 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정하고 수정된 객체를 리턴하게 된다.
다음과 같이 3개의 매개변수를 담는다.
Object.defineProperty(1,2,3)
첫번째 매개변수에는 속성을 추가하려는 객체를 입력하고
두번째 매개변수에는 속성의 이름을 입력한다.
세번째 매개변수에는 속성과 관련된 옵션 객체를 입력하는데 여기서 value는 속성 값을 의미한다.
exports 객체에 __esModule : true 속성을 주입하는것이다.
var exports = { __esModule : true }위와 같은 형태로 객체를 초기화한것이다.
이렇게 초기화를 한 후 이 객체를 FullCalendar 생성자 함수에 반환하는 형태이다.
앞서 말한 14707~14955 라인의 exports 객체 추가 및 속성 초기화에대한 데이터들은 생성자 함수 내부에서 모두 속성 혹은 메서드로 구현되어있다.
이클립스 상에서 Ctrl + F를 사용하여 exports 객체에 초기화하는 속성의 이름들을 검색하면 Fullcalendar 내부 로직상에서 모두 초기화되고 있음을 확인할 수 있다.
구현된 모든 속성과 메서드들을 매개변수 exports객체에 속성 추가 및 초기화를 진행하고 반환하고 결과적으로 FullCalendar가 작동되는것이다.
정리하자면 다음과 같다
main.js 파일을 참조하는 페이지에서 페이지가 로드되면 자동으로 exports 매개변수를 받는 FullCalendar 이름의 자기호출생성자함수가 작동되어 FullCalendar 객체가 생성되는 동시에 FullCalendar 함수 내부 로직들이 모두 작동한 후 매개변수로 받은 exports 객체에 속성과 메서드를 추가하여 exports 객체를 FullCalendar 객체에 반환하여 결과적으로 Fullcalendar가 작동 되도록 구현되어있다
<script src='assets/js/fullcalendar/main.js'></script> <script> console.log(FullCalendar) document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth' }); calendar.render(); }); </script> <body> <div id="calendar"> </div> <body>
이제 상속할 수 있겠지?
생성자 함수는 아닌거같다.
아무리 식별자 즉, 변수명이 CamelCase기법인 식별자 변수명의 첫글자가 대문자라고 하더라도 new키워드를 사용하지 않았기 때문에 또, Object를 반환하여 함수명 자체를 출력하면 Object로 뜨더라도 이것은 객체를 생성하는 함수는 맞지만 생성자함수는 아니다.
일반 함수로 객체를 생성한것이 맞다.
하지만 단정지을 수 없는게 캘린더를 그리기 전 캘린더의 옵션을 설정하기 위해 캘린더 객체를 생성할때 var calendar = new FullCalendar( );
가 아닌 var calendar = new FullCalendar.Calendar( ); 과 같은 형태로 객체를 생성한다.
이것은 new키워드를 사용했으므로 생성자 함수를 호출하는것이 맞고, FullCalendar 객체 하위객체 Calendar객체를 호출하는것이다.
이전 포스팅에서 추측했던... 자바스크립트 클래스로 구현된 코드를 타입스크립트 컴파일엔진을 통해 컴파일되어 코드화 된 타입스크립트 문법이 맞을수도 있다...
나는 지금 계속 허공에 헛발질 하는것일수도 있다....
아직 자바스크립트 문법에 대한 기본만 공부한 상태이니, 인프런강의에서 제공하는 중급, 고급 문법을 공부하면 조금 이해가 가겠지....싶다
Fullcalendar 객체를 상속받으려는 이유는 "필요한 부분" 만 커스터마이징 하기 위해서, 이것은 추후 버전업이 되었을 경우 동일한 부분에 대한 수정이 이루어질 경우를 대비하려는 것이 가장 큰 이유중 하나이며, 경험을 통해 리팩토링기법과 같은 기술적인 부분을 습득하기위해서 계속 도전하고있다.
오늘 유추한 내용들을 잘 정리하여 어떻게 구현해야 상속받을 수 있을지에 대해 스택오버플로우에도 문의해 볼 예정이다.
'API > FullCalendar' 카테고리의 다른 글
| Fullcalendar React props : selectable, dateClick(select) 등 Interaction 설정 및 사용법 (0) | 2022.12.04 |
|---|---|
| Fullcalendar API - REACT NPM 다운 및 설정 (0) | 2022.12.03 |
| FullCalendar <tr class="fc-list-event-title"> 접근 불가능 main.js 커스터마이징 (0) | 2022.01.06 |
| FullCalendar ListView 목록보기에서의 fc-list-title 접근 도중 fc-list-empty 제거 (0) | 2022.01.04 |
| FullCalendar 날짜 Title 형식 DataFormat으로 지정하는법 (0) | 2022.01.04 |