📒 목차

📌 class란?
📌 constructor(생성자)
📌 상속 (extends)
📌 전략 패턴
📌 객체지향 프로그래밍 및 특징
📌 MVC 패턴

📌 class란?

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

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

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

✅ class의 구조

• 클래스 안에서 변수를 넣어줄 때는 변수를 선언할 때 사용한 let, const 등을 사용하지 않는다.

• new Monster() : new 연산자와 생성자 함수를 사용해 새로운 객체(mymonster)를 생성하는 것이다.

• Monster Class 내부에 존재하는 함수들에 대해 .을 통해 접근할 수 있다.

• 새로운 객체 대신, class를 가지고 ‘ 새로운 인스턴스를 생성해 주었다’ 라고도 말한다.

// index.js

class Monster {
    power = 10

    attack = () => {
        console.log("공격하자!!")
    }

    run = () => {
        console.log("도망가자!!")
    }
}

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

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

---

📌 constructor(생성자)

class 내부의 어떠한 함수 안에 또 다른 함수를 실행시키고자 할 때, 또는 어떠한 함수 안에서 변수의 값을 가지고 와야 할 때 생성자를 사용한다.

this 를 사용하여 클래스 내부에 존재하는 다른 함수 또는 변수를 함수 내에서 사용할 수 있다.

아래에서 this는 Monster class를 의미한다.

// index.js

class Monster {
  power = 10;

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

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

const mymonster1 = new Monster();
mymonster1.attack();
mymonster1.power();

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

내장함수 constructor() 생성자를 사용하여 초기값을 생성해 줄 수 있다.

constructor() : Monster를 만들 때(생성할 때) 실행해주는 함수이다. 따라서, new Monster를 할 때, constructor 함수 내부가 실행 된다.

mymonster2 는 넘겨받은 인수와 함께 constructor가 자동으로 실행된다. 이때 인수 50이 aaa라는 이름으로 this.power에 할당해 줌으로써 초기값이 다시 생성되게 되는 것이다.

// index.js

class Monster {
  power = 10;

    constructor(qqq) {
      this.power = qqq;
    }

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

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

const mymonster1 = new Monster(20);
mymonster1.attack();
mymonster1.run();

const mymonster2 = new Monster(50);
mymonster2.attack();
mymonster2.run(); 

---

📌 상속 (extends)

서로 다른 클래스를 사용하여 객체를 만들 때, 두 객체가 가지는 공통점과 차이점이 존재하는 객체를 만들어야 할 때는 상속을 사용하여야 한다.

공통 기능들을 Monster 클래스로 묶어주고 extends를 통해서 공중몬스터와 지상몬스터에 상속해 줌으로써 사용 가능하게 만든다.

super : 생성자 constructor는 공중몬스터와 지상몬스터에서 동일하게 사용할 수 있지만, power 변수는 상속해 준 Monster 내부에 존재하므로, Monster class 내부에 있는 constructor로 인수를 넘겨 주기 위해 사용한다.

// index.js

class Monster {
    power = 10

    constructor(qqq){
        this.power = qqq
    }

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

class 공중몬스터 extends Monster {
    constructor(aaa){
        super(aaa)
    }

    run = () => {
        console.log("날라서 도망가자!!")
    }
}

class 지상몬스터 extends Monster {
    constructor(bbb){
        super(bbb)
    }

    run = () => {
        console.log("뛰어서 도망가자!!")
    }
}

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

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

---

📌 전략 패턴

하나의 Monster를 만들어두고, 무슨 기능을 넣어주냐에 따라서 이 Monster들이 서로 다른 Monster가 되도록 만든다.

• new Monster를 통해 몬스터를 만들 때, 부품(부품 Class)으로 존재하는 공중 부품(new 공중부품())과 지상 부품(new 지상부품())을 각각 넣어준다.

• 각 부품들은 Monster Class 내부의 constructor 생성자의 매개변수로 들어가게 된다.

• Monster Class 내부에 run 함수를 만들어 부품에 따라 서로 다른 기능을 가지는 Monster 2마리가 만들어지게 되는 것이다.

• Monster는 고정시켜 둔 채로, 안의 부품을 갈아 끼워줌으로 서로 다른 Monster를 만들 수 있다.
  

• 어떤 부품을 사용하는게 좋을지, 전략적으로 사용함에 있어 전략 패턴이라고 한다.

// index.js

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

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

class Monster {
    power = 10
    qqq;

    constructor(부품){
        this.qqq = 부품
    }

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

    run = () => {
        this.qqq.run()
    }
}

const mymonster1 = new Monster(new 공중부품())
mymonster1.attack()
mymonster1.run()

const mymonster2 = new Monster(new 지상부품())
mymonster2.attack()
mymonster2.run()

결과적으로 무조건 상속을 사용하거나 전략 패턴을 사용하는 것이 좋은 것이 아니다.

서비스 상황에 따라 적절하게 사용하는 것이 중요하며, 이와 같은 방법을 통해 가독성 및 유지보수성을 높이기 위해 사용되어야 한다.

📌 객체지향 프로그래밍 및 특징

객체지향 프로그래밍이란?

• 컴퓨터 프로그래밍의 패러다임 중 하나이다.

• 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다.

• 인간 중심적 프로그래밍 패러다임이라고 할 수 있다.

• 프로그래밍에서 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체로 만들고, 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.

• 객체지향 프로그래밍을 사용하면 코드 재사용이 쉬우며, 유지보수가 간편하고 직관적인 코드 분석이 가능한 장점이 있다.

객체지향 프로그래밍의 특징

✅ 1. 추상화 (abstraction)

• 추상화는 목적과 관련이 없는 부분을 없애고 필요한 부분만을 표현하는 것을 의미한다.

• 사물들의 공통적인 특징, 즉 추상된 특징을 파악해 인식의 대상으로 삼는 것을 말한다.

• 추상화는 구체적인 사물들의 공통적인 특징을 파악해서 이를 하나의 개념(집합)으로 다루는 수단이다.

✅ 2. 캡슐화(Encapsulation)

• 캡슐화란 하나의 객체에 대해 그 객체가 특정한 목적을 위한 필요한 변수나 메소드를 하나로 묶는 것을 의미한다.

• 응집도 : 클래스나 모듈 안의 요소가 얼마나 밀접하게 관련 있는지를 나타낸다.

• 결합도 : 어떤 기능을 실행하는 데 다른 클래스나 모듈에 얼마나 의존하는지를 나타낸다.

• 정보은닉 : 캡슐화는 정보은닉을 통해 높은 응집도와 낮은 결합력을 갖게 된다.

• 필요 없는 정보는 외부에서 접근하지 못하도록 제한하는 것이다.

• private 키워드를 통해 데이터를 보호해 접근을 제한한다.
  

✅ 3. 상속성(Inheritance)

• 상속이란 기존 상위 클래스에 근거하여 새롭게 클래스와 행위를 정의할 수 있게 도와주는 개념이다

• 기존 클래스의 기능을 가져와 재사용할 수 있으면서, 새로운 기능을 추가할 수 있다.
  

• 여러 개체가 가진 공통된 특성을 부각시켜 하나의 개념이나 법칙으로 성립시키는 과정이다.
  

• 따라서 같은 특징이 있는 클래스를 그대로 물려받아, 다시 작성할 필요 없이 재사용으로 효율성을 높인다.
  

• 이를 통해 다형성을 확보할 수 있다.
  

✅ 4. 다형성(polymorphism)

• 다형성은 상속을 통해 기능을 확장하거나 변경하는 것을 가능하게 해준다. 즉, 다형성은 형태가 같은데 다른 기능을 하고 서로 다른 클래스의 객체가 같은 메시지를 받았을 때 각자의 방식으로 동작하는 능력이다.

• 다형성은 상속과 연계되어 동작하면 매우 강력한 힘을 발휘한다.
  

• 다형성과 일반화 관계는 코드를 간결하게 하여 재사용과 유지보수가 용이하도록 도와주고 변화에도 유연하게 대처할 수 있게 해준다.
  

✅ 오버라이딩(Overriding)

• 부모 클래스에서 상속받은 자식 클래스에서 부모 클래스에서 만들어진 메서드를 자신의 입맛대로 다시 재정의해서 사용하는 것을 말한다.

✅ 오버로딩(Overloading)

• 같은 이름의 메서드를 사용하지만 메서드마다 다른 용도로 사용되며 그 결과물도 다르게 구현할 수 있게 만드는 개념이다.

• 오버로딩이 가능하려면 메서드끼리 이름은 같지만 매개변수의 갯수나 데이터 타입이 다르면 오버로딩이 적용된다.

📌 MVC 패턴

✅ 디자인패턴

디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서, 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 "규약"을 통해 쉽게 쓸 수 있는 형태로 만든 것을 의미한다.

디자인 패턴에는 여러가지가 있지만, 오늘은 MVC 패턴에 대해 학습하였다.

MVC 는 Model, View, Controller의 약자이며 하나의 애플리케이션, 프로젝트를 구성할 때 그 구성요소를 세가지의 역할로 구분한 패턴이다.

• controllers : 미들웨어 함수를 분리해서 관리하는 곳.

• models : DB 생성을 관리해주는 곳.

• view : 화면에 보여지는 파일들(html 파일)을 관리해주는 폴더. (프론트엔드)

위의 그림을 보게되면 사용자가 controller를 조작하면 controller는 model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 된다.

---

🌈 오늘 하루

오늘은 프로젝트와 같은 큰 규모의 코드를 작성할 때, 코드의 가독성 및 유지보수를 편하게 하기 위한 디자인 패턴에 대하여 학습하였다. 디자인패턴을 기존에 만들었던 프로젝트에 적용하여 구조를 변경해보고 직접 눈으로 코드의 변화를 보니, 확실히 한번에 작성하는 것보다 가독성이 눈에 띄게 높아졌으며, 데이터의 흐름을 읽고 따라가는게 훨씬 수월하다는 것을 깨달았다. 이러한 디자인패턴들을 적용하여 만드는 것이 기능을 구현하는 것만큼 중요하기 때문에 앞으로 코드를 작성하며, 디자인 패턴을 적용해야겠다는 마음가짐을 했다.