Library와 Framework의 차이

공통 프로젝트에서는 React를 썼는데 특화 프로젝트에서는 Next를 쓰려고 한다.

React는 자바스크립트 라이브러리고, Next는 React의 프레임워크이다.

라이브러리와 프레임워크의 차이가 뭔지 알아보자!

 

라이브러리 (Library)

• 특정 기능을 구현하기 위해 제공되는 도구 모음
• 개발자가 필요에 따라 호출하여 사용할 수 있는 함수나 클래스들의 집합
• ex) jQuery, Lodash, Numpy, pandas, tenserflow 등

 

프레임워크 (Framework)

• 애플리케이션의 구조나 동작 방식을 정의하는 전반적인 툴
• 원하는 기능 구현에 집중하여 개발할 수 있도록, 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대
• ex) Vue.js, Next.js, Spring, Django 등

 

여러 장치들이 합쳐져서 자동차가 된다면, 여기에서 장치 하나하나가 library, 자동차가 framework이다

 

Library vs Framework

🌊 제어의 흐름 (Control Flow)

기능 구현의 주도권이 누구에게 있는가

• Library
  • 주도권을 개발자가 가진다
  • 기능 구현을 원하는 방향으로 진행한다
  • 쓰고 싶은 도구, 쓰고 싶은 기술을 쓴다
  • React의 경우 개발자가 직접 컴포넌트를 만들고 언제 렌더링할지 결정한다
• Framework
  • 주도권을 프레임워크가 가진다
  • 프레임워크가 제공하는 기능을 이용하거나 허용하는 범위 내에서만 추가 도구를 사용할 수 있다
  • Next의 경우 개발자는 Next가 제공하는 구조에 맞춰 코드를 작성한다

ex) 페이지 라우팅 기능을 구현한다면, 리액트는 React Router, TanStack Router 등 선택해서 사용하면 되지만, 넥스트는 넥스트가 제공하는 Page Router와 App Router 중에서 이용해야 한다

 

🚢 자유도

Libary는 자유도가 높고 Framework는 자유도가 낮다

• 자유도가 높은 게 꼭 좋은 걸까?
  • 그렇진 않다
  • 기본 기능 외에 제공을 하지 않아 직접 만들어야 한다
  • 넥스트는 자유도가 낮은 대신 거의 모든 기능(Page Routing, Optimizations, Server Pre Rendering 등)을 제공하고 있어 편하다