들어가며
개발을 처음 접하고 나서부터 프레임워크와 라이브러리라는 용어는 여러방면에서 자주 접하게 되었다. Frontend 직무를 수행하다보면 React와 Vue의 차이를 설명하라는 이야기가 많이나오고, 이 둘의 차이는 React는 라이브러리, Vue는 프레임워크라고 대답하는데.. 그게 뭐인지 오늘은 알아보도록 하자.
프레임워크와 라이브러리
프레임워크
원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대.
애플리케이션 개발 시 필요한 기능들을 위해 어느정도 구조를 제공하며, 이 구조 위에서 코드를 작성하여 애플리게이션을 개발한다.
✏️프레임워크의 특징
- 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성
- 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법 정의
- 컴포넌트들은 재사용 가능
- 높은 수준에서 패턴들을 조작화 가능
Example
- Java 서버 개발 : Spring
- Python 서버 개발 : Django, Flask, FastAPI
- Web 개발 : Angular, Vue.js
- Android 개발 : Android
- IPhone 개발 : Cocoa Touch, Flutter
라이브러리
단순 활용가능한 도구들의 집합.
즉, 개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식
Example
Python pip로 설치한 패키지/모듈 (tensorflow, pandas, beautifulsoup 등등)
C++의 표준 템플릿 라이브러리 (STL)
Node.js에서 npm으로 설치한 모듈
HTML의 클라이언트 사이드 조작을 단순화하는 JQuery
웹에서 사용자 인터페이스 개발에 사용되는 React.js
무슨 느낌인지는 알았는데,, 뭘로 구분하나요?
프레임워크와 라이브러리의 차이점은 제어 흐름의 권한이 어디에 있는가입니다.
- 제어 흐름 : 프로그램에서 실행되는 각 구문, 명령어나 함수가 호출되는 순서
라이브러리를 사용할 때 사용자는 애플리케이션 코드의 흐름을 직접 제어해야 한다.
개발 시 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 써야 한다. 즉, 개발자가 원하는 타이밍에 라이브러리를 호출하면서 사용하는 것이다.
반면, 프레임워크는 애플리케이션의 코드가 프레임워크에 의해 사용된다.
애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그 안에 필요한 코드를 작성한다.
이렇게 Framework에 제어 권한을 위임하는 것을 제어의 역전 (Ioc)이라고 한다.
간단히 말해 프로그램의 제어 흐름 구조가 뒤바뀐 것을 뜻한다.
라이브러리의 경우 애플리케이션의 흐름을 사용자가 직접 제어해야 하지만 프레임워크의 경우 코드를 연결할 수 있는 위치를 제공하고 필요에 따라 사용자가 연결한 코드를 호출하는 제어 흐름 권한을 가지고 있다.
React VS Vue
위에서 설명했듯이 React는 UI 라이브러리, Vue는 프레임워크이다.
그렇기 때문에 React는 참고가 용이하고, 라이브러리의 일부분만 가져와서 사용할 수 있다. 대신 React는 라이브러리이기 때문에 리액트 자체만으로는 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않는다. 이를 보완하기 위해 Redux, Recoil, React-router-dom등을 사용한다.
반면에 Vue는 자바스크립트 프레임워크이다. 부분적인 사용이 불가능하고, 프레임워크가 지원해주는 문법에 따라 작성한다. 대신 더 많은 기능을 제공해준다.
| 구분 | 장점 | 단점 | |
|---|---|---|---|
| React | 라이브러리 | 참고가 용이하고 라이브러리의 일부분만 가져와서 사용이 가능함. | 리액트 외에 Redux, Recoil, React-router-dom을 사용하여 기능을 보완해주어야 한다. |
| Vue | 프레임워크 | 다양한 기능을 제공하고, 개발이 더 쉽다. | 부분적인 사용이 불가능하고, 프레임워크가 지원해주는 문법에 따라 작성해야한다. |
마치며
라이브러리와 프레임워크의 차이에 대해 알아보면서 더욱 React와 Vue를 이해할 수 있는 계기가 되었다. 대충 React는 자유도가 더 높아서 좋대요! 라는 이야기를 하고 다녔는데 이제는 더 잘 설명해줄 수 있을 것 같다. Vue와 React 모두로 작업을 해본 나로서는 React,, 재밌다..ㅎㅎ
