라이브러리와 프레임워크의 차이점.
- toc
Vue와 react를 공부하는 과정에서 있었던 일이다. vue는 framework, react는 library. 아 그렇구나 하고 넘어가다가 그냥 어느 날 궁금해졌다. 모호하게 알고 쓰고 있는 이 framework와 library는 무슨 차이가 있는 것일까. 그래서 알아보고, 알아보는 김에 글도 함 써보기로 하였다.
1. Conept of Framework and Library
한줄로 풀어 쓰면, Framework는 뼈대 위에 우리가 살을 붙여서 사용해야 하는 것이며, Library는 도서관에 잘 정리된 책 중 원하는 것을 뽑아서 읽으면 되는 것이다.
- Framework
- 프레임워크는 단순 기반구조로, 완성된 어플리케이션이 아니라 프로그래머가 완성해야 한다.
- Library
- 라이브러리는 완성된 도구의 집합으로, 필요한 기능을 불러다가 호출할 수 있는 것이다.
이렇게 설명을 하면 굉장히 의아하다. 사실 우리가 사용하는 데에 있어서는 큰 코드 구성의 차이가 없는 것처럼 보이기 때문이다. 예를 들어 보자. Hello World를 화면에 보여주는 아래 두 코드는 각각 Vue와 React의 형태로 작성한 것이다.
- Vue
<template>
<div>
</div>
</template>
export default {
data() {
return {
message : 'Hello world',
}
}
}
- react
import { useState } from "react";
export default function template() {
let [message, setmessage] = useState('Hello World');
return (
<div>
{message}
</div>
);
}
두 코드가 역시 비슷해 보인다면, 각각이 사용하고 있는 문법을 보자.
vue의 코드는 < template >과 data라는 js에는 존재하지 않는 괴상한 것을 남발한다. react도 useState 등 뭔가 괴상한 것이 보이는 것 같지만, 이 구조를 잘 확인해 보면 message와 setmessage 변수에 값을 리턴하는 함수가 useState인 것을 볼 수 있다.
이렇게 본다면, framework와 library를 이제 아래처럼 생각해볼 수 있다.
- Framework
- 개발에 필요한 기초 환경. 플레이그라운드.
- Library
- 개발을 돕기 위한 도구 모음.
이는 사실 우리가 코드를 작성하면서도 많이 느껴왔을 것이다. react는 뷰를 구성하는 데에 있어 JavaScript 문법을 적잖이 활용하지만(이 때문에 쓸데없이 복잡해지는(특히 동기형태의 코드 작성에)), vue는 자기네들이 만든 문법이 있다.
이 차이는, 더 근본적으로 들어가서 어플리케이션의 ‘제어 흐름’을 누가 가지고 있냐에서 오게 된다.
2. Difference between F and L
프레임워크는 기본적으로 ‘제어 역전’이 되어 있다. 내가 작성하는 코드가 상위 컴포넌트로부터 주입되는 것이고, 이 때문에 어플리케이션의 흐름을 프레임워크 자체가 쥐고 있다. 자신에게 주어진 순서대로 실행하는 중에 개발자의 코드를 넣어 사용하는 것.
반면 라이브러리는 그저 내가 호출한 함수를 실행하는 것일 뿐이다.
이 차이를 명확하게 떠올릴 수 있는 것이 ‘생명주기’라고 생각한다. vue와 react 둘 다 업데이트 전후, 생성 전후, 마운트 전후, 삭제 후 등의 생명주기를 가지고 있고, 각각에 필요한 기능을 구현하여 사용할 수 있다.
vue의 경우, 프레임워크가 정해준 순서에 따라 실행하게 됩니다. 정해진 순서를 따라 실행되며, 그 안에 사용자의 코드를 넣어 실행합니다.
하지만 react의 경우, 사용자가 함수를 실행하면, 그 함수의 앞뒤에 생명주기 함수를 붙여 실행합니다. 누가 주체가 되어 사용되느냐의 차이가 존재하는 것이죠.
3. ProCons of F and L
각각의 장단점도 명확합니다.
- Framework
- 장점
- 기본적인 설계와 다양한 기능을 가진 라이브러리가 제공되므로, 개발이 용이하다.
- 코드의 재사용, 확장에 유리.
- 단점
- 자유롭고 유연한 개발의 어려움.
- 프레임워크에 대한 별도의 학습이 필요.(Spring 처음 배울 때를 생각해 보세요 여러분 ㅂㄷㅂㄷ)
- Library와 달리, 전체 framework를 프로젝트가 포함하고 있어야 하므로, 상대적으로 무거움.
- 장점
- Library
- 장점
- 필요한 기능만 골라 쓸 수 있어, framework를 사용하는 것에 비해 가볍다.
- 자유로운 형태의 개발이 가능.-
- 단점
- 프로젝트의 전체 구조를 정의해주지 않는다는 것. 이 때문에 개발자에 따라 코드의 구성이 달라질 수 있고, 이는 코드의 유지보수 저하로 이어질 수 있다.
- 장점
Conclusion
사실 우리가 이런 것을 알더라도, vue가 framework라고 해서 사용하지 않고, react가 library라고 해서 사용하는 것은 아닙니다. 이보다 더 복합적인 장단점과 상황들이 고려되죠.
vue의 경우 framework이지만 react보다 러닝 커브가 완만하기에 쉽고 간단하게 만드는 프로젝트에서 많이 사용되고, 이는 위에서 언급한 장단점과는 반대되는 성향입니다.
글 쓰면서 찾아본 문구를 적으며 마치겠습니당.
아직까지 개념이 모호하다면 좀더 구체적인 예를 들어보도록 하겠습니다. 일단 모든 소스코드든 라이브러리든 간에 메모리에 들어가는 정보는, 컴파일러나 인터프리터에게는 호출가능한 모듈일 뿐입니다. 이런 물리적인 계층을 보지말고, 그 위의 논리적인 계층을 봐야합니다.
라이브러리는 톱, 망치, 삽같은 연장입니다. 사람이 들고 썰고, 바꿔들고 내려치고, 다시 바꿔들고 땅을 파는 겁니다. 프레임워크는 차, 비행기, 배같은 탈 것입니다. 사람이 타서 엔진 켜고, 기어 넣고, 핸들 돌리고, 운전하거나, 조종하거나 해야합니다. 도구를 쓸 때, 급하면 썰어야 할 곳에 망치를 쳐도 됩니다. 땅 파야할 때 톱으로 땅을 긁어내도 됩니다. 사람은 도구를 선택하는 입장이기 때문에, 어떤 도구를 사용하든 원하는 것을 만들어낼 수 만 있으면 됩니다.
반면에, 탈것은 정해진 곳으로만 다녀야 합니다. 차를 타고 하늘을 날거나, 배를 타고 땅으로 갈 수는 없습니다. 하지만, 그 목적에 맞게 만들어져 있기 때문에, 톱이나 망치를 들고 먼저 탈것을 만들어야 할 필요가 없습니다. 그저 정해진 규칙에 맞춰서 엔진, 기어, 핸들만 잘 돌리면 되는 것입니다.
라이브러리와는 달리 프레임워크는 이미 프로그래밍할 규칙이 정해져 있습니다. 예를 들어, 설정파일로 사용되는 XML에 어떤 태그를 써야하며, 어떤 함수를 추가적으로 작성해야하고, 소스 파일을 어느 위치에 넣어야하며, DB와 연동하기 위해 무엇을 써넣어야 하는지 정해져 있습니다. 보통 이런 대부분의 작업은 프레임워크가 하고자 하는 일에 비하면 아주 작은 일이며, 사람은 극히 일부분만 조정함으로써 목적을 달성할 수 있습니다.
만약 프레임워크가 담당하는 부분이 내가 하고자 하는 목적과 다를 경우에는 어떻게 해야 할까요? 그렇다면 단순히 프레임워크를 잘못 가져다 쓴 것입니다. 더 목적에 가까운 프레임워크를 찾아보면 대부분 있을 것이고 없거나 찾기 힘들다면 비슷한 프레임워크를 라이브러리 단계에서 변경해서 다른 프레임워크로 만들면 될 것입니다. 차를 튜닝한 다음에, 차를 다시 운전하면 된다는 것이라고 할 수 있습니다.
혹시 프레임워크 없이 그냥 라이브러리로만 만들면 안될까요? 안될 이유가 어딨겠습니까?! 그냥 다 다시 만들 능력과 시간과 여유만 있다면 그렇게 해도 됩니다. 스스로 만든 프레임워크는 버그도 스스로 잡아야하지만, 남들이 만들어놓은 프레임워크는 쓰는 사람이 많은 만큼 그만큼 수정이나 업데이트도 빠릅니다. 기능이 마음에 안드는 부분이 있다면, 프레임워크를 고쳐서 사용할 수 있습니다. 처음부터 모든 것을 만드는 것보다는 훨씬 비용이 적게 들 것입니다. 내일 당장 지방에서 서울로 출근해야하는데, 혼자서 차를 만들어서 타고 가야한다는 생각을 해보세요.
