파일로 쪼개서 정리정돈하기 (.js)

이전 시간에 코드를 정리정돈할 수 있는 도구인 함수, 객체 등을 공부하였습니다.

이번 시간에는 서로 연관된 코드들을 파일로 그룹핑하여 묶는 정리 방법을 알아보겠습니다.

주야간모드전환.txt

0.00MB

객체의 활용시간에 완성해두었던 주/야간모드 전환코드입니다.

지금까지 작업해두었던 내용을 다른 웹페이지에도 적용해야한다고 생각해봅시다.

<input> 태그 내용만 복사해서 다른 html 파일에 붙여넣으면 동일한 버튼이 생성된것처럼 보여지겠지만, 실제로 그 기능은 작동되지않습니다. 이 기능을 실행하기 위해서는 <script> 부분도 함께 복사해서 적용을 시켜줘야합니다.

 

하지만, 이렇게 적용해야할 페이지가 매우 많고 수시로 수정작업도 일어난다고 가정해봅시다.

파일을 관리하기가 매우 어려워질것입니다.

때문에 여기서 우리가 만들어낸 <script> 부분만 파일을 따로 생성해서 저장한 뒤 관리하도록 하겠습니다.

 

var Body ={
  setColor:function(color){
   document.querySelector('body').style.color = color;
 },
  setBackgroundColor:function(color){
    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=i+1;
     }
   }
 }
 function nightDayHandler(self) {
   var target = document.querySelector('body');
   if(self.value === 'night')  {
     Body.setBackgroundColor('black');
     Body.setColor('white');
     self.value = 'day';
     Links.setColor('powderblue');
   } else {
     Body.setBackgroundColor('white');
     Body.setColor('black');
     self.value = 'night';
     Links.setColor('red');
  }
}

 

1. 우선 New File을 생성한 뒤 위 예시와 같이 html 파일에 만들어두었던 코드 중 <script> 태그를 제외하고 <script> 내에 있던 코드들을 복사하여 'colors.js'라는 이름으로 저장하여 줍니다.

2. html 파일에서는 위에 복사한 <script> 태그 내의 내용을 모두 지운 뒤 'colors.js' 파일을 불러오도록 설정합니다.

이렇게 파일을 별도로 생성하여 관리하게 되면 동작은 기존과 똑같이 실행되지만, 새로운 html 파일을 만들었을 때 모든 코드를 복사할 필요 없이 간단하게 colors.js 파일을 새로운 웹페이지에 포함시키기만하면 동일한 기능을 구현시킬 수 있게 되는것입니다. 즉, 작성한 코드를 재사용할 수 있고 수정사항이 발생되더라도 colors.js 파일만 수정하면 모든 웹페이지에 동시에 적용시킬 수 있습니다. 또한 가독성이 좋아지고, 코드가 훨씬 명확해지며 파일의 이름을 토해 코드의 의미를 유추해볼 수 있습니다.

 

위의 예시와 같이 코드를 작성한 후 [크롬]에서 웹페이지 실행 후 [검사]-[network]탭을 보면 웹브라우저가 colors.js를 다운로드해서 원래 코드가 있는것처럼 해석하는 것을 볼수 있습니다.

이렇게하면 웹페이지를 로드할 때 웹페이지에 접속해서 자바스크립트파일도 다운로드해야하므로 2번 접속해야합니다.

웹서버의 입장에서 접속은 적을수록 좋지만, 그럼에도불구하고 위 예시처럼 파일을 쪼개서 저장하는 것이 더욱 효율적입니다.

왜냐하면 한번 웹페이지에서 다운로드된 파일은 웹브라우저가 보통 컴퓨터에 저장하고, 다음에 접속할때는 저장된 파일을 읽어서 네트워크를 통하지 않게 하기 때문입니다.(캐시) 서버 입장에서 훨씬 비용도 절감되고 사용자입장에서도 네트워크 트래픽을 절감하고 더 빠르게 웹페이지를 화면에 표현할 수 있습니다.

---

ex1.html

0.00MB

colors.js

0.00MB