Class

Class는 객체를 생성하기 위한 일종의 템플릿이라 할 수 있다!

Class를 생성 하기 위해서는 class키워드를 사용한다

class Person {
	// constructor는 이름을 변경할 수 없어요.
  constructor(name, age) {
		// 이름(name)과 나이(age)가 없으면 사람이 아니죠?
		// new라는 키워드를 이용해서 인스턴스를 만들 때, 기본적으로
		// 넣어야 하는 값들을 의미해요! :)
		// 여기서 말하는 this는 만들어질 인스턴스를 의미한다고 생각해주세요!
    this.name = name;
    this.age = age;
  }

class 객체이름 {

          constructor(){.   constructor는 이름을 변경할수 없다

new라는 키워드를 이용해서 인스턴스를 새롭게 만들때 사용!!

Constructor란???

Constructor는 Class의 생성자 함수 이다. 생성자 함수는 객체를 생성할 떄 호출되며, 객체를 초기화하는 역할을 합니다. 

constructor 키워드를 사용하여 정의.

constructor () 괄호안에 인자를 받아서 (this.인자), 속성으로 초기화한다.

 

Class 연습

// 새로운 Car class 정의
class Car {
  constructor(modelName, modelYear, type, price) {
    this.modelName = modelName;
    this.modelYear = modelYear;
    this.type = type;
    this.price = price;
  }

  // 클락션을 울리는 메서드
  makeNoise() {
    console.log(`${this.modelName}: 빵!`);
  }
}

// 자동차 만들기
const car1 = new Car("Sorento", "2023", "e", 5000);
const car2 = new Car("SM5", "1999", "g", 3000);
const car3 = new Car("QM6", "2010", "g", 4500);
car1.makeNoise();
car2.makeNoise();
car3.makeNoise();

 

 

 

vs코드 세팅

디렉토리 구성 방법

src 폴더 생성 - 소스 폴더

 

css

flex 1차원적 레이아웃 구성 한방향 레이아웃 시스템

grid는 2차원 레이아웃 구성 표처럼 만들수있음 두 방향(가로-세로) 레이아웃 시스템 

grid-template-columns: 1fr 1fr 1fr / repeat(3, 1fr) 3개씩 1줄

Flex보다 더 복합적인 레이웃 표현이 가능하다

 

<script type = "module" 로 했을때 좀더 용이하게 할수있음 모듈화로해서 좀더 쉽게 유지보수할수있다