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

Itchild 2024. 4. 26. 11:42

728x90

서로 연관된 코드들을 파일로 묶어서 그루핑 하는 것입니다.

이전시간에 했던 코드 중 스크립트 부분을 복사해서 붙여 넣어보겠습니다.

...생략...
<head>
   ...생략...
   <meta charset="utf-8">
   <script>
       var Body = {
           .. 생략 ..
       }
       var Links = {
           .. 생략 ..
       }
       function nightDayHandler(self) {
           .. 생략 ..
       }
   </script>
</head>
... 생략 ...

만약 페이지가 1억개라고 생각해봅시다. 배포가 어렵겠지만 그것보다 우리가 작성했던 코드 중 'powderblue' 를 'yellow'로 바꾸고 싶다면 모든 웹 페이지에 있는 'powderblue' 를 'yellow'로 바꿔야 합니다. 이렇게 하기란 어려운 일인데 이러한 절망적인 상황을 해결하는 도구는 파일로 쪼개는 겁니다.

공통코드를 지우고 <script src="colors.js"></script> 로 대체 해보겠습니다.

... 생략 ...
<head>
  ... 생략 ...
<meta charset="utf-8">
<script src="color.js"></script>
</head>
... 생략 ...

파일로 쪼갰을때의 장점은 새로운 파일을 만들면 모든 코드를 복사할 필요 없이 간단하게 colors.js 파일을 새로운 웹페이지에 포함 시키기만 하면 된다는 것입니다. 즉, 작성한 코드를 재사용하게 되는 것이며, colors.js 파일을 수정하면 모든 웹 페이지에 동시에 변화가 반영됩니다. 다시말해 유지보수 하기에 편리해지고 , 가독성이 좋아지고, 코드가 훨씬 명확해지며, 코드의 의미를 파일의 이름을 통해 확인 할 수 있게 됩니다.

서로 연관된 코드들을 여러개의 파일로 쪼개서 웹페이지에 포함시키면 코드를 정리정돈 하는 효과 또한 얻을 수 있다는 것을 기억하면 좋겠습니다.

728x90