Framework(프레임워크), Library(라이브러리)

Framework (프레임워크)

• 어플리케이션을 만들 때 기본 구조와 흐름을 정해놓고 개발을 하도록 도와주는 도구
• 프레임워크는 기본적으로 전체적인 뼈대, 아키텍처, 규칙을 제공하고 개발자는 그 위에 기능을 구현하는 형태
• 보다 구조화된 방식으로 코드를 작성하도록 강제하며, 프레임워크의 규칙과 구조를 따라야 함
• 프레임워크는 '제어의 역전(Inversion of Control)'을 가짐.
  즉, 개발자가 호출하는 게 아니라 프레임워크가 개발자의 코드를 호출하는 방식으로 동작

종류

구분	예
CSS	Bootstrap, Tailwind CSS, Bulma, Foundation
JS	Angular, React, Vue.js, Svelte, Express, Next.js, Nuxt.js

✓ "틀(frame)" + "작업(work)" = 작업을 위한 틀

---

Libray (라이브러리)

• 특정 기능을 미리 구현해 놓은 코드 모음
• 개발자가 호출하여 사용할 수 있는 도구 모음으로, 주로 코드의 재사용성과 확장성을 위해 설계
• 라이브러리는 개발자가 필요한 기능을 선택적으로 사용할 수 있도록 제공되며, 개발자는 라이브러리의 함수나 모듈을 필요에 따라 호출하여 사용
• 개발자가 직접 호출해서 필요한 기능을 쓴다는 게 핵심

종류

구분	예
CSS	Animate.css, FontAwesome, Normalize.css
JS	jQuery, Lodash, GSAP, Axios, Swiper, Anime.js

✓  ‘필요한 기능이 담긴 도서관’ → 내가 호출해서 사용(제어권을 가짐)

---

프레임워크 vs 라이브러리

구분	프레임워크(Framework)	라이브러리(Library)
제어권	프레임워크가 전체 흐름과 구조를 제어 (제어의 역전)	개발자가 직접 호출하여 제어
역할	기본 골격, 아키텍처, 작업 틀 제공	특정 기능이나 유틸리티 함수 제공
사용 방식	정해진 규칙과 구조에 맞춰 코드를 작성해야 함	필요한 기능만 선택해 골라서 사용 가능
구성 범위	전체 애플리케이션 구조에 관여	부분적인 기능 단위 제공
예시	Angular, React, Vue.js, Express, Bootstrap	jQuery, Lodash, GSAP, Axios, Animate.css
코드 호출 방식	개발자가 호출하는 게 아니라 프레임워크가 개발자 코드를 호출	개발자가 라이브러리 함수를 직접 호출
유연성	틀에 맞춰 개발해야 해서 유연성은 상대적으로 낮음	필요한 부분만 쓰기 때문에 유연성 높음