[kakao map api] 스크립트 분리해보기

이전 글에서 간단히 카카오 지도 api를 사용하는 방법에 대해 알아보았다. 

 

이번에는 index.html파일을 여러 개의 파일로 분할해서 작성하는 방법에 대해 알아본다. index.html처럼 한 파일에 몰아서 작성하면 불편사항이 생기게 되는데, 파일 길이가 길어질수록 보기도 안 좋고 무엇보다 코드를 관리하기 힘들어지기 때문에 프로그래머라면 습관을 기르는 것이 좋다. 

 

ctrl+n -> ctrl+s 을 눌러서 새로운 스크립트를 생성하고 workspace폴더에 css파일 형식으로 저장한다.

사진1

 

생성된 스크립트를 클릭해서 오른쪽 레이어로 드래그하면 창이 두 개로 분할된다.

사진2

 

index.html에서 head의 <style>... </style> 부분을 style.css에 붙여 넣고, index.html에는 <link rel="styleheet" href="style.css">를 추가한다.

사진3

 

사진 1에서 했던 것처럼 JavaScript 파일 형식으로 mapload파일을 생성한다. api key 호출 아랫부분을 전부 mapload파일로 복사하고 <script src="mapload.js"></script>를 추가한다.

사진4

 

실행을 시켰을 때 결과가 동일하게 실행되어야 한다.

사진5

 

여기까지 카카오 지도 api 사용해보기 글을 마친다!