서비스 개발을 위한 디렉토리 구성
해당 Post는 서비스 개발을 위한 디렉토리 구성 활용에 대해서 정리한 파일입니다.
서비스를 개발할 때 JavaScript 코드가 많아지면 보관과 관리의 복잡성이 증대됩니다.
소스코드상에서도 많아진 JavaScript 코드를 어떻게 표현해야 할지도 고민이기에 이것에 대해서 알아봤습니다.
디렉토리 구성이란?
디렉토리 구성이라는 건 뭐냐면 일종의 환경 설정입니다.
예를 들어서 HTML, CSS, JavaScript 파일을 여러 개 만들고
그거를 서로 HTML 기반으로 CSS와 JavaScript를 불러서 동작되게 하고
또 여러 가지 CSS가 있을 수도 있고 여러 가지 자바스크립트가 있을 수도 있겠죠.
1. JavaScript파일 구성
간단한 내용의 JavaScript라면 한 페이지에 모두 표현하는 것도 좋습니다.
그렇지 않다면 의미에 맞게 구분하는 방법이 더 좋습니다.
2. HTML안에 JavaScript 구성하기
CSS는 head태그 안에 상단에 위치합니다.
그러니까 head 태그 안에, HTML 기준으로 상단에 위치를 시킵니다.
그거는 DOM을 렌더링 하기 위해서 미리 CSS 파일을 로딩해야 하기 때문이고요.
그다음에 자바스크립트는 CSS와 HTML을 이용한 화면의 배치 크기를 렌더링 할 때
방해를하지 않기 위해서 자바스크립트는 body 태그 닫히기 전.
즉 HTML 하단에 위치시킵니다.
JavaScript는 body 태그가 닫히기 전에 소스파일 간 의존성을 이해해서 순서대로 배치합니다.
생각해보기
여러분들이 자주 가는 웹사이트를 열고, 먼저 Element 패널에서 JavaScript는 위치가 어디 있는지, CSS파일은 어떻게 위치시켰는지 알아봅니다.
크롬 개발자도구의 소스패널을 열어서 서비스에서 JavaScript 소스 파일들을 찾고 몇 개의 파일로 구성되어 있는지 알아봅니다.
answer
DOMContentLoaded : HTML이 모두 로드되고 DOM 트리가 완성되었지만 외부 리소스(image, etc)가 아직 로드되지 않은 시점에 발생합니다.
DOM이 준비된 상태이므로 DOM 노드 등을 제어할 수 있지만 image의 사이즈를 가져오는 작업 등은 할 수 없습니다.
반면에 load는 DOM을 포함해 image, style 등 모든 리소스가 로드된 후에 발생합니다.
대부분의 경우 모든 리소스를 기다릴 필요가 없기 때문에,
좀 더 빠른 실행을 위해 load 대신에 DOMContentLoaded 혹은 같은 시점에 발생하는 jQuery의 ready를 사용합니다.
(*DOMContentLoaded는 ie 8 이하에서 지원되지 않음)