1. Framework(프레임워크)

프레임워크는 뼈대나 기반구조를 뜻하는데 Application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 등과 같은 기능들을 위해 어느정도 뼈대(구조)를 제공해주는 것입니다. 그러므로 그러한 뼈대 위에 프로그래머가 코드를 작성하여 Application을 완성시켜야 합니다. 어느정도 뼈대를 제공해 주기 때문에, 객체 지향 개발을 하면서 일관성 부족 등의 문제를 해결해 줍니다. 그래서 소프트웨어에서는 프레임워크를 아래와 같이 정의하곤 합니다.

소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합

2. Library(라이브러리)

Library는 특정 기능에 대한 도구 or 함수들을 모은 집합입니다. 즉, 프로그래머가 개발하는데 필요한 것들을 모아둔 것입니다. Library는 프로그래머라면 누구나 한번쯤은 써봤을 것이며, 스스로 써보지 않았다라고 생각하는 사람도 라이브러리가 무엇인지 몰라서 그렇게 얘기하는 것일 뿐, 자기도 모르게 써보았을 것입니다. Library역시도 아래와 같이 간단하게 정의할 수 있습니다.

라이브러리는 주로 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임

언뜻 보면 Framwork와 Library모두 개발자에게 필요한 것들을 모아둔 것이라고 착각할 수 있지만 큰 차이가 존재 합니다.

3. Framework와 Library의 차이 - Inversion Of Control

Framework 와 Library 의 차이는 Flow(흐름)에 대한 제어 권한이 어디에 있느냐 차이입니다. 프레임워크는 전체적인 흐름을 자체적으로 가지고 있으며, 프로그래머가 그 안에 필요한 코드를 작성하는 반면에 라이브러리는 사용자가 흐름에 대해 제어를 하며 필요한 상황에 가져다 쓰는 것입니다. 이 내용을 한 문장으로 정리하자면 프레임워크에는 제어의 역전(Inversion Of Control)이 적용되어 있다는 것입니다.

제어의 역전(Inversion Of Control)이란 어떠한 일을 하도록 만들어진 프레임워크에 제어의 권한을 넘김으로써 클라이언트 코드가 신경서야 할 것을 줄이는 전략입니다. 일반적으로 우리는 프로젝트를 생성하고 Main함수를 만들어서 시작지점을 형성합니다. 그리고 Main 함수에서 프로그램의 흐름을 정하는 것은 프로그래머의 몫으로 우리가 어떠한 순서를 부여하느냐에 따라서 흐름을 제어하는 것이 일반적인 사고입니다. 하지만 여기서 프레임워크는 일반적인 사고와 반대되는 모습을 보여주는데 실행의 흐름을 프레임워크 자체가 가지고 있어서 우리의 코드를 프레임워크안에 넣어서 개발을 진행해야 합니다. 실제로 Maven과 같은 프레임워크의 프로젝트를 생성해보면 어느정도 뼈대를 만들어서 그 안에 필요에 따라 우리의 코드를 넣습니다. 일반적으로 프로그래머가 가지고 있어야하는 제어의 권한을 프레임워크에게 주었기 때문에 우리는 이를 제어의 역전이라고 말합니다.

4. Framework 와 Library의 예

jQuery, React는 라이브러리에 속합니다. 정확히는 리액트의 생태계는 프레임워크이지만 리액트만은 라이브러리라고 합니다.

프레임워크로 분류되기 위해서는 필수로 충족해야하는 것들이 있습니다. 다른 많은 프레임워크들이 기본적으로 내장하고 있는 기능들 말이죠.(예를 들어 라우터 기능 등)

리액트 자체는 MVC 패턴 중 V인 View만을 담당합니다. 오직 View 만을 담당하며 DOM 을 복사해 Virtual DOM을 만들고 변화가 생겻을 떄 페이지 전체를 렌더링하지 않고, 변화시킬 부분만 실제 DOM에 적용하는 방식으로 렌더링합니다. 그래서 리액트로 개발을 진행하려면 react 만 설치한다고 웹페이지나 어플리케이션을 만들지 못합니다. 또한 다른 라이브러리들을 다 설치했다 하여도 어떻게 개발을 진행할지, 어떤식으로 코드를 설계하면서 작성할지에 대한 가이드가 전혀 없습니다. 오로지 사용자가 직접 선택해서 작성해야 합니다.

리액트에서 이러한 기능들을 구현하기 위해서는 여러가지 추가적인 라이브러리를 같이 사용해야합니다. (react-router, react-redux, react-saga 등…) 그렇기 때문에 React 는 프레임워크로 분류되지 않고 라이브러리로 분류됩니다.

물론 공식사이트에도 라이브러리로 소개되고 있습니다.^^

vue가 프레임워크인 이유는 view만이 아닌 데이터 또한 관리하기 때문에 MVVM모델의 VM인 ViewModel 을 담당하고 있습니다. 그리고 뷰로 개발을 진행하려면 vue를 설치한 뒤, 제공하는 양식에 맞춰 개발을 진행해야 하므로 뷰 자체에서 흐름을 직접 제어하고 있다고 봅니다.

MVC패턴 : MVC 는 Model, View, Controller의 약자 입니다. 하나의 애플리케이션, 프로젝트를 구성할 때 그 구성요소를 세가지의 역할로 구분한 패턴입니다. MVVM패턴 : MVVM 패턴은 WPF(Windows Presentation Foundation)와 Silverlight 같은 데이터 바인딩을 활용한 환경에서 데이터와 프레젠테이션 로직을 분리하기 위해서 만들어진 디자인 패턴입니다. Model, View, View Model로 구성되어 있습니다.

출처 :

https://mangkyu.tistory.com/4
https://okayoon.tistory.com/entry/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EC%99%80-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%ACReact%EB%8A%94-%EB%AD%90%EC%95%BC
https://joshua1988.github.io/web_dev/vue-or-react/
https://velog.io/@gkswnsy/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EC%99%80-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC
https://velog.io/@k7120792/Model-View-ViewModel-Pattern