[CS] 디자인 패턴, 라이브러리와 프레임워크 차이

디자인패턴이란?

디자인패턴

디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 ‘규약’ 형태로 만들어 놓은 것을 의미
디자인패턴은 라이브러리나 프레임워크를 만드는데 기초적인 원리가 되며 지금도 많은 라이브러리, 프레임워크가 어떠한 디자인패턴을 기반으로 만들어지고 있음

 

디자인패턴의 의의

여러 문제를 해결하는데 있어서 영감을 받을 수도 있고 팀원들과 협업할 때 어떤 문제가 나타났을 때 빠른 의사소통이 가능

 

디자인패턴의 종류

생성패턴, 구조패턴, 행동패턴

 

생성패턴

생성패턴은 객체 생성 방법이 들어간 디자인패턴
싱글톤, 팩토리, 추상팩토리, 빌더, 프로토타입패턴

 

구조패턴

구조패턴은 객체, 클래스 등으로 큰 구조를 만들 때 유연하고 효율적으로 만드는 방법이 들어간 디자인패턴
프록시, 어댑터, 브리지, 복합체, 데코레이터, 퍼사드, 플라이웨이트패턴

 

행동패턴

객체나 클래스 간의 알고리즘, 책임 할당에 관한 디자인패턴
이터레이터, 옵저버, 전략, 책임연쇄, 커맨드, 중재자, 메멘토, 상태, 템플릿메서드, 비지터 패턴

이외에도 flux패턴, MVC패턴, MVVM패턴 등 수많은 디자인패턴이 있음

 

라이브러리와 프레임워크 차이

라이브러리

라이브러리는 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것이며 폴더명, 파일명 등에 대한 규칙이 없고 프레임워크에 비해 자유로움
라이브러리는 자주 사용되는 로직들의 모음 혹은 묶음이라로 할 수 있음. 자주 쓰는 메서드 및 함수들을 미리 구현해 놓고, 프로그램에 추가해서 사용하는 형태가 됨. 개발자는 미리 만들어 놓은 기능들을 사용하기 편하고 빠르게 개발을 진행할수 있음

예시

- jQuery: 웹 개발에서 사용되는 자바스크립트 라이브러리

- Express : Node js 웹 애플리케이션을 위한 웹 프레임워크

- React : 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리

- Flask : 파이썬 마이크로 웹 프레임워크

- axios : 브라우저와 Node.js에서 동작하는 Promise 기반의 HTTP 클라이언트 라이브러리

 

axios 라이브러리 사례

axios로 get 요청을 하려면 .get()그리고 그 이후에 콜백함수 처리는 .then(callback) 등으로 해야 한다는 일정한 규칙이 있음. 이에 따라 해당 핸들러 함수를 넣어주어서 HTTP요청을 하고 그 요청에 따른 응답에 대한 로직을 구현하면 됨

axios.get('/user?ID=12345') 
	.then(function (response) {
        // handle success
        console.log(response);
    })
	.catch(function (error) { // handle error
        console.log(error);
    })
	.then(function () {
	// always executed
});

 

프레임워크

프레임워크는 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것. 폴더명, 파일명 등에 대한 규칙이 있으며 라이브러리에 비해 좀 더 엄격함 
프레임워크는 말 그대로 뼈대 즉, 프로그램 구현에 있어서 큰 구조를 결정하고 흐름을 제어하는 역할

예시

- Django : 파이썬 웹 프레임워크
- Ruby on Rails : 루비 웹 프레임워크
- Angular : 웹 프론트엔드 프레임워크

- React Native : 페이스북에서 개발한 프레임워크
- Flutter : 구글에서 개발한 UI 프레임워크

- Spring 프레임워크, NET 프레임워크 

 

vue.js 프레임워크 사례

count라는 변수를 ++하기 위해서는 data(){ 메서드 안에 변수를 선언해야 한다는 규칙 등이 있음
또한 style을 보면 scoped라는 것을 통해서 해당 컴포넌트기반에서만 작동되는 style 이라는 것을 정할 수 있음

<script>
	export default {
		data() {
			return {
				count: 0
			}
		}
}
</script>

<template>
    <button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped> 
	button {
        font-weight: bold;
    }
</style>

 

라이브러리 VS 프레임워크

프레임워크는 라이브러리를 포함

프레임워크 위에 개발자가 작성한 애플리케이션 코드가 올라가게 되고, 이 애플리케이션 코드에서는 라이브러리를 호출할 수 있음

 

 

프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 작성하며 반면에 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것 즉, 라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있으며 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재(내포)하고 있음

이처럼 프레임워크와 라이브러리의 가장 큰 차이점은 "제어 흐름"이 어디에 있는가임

* 참고

- CS 지식의 정석 | 디자인패턴 네트워크 운영체제 데이터베이스 자료구조 -인프런