[JavaScript] Include File / 파일로 쪼개어서 정리하기

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

지난 포스팅에서 JavaScirpt를 통하여 BackgroundColor와 Color를 변화시키는 로직을 최종적으로 구현시켜보았는데요,

오늘은 제가 만들었던 JavaScript를 파일로 쪼개어서 보다 효율적 이도록 해보았습니다.

---

 

지난 포스팅에서 최종적으로 작업한 script입니다.

 

파일로 쪼개어서 script를 나누는 이유 :

①

해당 내용이 다른 페이지에도 동일하게 적용시킬 시, 모든 페이지에 copy 하여 배포를 하기엔 효율적이지 못함.

②

script 내의 내용이 변경될 경우, (ex. color가 red로 변경될 경우)

모든 페이지에 color를 변경시켜줘야 하는 번거로움 발생

③

페이지마다 어떠한 로직을 갖고 있는지에 대한 가독성이 좋아지며, 코드가 명확해짐

쪼개 놓은 파일의 이름을 통하여 코드의 의미를 쉽게 알 수 있음

④

파일이 많아지면 그만큼 브라우저의 접속량이 늘어서 좋진 않지만, 한 번 접속한 파일은 브라우저가 컴퓨터에 저장을 해놓음(cache)

따라서 다음 접속 시엔 네트워크를 통하지 않고, 다운로드한 파일을 불러옴

→ 기대효과 : 네트워크 트래픽도 사용자 입장에서 좋고, 서버 입장에선 비용 절감 가능

그러므로 파일을 쪼개서 저장하는 것이 코딩을 정리 정돈하면서 작성할 수 있고, 웹페이지에 빠르게 로딩할 수 있음

 

---

How to?

① color.js라는 새로운 JavaScript 파일을 만듭니다.

 

② 지금까지 만들었던 웹페이지에 공통적으로 들어가는 공통된 코드를 copy 합니다.

( 단, script 태그는 들어가면 안 됨.)

 

 

③ <script src="color.js"></script>

<script> 태그의 src (source의 약자) 속성으로 color.js(파일명) 입력하고 reroad 하면 기존과 동일하게 동작하게 됩니다.

 

 

기존과 동일하게 동작하지만, 내부적인 구현 방법은 완전히 달라집니다.

Inspect의 Network 탭을 확인하면, 웹브라우저가 color.js 파일을 다운로드하여 수행하게 됩니다.

 

이로 인하여 위에서 말씀드린 파일을 쪼개는 이유에 대한 효율성과 기대효과를 얻을 수 있게 되었습니다.