[Web] 서비스 개발을 위해 고려해야 할 사항

디렉토리 구성의 중요성
서비스를 하나 개발하다보면 html, css, js 파일들을 많이 생성해야 할 경우가 대부분일 것이다. 이들을 하나의 디렉토리에서 관리하다보면 프로젝트가 지저분해지고 관리하기 힘들어질 것이다. 따라서 파일에 따라 서로 다른 디렉토리에 넣어두는 것이 좋다.

JavaScript 파일을 읽는 경우 head 태그 안에 script태그를 넣는 경우 제대로 읽어오지 못 할 수 있는데 이것은 DOMContentLoaded 이벤트가 DOM 계층이 완전히 정립되고 나서 실행되는 이벤트이기 때문이다.

참고 ) https://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events

load와 DOMContentLoaded의 차이
웹 사이트에 접속해서 크롬 개발자도구를 켜 Network 탭의 하단에 DOMContentLoaded와 load를 확인할 수 있다. 두 이벤트가 읽히는 시간이 조금 다르다. DOM Tree분석이 끝난 훙에야 DOMContentLoaded 이벤트가 발생하고, 그 외 모든 자원들(이미지, 등)이 다 받아져서 브라우저에 렌더링(화면표시) 까지 다 끝난 시점에 Load가 발생한다.
따라서 DOM Tree 분석이 끝나기 전에 JavaScript 코드에서 dom 을 사용한 조작이 일어나면 오류가 발생할 수 있다. 그래서 아래 코드처럼 무조건 트리 분석이 끝나고 함수가 실행되도록 코드를 짤 수도 있다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function init(){     var elHeading = document.querySelector("h1");     console.log("this is h1: ",elHeading);     foo(elHeading); } document.addEventListener("DOMContentLoaded",function(){     console.log("DOM Loaded!");     init(); }) window.addEventListener("load",function(){     console.log("window Loaded!"); })     Colored by Color Scripter

cs