들어가기 전에

서비스를 개발할 때 JavaScript 코드가 많아지면 어떻게 보관하고 관리해야 하는지 잘 모를 때가 있습니다.

소스코드상에서도 많아진 JavaScript 코드를 어떻게 표현해야 할지도 고민이고요.

어려운 방법은 아니니 이번에 그것들을 알아봅니다.

학습 목표

1. 웹브라우저 렌더링에 필요한 JavaScript와 CSS파일의 구성방법을 이해한다.

핵심 개념

• 개발환경 구성
  
• 브라우저에서 동작가능하도록 JavaScript와 CSS의 소스코드 위치시키기

학습하기

1. JavaScript파일 구성

간단한 내용의 JavaScript라면 한 페이지에 모두 표현하는 것도 좋습니다.

그렇지 않다면 의미에 맞게 구분하는 방법이 더 좋습니다.

2. HTML안에 JavaScript 구성하기

CSS는 head태그 안에 상단에 위치합니다.

JavaScript는 body 태그가 닫히기 전에 소스파일 간 의존성을 이해해서 순서대로 배치합니다.

생각해보기

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

참고 자료