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

⚡ 프레임워크

📖 정의
"FRAME (틀, 규칙)" ➕ "WORK (일, 소프트웨어의 목적)"

• 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조
• 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대
• 사용자는 프레임워크가 정해준 방식대로 클래스, 메서드를 구현

📕 예시

• Python 서버 개발에 사용되는 Django, Flask
• 안드로이드 앱 개발에 사용되는 Android
• 웹 개발에 사용되는 Angular, Vue.js
• Node.js, Spring 등등
  

🌿 Django
: 파이썬으로 작성된 오픈 소스 웹 애플리케이션 프레임워크
✔ MVC (Model-View-Controller) 패턴 기반 MTV
✔ ORM(Object-relational mapping) 기능 지원
✔쉬운 DB관리를 위해 프로젝트를 생성하면서 관리자기능을 제공
✔쉬운 URL 파싱 기능 지원

🌿 Angular JS
: 자바스크립트 기반의 프레임워크.
✔ 작성해야 하는 자바스크립트의 코드량을 줄여줌
✔ 자바스크립트 또는 제이쿼리로 만든 코드를 단순화 할 수 있어, 직관적인소스 이해를 가능하게 함
✔ 복잡해지고 대형화 되고있는 (클라이언트 사이드 스크립트)를 (MVC 패턴)으로 규격화 해프로젝트 유지보수 비용을 최소화
✔ 앵귤러 JS의 데이터 모델은 단순 자바스크립트 객체
✔ 재사용이 쉬운 정적인 UI컴포넌트 생성 가능
✔ HTML, CSS개발자와 자바스크립트 개발자를 명확하게 분리

📘 장단점

😊 장점

• 가이드를 제공함으로써 프로그램을 체계적으로 관리할 수 있다
• 기본적인 설계와 라이브러리를 제공하여 개발 속도를 향상시킨다
• 코드의 재사용성이 높고 확장성이 좋다

😥 단점

• 각 프레임워크에 따른 별도의 학습을 필요로 한다
• 자유롭고 유연하게 개발이 불가능하다
• 프로젝트의 용량이 증가

---

⚡ 라이브러리

📖 정의
"소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임"

• 개발을 하기 위해 필요한 것 들을 미리 구현해놓은 대상, 도구
• 재사용이 가능한 기능을 미리 구현해놓고 필요한 곳에서 호출하여 사용할 수 있도록 만들어진 집합
• 프레임워크는 틀, 그 안에서 재사용이 가능하도록 만들어진 도구들이 라이브러리

📗 예시

• Python pip로 설치한 패키지/모듈
• Node.js에서 npm으로 설치한 모듈
• HTML의 클라이언트 사이드 조작을 단순화하는 JQuery
• 웹에서 사용자 인터페이스 개발에 사용되는 React.js
  

---

⚡ Framework 와 Library 의 차이

" 제어 흐름의 권한 누가 지니고 있는가 " 의 차이

• 프레임워크에서 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그 안에 필요한 코드를 작성하게 된다.
• 라이브러리를 사용할 때 사용자는 애플리케이션 코드의 흐름을 직접 제어, 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 써야한다.
• 제어의 역전(IoC, Inversion of Control)?
  프레임워크에선 개발자가 아닌 프레임워크가 소프트웨어의 흐름을 제어한다. 즉, 소프트웨어에 대한 제어권이 개발자에서 프레임워크로 역전 된것을 IoC(Inversion Of Controll) 제어의 역전이라한다.

✔ 프레임워크는 가져다가 사용한다는 것보다는 프레임워크라는 특정 공간에 들어가서 사용, 라이브러리는 라이브러리 자체를 가져가 사용하고 호출하는 용도로 사용

Q. Vue(프레임워크)와 React(라이브러리)의 차이에 대해서 설명해 보세요!
Answer:
프레임워크는 소프트웨어의 구조를 설계해둔 것이고 라이브러리는 기능을 구현해둔 것입니다.
프로임워크는 구조를 설계한 것이기 때문에 개발자가 프레임워크의 구조에 맞게 프로그래밍 해야하지만 라이브러리는 기능을 구현해둔 것이기 때문에 개발자는 라이브러리를 활용하여 본인이 자유롭게 활용할 수 있습니다.

📖 참고
https://velog.io/@xylopeofficial
https://cocoon1787.tistory.com/745
https://eroul-ri.tistory.com/5