[10] 파일로 쪼개서 정리 정돈하기

지금 까지 정리 정돈의 도구 : 함수, 객체

더 큰 정리정돈의 도구 '파일'

서로 연관된 코드들을 파일로 묶어서 그룹핑한다.

 

목표 : 앞서 만든 읽기 모드 버튼의 기능을 모든 웹페이지에 적용

 

input 태그와 JS코드를 모두 복사하여 웹페이지마다 붙여 넣기 하여야 한다.

웹페이지가 1억 개라면...? 배포 후, color 값을 수정하고 싶다면...?

 

"파일로 쪼개서 저장한다."

 

1. colors.js 라는 새로운 자바스크립트 파일 생성
2. 웹페이지에 공통적으로 들어가는 스크립트 코드 부분을 파일에 저장 ( *script 태그는 들어가면 안 됨. )
3. script 코드 부분 삭제 후, script 태그에 src 속성 값으로 JS파일명 적어주기.

<!-- colors.js 파일 내용 -->
var Body = {    //객체생성
  setColor : function(color){   //메소드 정의(1) - 객체 정의 구현 부분에서 메소드 정의
    document.querySelector('body').style.color = color;
  }
  // },
  // setBackgroundColor : function(color){
  //   document.querySelector('body').style.backgroundColor = color;
  // }
}

Body.setBackgroundColor = function(color){  //메소드 정의(2) - 생성한 객체에 메소드 추가
  document.querySelector('body').style.backgroundColor = color;
}

var Links = {
  setColor : function(color){
    var alist = document.querySelectorAll('a');
    var i=0;
    while( i < alist.length ){
        alist[i].style.color = color;
        i++;
    }
  }
}
function nightDayHandler(self){
  var target = document.querySelector('body');

  if(self.value === 'night'){
    Body.setBackgroundColor('gray');
    Body.setColor('white');             //Body 객체의 setColor 메소드 호출
    self.value='day';

    Links.setColor('orange');           //Links 객체의 setColor 메소드 호출
  }else{
    Body.setBackgroundColor('white');
    Body.setColor('black');
    self.value='night';

    Links.setColor('black');
  }
}

 

<!-- 2.html 내의 script 부분 수정. 코드 내용은 삭제 후, colors.js 소스파일만 연동해준다. -->
<script src="./colors.js"></script>

 

 

검사 > 네트워크 탭에서 해당 웹페이지를 표시하기 위해서 로딩된 파일들의 목록을 확인할 수 있다.

웹브라우저는 사용자 몰래 colors.js 파일을 다운도르 받아서 코드에 원래 있었던 것처럼 갖다 놓고 해석하게 된다. 

 

 

파일로 쪼갰을 때 장점

1. 코드의 재사용 : 새로운 파일을 만들면 심플하게 colors.js 파일을 새로운 웹페이지에 포함시키면 된다. 
2. 유지보수의 용이성 : colors.js 파일을 수정하면 모든 페이지에 반영된단. 
3. 가독성과 명확성 : 웹페이지에 colors.js 파일을 포함(include)하고 있다면 동일한 코드를 사용하고 있다고 확신할 수 있다. "가독성이 좋아지고 코드가 명확해진다. " 코드의 의미가 파일의 이름을 통해서 확인할 수 있다.

캐시(cache)

위의 2.html를 웹페이지에 로드할 때,  웹 서버에 3번 접속해야 한다. html, css, js 파일들을 다운 받아야하기 때문에... 그건 웹 서버 입장에서 좋은 일 일까?

나쁜 일이다! 접속은 적을수록 좋다.

그럼에도 불구하고 이렇게 하는 것이 훨씬 효율적이다. why? "캐시(cache)" 때문에

 

한 번 웹브라우저에 다운로드된 이런 파일은 웹브라우저가 보통 컴퓨터에 저장해놓고 , 다음에 접속할 때 저장된 파일을 읽어서 네트워크를 통하지 않게 된다. 서버 입장에서는 훨씬 더 비용을 절감할 수 있고, 사용자 입장에서도 네트워크 트래픽도 절감할 수 있고 훨씬 더 빠르게 웹페이지를 화면에 표시할 수 있다. 따라서 파일로 쪼개는 것이 비용과 시간적인 면에서 훨씬 효율적인 방법이다.