{SFB} Javascript day 14 - 파일로 쪼개서 정리 정돈

코드가 많아지면 함수로 정리정돈하고,

함수와 변수가 많아지면 객체로 정리정돈하면 된다.

 

그렇다면 객체가 많아지면 어떻게 정리정돈 할 수 있을까??

 

우리가 여태 만들었던 것을 다른 곳에도 적용한 뒤 잘 작동하는 것을 확인한 뒤,

links.setcolor 의 색을 powderblue에서 yellow 로 바꾸고 싶다면 바꾸면 된다.

하지만, 이 바꿔야할 페이지들이 1억개라면 이것을 다 바꾸기란 불가능 할 것이다...

 

이러한 상황에서 해결할 수 있는 도구는 바로 파일로 쪼개는 것이다.

 

우선, color.js 파일을 따로 만들어준 뒤 모든 웹페이지에 공통적으로 들어가는 코드를 <script> 태그 제외하고 붙여넣기 한다.

color.js 에 <script> 태그를 제외한 코드를 붙여넣기 한 모습이다.

 

그리고 난 뒤 공통 코드를 지우고 

<script src="colors.js"></script> 로 대체한 다음 실행해도 잘 작동하는 것을 확인할 수 있다.

 

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

웹 브라우저의 검사 기능의 network 탭에서는

웹 페이지를 화면에 표시하기 위해 로딩된 파일들을 볼 수 있는데 웹 브라우저가 colors.js 를 다운로드해서 <script> 태그에 원래 코드가 있었던 것처럼 해석하는 것을 볼 수 있다.

 

파일로 쪼갰을 때의 장점은 새로운 파일을 만들면 모든 코드를 복사할 필요 없이 간단하게 colors.js 파일을 새로운 웹페이지에 포함시키기만 하면 된다는 것이다.

즉, 작성한 코드를 재사용하게 되는 것이며, colors.js 파일을 수정하면 모든 웹페이지에 동시에 변화가 반영된다는 것이다. 유지보수가 쉬워졌다는 소리이다.

<script> 태그에 colors.js 를 포함하고 있다면 완전히 같은 로직을 갖고있다는 것을 확신할 수 있다.

이로써 가독성이 좋아지고, 코드가 훨씬 명확해지며, 코드의 의미를 파일의 이름을 통해 확인할 수 있게 된다.

 

물론, 웹 페이지를 로드하면서 웹 서버에 접속해서 js파일도 다운로드 해야하므로 웹서버를 2번 접속해야 한다. 접속은 적게 할 수록 좋다. 그럼에도 불구하고 이렇게 하는 이유는 훨씬 효율적일 수 있다는 것이다. 

그 이유는 바로 캐시 때문이다.

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

 

 

 

참조 : 생활코딩 유튜브 (www.youtube.com/channel/UCvc8kv-i5fvFTJBFAk6n1SA)