모듈(module) / 웹팩(webpack) 이란?
-
개발자로 일을 하게 되거나 개발 직군으로 취직을 준비하는 경우 우리는 코드를 자주 접하게 됩니다. 이때 함수 코드가 50줄 이상이 되면 이해하기 어려워지는데요, 한 파일에 들어가는 코드의 줄 수가 많아지면 가독성을 위해 복잡한 코드들은 여러 파일로 분리시킵니다.
-
오늘 알아볼 모듈과 웹팩은 이런 경우와 관련이 있는데요, 한 번 알아봅시다~
📘 모듈(Module)이란?
-
모듈은 코드를 조직화하고 재사용성을 높이기 위한 개념입니다. 앞에서 말한 파일을 분리하는 경우에서 나눈 여러 파일 각각을 모듈이라고 말할 수 있습니다.
-
일반적으로 모듈은 단일 기능이나 객체, 함수, 변수 등을 포함하는 파일 단위로 구성됩니다.
-
모듈화 역시 코드를 작은 조각으로 나누어 관리함으로써 프로그램의 유지보수성을 높이고, 코드를 보다 체계적으로 만들어주죠.
📘 모듈의 장점
🔒 코드의 재사용성
- 모듈을 사용하면 비슷한 기능을 가진 코드 뭉치를 여러 곳에서 사용가능합니다. 예를 들어서, 특정 기능을 하는 함수나 클래스를 모듈로 만들어두면 다른 곳에서 필요할 경우 해당 모듈을 임포트하여 재사용할 수 있습니다. 이렇게 모듈을 임포트하여 사용하는 경우 개발 시간 역시 줄일 수 있습니다.
🔒 코드의 분리
- 앞에서 말한 것처럼 모듈을 사용하면 코드를 작은 조각으로 분리할 수 있습니다. 각 모듈들은 특정한 기능 또는 역할을 수행하게 되므로, 코드를 논리적으로 분리할 수 있습니다. 이는 유지 보수 역시 좋게 만들어주죠. 또한, 모듈은 각각의 독립적인 스코프를 가지므로 전역 네임스페이스 오류를 방지합니다.
전역 네임스페이스 오류는 쉽게 말하면 변수 이름이 동일해서 충돌하거나, 함수 이름이 충돌하는 경우, 외부 라이브러리랑 충돌하는 경우, 의존성 오류 등등을 말합니다.
🔒 코드 가독성 향상
- 모듈을 사용하면 코드를 논리적으로 분리하고 이름을 분리할 수 있습니다. 이렇게 하면 코드를 더더욱 이해하기 쉽고 가독성 역시 더 좋아지죠. 또한 다른 모듈에서 필요한 기능을 임포트한다는 점은 코드의 의도 역시 파악하기 좋아집니다.
🔒 유지보수성 향상
- 모듈을 사용하면 각각의 모듈을 독립적으로 수정하고 테스트할 수 있습니다. 따라서 한 모듈의 변경이 다른 모듈에 영향을 미치지 않으므로 유지 보수가 좋아집니다. 또한 코드를 조각처럼 분리하게 되면 긴 코드에 비해서 디버깅이나 오류 수정 역시 쉬워집니다.
🔒 코드의 테스트
- 모듈을 사용하면 각각의 모듈을 단위 테스트할 수 있습니다. 모듈을 독립적으로 테스트가 가능하므로 테스트 코드를 작성하기 쉽게 모듈이 어떻게 동작하는지 여부를 검증하기도 쉽습니다.
📘 웹팩(Webpack)이란?
-
최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러를 의미합니다.
-
모듈 번들러는 웹 앱을 구성하는 자원(html, css, js 등등)을 모두 각각의 모듈로 보고 이를 조합해서 합친 하나의 결과물을 만드는 도구입니다.
📘 웹팩의 핵심 기능
- 모듈 번들링 : 의존하는 모듈들을 하나의 번들러로 묶어줍니다.
- 로더(Loader) : 웹팩은 자바스크립트 뿐만 아니라 css, 이미지 등등 다양한 파일도 모듈로 처리할 수 있게 해줍니다.
- 플러그인(Plugin) : 로더로 처리할 수 없는 작업들을 가능하게 해줍니다. 예를 들어서 번들 최적화, 환경 변수 주입, html 파일 생성등이 있습니다.
- 개발 서버 : 개발 시에 빠르게 빌드하고 변경사항을 감지하여 자동으로 새로고침해주는 개발 서버를 제공합니다.
📘 웹팩의 장점들
-
이전에는 css,js 파일 등이 여러 개일 경우 각 파일의 수 만큼 서버에 요청하여 웹 자원들을 얻어와야 했습니다. 하지만 웹팩을 사용하면 존속성이 있는 파일들을 그룹화하여 하나의 파일로 묶어서 요청하거나, 응답받기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있게 됩니다.
-
웹팩의 주요 구성 요소 중 하나인 로더는 웹팩과 바벨을 연동시키는 일을 합니다. 로더의 역할로 바벨을 편하게 사용할 수 있고, 덕분에 일부 브라우저에서 지원되지 않은 ES6 형식의 자바스크립트 파일을 ES5로 자동 변환하여 구 브라우저에서 쉽게 사용할 수 있습니다.
-
또한 로더는 html,css,font 등의 파일을 자바스크립트로 변환하여 모듈로서의 역할을 합니다. 이 파일들을 자바스크립트 모듈로 변형해야 하는 이유는 웹팩이 자바스크립트 모듈밖에 인식하지 못하기 때문입니다.
📘 모듈 / 웹팩을 접하게 되는 경우
- 프론트엔드 개발자들이 가장 많이 사용하는 라이브러리인 리액트, 프레임워크인 뷰에서 우리는 찾아볼 수 있습니다. export로 컴포넌트를 내보내고 import로 받아오는 작업을 통해 함수 파일들을 처리하며 모듈의 개념을 접하는 것이죠. 웹팩은 작성한 코드들을 빌드하는 과정에서 사용합니다.
📘 더 알아보기
🔒 좋은 모듈을 만드는 방법
-
좋은 모듈화를 위해서는 각자 주어진 기능만을 독립적으로 수행하고 다른 모듈과의 연관성이 적을 수록 좋습니다. 즉 독립성이 높을수록 좋은 모듈이라 말할 수 있습니다.
-
독립성이 높으면 해당 모듈을 수정하더라도 다른 모듈에 끼치는 영향이 적고, 오류를 쉽게 발견하고 해결할 수 있다는 장점이 존재하기 때문이죠.
-
모듈의 독립성은 모듈의 결합도와 응집도로 측정합니다. 모듈의 독립성을 높이기 위해서는 모듈 간 상호 의존도라고 할 수 있는 결합도를 낮춰야 하고, 해당 모듈이 독립적으로 기능을 수행 가능하도록 응집도가 높아져야 합니다.
🔒 모듈 사용하기
-
앞에서 리액트 예시로 살펴본 것 처럼 모듈에는 특수하 지시자인 export와 import가 있습니다. 모듈에서는 export 지시자를 사용해서 변수나 함수를 다른 곳에서 사용 가능하게 해주고, 모듈을 사용하는 쪽에서는 import를 사용해서 모듈에 있는 변수나 함수를 삽입해서 사용가능하게 해야합니다.
-
hello.js 컴포넌트를 만들어 export로 내보내는 예시
// hello.js
export function hello(user) {
alert('hello, ${user}!')
}- main.js 컴포넌트를 만들어 import로 받아오는 예시
import { hello } from "./hello";
alert(hello);
hello("peter");📘 그래서 왜 사용하는거임?
-
산업 분업화가 가장 좋은 예시입니다. 우리가 자동차를 생산한다고 가정해봅시다. 한 파트는 엔진, 한 파트는 시트, 한 파트는 창문 등등 영역 별로 생산을 진행하겠죠. 자바스크립트 안에서 모듈 역시 유사한 의미를 가지고 있습니다.
-
초기 스크립트는 크기도 지금보다 작고 기능도 단순했기 때문에 모듈 관련 표준 문법이 없었습니다. 하지만 스크립트의 크기가 커지면서 파일을 여러 개로 분리해야하는 시점이 되었죠. 즉 스크립트 역시 자동자를 만드는 부서처럼 분업화의 기점이 찾아온 것입니다. 분업이 잘된 부서처럼 모듈화가 잘 된 코드들은 전보다 편하게 유지 보수가 가능하다는 점에서 알아야합니다.
-
웹팩은 네트워크에서 다운로드하는 시간이 전보다 단축됩니다. 따라서 모듈과 웹팩은 코드를 짜는 우리들은 더더욱 알아야하죠.
🔒 마무리하며
- 기초 지식 시리즈를 개발자가 되기 위해 꼭 알아야 하는 IT 용어 시리즈를 참고해 포스팅 하다보면, 가끔씩 적절한 예시에 놀라는 경우가 많습니다. 여기서 소개하는 모듈의 사용 이유에 대해서 산업 분업화를 통해 비유한 것이 저한테는 되게 쉽게 다가왔는데요, 프론트엔드 개발을 매일 하지만 저도 포스팅을 하며 매일 배우는 시간이 아닌가 싶습니다 :)
