프론트엔드를 공부하다보면 꼭 보이는 개념 4가지인 프레임워크, 라이브러리, 플러그인, 모듈의 개념 및 차이점에서 알아보자. 이 4가지들은 비슷한듯 하여 헷갈리기 쉽다. 각각의 개념과 차이점을 통해 정확히 무엇이 다른지 알아보자.
프레임워크(Framework)
Framework 직역하면 뼈대/구조 이다. Frame은 틀, 규칙/법칙을 의미하고, work는 일,소프트웨어의 목적이라고 할 수 있다.
즉, Framework는 목적에 따라 효율적으로 구조를 짜놓은 개발 방식이다.
Application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동등과 같은 기능들을 위해 어느정도의 뼈대(구조)를 제공해주는 것이다.
프레임워크에 종류에는 Spring, ReactJS 등이 있다.
라이브러리(Library)
Library 직역하면 도서관이라는 뜻이다. 마치 여러 책을 모아둔 도서관처럼 특정 기능에 대한 도구/함수들을 모아둔 집합을 라이브러리라고 한다.
프레임워크와 라이브러리의 차이점
프레임워크는 Flow(흐름)에 대한 제어 권한을 자체적으로 가지고 있다.
→ 사용자가 프레임워크의 규칙을 준수해야함으로써
라이브러리는 Flow(흐름)에 대한 제어 권한을 사용자가 가지고 있다.
→ 사용자가 라이브러리를 가져다가 씀으로써
모듈(module)
모듈(module)은 재사용 가능한 코드조각이다. 쉽게 말하자면 js나 mjs파일이다. 모듈은 자신만의 파일 스코프(모듈 스코프)를 가지며 export, import 할 수 있다. 보통 클래스 하나 또는 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.
일반 스크립트와 구별되는 모듈의 특징은 아래와 같다.
- 모듈은 항상 defer 속성을 붙인 것처럼 지연 실행된다. (굳이 Body 끝에 적지 않아도 된다.)
- 모듈은 strict mode로 실행된다.
- 모듈은 자신만의 스코프를 갖는다.
- 모듈은 단 한번만 평가(실행)되고 필요한 곳에서 공유된다.
- 모듈 최상위 레벨 this는 undefined이다.
- import.meta 객체로 정보를 얻을 수 있다. (ex. import.meta.url)
라이브러리와 모듈의 차이점
모듈은 구성 단위, 구성 부분이라는 뜻이다. 개발에서 라이브러리와 모듈은 동일한 의미라고 생각하면 된다. 두 개념 모두 결론적으로 자주 사용하게 되는 코드를 하나의 함수나 클래스라는 단위로 묶어서 코드를 재사용할 수 있게 하는 것이다. 즉, 코드의 집합체이다.
플러그인(Plug-in)
플러그인은 어떤 특정한 하나의 문제를 해결하기 위한 컴포넌트(component)이다. 즉, 사람들이 자주 사용할만한 기능들을 직접 일일이 구현할 필요 없이 필요한 기능들만 그때 그때 찾아서 사용할 수 있도록 미리 만들어 놓은 것이 플러그인이다.
라이브러리나 모듈보다 조금 더 작은 개념으로써 플러그인의 집합이 라이브러리라고 보면 된다.