3월 4주차 - MVC ~ 프로그래밍 패러다임

[K-J-HYEON]

MVC 패턴

• MVC 패턴은 모델, 뷰 컨트롤러로 이루어진 디자인 패턴

• 애플리케이션의 구성 요소를 세 가지 역할로 구분
• 재사용성 확장성 용이
• 애플리케이션 복잡해질수록 모델 뷰의 관계가 복잡해진다.

모델

• 모델은 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻함
• 사각형 모양의 박스 안에 글자가 들어 있으면 사각형 모양의 박스 위치 정보, 글자 내용, 글자 위치, 글자 포맷 utf-8에 관한 정보를 모두 가지고 있어야 한다.
• 뷰에서 데이터를 생성하거나 수정하면 컨트롤러 통해서 모델을 생성하거나 갱신

뷰

• inputbox, checkbox, textarea 등 UI 요소 가짐
• 모델 기반으로 사용자가 볼 수 있는 화면 뜻함
• 모델이 가지고 있는 정보를 따로 저장하지 않아야 하고
• 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야함.
• 변경 일어나면 컨트롤러에 전달해야 함

컨트롤러

• 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할 함
• 이벤트 등 메인 로직을 담당
• 모델과 뷰의 생명주기도 관리
• 모델이나 뷰의 변경 통지를 받으면 해석해서 구성 요소에 해당 내용에 대해 알려줌

MVC 패턴의 예 리액트

• MVC 패턴 이용한 대표적인 라이브러리 React.js
• UI를 구축하기 위한 라이브러리 / 가상 DOM을 조작하는 것을 추상화해서 성능 높임
• 대표적인 특성으로 불변성이 있다.
• state는 setState를 통해 수정이 가능하고 props를 기반으로 만들어지는 컴포넌트 pureComponent가 있다.
• 단방향 바인딩이 적용되고 자유도가 높고, 메타가 운영하고 있으며 넷플릭스, 트위터, 드롭박스, 우버, 페이팔, 마이크로소프트 등에서 사용된다.

MVP 패턴

• MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터로 교체된 패턴

- 뷰와 프레젠터는 일대일 관계여서 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴

MVVM 패턴

• MVC의 C에 해당하는 컨트롤러가 뷰모델로 바뀐 패턴

- 뷰모델은 뷰를 더 추상화한 계층 - MVC 패턴과 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징 - 뷰, 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용 할 수 있음. - 단위 테스팅하기 쉽다는 장점이 있음.

MVVM 패턴의 예: 뷰

• Vue.js
• 반응형이 특징인 프런트엔드 프레임워크
• watch와 computed 등으로 쉽게 반응형적인 값들을 구축할 수 있다.
• 함수를 사용하지 않고 값 대입만으로도 변수가 변경됨
• 양방향 바인딩, html 토대로 컴포넌트를 구축할 수 있다는 점이 특징
• 재사용 가능한 컴포넌트 기반으로 UI를 구축할 수 있으며 BMW, 구글, 루이비통 등에서 사용

커맨드

• 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법

데이터 바인딩

• 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법
• 뷰모델을 변경하면 뷰가 변경됨

프로그래밍 패러다임

• 프로그래밍의 관점을 갖게해주는 역할을 하는 개발 방법론

• 객체지향 프로그래밍은 프로그램을 상호 작용하는 객체들의 집합

• 반면 함수형 프로그래밍은 상태 값을 지니지 않는 함수 값들의 연속으로 생각

• jdk 1.8 이전 자바 : 객체지향 프로그래밍 지원

• jdk 1.8 이후 버전 함수형 프로그래밍 패러다임 지원을 위한 람다식, 생성자 레퍼런스, 메서드 레퍼런스 도입, 선언형 프로그래밍을 위해 스트림 같은 표준 API 등도 추가

• C++, 파이썬, 자바스크립트 등도 여러 패러다임 지원

• 선언형. 명령형으로 프로그래밍 패러다임을 분류

• 선언형은 함수형 / 명령형은 객체지향 절차지향으로 나뉨

선언형과 함수형 프로그래밍

• ‘무엇을’ 풀어내는가에 집중하는 패러다임
• “프로그램은 함수로 이루어진 것” 명제가 담긴 패러다임
• 함수형 프로그래밍은 선언형 패러다임의 일종

const ret = [1,2,3,4,5,11,12]
.reduce((max, num) => num > max ? num : max, 0)
console.log(ret) // 12

• reduce()는 ‘배열’만 받아서 누적한 결괏값을 반환하는 순수 함수
• 함수형 프로그래밍은 순수 함수들을 블록처럼 쌓아 로직을 구현하고 고차 함수를 통해 재사용성을 높인 프로그래밍 패러다임
• 자바스크립트는 단순하고 유연한 언어
• 함수가 일급 객체여서 객체지향 프로그래밍보다 함수형 프로그래밍 방식이 선호

순수 함수

• 출력이 입력에만 의존

const pure = (a, b) => {
	return a + b
}

pure 함수는 들어오는 매개변수 a, b에만 영향을 받는다. 만약 a, b 말고 다른 전역 변수 c등이 출력에 영향을 주면 순수 함수가 아니다.

고차 함수

• 고차 함수란 함수가 함수를 값처럼 매개변수로 받아 로직을 생성할 수 있는 것

일급 객체

고차 함수를 쓰기 위해 해당 언어가 일급 객체라는 특징을 가져야 한다.

1. 변수나 매서드에 함수 할당할 수 있다.
2. 함수 안에 함수를 매개변수로 담을 수 있다.
3. 함수가 함수를 반환할 수 있다.

객체지향 프로그래밍 OOP

• 객체들의 집합으로 프로그램의 상호 작용을 표현하며
• 데이터를 객체로 취급해 객체 내부에 선언된 메서드를 활용하는 방식
• 설계에 많은 시간이 소요 / 처리 속도가 다른 프로그래밍 패러다임에 비해 느림
• 자연수로 이루어진 배열에서 최댓값 찾으라 하면 아래와 같은 로직을 구성한다.

const ret = [1, 2, 3, 4, 5, 11, 12]
class List {
	constructor(list) {
		this.list = list
		this.max = list.reduce((max, num) => num > max ? num : max, 0)
}
	getMax() {
		return this.mx
	}
}
const a = new List(ret)
console.log(a.getMax()) // 12

• List라는 클래스를 만들고 a라는 객체를 만들 때 최댓값을 추출해내는 메서드 만든 예제

객체지향 프로그래밍 특징

• 추상화, 캡슐화, 상속성, 다형성

추상화

• 복잡한 시스템으로부터 핵심적인 개념 / 기능을 간추려내는 것을 의미

캡슐화

• 객체의 속성과 메서드를 하나로 묶고 일부를 외부에 감추어 은닉

상속성

• 상위 클래스의 특성을 하위 클래스가 이어받아서 재사용하거나 추가, 확장하는 것
• 코드의 재사용 측면, 계층적인 관계 생성
• 유지 보수성 측면에서 중요

다형성

• 다형성은 하나의 메서드나 클래스가 다양한 방법으로 동작
• 오버로딩, 오버라이딩

오버로딩

오버로딩은 같은 이름을 가진 메서드를 여러 개 두는 것을 말함. 메서드의 타입, 매개변수의 유형, 개수 등으로 여러 개를 둘 수 있고 컴파일 중 발생하는 ‘정적’ 다형성

class Person {
	public void eat(String a) {
		System.out.println("I eat " + a);
}

	public void eat(String a, String b) {
			System.out.println("I eat " + a + " and " + b);
		}
}
public class CalculateArea {
	
	public static void main(String[] args) {
		Person a = new Person();
		a.eat("apple");
		a.eat("tomato", "photo");
	}
}

/*
I eat apple
I eat tomato and phodo
*/

⇒ 매개변수의 개수에 따라 다른 함수가 호출됨

오버라이딩

• 주로 메서드 오버라이딩을 말하며 상위 클래스로부터 상속받은 메서드를 하위 클래스가 재정의하는 것을 의미(‘동적’ 다형성)

class Animal {
	public void bark() {
			System.out.println("mumu! mumu!");
	}
}

class Dog extends Animal {
	@Override
	public void bark() {
		System.out.println("wal!!! wal!!!");
	}
}

public class Main {
	public static void main(String[] args) {
		Dog d = new Dog();
		d.bark();
	}
}
/*
wal!!! wal!!!
*/

⇒ 부모 클래스는 mumu! mumu!로 짖게 만들었지만 자식 클래스에서 wal!!!, wal!!!로 짖게 만들어서 자식 클래스 기반으로 메서드가 재정의 됨

설계 원칙

• 객체지향 프로그래밍 설계할 때 SOLID 원칙 지켜주어야 함

• S는 단일 책임 원칙 Single Responsiblity Principle

모든 클래스는 각각 하나의 책임만 가져야 하는 원칙

A라는 로직 존재하면 어떠한 클래스는 A에 관한 클래스여야 하고 이를 수정한다 했을 때고 A와 관련된 수정

• O는 개방 - 폐쇄 원칙 Open - Closed Principle

유지 보수 사항 생기면 코드를 쉽게 확장할 수 있도록 하고 수정할 때는 닫혀 있어야 하는 원칙 / 기존의 코드는 잘 변경하지 않으면서 확장은 쉽게 할 수 있어야 함

• L은 리스코프 치환 원칙 Liskov Substitution Principle

리스코프 치환 원칙은 프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 하는 것을 의미. 클래스는 상속이 되기 마련, 부모, 자식이라는 계층 관계가 만들어진다.

부모 객체에 자식 객체를 넣어도 시스템이 문제없이 돌아가게 만드는 것을 말함. 범석 객체가 홍철 객체의 자식 계층일 때 범석 객체를 홍철 객체와 바꿔도 문제가 없어야 하는 것

• I는 인터페이스 분리 윈칙
• Interface Segregation Principle

인터페이스 분리 원칙은 하나의 일반적인 인터페이스보다 구체적인 여러 개의 인터페이스를 만들어야 하는 원칙

• D는 의존 역전 원칙 Dependency Inversion Principle

자신보다 변하기 쉬은 것에 의존하던 것을 추상화된 인터페이스나 상위 클래스를 두어 변하기 쉬운 것의 변화에 영향받지 않게하는 원칙

예를 들어 타이어 갈아끼울 수 있는 틀을 만들어 놓은 후 다양한 타이어를 교체할 수 있어야 한다. 즉 상위 계층은 하위 계층의 변화에 대한 구현으로부터 독립해야 함.

절차형 프로그래밍

• 로직이 수행되어야 할 연속적인 계산 과정으로 이루어져 있다.
• 코드를 구현하기만 하면 되어서 코드의 가독성이 좋으면서 실행속도가 빠르다.
• 계산이 많은 작업에 쓰임
• 포트란?? (fortran)을 이용한 대기 과학 관련 연산 작업, 머신 러닝의 배치 작업이 있음. 단점으로 모듈화 하기 어렵고 유지 보수성이 떨어짐

자연수로 이루어진 배열에서 최댓값을 찾으라고 한다면 아래와 같은 로직 구성

const ret = [1, 2, 3, 4, 5, 11, 12]
let a = 0
for (let i = 0; i <ret.length; i++) {
		a = Math.max(ret[i), a)
}
console.log(a) // 12

패러다임의 혼합

• 비즈니스 로직 / 서비스 특징 고려해서 패러다임 정하는 것이 좋다.
• 여러 패러다임 조합해 상황과 맥락에 따라 패러다임 간의 장점만 취해 개발하는 것이 좋음
• 백엔드에 머신 러닝 파이프라인과 거래 관련 로직이 있으면
• 머신 러닝 파이프라인은 절차지향형 패러다임, 거래 관련 로직은 함수형 프로그래밍을 적용

<출처 및 참고 : 면접을 위한 CS 전공지식 노트 - 주홍철 >