728x90

파일로 쪼개서 정리 정돈하기

함수와 객체보다 더 큰 정리 정돈의 도구.

서로 연관된 코드들을 파일로 묶어서 그룹핑하는 것.

 

  • 3.html 에서 만들었던 주간·야간모드 버튼을 1.html 과 2.html , index.html 에도 넣자.
    먼저 <input> 태그를 각각 넣고 실행해보면 버튼은 생겼지만 작동하지 않는 것을 볼 수 있다.

<input type="button" value="开启" onclick="
 nightDayHandler(this);
">

 

  • 왜 작동하지 않을까? JS 를 가지고 오지 않았기 때문이다.
    <script> 태그를 모든 웹페이지에 배포하자.
    <script>
    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;
        }
      }
    }
    var Body = {
      setColor:function(color){
        document.querySelector('body').style.color=color;
      },
      setBackgroundColor:function(color){
        document.querySelector('body').style.backgroundColor=color;
      }
    }
    function nightDayHandler(self){
      var target = document.querySelector('body');
      if(self.value === '开启'){
        Body.setBackgroundColor('black');
        Body.setColor('white');
        self.value = '关闭';

        Links.setColor('mediumspringgreen');

      } else {
        Body.setBackgroundColor('white');
        Body.setColor('black');
        self.value = '开启';

        Links.setColor('limegreen');
      }
    }
    </script>

만약 가지고 있는 웹페이지가 1억 개라면?

배포하는 것도 어렵겠지만 지금까지 코딩했던 야간모드에서 링크의 색깔을 'mediumspringgreen' 을 'orange' 로 바꾸고 싶다면?

 

이러한 상황에서 파일로 쪼개는 방법을 사용하면 된다. 

 

  • colors.js 파일을 만들고 <script> 태그에 들어있는 코드를 가져온다.
    그리고 기존 <script> 태그 내용을 지우고 <script src="colors.js"></script> 입력.

  • 3.html
<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8">
    <script src = "colors.js"></script>
  </head>
  <body>
    <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <input type="button" value="开启" onclick="
      nightDayHandler(this);
    ">
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div id="文章">
        <h3>-JavaScript</h3>
          <p style="margin-top:40px;">
              <strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
          </p>
          <img src="coding.jpg" width="50%">
        </div>
      </div>
      <input type="button" value="开启" onclick="
    </body>
</html>

 

제대로 동작하지만 내부적인 구현 방법은 완전히 달라진 상태, 파일로 쪼개진 상태이다.

해당 웹페이지에서 검사를 눌러서 Network 로 들어가면 이 웹페이지 화면에 표시하기 위해서 로딩된 파일들이 보이는데,

 

colors.js 를 웹브라우저가 다운로드해서 원래 <script> 태그 안에 있는 것처럼 가져다 해석하게 된다. 라는 것을 볼 수 있다.

이제 colors.js 를 수정하면 모든 웹페이지에 적용된다는 것. 또한 2.html 과 3.html 의 

 

<script src="colors.js"></script>

 

로 인해 여기에 위치해 있는 로직은 서로 완전히 같은 것이라는 것을 확신할 수 있다.

가독성이 좋아지고 코드가 훨씬 더 명확해지고 코드의 의미를 파일의 이름을 통해서 확인할 수 있게 되었다.

 

그리고 또 하나 좋은 점이 있다. 

위에 사진에서 볼 수 있듯 Network 로 들어가서 보면 웹 서버에 2번 접속해야 하는 것을 확인할 수 있다.
(3.html 과 colors.js)

웹 서버 입장에서는 좋지 않다. 왜냐? 접속은 적을수록 좋다. 그럼에도 불구하고 이렇게 하는 것이 훨씬 더 효율적이다.

 

왜냐? 캐시 때문. (여기서 캐시는 cache: 저장하다. 라는 뜻)

 

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

저작자표시

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

WEB2 - JavaScript 36 (UI vs API)  (2) 2021.10.05
WEB2 - JavaScript 35 (library VS framework)  (3) 2021.10.02
WEB2 - JavaScript 33 (객체의 활용)  (0) 2021.09.30
WEB2 - JavaScript 32 (객체프로퍼티와 메소드)  (0) 2021.09.29
WEB2 - JavaScript 31 (객체와 반복문)  (0) 2021.09.29

티스토리툴바