8/26 TIL : class, CRUD

🔎 class: 객체지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀

• 생성자함수를 편하기 쓰기 위한 일종의 Syntactic sugar
• 원래는 생성자함수로 쓰던 것을 ES6(2015년)에 들어 class라는 것으로 추가
• strict mode가 적용되기 때문에 선언 전에 사용하면 error

 

🚩 인스턴스화: 클래스(객체의 설계도)를 이용해서 실제 객체를 만드는 과정

class Car {
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  drive() {
    console.log(`${this.brand}의 ${this.color}색 자동차가 주행중입니다.`);
  }

  showSpec() {
    console.log(
      `이 차의 브랜드는 ${this.brand}이고 색상은 ${this.color}입니다.`
    );
  }
}

const hyundai = new Car('Hyundai', 'blue');
const porsche = new Car('Porsche', 'black');
const toyota = new Car('Toyata', 'silver');

console.log(hyundai.brand, hyundai.color);
porsche.drive();
toyota.drive();

// 생성자 함수로 쓰는 경우
function Car(brand, color) {
  this.brand = brand;
  this.color = color;
  this.drive = function () {
    console.log(`${this.brand}의 ${this.color}색 자동차가 주행중입니다.`);
  };
}

 

🚩 class와 생성자함수의 차이

• 클래스는 기본적으로 strict mode가 실행된다(함수 선언은 자동 호이스팅이 되기 때문에 문제가 생길 수 있다)
• 상속이 편리하다
  • 생성자 함수: 프로토타입 체인으로 상속
  • 클래스: extend 키워드로 상속
• 정적 메소드 사용 방식
  • 생성자 함수: 함수 몸체에 직접 추가
  • 클래스: Static 키워드 적용

 

🚩 상속: 기존 클래스의 틀을 토대로 새로운 클래스를 만들 수 있음

• 기존의 변수, 메소드 등을 그대로 가져가면서 원하는 변수, 메소드를 추가/변경해서 사용 가능
• class 상속할클래스이름 extends 상속받을클래스이름
• 부모 요소의 것을 그대로 받아 올 경우에는 super 사용
  • 부모 메소드에 접근: super.method()
  • 부모 생성자에 접근: super(constructor)
• over-riding: 상속 받은 클래스에서 메소드를 임의로 변경하여 사용하는 것

class Car {
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  drive() {
    console.log(`${this.brand}의 ${this.color}색 자동차가 주행중입니다.`);
  }

  showSpec() {
    console.log(
      `이 차의 브랜드는 ${this.brand}이고 색상은 ${this.color}입니다.`
    );
  }
}

// 상속
class ElecCar extends Car {
  constructor(brand, color, fuel) {
    super(brand, color);
    this.fuel = fuel;
  }

  drive() {
    console.log(
      `${this.brand}의 ${this.color}색 자동차가 ${this.fuel}의 힘으로 주행합니다.`
    );
  }

  showFuel() {
    console.log(`해당 자동차는 ${this.fuel}의 힘으로 주행합니다.`);
  }

  // super
  showSpec() {
    super.showSpec();
    console.log(`그리고 해당 자동차는 ${this.fuel}의 힘으로 주행합니다.`);
  }
}
const tesla = new ElecCar('Tesla', 'red', 'electricity');
console.log(tesla.brand, tesla.color);
tesla.showFuel();

// 생성자 함수로 상속 구현(prototype 이라는 객체 사용)
function Car(brand, color) {
  this.brand = brand;
  this.color = color;
  this.drive = function () {
    console.log(`${this.brand}의 ${this.color}색 자동차가 주행중입니다.`);
  };
}
function ElecCar(brand, color, fuel) {
  Car.call(this, brand, color);
  this.fuel = fuel;
  this.drive = function () {
    console.log(
      `${brand}의 ${color}색 자동차가 ${this.fuel}의 힘으로 주행합니다.`
    );
  };
}
ElecCar.prototype = Object.create(Car.prototype);
ElecCar.prototype.constructor = ElecCar;
const tesla = new ElecCar('Tesla', 'white', 'electricity');
tesla.drive();

 

🚩 instance of: 특정 object가 해당 클래스를 통해 만들어졌는지 여부를 알아보는 명령어

console.log(hyundai instanceof Car);
console.log(tesla instanceof Car); // 상속받았기 때문에 true
console.log(tesla instanceof Object); // 상위에 Object-prototype-..이기 때문에 true

---

🔎 Back-end CRUD

• Create -> POST
• Read -> GET
• Update -> PUT
• Delete -> DELETE

 

🚩 req, res

req(uire): 브라우저에서 들어온 요청

res(ponse): 요청에 따른 서버의 응답

 

🚩 HTTP statusCodes

 

🚩 nodemon: 서버 상의 코드가 변경되거나 종료되면 자동으로 재실행시켜줌

1. [터미널] npm install --save-dev nodemon
2. package.json에 스크립트 추가
3. "scripts": { "server": "nodemon app.js", "start": "nodemon --watch \"./routes/*.js\" --exec \"npm run server\"" },
4. 실행: [터미널] npm run server