5. WEB UI - FE (1)

1) 서비스 개발을 위한 디렉토리 구성

1. JavaScript파일 구성

• 간단한 내용의 JavaScript라면 한 페이지에 모두 표현하는 것도 좋습니다.
• 그렇지 않다면 의미에 맞게 구분하는 방법이 더 좋습니다.

2. HTML안에 JavaScript 구성하기

• CSS는 head태그 안에 상단에 위치합니다.
• 자바스크립트는 body 태그가 닫히기 전에 배치합니다. 브라우저는 한 라인씩 HTML 코드를 파싱하다가 자바스크립트 코드가 있으면 실행해 버립니다. 그런데 script를 head에 위치시키면 document라는 게 구성이 제대로 안 되어서 그 아래에 있는 태그를 못 찾습니다. 그래서 자바스크립트 코드를 body 태그 닫히기 전에 위치시킵니다.
• 또한, 자바스크립트는 소스파일 간 의존성을 이해해서 순서대로 배치합니다. 다른 js파일의 함수나 변수를 쓸 수 있기 때문입니다. 특히 여러 명이 개발할 때는 파일을 나눠서 개발하므로 각각의 용도에 맞는 자바스크립트 코드, CSS를 만들어서 디렉토리 구성을 만드는 것이 좋습니다.
• CSS는 link태그를 이용하고 JavaScript는 script태그를 이용합니다.
  ex) <link rel=”stylesheet” href=”./css/main.css”>
       <script src=”./js/main.js” />
• 일반적으로 HTML 안에는 직접적인 자바스크립트 코드를 최대한 줄이고 디렉토리와 파일로 구성하며 CSS도 이렇게 해놓는 게 좋긴 합니다. css는 적은 양이면 html에 넣어서 css파일 요청에 대한 시간을 줄일 수 있도록 하는 것이 좋습니다.

생각해보기

• 여러분들이 자주 가는 웹사이트를 열고, 먼저 Element 패널에서 JavaScript는 위치가 어디 있는지, CSS파일은 어떻게 위치시켰는지 알아봅니다. 
• 크롬 개발자도구의 소스패널을 열어서 서비스에서 JavaScript 소스 파일들을 찾고 몇 개의 파일로 구성되어 있는지 알아봅니다.

참고 자료

[참고링크] Difference between DOMContentLoaded and load events
https://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events