우아한테크코스 3기 프리코스 최종 미션(5) - App 설정

파일 구조

.
├── docs
│   └── README.md
├── images
│   ├── dijkstra_example.png
│   ├── path_result.gif
│   └── path_result.jpg
├── index.html
└── src
    ├── app.js
    ├── controllers
    │   └── MainController.js
    ├── models
    │   └── data.js
    ├── utils
    │   └── Dijkstra.js
    └── views
        └── View.js

index.html은 app.js을 실행한다.

app.js이 애플리케이션을 실행시키는 파일이다.

app.js에서 로직을 실행시키기 위해 src/controllers/MainController.js 모듈을 import 한다.

app.js에서는 HTML 문서가 완전히 로드되고 실행되게 구현한다.

app.js

import MainController from "./controllers/MainController.js";

class App {
  constructor() {
    this.tag = "[App]";
    this.MainController = new MainController();
    this.init();
  }

  init() {
    document.addEventListener("DOMContentLoaded", () => {
      console.log(this.tag, "init()");
      this.MainController.init();
    });
  }
}

new App();

MainController.js

export default class MainController {
  constructor() {
    this.tag = "[MainController]";
  }

  init() {
    console.log(this.tag, "init()");
  }
}

 

초기 app 설정을 끝내고 Live Server로 브라우저를 열면 잘 연결 된 것을 확인 할 수 있다.

github.com/intae92/woowacourse-precourse/commit/b27115516679840f42bf901d8108f9107c84fc8b

feat: app 초기 설정 MainController 연동 · intae92/woowacourse-precourse@b271155