[부스트코스]자바스크립트의 시작(파일로 쪼개서 정리 정돈, script의 src)

안녕하세요 부스터코스 3기 서포터즈 허브입니다. 🌿

부스터코스란?

커넥트재단은 네이버가 설립한 비영리 교육 재단입니다.
소프트웨어 개발자 양성 교육 프로그램, 부스트코스와 함께
당신의 개발 커리어를 업그레이드하세요!

 

제 포스팅은 강의 내 생각해보기와 수업에서 다루는 코드를 직접 크롬화면에서 확인 해볼 수 있도록 진행합니다. 관련된 개념과 강의는 함께 올려드리는 링크에서 확인해보실 수 있습니다. 

www.boostcourse.org/cs124/joinLectures/52258

자바스크립트의 시작

 

---

파일을 이용해 코드 정리하기

우리가 지금까지 만든 night/day 버튼을 여러 페이지에도 복사/붙여넣기 한다고 해 봅시다. 이 때 우리는 <input> 태그 외에도 만들어 놓은 Javascript 코드까지 복사하고 붙여넣어야 합니다. 하지만 붙여넣어야 할 페이지가 아주 많다고 생각해 봅시다. 그렇게 되면 코드를 넣기도 힘들고, 수정하기도 힘들어지겠죠. 이러한 상황에서 사용할 수 있는 방법이 바로 파일로 쪼개는 것입니다.

새로운 js 파일을 만들어 봅시다. 예를 들어서 colors.js라는 파일 이름으로 만들었다고 해 봅시다. 그리고 그 파일에 모든 페이지에서 공통적으로 사용되는 Javascript 코드를 넣습니다.

그렇다면 원래 Javascript 코드가 있었던 <script> 태그는 어떻게 바꾸면 될까요? 다음과 같이 src 속성에 이 파일 이름을 넣어서 바꾸면 됩니다.

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

이렇게 바꾼 후 페이지를 실행해보면, 웹브라우저가 colors.js 파일을 자동으로 가져와서 원래와 똑같이 작동하는 것을 볼 수 있습니다.

파일 이용의 장점

이제 이 짧은 script 코드를 필요한 페이지에 붙여 넣으면 이 Javascript 코드를 한 번에 관리할 수 있는 것입니다. 즉, 코드를 재사용할 수 있고, 동시에 코드를 수정할 수 있어서 유지보수가 편리해집니다. 코드가 명확해지고 가독성이 좋아진다는 장점도 있습니다.

이렇게 파일을 분리하면 캐시의 입장에서도 장점을 가집니다. colors.js라는 파일을 한 번 다운로드해서 캐시에 저장해두면 다운로드 없이 사용할 수 있기 때문에 더 빨리 페이지를 표시할 수 있는 것입니다.

 

그럼 한번 기존 예제에 있는 내용을 다른 파일에 담아서 정리해보겠습니다.

 

이렇게 기존에 script 태그 안에 있던 내용을 colors.js 파일에 담아서 src속성을 통해서 불러오겠습니다.

아주 잘 되는 모습을 알 수 있네요. 그럼 한번 잘 불러오는지 확인 해 볼까요? 

네트워크에서 보시게 되면 js 파일을 웹에서 잘 가져오는 것을 확인할 수 있습니다. 

생각해보기

1) 여러 js 파일을 가져오고 싶다면 어떻게 하면 좋을지 알아봅시다. (힌트: html include multiple js files 라고 검색해보세요!)

 

stackoverflow.com/questions/14460231/how-do-you-import-multiple-javascript-files-in-html-index-file-without-the-bloat

How do you import multiple javascript files in HTML index file without the bloat?

해당 사이트로 들어가서 확인해보니 

이런 방법이 있네요..

하지만 보통 script 태그를 여러개 사용하면 되는 것 같습니다. 

---

www.boostcourse.org/

다 함께 배우고 성장하는 부스트코스

github.com/hhhminme

hhhminme - Overview