내일 배움 캠프 23_05_25 TIL

내일은 내일배움캠프 2주차의 마지막날로 개인과제를 주신다고하여

오늘까지 지급해주신 강의를 모두 듣자 하고 마지막 5주차 강의를 듣게되었는데

처음으로는 DOM Tree에 대해서 배우게되었다.

JavaScript가 알아들을 수 있는 방식으로 해석한 내용을 토대로 DOM Tree를 구성하게되는데

DOM Tree는 HTML을 계층화하는것이 DOM Tree이다

CSS를 Tree로 세분화한  CSSOM Tree도 있는데 DOM Tree와 CSSOM Tree를 묶어서 Render Tree를 구성하게된다.

 

또한 DOM이란 브라우저에 기본적으로 내장되어있는 API이기 때문에 콘솔창에서 HTML을 제어할 수 있다.

 

또 API란 것에 대해서 배웠는데 API란 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할을 하며

이 때문에 우리가 브라우저에 내장되어있는 DOM을 이용하여 HTML의 내용을 JavaScript를 통해 제어할 수 있는것이다.

 

그리고 클래스와 객체의 인스턴스화에 관하여 강의를 들었는데 이 부분은 C#이나 Java랑 같은 개념이라 다행히
이해를 하는데 수월하였고 

class Car {

  constructor(modelName, modelYear, type, Price) {

    this.modelName = modelName;

    this.modelYear = modelYear;

    this.type = type;

    this.Price = Price;

  }

  displayInfo() {

    console.log(

      `차종은 ${this.modelName} 제작년도는 ${this.modelYear} 차 종류는 ${this.type} 가격은 ${this.Price}입니다.`

    );

  }

  makeNoise() {

    console.log(`${this.modelName} 클락션!`);

  }

}

const Car1 = new Car("소나타", "2016년식", "세단", "2000만원");

const Car2 = new Car("제네시스", "2020년식", "SUV", "6000만원");

const Car3 = new Car("카니발", "2018년식", "미니밴", "6000만원");

Car1.displayInfo();

Car2.displayInfo();

Car3.displayInfo();

Car1.makeNoise();

Car2.makeNoise();

Car3.makeNoise();

위 코드는 Car라는 클래스에서 Car1,Car2,Car3 라는 객체를 만들어본 코드이며

아래의 displayInfo 와 makeNoise 메서드를 통해서 객체의 데이터에 따라 실행된다.

 

그리고 상속의 개념도 강의해주셨는데 이 또한 다른 언어와 같기 때문에 비교적 수월하게 이해할 수 있었다

 

//상속(Inheritance)

//Class -> 유산으로 내려주는 주요 기능!!

//부모 <-> 자식

// 동물 전체에 대한 클래스

class Animal {

  constructor(name) {

    this.name = name;

  }

  //메서드(짖다)

  bark() {

    console.log(`${this.name} bark!`);

  }

}

// const Dog = new Animal("개");

// Dog.bark();

class Dog extends Animal {

  //부모에게서 내려받은 메서드를 재정의 할 수 있음

  bark() {

    console.log(`${this.name} 왈!`);

  }

}

const Puppy = new Dog("깜순이");

Puppy.bark();

우리집 강아지인 깜순이의 이름으로 값을 넣어주었고

Animal이란 클래스를 상속받은 Dog라는 클래스를 선언해주어서 이름을 할당해주고 부모 클래스에 정의되어있는

bark메서드를 상속받았기에 bark메서드를 사용해서 결과를 출력해주었다.

 

마지막으로는 closure 함수에 대해서 배웠는데 이거는 처음보는 개념이라 신선했다.

// 카운트 상태 변경 함수 #3

const increase = (function () {

  // 카운트 상태 변수

  let num = 0;

  // 클로저

  return function () {

    return ++num;

  };

})();

// 이전 상태값을 유지

console.log(increase()); //1

console.log(increase()); //2

console.log(increase()); //3

이 코드에서 클로저 함수가 카운트 상태 변수인 let num 의 값을 기억하면서  값을 유지하면서 아래의

increase 익명함수가 실행될 때 값을 기억하면서 더해주어 값이 1,2,3 으로 제대로 출력이 되는 함수이다

 

오늘 공부를 하면서 내일 있을 과제를 손대려면 모든 강의를 1회는 완강해야 수월할 듯 하여 이해를 못 한 부분들은

체크를 해놓고 일단 강의를 다 완강하였는데 오늘배운 클래스와 객체(인스턴스)의 내용도 익숙한 문법이기에
이해하기 수월했다 뿐이지 완벽히 내 코드로 만들어서 자유자재로 사용할 수 있는 실력은 아니기에 내일 있을

과제를 보고 해결해가면서 JS문법을 잘 습득해야겠다고 생각한다.

 

다음 프로젝트때는 적재적소에 맞는 해결방식을 떠올릴 수 있는 정도의 문법수준을 갖기를 소망하면서

더욱 열심히 공부해야겠다....