[ 프레임워크 없는 프론트엔드 개발 ] 라이브러리와 프레임워크

1장. 프레임워크에 대한 이야기

 

라이브러리와 프레임워크

"라이브러리"와 "프레임워크"의 차이에 대해서 책에서는 다음과 같이 설명을 하고 있다.

 

프레임워크는 코드를 호출한다. 코드는 라이브러리를 호출한다.

 

 

정확히 무슨 말일까？

그림이 잘 그려지지가 않는다. 예시를 좀 더 찾아보자.

 

예시1)

• 라이브러리 - Lodash

// 라이브러리를 내가 원할 때 호출
const numbers = [1,2,3,4,5];
const result = _.sum(numbers); // Lodash 라이브러리의 sum 함수를 작성자가 호출한다

• 프레임워크 - React

function MyComponent(){
    return ( <div> Hello, World! </div>)

}

사실 리액트가 라이브러리인지 프레임워크인지에 대한 부분은 의견이 분분하다.

그래서 다른 예시를 추가하자면,

• 프레임워크 - Vue

export default {
    methods:{
        handleClick(){
          // Vue의 정해진 규칙에 따라 작성자의 메서드가 호출된다
        this.$emit('button-clicked)
        }
    }
}

 

 

예시2)

일상 생활의 예시를 추가해보자면,

 

라이브러리 는 요리 도구 이고, 프레임워크 는 레스토랑의 주방 이라고 해보자.

 

 

요리사(개발자)는

 

본인의 필요에 따라 적합한 요리 도구 (라이브러리) 를 사용할 것이다.

그리고 레스토랑 주방의 구조, 조리 과정(프레임워크의 생명주기) 에 따라 요리사의 행동 방식이 결정될 것이다.

 

 

 

정리 & 요약하자면,

 

 

라이브러리 - 제어권이 개발자에게 있음

프레임워크 - 제어권이 프레임워크에 있음

 

 

라고 할 수 있다！

 

 

 

-끝