INFO BOX 2.3 이 책에 있는 예제의 자바스크립트 프로젝트 기본 구조

책에 있는 예제에서 사용하는 기본 프로젝트 구조는 세 종류의 파일을 포함합니다. 첫 번째는 HTML입니다. HTML 파일은 프로젝트의 뼈대를 구성하며 대부분 새로운 구성 요소를 담기 위한 기본 구조의 역할을 합니다. 일반적으로 프로젝트에는 index.html 파일이 하나 있습니다. 이 파일에는 몇 개의 div 태그, UI 요소, index.js 같은 자바스크립트 코드를 로드하기 위한 스크립트 태그가 있습니다.

자바스크립트 코드는 가독성과 스타일을 향상시키기 위해 일반적으로 몇 개의 파일로 나누어져 있습니다. 보스턴 주택 가격 예측 프로젝트의 경우 시각 요소를 업데이트하기 위한 코드는 ui.js에 있고 데이터를 다운로드하는 코드는 data.js에 있습니다. 두 파일 모두 index.js에서 import 명령으로 참조됩니다.

세 번째 파일은 npm 패키지 관리자(www.npmjs.com)를 위해 필요한 메타데이터를 담고 있는 .json 파일입니다. npm이나 Yarn을 사용해 본 적이 없다면 https://docs.npmjs.com/about-npm에 있는 npm 'getting started' 문서를 잠시 둘러보고, 예제 코드를 만들고 실행할 수 있도록 친숙해지는 것이 좋습니다. 패키지 관리를 위해 Yarn(https://yarnpkg.com/)을 사용하지만, 필요하다면 Yarn 대신 npm을 사용할 수 있습니다.

저장소 안에 있는 중요한 파일은 다음과 같습니다.

• index.html: 루트 HTML 파일로, DOM 루트를 제공하고 자바스크립트를 실행합니다.

• index.js: 루트 자바스크립트 파일로, 데이터를 로드하고 모델과 훈련 루프를 정의하고 UI 요소를 지정합니다.

• data.js: 보스턴 주택 데이터셋을 다운로드하고 참조하기 위한 코드를 구현합니다.

• ui.js: UI 요소를 동작(그래프 설정)에 연결하기 위해 UI 훅(hook)을 구현합니다.

• normalization.js: 데이터에서 평균을 빼는 것 같은 수치 처리 루틴

• package.json: 데모를 만들고 실행하기 위해 필요한 (TensorFlow.js 같은) 의존성을 설명하는 표준 npm 패키지 정의

이 책은 HTML 파일과 자바스크립트 파일을 별개의 서브 디렉터리에 넣는 표준 스타일을 따르지 않습니다. 이런 방식은 저장소가 더 큰 경우에 적합하며, 이 책이나 https://github.com/tensorflow/tfjs-examples에서 볼 수 있는 작은 규모의 예제에서는 더 복잡하기 때문입니다.