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

• 들어가기 전에

서비스를 개발할 때 JavaScript 코드가 많아지면 어떻게 보관하고 관리해야 하는지 잘 모를 때가 있다. 소스코드상에서도 많아진 JavaScript 코드를 어떻게 표현해야할지도 고민이다.

• 학습 목표

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

• 핵심 개념

- 개발환경 구성

- 브라우저에서 동작가능하도록 JavaScript와 CSS 소스코드 위치시키기

• 디렉토리 구성(환경 설정)

- 예를 들어 HTML, CSS, JavaScript 파일을 여러개 만들고, 그것들을 서로 HTML 기반으로 CSS와 JavaScript를 불러 동작되게 함

• CSS

- 보통 HTML 상단의 head 태그 안에 위치

- DOM을 렌더링하기 위해 미리 CSS 파일을 로딩해야되기 때문

• JavaScript

- CSS와 HTML을 이용한 화면의 배치크기를 렌더링할 때, 방해하지 않기 위해 HTML 하단의 body 태그가 닫히기 전 위치