Class 와 MVC 패턴 이해

JBoB·2023년 1월 26일

nest.js

🐧 class란? (=물건 만드는 설명서)

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

객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성됩니다.

즉, 클래스(class)란 물건 만드는 설명서라고 생각하시면 됩니다.

실무에선 사용자나 물건 같이 동일한 종류의 객체를 여러 개 생성해야 하는 경우에 클래스(class) 를 사용합니다.

class 붕어빵 = 붕어빵 만드는 설명서 >>new 붕어빵() 완성!!

한 페이지에 기초를 다져 넣는 방식

객체 = 인스턴스

class 에선 funtion,const 함수를 붙이지 않는다.

oop- 오브젝트 오리엔티드 프로그래밍

앞에는 this라고 생략되어 있다.(This는 클래스 자체를 지칭해준다)

그래서 내공격력은 파워야 구문은 this.power 로 해줘야 한다!!

설명서로 부터 만들어낸 객체

🐤 상속(인스텐스 =확장)

뭔가를 물려 받는다. 하나의 클래스가 있을때 그 기능을 물려받는것 1클래스가 있고 2클래스가 있을때 다른 클래스로 전속받는것!

상속 : 자동차에 바퀴를 무엇을 다느냐에 따라 상속을 나뉠수 있다.(몸통은 그대로 상속을 받는다)

전략패턴 : 자동차가 하나가 있고 철수회사 엔진 영희회사 엔진 주체가 누구냐에 따라 바뀐다.

class Monster {
    power = 10

    // 생성자 밑에 new monster() 가로에 실행시켜주는 함수
    constructor(qqq){
        this.power = qqq
    }

    attack = () => {
        console.log("공격하자!!!");
        console.log("내 공격력은" + this.power + "야");
    }

    run = () => {
        console.log("도망쳐!!!");
    }
}

// 상속패턴을 써줄떄는 extends을 붙여준다!
class 공중몬스터 extends Monster{
    // nest.js에서 사용하는 구문
    constructor(aaa){
        super(aaa + 1)
    }
    
    // 오버라이딩(부모의 run을 덮어씀)
    run = () => {
        console.log("날아서 도망쳐!!!");
    }
}

class 지상몬스터 extends Monster{
    // nest.js에서 사용하는 구문
    constructor(bbb){
        super(bbb)
    }
    

    // 오버라이딩(부모의 run을 덮어씀) 
    run = () => {
        console.log("뛰어서 도망쳐!!!");
    }
}

const mymonster1 = new 공중몬스터(20)
mymonster1.attack()
mymonster1.run()

const mymonster2 = new 지상몬스터(50)
mymonster2.attack()
mymonster2.run()

🐤전략 패턴( Strategy Pattern)

전략을 쉽게 바꿀 수 있도록 해줌
같은 문제를 해결하는 여러 알고리즘이 클래스별로 캡슐화되어 있고 이들이 필요할 때 교체할 수 있도록 함으로써 동일한 문제를 다른 알고리즘으로 해결할 수 있게 하는 디자인 패턴

전략 : 어떤 목적을 달성하기 위해 일을 수행하는 방식, 비즈니스 규칙, 문제를 해결하는 알고리즘

class 공중부품 {
    run = () => {
        console.log("날라서 도망쳐!!!");
    }
}

class 지상부품 {
    run = () => {
        console.log("뛰어서 도망쳐!!!");
    }
}

class Monster {
    power = 10
    부품;
    // 생성자 밑에 new monster() 가로에 실행시켜주는 함수
    constructor(qqq){
        this.부품 = qqq
    }

    attack = () => {
        console.log("공격하자!!!");
        console.log("내 공격력은" + this.power + "야");
    }

    run = () => {
        this.부품.run()
    }
}

const aaa = new 공중부품()
const bbb = new 지상부품()

const mymonster1 = new Monster(aaa)
mymonster1.attack()
mymonster1.run()

const mymonster2 = new Monster(bbb)
mymonster2.attack()
mymonster2.run()

🐧MVC 패턴이란?

MVC의 약자는 Model-View-Controller의 약자로 애플리케이션을 세가지 역할로 구분한 개발 방법론입니다.

사용자(index.js)가 조작하면 그 조작한게 controller로 넘어가 조작되어 model를 통해 가져오고 그 데이터를 사용자 뷰(view)로 넘어가 시각적 표현을 사용자에게 전달하고자 합니다.

[출처](https://cocoon1787.tistory.com/733)

Model : 데이터를 가진 객체!! 데이터는 내부의 상태에 대한 정보를 가질 수도 있다.모델의 상태에 변화가 있을때 컨트롤러와 뷰에 이를 전달합니다. 이를 통해 뷰는 최선의 결과를 보여주고 컨트롤러는 모델의 변화에 따른 적용 가능한 명령을 추가,제거,수정할수 있습니다.

한마디로 정의하자면,

DB 생성을 관리해주는 곳으로 이전에 배운 Schema 정의를 해 준 폴더이다.

controller : 사용자가 접근한 URL에 따라 사용자의 요청사항을 파악한 후에 그 요청에 맞는 데이터를 Model을 의뢰하고, 데이터를 View에 반영해서 사용자에게 알려줍니다.

한마디로 정의하자면,

미들웨어 함수를 분리해서 관리해 주는 곳 입니다.

view: View는 클라이언트 측 기술은 HTML/CSS/Javascript들을 모와둔 컨테이너입니다.

결과적으로는 화면에 보여지는 파일들(html 파일)을 관리해주는 폴더 입니다.

이 패턴을 사용하게 되면 원래 한번에 실행되던 패턴들이 각자의 역할에서 집중해 실행되어 유지보수성이 올라가고, 유연성이 증가하며 중복코딩의 문제점 또한 사라지게 됩니다. 그리고 다른 사람이 한분에 보기 쉽게 해주어 협업에도 도움이 됩니다.