[Jquery] Jquery 초기 구조 설정하기

안녕하세요. 명월입니다.

이 글은 Jquery를 잘 사용하기 위한 초기 구조 설정에 관한 글입니다. 개인적인 경험에 의한 것이니 꼭 정답은 아닙니다.

최근에 Javascript 라이브러리 프레임워크가 갑자기 부쩍 늘었습니다. 내가 알고 있는 것만 해도 AngularJS가 있고 Vue.js가 있습니다. 그 밖에도 크고 작게 라이브러리 프레임워크가 늘어나고 있는 것 같습니다.

이러한 프레임워크가 늘어나면서 웹 어플리케이션에서 클라이언트의 새로운 개념이 생기고 예전보다 더 쉽게 빠르게 만들 수 있게 되었습니다. 특히 One page 사이트라 해서 초기 페이지의 웹 Request 없이 ajax 등을 통해 페이지가 동적으로 움직이고 더욱 깔끔하게 보입니다.

개인적으로 Vue.js는 저도 아직 공부해 보지 않았고 사용해 본 적이 없어서 쉽게 이야기하기는 힘드나 AngularJS는 한 2년 정도 다루어 보았습니다. Vue.js도 비슷한 개념이니 크게 다르지 않을 거라 생각합니다.

여기서 제가 AngularJS를 다루어 봤는데 제 생각입니다만 이게 프로그래밍을 더 쉽게 만드는 것인지 더 복잡하게 만드는 것인지 헷갈릴 정도입니다. AngularJS 자체가 Jquery의 모든 기능을 흡수하지 않았기 때문에 당연히 Jquery와 혼합해서 사용해야 하는데 그에 따른 불편함이 엄청 많습니다.

예를 들면 Dom 객체에 직접 값을 넣으면 $rootScope.$apply로 등록을 해야 한다던가 service를 등록할 때마다 무슨 객체를 사용할 지 선언을 해야 한다던가 물론 AngularJS 전용 IDE 툴이 있으면 이게 더 좋을 지도 모르겠으나 프로그램을 작성할 때 보통 서버 사이드 언어 툴(eclipse나 visual studio)을 같이 사용하는데 이 툴들은 AngularJS를 지원하지 않습니다. 사실 있는데 제가 모를 수도 있겠네요. 그러다 보니 매우 불편하더라고요.

그래서 저는 아직 순수 Javascript(vanilla) 와 Jquery만을 선호합니다. 그러나 이게 class 개념이 없어서 소스 정리가 힘든 건 확실합니다. 제가 나름대로 최대한 정리하면서 class 개념으로 사용할 수 있는 방법을 소개합니다.

먼저 기본적인 구조입니다

var _ = (function(obj){
  // 초기화 영역
  $(obj.onLoad);
  return obj;
})({
  // 구조를 Json 형식으로 만들었다.
  data: null,
  onLoad: function() {
    _.data = 1;
    _.print();
  },
  print: function(){
    console.log(_.data);
  }
});

위와 같은 구조입니다. 이전 vanilla때 처럼 단순히 변수 선언과 함수 선언으로 쭉 늘어 트리는게 아니고 「_」 변수 안에 함수와 변수를 전부 모와 두는 형식입니다. 그리고 위에 function으로 초기화 설정이 가능하게 하고 안에 내부적으로 「_」 변수로 참조가 가능하게 하는 것입니다.

물론 후에 추가를 하고 싶으면 Jquery의 extend함수를 사용해서 추가해도 됩니다.

$.extend( _, {
  add: function(){
    console.log("addition");
  }
});

사양이 좀 더 복잡해서 내부 참조 전용 함수(private)와 외부 참조 함수(public)를 구분해서 만들고 싶다하면 다음과 같이도 만들 수 있습니다.

var _ =(function(obj){
  //초기화 영역
  $(obj.onLoad);
  return obj;
})((function(){
  // 내부 변수
  var data = "hello world";
  // 내부 함수
  function printOut(){
    console.log(data);
  }
  return {
    // 외부 함수
    onLoad: function(){
      printOut();
    }
  };
})());

위 소스는 data와 print는 내부 변수와 함수로 외부에서는 보이지 않습니다. 즉, onLoad의 외부 참조 함수를 통해서 내부를 들어갈 수 있습니다.

개인적인 생각으로 위 처럼만 Jquery를 잘 정리해서 사용만 해도 소스 관리가 엄청 편해질 것이라 생각됩니다.

이 글은 2019년 기준으로 제 생각으로 작성한 것이니 앞으로는 어떻게 될지 모르겠네요..