자바사춘기
117
2019-06-21 10:54:56
2
305

SPA 에서. 서브영역 스크립트 동적 로드 조언.



안녕하세요. SPA (싱글페이지어플리케이션) 을 작성하고 있습니다.

일정 관계상 별도의 라이브러리는 사용하지 않습니다.( 앵귤러/리액트/backbone 등..)


예를 들어 현재 구조는 다음과 같습니다.


<html>
   <script>
        // 1. 프로젝트 글로벌 스크립트
   </script>
   <div id="common">
        // 2. 메뉴등 공통영역
   </div>

   <div id="contents" >
       // 3. 업무마다 바뀌는 영역
   </div>

</html>


위와 같은 화면 구조에서. 사용자가 메뉴등을 클릭하면. ajax로 서버에서 html을 문자열로 받아와서. "3. 업무마다 바뀌는 영역" 에 innerHtml 로 컨텐츠를 동적으로 교체하고 있습니다. (jQuery.html()) 


궁금한 부분은. 3 번에 동적으로 교체할 html 에 각 업무마다 사용할 스크립트코드가 또 들어있게 됩니다. 다음과 같습니다.


<div id="업무_div_1">
  // 업무 1의 html
</div>
<script>
  // 업무 1 과 관련된 스크립트들이 들어감
</script>



결과적으로는 다음과 같이 되는데요.


<html>
   <script>
        // 1. 프로젝트 글로벌 스크립트
   </script>
   <div id="common">
        // 2. 메뉴등 공통영역
   </div>

   <div id="contents" >
       // 3. 업무마다 바뀌는 영역

       <div id="업무_div_1">
          // 업무 1의 html
       </div>
       <script>
         // 업무 1 과 관련된 스크립트들이 들어감
       </script>
 
   </div>

</html>



궁금한 부분은. 위와 같은 상황에서. 빨갛게 표시된, 서브영역에 동적으로 로드된 html안에 존재하는 스크립트는 브라우저에 계속해서 로드되게 되는것이 아닌지요? html은 어차피 엎어치니깐 문제없다 치더라도. 해당 서브 스크립트안에 존재하는 object들은. 사용자가 해당 메뉴를 누를때마다 브라우저에 계속해서 연속해서 로드되면서 어떤 부작용을 일으키는 것은 아닌지 의문이 듭니다.


일단 업무영역 스크립트에서 jquery 의 on 등으로 이벤트를 바인딩했을때. 사용자가 메뉴를 누른 횟수마다. 업무영역에 동적으로 스크립트가 매번 초기화되다보니. 메뉴를 두번 누르면. 이벤트가 두번 붙어있고. 세번 누르면 세번 붙어있는 증상은 확인을 했습니다. 

이 증상은 bind를 쓴다거나. off().on() 등으로 해결은 할수 있는데요.


다음의 사항들이 궁금합니다.


1. 중복이벤트만 잘 처리한다면 상기와 같이 구현을 하여도 별다른 부작용은 없을까요?


2. 아니면 SPA에서는 항상 모든 스크립트는 첫화면에서 전부 한번만 로드해야 하는지요? 업무별로 스크립트를 가져갈 수는 없는지 궁금합니다. 논리적인 형태말고. 최종 물리적인 형태에서말입니다..

(개발 입장에서는 업무별로 js가 나뉘어져있다하더라도. 사실은 최종 배포나 빌드시에는. 전부 하나로 합쳐져서 첫화면에서 로드되는 방식이라던가..)


3. 제가 원래 프론트개발자가 아닌다보니. 최근 추세를 잘 모릅니다.. backbone, react, vue 등에서는 어떤 방식인지요? 전부 첫화면에서 모든 html과 js등을 로드하고. 단순 display 영역만 제어하는 방식인지요? 혹은 서버에서 html을 받아와서 서브영역에 동적으로 밀어넣는 방식인지요? 그런경우 저와 같은 동일한 중복 스크립트 삽입이 일어나는것은 아닌지요?



조언 부탁드리겠습니다. 

감사합니다.




0
  • 답변 2

  • kiroki
    608
    2019-06-21 14:08:02

    저는 main page에 고객사마다 다른 종류의 sub page가 붙는걸 만든적이 있는데요

    그때는 저도 sub page가 로드될때마다 element에 event가 중복해서 바인딩되는 현상이 있어

    sub page가 로드될 때 이벤트 리스너를 빼고 다시 붙이는 작업을 했습니다

    제경우는 고객사마다 element도 event도 다 다른종류여서 main 페이지에 script를 모으기가 애매한 구조였어요

    고객사마다 main + sub 이렇게 배포 나가는 구조여서 다른 고객사 소스를 넣을 수 없었거든요

    질문자분께서는 업무내용만 변경되는 것이라면 main page에 스크립트를 한번만 로드하게 하셔도 괜찮을 것 같습니다.


    1. 이벤트 외의 부작용은 없었습니다.

    2.  업무별 필요한 js 각각을 다른곳에서 사용하는 경우가 없다면 하나로 합쳐서 한번만 로드하는게 좋을 것 같습니다.

    3. 이건 저도 궁금하네요..

  • 자바사춘기
    117
    2019-06-23 22:37:31

    답변감사드립니다.

  • 로그인을 하시면 답변 을 등록할 수 있습니다.