Library and Framework

프론트엔드 개발을 하다 보면 가장 많이 접하게 되는 단어이자, 개발자의 주도권을 결정짓는 중요한 개념인 **라이브러리(Library)**와 **프레임워크(Framework)**에 대해 이야기해 보겠습니다.

이 둘의 차이는 내가 '망치'를 들고 집을 짓느냐, 아니면 '설계도'가 그려진 현장에 들어가느냐의 차이와 같습니다.

---

라이브러리: 내가 필요할 때 꺼내 쓰는 도구 상자

라이브러리는 특정 기능을 수행하는 코드의 묶음입니다.

우리가 요리를 하다가 특별한 맛을 내기 위해 '시판 소스'를 사서 넣거나, 가구를 조립하다가 내 전동 드릴을 꺼내 쓰는 것과 비슷합니다.

• 주도권: 개발자인 '나'에게 주도권이 있습니다.
• 사용 방식: 내가 원할 때, 내가 원하는 부분에만 골라서 자유롭게 사용합니다.
• 유연성: 전체적인 흐름은 내가 짜고, 필요한 기능만 빌려 쓰기 때문에 교체나 변형이 비교적 자유롭습니다.

---

프레임워크: 규칙에 따라 움직여야 하는 작업장

프레임워크는 뼈대나 틀을 의미합니다.

미리 지어진 '모델하우스'에 들어가서 가구를 배치하는 상황을 상상해 보세요. 거실은 거실답게, 부엌은 부엌답게 사용해야 한다는 정해진 규칙이 있고, 우리는 그 틀 안에서 세부적인 사항만 완성해 나갑니다.

• 주도권: 프레임워크가 주도권을 가집니다.
• 사용 방식: 프레임워크가 정해놓은 규칙과 흐름에 따라 내 코드를 작성해서 끼워 넣어야 합니다.
• 안정성: 틀이 이미 잡혀 있기 때문에 대규모 프로젝트에서도 일관된 구조를 유지하기 쉽습니다.

---

한눈에 비교하는 차이점 리스트

라이브러리와 프레임워크를 가르는 결정적인 차이를 정리했습니다.

• 제어의 역전 (Inversion of Control)
  • 라이브러리: 내가 라이브러리를 호출합니다. (내가 주인)
  • 프레임워크: 프레임워크가 내 코드를 호출합니다. (프레임워크가 주인)
• 프로젝트 구조
  • 라이브러리: 폴더 구조나 코드의 흐름을 개발자가 마음대로 정할 수 있습니다.
  • 프레임워크: 정해진 폴더 위치와 명명 규칙을 반드시 따라야 실행됩니다.
• 대표적인 예시
  • 라이브러리: jQuery, Lodash, (엄밀히 따지면) React
  • 프레임워크: Angular, Vue.js, Next.js, Spring

---

실무자의 시선

실무에서는 "이것은 무조건 라이브러리다" 혹은 "프레임워크다"라고 이분법적으로 나누는 것보다, 그 도구가 나에게 얼마나 '강제성'을 부여하는지를 파악하는 것이 중요합니다.

• React의 독특함: 리액트는 스스로를 라이브러리라고 부르지만, 생태계가 워낙 방대하여 실무에서는 프레임워크처럼 활용되기도 합니다.
• 도구 선택의 기준: 자유로운 커스터마이징이 중요하다면 라이브러리 조합을, 엄격한 규칙 아래 빠르고 안정적인 협업이 중요하다면 프레임워크를 선택하는 것이 현명합니다.
• 학습의 방향: 라이브러리는 '어떻게 쓰는지'가 중요하고, 프레임워크는 '그들이 정한 규칙이 무엇인지'를 먼저 파악하는 것이 학습의 지름길입니다.

---

내가 도구의 주인인지, 혹은 시스템의 일부로 일하고 있는지를 이해하는 것은 코드의 설계를 결정하는 아주 중요한 지점입니다.

---