위 용어들은 개발을 할 때 자주 만난다.
개발했던 내용을 자세히 설명하려는데 정확히 어떤 용어를 써야 하지? 하는 생각이 들었다.
또 친한 친구와 React.js 에 대한 얘기를 하다가 우리는 그것이 Library 인지 Framwork 인지 헷갈렸다.
찾아본 글들에서도 Framework와 Library가 혼용되어서 쓰였다.
별 차이는 없겠지만, 그래도 찝찝해서 비슷하게 쓰이는 용어들을 한번에 정리해보기로 하였다! ㅎㅎ
(* 용어를 바라보는 시각, 혹은 환경, 프로그래밍 언어 따라서 용어의 쓰임이 달라질 수 있다는 점 참고 바랍니다!)
1. Library(라이브러리) 과 Framework(프레임 워크)
library와 framework 는 둘 다 누군가에 의해 쓰여진, 재사용 가능한 코드의 모임이다.
이것들의 목적은 사람들이 공통적으로 해결하고 싶어하는 어떤 문제를 푸는 방법을 제시하고,
사람들이 다시 코드를 쓰지 않고 그냥 library와 framework를 가져다 씀으로써 보다 효율적으로 그 문제를 해결하도록 한다.
<Library VS. Framework>
웹 애플리케이션을 만드는 것을 집 짓는 것으로 생각하고, Library 와 Framework를 비교해 보면
Library = 이케아
Framework = 모델 하우스 (가져다 쓸 수 있는)
라고 할 수 있다.
|
Library(이케아) |
집을 집 답게 꾸밀 수 있는 가구, 전자 기기, 큰 부품 등이 있다. 이케아 에서는 사용자가 사고 싶은 물품만 사서, 나의 집을 만들면 된다. 하지만, 집은 사용자가 만들어야 하며 이케아는 집 자체를 제공하지는 않는다. 그래서 집을 사용자가 컨트롤 한다고 말할 수 있다. |
|
Framework (가져다 쓸 수있는 모델 하우스) |
모델하우스는 이상적인 집의 틀을 제시한다. 건축과 설계에 대한 몇 가지 제한된 형태를 주고, (예 - 화장실, 마루, 방1, 방2가 어디에 배치될 것인지, 코드 꽂는 곳이 어디 있어야 하는지) 이 모든 틀 안에서 사용자의 의견이 어디어디에서 반영될 수 있는지를 알려준다. 사용자가 집을 컨트롤 하는 것이 아니고, 시공자와 시공자의 설계가 집 전반을 컨트롤 한다. |
이 예를 개발할 때로 옮겨 오면,
|
Library |
- 개발자가 application을 만든다. - 개발자가 library를 부를 곳을 정하고, 디테일을 library가 채운다. → 개발자가 application의 흐름을 제어한다. |
|
Framework |
- framework가 application을 만든다. - framework가 틀을 만들어 놓고, 디테일한 부분의 설정은 개발자에게 맡긴다. → Framework가 application의 흐름을 제어한다. *Inversion of Control(제어의 역전)이 일어난다. |
* IoC(Inversion of Control): 제어의 역전 - 개발자가 관리하고 통제해야 하는 객체들의 제어를 framework에 넘긴다.
<코드 비교 - jQuery(Library) VS.Vue.js(Framework)>
Library 인 jQuery와 Framework인 Vue.js가 있다.
오류가 발생했을 때, 메세지를 띄우는 코드이다.
- jQuery(Library)
: 개발자는 프로그램에게 라이브러리를 부르고 싶은 곳을 말한다. 마치 도서관(library)에서 원하는 책을 꺼내고, 그 책을 참고하는 것과 같다.
// index.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
</script>
<script src="./app.js"></script>
</head>
<body>
<div id="app">
<button id="myButton">Submit</button>
</div>
</body>
</html>
// app.js
// 개발자가 쓴 코드
// jQuery library를 불러서 그 기능을 완성한다.
let error = false;
const errorMessage = 'An Error Occurred';
$('#myButton').on('click', () => {
error = true; // 에러가 난 것처럼 error = true로 설정함.
if (error) {
$('#app')
.append(`<p id="error">${errorMessage}</p>`);
} else {
$('#error').remove();
}
});
- Vue.js
: 개발자는 vue.js 가 정해준 틀에 맞춰 빈칸을 채우는 형식으로 data는 무엇이며, error 메세지는 무엇인지 등등을 써준다.
//index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="./app.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
// vue.js 를 사용한 코드
const vm = new Vue({
template: `<div id="vue-example">
<button @click="checkForErrors">Submit</button>
<p v-if="error">{{ errorMessage }}</p>
</div>`,
el: '#vue-example',
data: {
error: null,
errorMessage: 'An Error Occurred',
},
methods: {
checkForErrors() {
this.error = !this.error;
},
},
});
<그래서 React.js 는 library 일까? framework 일까?>
React.js = Library 이다.
이유는 Orelly (https://www.oreilly.com/library/view/what-react-is/9781491996744/ch01.html) 에 있는 것을 정리해 보았다.
1. 리액트는 UI 렌더링만을 지원한다. (그 이외에 것은 사용자가 만들어야 함.)
2. 리액트 애플리케이션을 만들기 위해서는 다른 tool(= stack)들이 필요하다.
(framework인 Ember.js 의 stack은 Ember.js 이다.)
- Application code: React, Redux, react-router
- Build tools: webpack, Uglify, npm/yarn, Babel, babel-preset-env
- Testing tools: ESLint, Enzyme, Mocha/Jest
리액트는 라이브러리의 특성을 가지고, 사용자가 점차적으로 필요한 부분에 적용할 수 있도록 한다.
또 함께 사용하는 다른 툴들을 이용해서 리액트를 더 잘 활용할 수 있도록 한다.
하지만 많이들 웹 프레임워크로 알고있고,
위키만 찾아보더라도 설명은 라이브러리로 하지만 제목에 웹 프레임워크로 분류된다.
웹 라이브러리/프레임 워크들을 대부분 총칭하여 웹 프레임워크 라고 하는 것 같다.
React.js 는 이러저런 특징이 있고, 그래서 library 이다 라는 것만 알면 될 것 같다.
2. Module
전체 프로그램을 구성할 요소인데, 기능 단위로 묶은 것이며 재사용을 용이하게 하기 위해 만든다.
프로그램이 커지면 커질수록 그 복잡성이 커지게 되는데 많~ 은 코드들을 기능단위로 나누고,
*정보은닉을 통해서 안에 내부 구체 코드를 감추고 그 코드들이 구현한 기능만 가져다 쓰도록 한다.
*정보은닉: 모듈 내부에 포함된 절차와 자료들의 정보가 감추어져 다른 모듈이 접근하거나 변경하지 못하도록 한다.
Module 은 interface 가 있는데, interfaces는 그 module이 제공하는 기능과 어떻게 그 기능을 쓸 수 있을지 알려준다.
(interface 구현은 개발자 마음)
<Module VS. Library>
Module은 오직 하나의 기능을 제공하는 반면에,
Library 는 여러 관련 기능의 모음이다. 일반적으로 라이브러리 안에 여러개의 모듈이 포함된다.
3. Componenet
컴포넌트에 대한 내용은.. 찾아보는 곳마다 상이했다.
어떤 곳은 Module 이 Component의 구성요소라고 하고,
어떤 곳은 Component가 Module의 구성 요소라고 한다.
(기능이 비슷하다는 것을 의미하는게 아닐까..? 현업에 가야 알 수 있는 뉘양스의 차이 일 수도 있다. )
그 중 일관된 설명은
· 재사용 가능한 블럭이다.
· 다른 component들의 조합으로 이루어질 수 있다.
· component는 서로 다른 서버에 배치될 수 있으며, 서비스를 위해 서로 통신할 수도 있다.
· component의 예시:
|
- UI 단일버튼 - 작은 이자 계산기 - 데이터 베이스 관리자에 대한 인터페이스 |
'바로가기' 버튼 component
4. API(Application Programming Interface)
API는 응용 프로그램에서 어떤 프로그램 혹은 기능을 사용할 수 있도록 지켜야할 규칙들을 모아놓은 것이다.
API 를 정의하고, 그 규칙에 따라 API에서 기능을 부르면 그 기능을 사용할 수 있다.
(장점)
· 보안성 강화: API 를 사용하면, 그 안에 코드를 몰라도 그 기능을 쓸 수 있으므로
· 커뮤니케이션 증진: 서버가 어떤 기능을 가지고 있고 어떻게 요청해야하는지 클라이언트가 API를 통해 알 수 있다.
· API 가 하는 일의 예시
음식을 식당에서 주문하는 상황
1. 사람은 식당에서 음식을 웨이터 에게 규칙에 따라 "요청"한다.
(규칙) - 음식명, 개수, 추가 요청사항
→ 요청1: 닭칼국수 - 2개 - 안 맵게, 요청2: 김치 부침개 - 1개
2. 웨이터는 주문을 받아 부엌이라는 "시스템"에 알려주는 "메신저" 즉 API 이다.
3. 부엌은 주문을 준비할 "시스템"이다. 시스템이 다 완성이 되면 웨이터에게 말한다.
4. 웨이터는 우리가 요청한 주문에 대한 "결과물"인 음식을 준다.
[출처] 용어 정리 - Framework, Library, Module, Component, API|작성자 긍정 거북이
'개발언어 > 개발 전반' 카테고리의 다른 글
| [Windows] 윈도우에서 Wifi 비밀번호 찾는 방법 (0) | 2022.06.28 |
|---|