웹 개발을 도와주는 도구

Ahyeon, Jung·2023년 9월 19일

웹 개발을 진행할수록 코드의 구조를 체계적으로 관리하고, 재사용성을 높이는 것이 직관적이고 빠른 렌더링은 물론 유지보수에도 효과적이다. 특히 모듈 개념을 이용하여 웹팩을 사용하고, 바벨을 통해 다양한 브라우저에서 같은 화면이 나오도록 도울 수 있다.

재사용 가능한 코드의 묶음
특정 기능이나 관련 있는 작업을 수행하는 메서드와 변수를 하나로 묶어 관리하는 코드 단위
재사용성이 높아지고, 유지보수가 쉬워지며, 코드의 구조가 체계적으로 관리됨

리액트의 컴포넌트도 일종의 모듈로 볼 수 있음
각 컴포넌트는 자체적인 로직과 뷰를 갖고 있고, 이를 조합하여 복잡한 애플리케이션을 만들어 감

자바스크립트 뿐만 아니라 CSS, 이미지, 폰트 등 다양한 웹 자원들도 모듈로 취급

웹팩이 이러한 모든 자원들의 의존성을 함께 관리할 수 있게 해줌

여러 개의 파일과 리소스, 모듈들을 하나의 파일로 묶은 것

번들링을 통해 수많은 모듈을 하나 또는 몇 개의 파일로 합칠 수 있음

웹팩, 브라우저파이, 롤업 등의 도구를 통해 이루어짐

웹팩에서는 모듈을 읽어들인 후, 이 모듈과 그 의존성을 가진 다른 모듈을 하나의 파일(=> 번들)로 묶어줌

번들은 최종적으로 웹 서버를 통해 클라이언트에게 전달되고, 웹 브라우저에서 로드되어 실행됨

웹팩의 설정 파일에서 어떻게 번들을 생성할지, 어떤 로더와 플러그인을 사용할지 등을 정의할 수 있음

ES6코드를 받아서 브라우저에서 인식할 수 있는 ES5 코드로 바꿔주는 역할, 자바스크립트 컴파일러

브라우저에서 아직 지원하지 않는 자바스크립트 버전에 신경쓰지 않고 최신의 버전 사용가능

자바스크립트를 중심으로 여러 종류의 파일(모듈)을 번들링해주는 도구, 모듈 번들러module bundler

의존성 관리: 모듈 간의 의존성을 파악해 번들을 생성함. js에서 import를 통해 css 파일을 불러오면 웹팩이 두 파일이 서로 의존적임을 알고 하나의 번들에 묶어줌
로더 사용: 로더를 통해 다양한 유형의 파일을 처리할 수 있음. style-loader와 css-loader는 css 파일을 JS로 변환하여 번들에 포함시킴
플러그인과 확장성: 플러그인을 통해 기능 확장 가능. 로더는 파일을 해석하고 변환하는 과정에서 사용되는 반면, 플러그인은 번들 생성 과정 전반에 걸쳐 더 다양한 작업 수행 가능
코드 분할: 필요한 모듈을 여러 번들로 분할하는 것도 가능. 이를 통해 초기 로딩 속도를 개선하거나, 특정 조건에서만 코드를 불러오도록 할 수 있음
트리 쉐이킹: 불필요한 코드를 제거하는 트리 쉐이킹 기능을 지원. 자바스크립트 모듈 내에서 사용되지 않는 코드를 자동으로 제거해줌. 최종 번들의 크기를 쉽게 줄일 수 있음