앱 개발을 주로 하다가 요즘 웹 개발을 공부하고 있다.
ReactJS를 가장 많이 쓴대서 배우고 있는데, 나는 당연 프레임워크인줄 알았는데, chatGPT에 물어보니 프레임워크가 아닌 라이브러리 란다.
그래서 겸사겸사 프레임워크와 라이브러리의 차이에 대해서 한번 다시 정리해보려고 한다.
1. 핵심 : 제어의 역전
프레임워크와 라이브러리를 구분하는 가장 중요한 요소는 제어의 역전(Inversion of Control, IoC)이다.
먼저, 라이브러리에 대해 얘기해보면,
- 개발자는 필요할 때 라이브러리의 기능을 호출합니다.
- 이 때 제어권은 개발자에게 있습니다. 즉, 개발자가 주도적으로 코드를 작성하고 라이브러리를 도구처럼 사용합니다
React.js를 예로 들어보면, 개발자가 원하는 방식으로 컴포넌트를 작성하고, React의 함수(useState, useEffect 등)를 필요할 때 호출해서 꺼내쓰는 구조이기 때문에, React.js는 라이브러리입니다.
이와 반대로,
- 프레임워크는 애플리케이션의 기본 구조와 흐름을 제어합니다.
- 제어권은 프레임워크에 있습니다. 즉, 개발자는 프레임워크가 요구하는 방식에 따라 코드를 작성하며, 프레임워크가 주도적으로 동작합니다.
Angular는 애플리케이션의 전체 구조를 제어하며, 개발자는 Angular가 요구하는 규칙에 따라 컴포넌트, 서비스 등을 작성해야하기 떄문에, Angular는 라이브러리가 아닌 프레임워크입니다.
2. 프레임워크와 라이브러리 사례
그럼 유명한 기술 스택들을 프레임워크와 라이브러리로 구분해보겠습니다.
1)JavaScript 라이브러리
- React.js
- jQuery
- D3.js
- Lodash
2)CSS 라이브러리
- Bootstrap
- Tailwind CSS
- Animate.css
3)유틸리티 라이브러리
- Axios
- Moment.js
- Chart.js
4)프론트엔드 프레임워크
- Angular
- Vue.js
- Svelte
- Next.js
- Nuxt.js
5) Node.js 기반 백엔드 프레임워크
- Express
- NestJS
- Koa
6)python 기반 백엔드 프레임워크
- Django
- Flask
7)Java 기반 백엔드 프레임워크
- Spring Boot
- Micronaut
8)PHP 기반 백엔드 프레임워크
- Laravel
- Symfony
9) 풀스택 프레임워크
- Next.js
- Nuxt.js
- Meteor
- Ruby on Rails
- Blazor
10)모바일 크로스 프레임워크
- Flutter
- React Native
- Ionic
11) 네이티브 프레임워크
- Swift (iOS)
- Kotlin (Android)
'CS' 카테고리의 다른 글
[Node.js] Express.static 메서드 사용해보기 (0) | 2025.01.21 |
---|---|
PUG란?(PUG 예제 코드 포함) (0) | 2025.01.20 |
포트(Port)는 무엇일까? (2) | 2025.01.18 |
GET 방식에서 URL에 데이터를 전달하는 두 가지 방법 : params, query (0) | 2025.01.18 |
GET 방식과 POST 방식 차이(feat. REST) (0) | 2025.01.18 |