라이브러리와 프레임워크의 차이를 지금 구글링 하지말고 설명해보라고 하면 자세히 설명할 수 있는가?
꽤나 기초적인 질문이지만, 막상 설명하려고 하면 어렵다.
본인 또한 라이브러리와 프레임워크의 차이를 지금 당장 얘기하라고 하면 아래와 같이 얘기할 것 같다.
프레임워크는 뭔가 환경 같은거고....라이브러리는 원하는 기능 갖다쓸수있는 그런거....아닌가?
어정쩡하게 말하니까 개바보가 된 기분
나중에 만약 면접 볼때 해당 질문이 나왔는데 이딴식으로 대답한다면, 그대로 뒤돌아서 면접장 문 열고 나가면 된다.
맨날 개발할 때 라이브러리와 프레임워크를 사용하면서 이 두가지의 차이를 잘 설명할 수 없다고 생각이 드니, 안 찾아볼 수 가 없었다.
A : 대표적인 자바스크립트 프레임워크로는 React, Vue, Angular가 있습니다!
B : React는 라이브러리라고 홈페이지에 쓰여있는데요?
A : ....
이런 곤란한 상황을 만들지 않기 위해 한번 알아보자
🔨라이브러리
라이브러리는 주로 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다.
쉽게 표현하자면, 소프트웨어 개발을 도와주는 도구다.
코드 작성 시 활용할 수 있는 함수와 코드등을 모아둔 집합체라고 보면된다.
말 그대로 책장에서 책 꺼내듯이 원하는거 있으면 마음대로 꺼내서 활용할 수 있는 도구 모음집이다.
예시
- 자바스크립트의 클라이언트 사이드 코드를 단순화 시켜주는 jQuery
- 각종 아이콘을 HTML 태그 형태로 제공하는 Font Awesome
- npm으로 설치한 모듈들 (chart.js, ckeditor 등...)
- 사용자 인터페이스 개발을 위한 React.js (엥? 할 수 있지만 이건 나중에 설명하겠음)
🚀프레임워크
프레임워크는 복잡한 문제를 해결하거나 서술하는 데 사용되는 기본 개념 구조이다. 간단히 뼈대, 골조라고도 한다.
프레임워크는 특정 목적에 맞게 개발에 집중할 수 있도록 일정한 틀과 필요한 기능을 갖추고 있는 뼈대 같은것이다.
프레임워크는 개발할 때 필수적인 코드나 알고리즘 등을 어느정도 개발자에게 제공하고, 프로그래머가 해당 프레임워크 안에서 자신의 코드를 집어넣어 작동시키는 방식이다.
물론 프레임워크만으로는 프로그램은 실행되지 않으며 기본 구조에 여러가지 기능을 프로그래머가 추가해야 한다.
코드를 프로그래머 스스로 제어하는 것이 아닌, 프레임워크에 의존하는 형태이며 프레임워크가 정의한 규칙에 따라 개발해야 한다.
예시
- 자바스크립트 프론트엔드 개발에 쓰이는 Vue.js, Angular.js 등
- 웹페이지를 쉽게 디자인&개발 할 수 있게 도와주는 Bootstrap (라이브러리를 내장한 프레임워크다.)
- Java 서버 개발에 쓰이는 Spring
- Node.js 웹 애플리케이션 프레임워크 express.js
📌라이브러리와 프레임워크의 차이 쉽게 설명
자동차로 비유하자면, 프레임워크는 자동차의 뼈대(프레임)이고, 라이브러리는 휠, 핸들 등이 되겠다.
제작자는 자동차 뼈대(프레임워크)에 맞게 엔진, 구동계, 내장재 등을 만들어야하고,
셀프로 다 만들기 빡세면 휠이나 핸들등은 남들이 만들어둔거(라이브러리)에서 가져다 쓸수있다.
Q : 뭐 어찌되었든, 결과물을 만들기 위해 기능을 제공한다는건 똑같지 않나요?
음... 기능을 제공한다는건 같지만 한가지 큰 차이가 있다.
바로 제어흐름의 권한이 누구에게 있느냐이다.
🔄제어의 역전 IoC(Inversion of Control)
라이브러리를 사용하는 애플리케이션 코드는 애플리케이션 흐름을 직접 제어한다.
단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리를 사용할 뿐이다.
반면에 프레임워크는 거꾸로 애플리케이션 코드가 프레임워크에 의해 사용된다.
프레임워크에는 분명한 [제어의 역전] 개념이 적용되어 있어야 한다.
애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작해야 한다.
- 토비의 스프링 中
제어의 역전은 하나의 설계 원칙(디자인 패턴)이다.
프로그래머가 직접 객체의 생성, 제거, 관계설정 같은 객체의 제어를 수행하는 것이 아니라, 프레임워크가 객체 전반에 대한 제어권을 가지고 이를 대신 수행하는 것을 말한다.
난 딥하게 똑똑한 개발자가 아니라서 이를 완전히 이해하지 못했는데,
얕게 이해한 내가 예시로 그림을 그려보았다.
이런 느낌이지 않을까 싶다.
프레임워크를 사용하지 않고 개발을 하면 코드를 짜는 개발자가 스스로 모든것을 제어해야한다.
서버 구축하고, DB연동하고, 잘 돌아가게 코드 짜줘야되고...
하지만 프레임워크를 사용하면, 프레임워크가 미리 짜놓은 틀 안에 프레임워크가 요구하는 코드만 집어넣으면 된다.
그 외 어플리케이션, 서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리한다.
이를 제어권이 프레임워크에게 넘어갔다고 하며, 제어의 역전이라고 부르는 듯 하다.
🤔그래서 React 가 왜 라이브러리냐고요
이 주제에 대해서는 개발자들간에 많은 의견이 있는것 같다.
하지만 홈페이지에서 자기들이 라이브러리라고 하니까 일단....
대표적인 자바스크립트 프레임워크 Angular와 비교를 해보면,
Angular는 프로젝트를 처음 생성하면 개발에 필요한 기능들을 모두 포함하여 프로젝트가 생성된다.
하지만 React의 경우 UI 개발을 위한 jsx문법과 Component를 통한 모듈화, hook 같은 상태 관리 기능 등은 제공하지만, 다른 모듈들은 따로 불러와야한다.
즉 프레임워크가 정해놓은 틀을 약간 벗어나서 필요한 기능들을 더 추가해서 사용할 수 있다는 뜻이다.
그래서 라이브러리라고 부르는게 아닐까 생각한다.
사실 잘 모르겠음... 누군가 더 자세히 아는분이 있으면 댓글로 남겨주세요ㅠ
하지만 대부분의 프론트엔드 개발자들은 React는 프레임워크가 맞다는 쪽으로 의견이 더 몰리는 듯 하다.
(뭔데ㅋㅋ)
오늘은 라이브러리와 프레임워크의 차이에 대해서 자세히 알아보았다.
역시 딥하게 들어가면 들어갈 수록 난해해지는게 개발 세계인것 같다.
그래도 아무것도 모르고 사용하는 것 보다는 개념을 이해하고 사용하면 더 낫지 않을까?
원리도 모르는 상태로 코드 복붙하는 멍청이 개발자가 되지 말고 원리를 이해하고 응용할 줄 아는 똑똑한 개발자가 되자!
'개발 > 기타🎸' 카테고리의 다른 글
| 1년 만에 티스토리 글쓰기 (4) | 2024.02.27 |
|---|---|
| [Chat GPT] 챗 GPT를 VS Code에서 사용하기 (1) | 2023.04.03 |
| [네트워크] 포트포워딩(Port Fowarding) 이 뭘까 (0) | 2023.03.22 |
| URL의 구조 (/, ?, # 이게 다 뭐야) (3) | 2022.10.05 |