해당 포스트는 프레임워크 & 라이브러리 & API에 대해 정리한 포스트입니다.
주관적으로 해석한 내용이므로 잘못된 내용이 포함될 수 있습니다.
프레임워크와 라이브러리를 구분하는 핵심적인 기준은 제어권입니다.
즉, 누가 주도적으로 코드를 실행하냐 입니다.
🏢 프레임워크 ( Framework )
프레임워크는 본인이 제어권을 갖습니다.
그리고 이미 정해진 규칙에 맞게 코드를 작성해야만 정상적으로 동작합니다.
즉, 개발자는 프레임워크에서 정해진 규칙대로 코드를 작성하고 정해진 상황에 정해진 방식으로만 코드가 실행됩니다.
아래 코드가 적확한 예시인지 확신을 가질 순 없지만 제가 이해한 게 맞다면 괜찮은 예시라고 생각해서 작성했습니다.
아래 코드는 Array.prototype.map()을 구현해본 코드입니다.
map()의 동작은 정해진 규칙이 있습니다.
첫 번째 인자로 콜백 함수가 들어와야 하고, 두 번째 인자로는 바인딩할 this값이 옵셔널로 들어와야 합니다.
그리고 첫 번째 인자의 콜백 함수의 인자들도 이미 정해진 약속이 있고 개발자의 의도대로 변경할 수 없습니다.
그리고 동기적으로 실행되긴 하지만 실행의 주체는 Array.prototype.map()가 통제권을 갖고 실행합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* ❌ "Array.prototype.map()" 구현
* @param { (value: any, index: number, self: any[]) => void } callback 각 인자에 맞게 호출할 콜백함수
* @param { object } thisArgs 바인딩할 "this" 값
* @returns { any[] } "callback"의 리턴들을 모아서 새로운 배열로 만들어 반환
*/
Array.prototype.myMap = function (callback, thisArgs) {
const mappedArray = [];
for (let index = 0; index < this.length; index++) {
mappedArray.push(
callback.call(thisArgs || globalThis, this[index], index, this)
);
}
return mappedArray;
};
제가 사용해본 프레임워크중에 가장 기억에 남는 것은 Next.js입니다.
React.js의 프레임워크죠.
사용할 때는 느끼지 못했지만, 프레임워크에 대한 개념을 공부하고 나서 보니 어느 정도 이해가 갑니다.
대표적인 규칙으로 pages 폴더 내부에 페이지 컴포넌트를 넣어야 하고, <a>대신 <Link>, <img />대신 <Image>를 사용해야 합니다.
그리고 정해진 규칙을 지키기만 하면 react-router-dom을 이용한 라우팅처리, 링크 처리, 이미지 처리에 대한 직접 구현하기 번거롭거나 어려운 기능들을 적용해줍니다.
결론적으로 저희는 사용법과 규칙에 대해 공부하고 그대로 사용하기만 하면 Next.js에서 알아서 복잡하고 번거로운 과정을 모두 처리해줍니다.
🛏️ 라이브러리 ( Library )
라이브러리는 제어권을 갖지 않습니다.
그리고 정해진 규칙은 따로 없고 원하는 시점에 사용하면 됩니다.
즉, 개발자가 상황을 판단하고 필요한 시점에 필요한 기능을 수행할 라이브러리를 골라서 사용하면 됩니다.
아래 코드는 라이브러리에 대한 예시입니다.
(1)에서 라이브러리를 호출해서 사용합니다.
어떤 복잡한 연산이 필요했고, 그에 맞는 라이브러리를 개발자가 주도적으로 호출했습니다.
그리고 계속 코드의 통제권은 개발자가 갖고 있죠.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 어떤 복잡한 기능을 수행하는 함수라고 가정 ( 라이브러리 )
const sum = (...args) => args.reduce((prev, curr) => prev + curr);
(async () => {
// 할 일 수행 - 1
await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 1000);
});
// (1) 라이브러리 호출
let s = sum(1, 2, 3, 4, 5);
// 할 일 수행 - 2 ( 라이브러리를 이용해서 구한 값을 이용 )
s = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(s + 10);
}, 1000);
});
console.log(s); // 25
})();
대표적으로 lodash가 있습니다.
유용한 유틸리티 함수들을 갖고 있으며, 개발자가 필요한 시점에 필요한 메서드를 호출해서 사용하면 됩니다.
❓ 프레임워크와 라이브러리
서로 유사하면서 다른 특징을 갖고 있어서 더 이해하기 헷갈리는 것 같습니다.( 논블로킹과 비동기처럼 말이죠. )
아직 제가 이해한 게 맞는지 제대로 공부한건지 확신을 못하겠지만 맞다면 중요한건 누가 제어권을 갖고 실행하냐인것 같습니다.
프레임워크에서 전체적인 제어권을 본인이 갖고 정해진 규칙을 제시하고 규칙에 맞게 작성한 코드를 프레임워크의 흐름에서 호출합니다.
하지만 라이브러리에서 제어권은 개발자가 갖고 개발자의 코드 흐름에서 잠시 가져다가 쓰는 느낌으로 쓰고 다시 개발자의 코드 흐름에 맞게 동작합니다.
근데 여기서 좀 헷갈리는 게 React.js의 공식문서를 보면 라이브러리라고 소개합니다.
React.js의 동작을 생각해보면 전체적인 제어권은 React.js에서 갖고 정해진 규칙에 맞게 코드를 작성합니다.( useState() 등 )
그래서 프레임워크인 것 같지만, 다른 시각으로 보면 대부분의 코드는 개발자가 작성하고 원하는 시점에 필요한 함수를 호출해서 사용하기도 합니다.
따지고 보면 프레임워크면서 라이브러리인 것 같은데 이 두 가지 역할을 모두 한다면 어떤 기준으로 어떻게 나누는 건지.. 아니면 이해를 잘못한건지 모르겠네요… 😢
🏍️ API ( Application Programming Interface )
저는 서로 다른 프로그램에서 데이터를 주고/받기 위한 규약이라고 이해했습니다.
그렇다면 왜 데이터를 주고 받아야 할까요?
아마도 개발의 편의성때문이라고 생각합니다.
예를 들어서 제가 구현하고 있는 웹사이트에 도서 검색에 대한 기능이 필요하다고 가정하겠습니다.
그렇다면 제가 시중에 나와있는 도서들을 모두 DB에 입력하고 그것을 이용해서 도서를 검색해야할까요?
물론 불가능은 아니겠지만 프로그래밍보다는 단순 반복 노가다 작업에 가까운 노동이 될 것 입니다.
이런 경우에 API를 이용할 수 있습니다.
Kakao에서 개발해둔 API를 이용해서 제가 만들고 있는 웹사이트에 적용을 하면 됩니다.
( 물론 Kakao 도서 API는 그냥 요청하면 안되고 key를 받아서 요청해야 합니다. )
이렇게 서로 다른(Kakao도서와 저의 웹사이트) 프로그램에서 서로 데이터를 주고 받는 규약을 API라고 합니다.
간단하게 사용할 수 있는 API는 jsonplaceholder입니다.
fetch()와 함께 사용하면 JavaScript에서 비동기로 네트워크 요청을 통해 API를 통해 데이터를 받을 수 있습니다.