Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- collapsing-margins
- confirm()
- prompt()
- scope
- grid-column-start
- classList
- grid-column-end
- javascript
- localStorage
- react-hook-form
- valuable
- variables
- mongodb
- gird-row-end
- box-shadow
- className
- var
- grid-template-areas
- javascipt
- CSS
- createElement
- Grid
- css#cascading#display#block#inline
- border-style
- foreach()
- relative
- React
- package.json
- python #qqplot #qq-plot #code
- grid-row-start
Archives
- Today
- Total
data life
[React] 라이브러리 vs 프레임워크 본문
라이브러리 vs 프레임워크
리액트 공식 홈페이지에 들어가면 사용자 인터페이스(UI)를 만들기 위한 자바스크립트의 라이브러리라고 소개되어있다.
프레임워크와 라이브러리에 대한 차이점 및 개념들을 짚고 넘어가기 위해 정리를 해보도록 하자!
프레임워크란?
말그대로 뼈대(framework)다. 단, 기능개발을 위해 일정한 형태와 필요한 기능을 갖추고 있는 뼈대인 것이다.
웹 어플리케이션을 만들기 위해선 다음과 같은 기능들이 필요하다.
대표적인 프레임워크 예시 >
- Java : Spring
- Python : Django, Flask
- 안드로이드 : Android
- 아이폰 : Cocoa Touch
- Web Application : Angular, Vue.js 등
- 루비로 작성된 MVC패턴을 이용하는 Ruby on Rails
그렇다면,
라이브러리란?
라이브러리는 프레임워크와는 달리 웹 어플리케이션의 기능들을 직접 구현하거나 구축해야한다.
구현 및 구축을 위해서 다음과 같은 라이브러리를 이용하는데 필요한 도구/장비라고 이해하면 되겠다.
대표적인 라이브러리 예시 >
- Python pip로 설치한 패키지/모듈 (tensorflow, pandas, beautifulsoup...)
- C++의 표준 템플릿 라이브러리 (STL)
- Node.js에서 npm으로 설치한 모듈
- HTML의 클라이언트 사이드 조작을 단순화하는 JQuery
- 웹에서 사용자 인터페이스 개발에 사용되는 React.js
각자 환경에 맞게 라이브러리를 선택하여 시스템을 구축할 수 있지만 라이브러리를 하나씩 배워야하는 시간이 들기 때문에 초기 진입 장벽이 높은 편이다.
❓하지만 많이들 알고 있는 프레임워크 3대장들,,,
❓알고보니 라이브러리??
사실 프레임워크는 라이브러리를 포함한다고 볼 수 있다. 프레임워크에 추가로 라이브러리를 호출할 수 있다는 것!
이 둘의 가장 큰 차이점은 제어 흐름이 어디에 존재하는지에 따라 나뉜다.
제어 흐름이란?
- 프레임워크 : 전체적 흐름을 자체적으로 쥐고 있다. 즉, 프레임워크의 틀 안에서 수동적으로 동작하고 있다고 보면 됨
- 라이브러리 : 개발자가 전체적 흐름을 만들어 간다.
'Front-end > React' 카테고리의 다른 글
[React] State 끌어올리기 (0) | 2023.03.29 |
---|---|
[React] State의 비동기적 업데이트 (0) | 2023.03.29 |
[React] State (0) | 2023.03.29 |
[Project] React로 단위변환기 만들기 (0) | 2022.12.25 |
[React] React 기초 (0) | 2022.12.17 |