Dandy Now!
  • [ 영광의 시대!/2022 개발자의 품격 부트캠프 1기 ]
    [개발자의품격][부트캠프][1기][10차시] JavaScript 주요 포인트 #13 | 고급 문법 - Module, Class
    2022년 02월 10일 15시 32분 50초에 업로드 된 글입니다.
    작성자: DandyNow
    728x90
    반응형

    JavaScript 주요 포인트 #13

    Modules

    규모가 큰 웹 애플리케이션을 만들기 시작하면서, 많은 기능과 함께 많은 함수가 만들어졌다. 많은 함수는 프로그램을 무겁게 만들었고 리소스 낭비로 개발에 불편을 줬다. 그래서 필요할 때만 가져다 쓰는 모듈을 만들게 되었다. node.js, Vue.js에서 많이 사용한다(자바스크립트 만으로는 잘 사용하지는 않는 것 같다).

    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="js/common.js"></script> // common.js의 모든 함수를 가져와 무거워지게 된다. -->
  </head>
  <body>
    <script type="module">
      // 외부 모듈은 import 키워드로 가져온다.
      import { log } from "./js/log.js"; // .은 html이 실행되고 있는 경로이다. 모듈로 작성할때는 꼭 넣어야 한다.
      log("모듈에 작성된 함수 이용");
    </script>
  </body>
</html>

     

     

    Class

    클래스는 표준화된 틀을 제공해 준다.

    <script>
  // class 클래스명{
  //  constructor(매개변수){
  //    초기화 코드
  //    }
  //  }

  // Car 클래스 생성
  // constructor 함수의 매개변수: 모델명, 생산년도, 타입, 자동차 가격
  class Car {
    constructor(modelName, modelYear, type, price) {
      this.modelName = modelName;
      this.modelYear = modelYear;
      this.type = type;
      this.price = price;
    }

    getModelName() {
      return this.modelName;
    }

    getPrice() {
      return this.price;
    }

    setPrice(price) {
      this.price = price;
    }
  }

  // Car 클래스를 상속한 ElectricCar 클래스 생성
  // constructor 함수의 매개변수: 모델명, 생산년도, 타입, 자동차 가격, 충전 시간, 주행가능 거리
  class ElectricCar extends Car {
    constructor(modelName, modelYear, type, price, chargeTime, distance) {
      super(modelName, modelYear, type, price); // 상속 받을 경우에는 무조건 super를 호출해야한다. 없을때 에러 발생
      this.chargeTime = chargeTime;
      this.distance = distance;
    }
    
    getChargeTime() {
      return this.chargeTime;
    }

    getDistance() {
      return this.distance;
    }
  }

  let genesis = new Car("제네시스", 2022, "G", 7000);
  console.log(genesis.getModelName()); // 제네시스
  
  let ionic = new Car("아이오닉", 2021, "E", 4000);
  console.log(ionic.getModelName()); // 아이오닉
  console.log(ionic.getPrice()); // 4000
  ionic.setPrice(5000);
  console.log(ionic.getPrice()); // 5000
  
  let ionic2 = new ElectricCar("아이오닉2", 2021, "E", 4000, 120, 450);
  console.log(ionic2.getModelName()); // 아이오닉2
  console.log(ionic2.getDistance()); // 450
</script>
    728x90
    반응형
    저작자표시 비영리 변경금지

    '영광의 시대! > 2022 개발자의 품격 부트캠프 1기' 카테고리의 다른 글

    [개발자의품격][부트캠프][1기][11차시] JavaScript 주요 포인트 #15 | HTML DOM - Element, Attribute, Events  (0) 2022.02.15
    [개발자의품격][부트캠프][1기][11차시] JavaScript 주요 포인트 #14 | 고급 문법 - Error, Strict Mode, Regular Expression  (0) 2022.02.15
    [개발자의품격][부트캠프][1기][10차시] JavaScript 주요 포인트 #12 | 고급 문법 - XMLHttpRequest, Fetch API, Promise, Async/Await  (0) 2022.02.09
    [개발자의품격][부트캠프][1기][10차시] JavaScript 주요 포인트 #11 | 고급 문법 - JSON Server 설치 및 실행 에러 해결  (0) 2022.02.09
    [개발자의품격][부트캠프][1기][10차시] JavaScript 주요 포인트 #10 | 고급 문법 - Object Literal Syntax Extension, Spread Operator, Object Destructuring, Array Destructuring  (0) 2022.02.09
      댓글

    티스토리툴바