프론트엔드 짧은 간단 지식 정리 - 라이브러리와 프레임워크

📚 라이브러리 (Library)

라이브러리는 특정 기능을 구현하기 위해 사용할 수 있는 재사용 가능한 코드의 집합입니다. 마치 도구상자에서 필요한 도구를 꺼내 쓰는 것과 같아요!

✨ 주요 특징

특징	설명
🎯 호출 방식	개발자가 직접 라이브러리를 호출하여 사용
🎮 제어 흐름	제어 흐름은 개발자에게 있음
⚡ 구체적 작업	특정 작업이나 기능 수행에 집중

📋 대표적인 예시

// React 라이브러리 사용 예시
import React from 'react';

function App() {
  return <div>Hello World!</div>;
}

• React 🚀 - UI 컴포넌트 구축을 위한 JavaScript 라이브러리
• Lodash 🛠️ - JavaScript 유틸리티 라이브러리
• Pandas 🐼 - 데이터 조작 및 분석을 위한 Python 라이브러리

---

🏗️ 프레임워크 (Framework)

프레임워크는 소프트웨어 개발을 위한 일종의 뼈대나 구조를 제공합니다. 집을 지을 때 기초 골조와 같은 역할을 한다고 생각하면 돼요!

✨ 주요 특징

특징	설명
🔄 역제어	프레임워크가 개발자의 코드를 호출
🏠 전체 구조	애플리케이션의 전체 구조를 제공
📦 포괄성	개발에 필요한 도구와 기능을 포괄적으로 제공

📋 대표적인 예시

// Next.js 프레임워크 사용 예시
export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

• Angular, Next.js ⚛️ - 프론트엔드 애플리케이션 개발 프레임워크
• Django 🐍 - 웹 애플리케이션 개발을 위한 Python 프레임워크
• Spring ☕ - 엔터프라이즈 애플리케이션 개발을 위한 Java 프레임워크

---

🎯 핵심 차이점: 제어 흐름의 권한

가장 두드러지는 차이는 바로 '제어 흐름의 권한'이 어디에 있느냐입니다!

📚 라이브러리의 제어 흐름

개발자 코드 → 라이브러리 호출 → 결과 반환 → 개발자 코드 계속 실행

• ✅ 개발자가 주도권을 가짐
• ✅ 필요할 때만 라이브러리 기능을 호출
• ✅ 호출 순서와 타이밍을 개발자가 결정

🏗️ 프레임워크의 제어 흐름

프레임워크 시작 → 개발자 코드 호출 → 프레임워크가 흐름 관리

• ✅ 프레임워크가 주도권을 가짐
• ✅ 정해진 틀과 규칙에 따라 코드 작성
• ✅ 제어의 역전(IoC) 원칙 적용

---

💡 제어의 역전 (Inversion of Control)

Framework에 Control 권한을 위임하는 것을 의미합니다.

🔄 일반적인 제어 흐름 vs 역전된 제어 흐름

구분	라이브러리	프레임워크
제어권	개발자가 가짐	프레임워크가 가짐
호출 방식	개발자 → 라이브러리	프레임워크 → 개발자 코드
구조	자유로운 구조	정해진 구조와 규칙

🎨 비유로 이해하기

• 라이브러리 🎨: 화가가 필요한 붓과 물감을 선택해서 그림을 그리는 것
• 프레임워크 🏠: 미리 설계된 집 구조에 맞춰 인테리어를 하는 것

---

📝 마무리

라이브러리와 프레임워크의 차이를 이해하는 것은 개발자에게 매우 중요합니다.

• 라이브러리: 도구를 빌려주는 것 🛠️
• 프레임워크: 작업 환경을 제공하는 것 🏢

프로젝트의 요구사항과 특성을 고려하여 적절한 선택을 하시길 바랍니다!