오프라인 코드캠프 11일차 TIL

전은평·2023년 3월 29일
0

TIL

목록 보기
10/16

👨🏻‍💻오늘의 알고리즘 공부

Number.isInteger()

: 정수인지 아닌지 판단하고 boolean 값을 출력
: 정수인 경우 true, 정수가 아닌 경우 false

Math.sqrt()

: 제곱근 구하는 매서드

Math.pow(sqrt, num)

: 거듭제곱 계산 가능
: 첫번째 매개변수는 제곱 계산할 숫자, 두번째 매개변수는 얼마나 거듭해서 제곱할건지 입력
: 제곱의 경우 더 간편하게 계산 가능 ex) 3**2 = 3의 제곱

Arr.filter(data => {})

: 검색 조건을 주고 조건을 충족하는 값만 출력 가능

👨🏻‍💻오늘의 강의 내용

Class

객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

쉽게 말해 물건 만드는 설명서라고 이해하면 된다.

실무에선 동일한 종류의 객체를 여러 개 생성해야 하는 경우에 클래스를 사용!

컴포넌트 (부품) 역시 클래스로 만들 수 있다.

Class 내
함수 선언시 function 작성 X => 매서드처럼 사용가능
변수 선언시 선언 키워드 작성 X

// 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()

new연산자와 생성자 함수를 사용해서 새로운 객체(mymonster1,2)를 생성
새로운 객체를 instance라고도 함

(+) const date = new Date()에서 Date()는 내장객체 / date는 객체

date instanceof Date // true 반환

Class의 constructor 함수

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

클래스내 함수와 변수 키워드 생략되는 대신 this.가 생략되어 있다고 생각하면 됨

this는 클래스를 의미함!

또한 power의 값과 같이 초기값을 다르게 주고 싶을 때는 class를 여러개를 만들어도 되지만, 비효율적이기 때문에 인수를 사용하여 아래와 같이 정의할 수도 있음!

// 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();

내장되어 있는 생성자 함수 Constructor()
: 얘는 처음 함수가 실행될 때 만들어지는 함수 = 초기값을 생성해 줄 수 있음
: 즉 해당 클래스를 생성할 때(mymonster1,2) 실행해주는 함수
: mymonster로부터 넘겨받은 인수와 함께 constructor가 자동으로 실행됨
: 위의 예에서 인수 20과 50이 qqq라는 이름으로 this.power에 할당해 줌으로써 초기감이 다시 생성되는 것이다

객체지향프로그래밍(OOP)

  • 컴퓨터 프로그래밍의 패러다임 중 하나
  • 객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것
  • 객체 지향 프로그래밍이란 인간 중심적 프로그래밍 패러다임이라고 할 수 있음
  • 즉, 프로그래밍에서 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체로 만들고, 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법
  • 객체지향 프로그래밍을 사용하면 코드 재사용이 쉬우며, 유지보수가 간편하고 직관적인 코드 분석이 가능한 장점

결국 쉽게 말해 객체를 사용해서 프로그래밍 하는 것이다!
앞에서 살펴본 클래스를 이용한 방법도 일종의 객체지향 프로그래밍이다.


특징

1. 추상화

  • 추상화는 목적과 관련이 없는 부분을 제거하여 필요한 부분만을 표현
  • 사물들의 공통적인 특징, 즉 추상된 특징을 파악해 인식의 대상으로 삼는 행위
  • 추상화는 구체적인 사물들의 공통적인 특징을 파악해서 이를 하나의 개념(집합)으로 다루는 수단

    아우디와 벤츠는 모두 ‘자동차’에 해당됩니다.
    따라서, 자동차라는 추상화 집합이 존재하며, 자동차들이 가진 공통적인 특징들을 하나의 집합으로 만들어 놓은 것입니다.

2. 캡슐화(Encapsulation)

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

  • 응집도 : 클래스나 모듈 안의 요소가 얼마나 밀접하게 관련 있는지를 나타냄
  • 결합도 : 어떤 기능을 실행하는 데 다른 클래스나 모듈에 얼마나 의존하는지 나타냄
  • 정보은닉 : 캡슐화는 정보은닉을 통해 높은 응집도와 낮은 결합력을 가지게 됨
    • 필요가 없는 정보는 외부에서 접근하지 못하도록 제한하는 것
    • private 키워드를 통해 데이터를 보호해 접근을 제한

3. 상속성(Inheritance)

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

  • 기존 클래스의 기능을 가져와 재사용할 수 있으면서도 새로운 기능을 추가할 수 있게 해 줌
  • 여러 개체가 가진 공통된 특성을 부각시켜 하나의 개념이나 법칙으로 성립시키는 과정
  • 따라서 같은 특징이 있는 클래스를 그대로 물려받아, 다시 작성할 필요 없이 재사용으로 효율성을 높일 수 있음
  • 이를 통해 다형성을 확보할 수 있다.

4. 다형성(polymorphism)

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

  • 다형성은 상속과 연계되어 동작하면 매우 강력한 힘을 발휘한다.
  • 다형성과 일반화 관계는 코드를 간결하게 하여 재사용과 유지보수가 용이하도록 도와주고 변화에도 유연하게 대처할 수 있게 해준다.

오버라이딩(Overriding)

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

오버로딩(Overloading)

  • 같은 이름의 메서드를 사용하지만 메서드마다 다른 용도로 사용되며 그 결과물도 다르게 구현할 수 있게 만드는 개념
  • 오버로딩이 가능하려면 메서드끼리 이름은 같지만 매개변수의 갯수나 데이터 타입이 다르면 오버로딩이 적용됨.

Class 상속

클래스 상속 개념!

누군가로부터 해당 기능을 상속받는 것

같은 기능들을 사용할 때는 코드의 효율성을 높이기 위해 중복되는 코드들을 최소화

상속받은 기능 중 겹치는 것이 있으면 나중에 선언된 기능만 구현되고 이전의 것은 없는 것으로 간주되는데 이를 오버라이딩이라 한다. 다시 말해 부모의 기능을 덮어쓴다는 뜻이다.

// 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()
  • 공통 기능들을 extends를 통해서 공중몬스터와 지상몬스터에 상속해 줌으로써 사용 가능!
  • super : 생성자 constructor는 공중몬스터와 지상몬스터에서 동일하게 사용할 수 있지만, 현재 power 변수는 상속해 준 Monster 내부에 존재하므로, Monster class 내부에 있는 constructor로 인수를 넘겨 주기 위해 사용

상속받은 경우 초기값(생성자)을 해당 자식한테 초기값(생성자)으로 먼저 넘기고 그 값을 부모(생성자)한테 다시 넘긴다로 이해하자!
constructor( ){ super( ) }

Class 전략패턴

전략패턴 (Strategy Pattern)
: 전략패턴은 이미 완성된 상태에서 안의 부품만 갈아끼우는 것 (부품교환느낌)
예를 들면, 로그인 제품 (기능) 하나 만들어놓고 그 안의 부품을 카카오로그인, 네이버로그인 등 부품만 갈아끼우는 것! 유지보수에 용이하고 매우 효율적이다
: 부품 4개

: 이에 반해 상속은 로그인 기능을 각각 하나씩 만들어냐하니 최종제품 (기능)이 4개가 됨
: 상속 = 기능확장 / 전략패턴 = 부품교환

// 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()
  • new Monster를 통해 몬스터를 만들 때, 부품(부품 Class)으로 존재하는 공중 부품(new 공중부품())과 지상 부품(new 지상부품())을 각각 넣어주고
    • 각 부품들은 Monster Class 내부의 constructor 생성자의 매개변수로 들어감
    • Monster Class 내부에 run 함수를 만들어 부품에 따라 서로 다른 기능을 가지는 Monster 2마리가 만들어지게 됨
  • Monster는 고정시켜 둔 채로, 안의 부품을 갈아 끼워줌으로 서로 다른 Monster를 생성 가능
  • 어떤 부품을 사용하는게 좋을지, 전략적으로 사용함에 있어 전략 패턴이라 부름!

MVC패턴

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

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

controllers 에서는 미들웨어 함수를 분리해서 관리 (쉽게 말해 API)

models 에서는 DB 생성을 관리해주는 곳으로 이전에 배운 Schema 정의를 해 준 폴더와 동일

view 에는 화면에 보여지는 파일들(html 파일)을 관리해주는 폴더

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

그럼 왜 MVC 패턴을 사용할까?

사용자가 보는 페이지, 데이터처리, 그리고 이 2가지를 중간에서 제어하는 컨트롤, 이 3가지로 구성되는 하나의 애플리케이션을 만들면 각각 맡은 바에만 집중을 할 수 있다.
이는 바로 효율성으로 직결되기 때문에 사용한다.
마치 공장에서의 분업과도 같은 개념.

서로 분리되어 각자의 역할에 집중해 개발한다면, 유지보수성, 애플리케이션의 확장성, 그리고 유연성이 증가 하고, 중복코딩이라는 문제점 또한 사라지게 될 것 이다!

MVP 패턴을 이용해 controller 구성시 중요사항!

1 . route경로(기능별)에 따른 controller를 작성
2 . endPoint 별로 분리하여 controller를 작성
3 . service 부분이 API 핵심 기능을 다 담고 있다고 보면 됨

결국 service -> controller -> index 순으로 층이 생기게 되는데 이와 같은 구조를 Layered architecture 라고 한다

이러한 구조가 유지 / 보수에 용이하고 앞으로 배울 nestjs의 기본구조도 위와 동일하다.

profile
전은평
`아는 만큼 보인다` 라는 명언을 좋아합니다. 많이 배워서 많은 걸 볼 수 있는 개발자가 되고 싶습니다.
이전 포스트

오프라인 코드캠프 9일차 TIL

다음 포스트

4/5 TIL

0개의 댓글