호진방 블로그
학습

다양한 개발 환경 툴에 대해 알아보자.

# 다양한 개발 환경 툴에 대해 알아봅시다 npm, nvm, bundler, webpack

2023년 12월 18일

On This Page

npm

npm이란?

npm이란 Node Package Manager의 약자로 말 그대로 노드 패키지를 관리해주는 툴이다. node.js를 설치하면 자동으로 설치된다.


npm을 사용하는 이유


nvm

nvm이란?

Node Version Manager의 약자로 쉽게 말해서 Node.js를 설치하기 위한 툴이다. Node.js를 설치하는 방법은 여러가지이지만, nvm을 먼저 설치하지 않고 OS에서 node.js를 직접 설치하게 되면 여러 버전의 Node.js를 설치해야 하는 경우나 기타 문제에 대응하기 어려워진다.


nvm을 사용하는 이유


설치 순서

일반적으로 권장 하는 설치 순서는

nvm ➝ Node.js ➝ npm

  1. nvm을 먼저 설치한다.
  2. 원하는 조건 혹은 버전으로 Node.js를 설치한다.
  3. npm을 이용해 필요한 패키지를 때마다 추가로 설치한다.

npm nvm 요약

Nodejs 개발이 장점 중 하나로 npm을 이용하여 다른 개발자가 이미 개발해 놓은 모듈들을 가져다가 사용할 수 있다. npm이란 Node Packaged Manager로 Nodejs로 개발된 모듈을 관리한다는 뜻이다. 여기서 Package 란 프로그램을 구성하는 작은 단위를 말하는데 다른 말로 모듈(module) 이라고도 한다.

쉽게 설명하자면 게시판이 큰 의미의 프로그램이라면 글 보기, 글쓰기, 글 삭제, 글 수정, 글목록 등 이런 하나하나를 모듈이라 생각하면 된다. 이렇게 다른 개발자가 이미 개발해 놓은 모듈을 가져다 쓰면 편리하기도 하지만 생각지도 않은 문제가 발생되기도 한다.

그 중 하나의 예로 들자면 내가 프로그램 개발을 위하여 설치한 node 버전이 사용하려는  package (모듈)의 node 버전과 맞지 않을 경우 프로그램 실행이 오류를 발생하기도 한다. 그래서 사용하는 모듈이 중요한 모듈이고 개발하는데 시간이 걸릴 수 있는 모듈이라면 사용하려는 모듈의 nodejs 버전을 메인 버전으로 나의 시스템에 설치된 nodejs의 버전을 맞혀 주어야 한다.

이미 노드 18 버전이 설치되어 있는 데 사용하려는 모듈이 노드 16 버전 만을 지원한다면 나의 시스템에 설치되어 있는 18 버전의 노드를 삭제하고 16 버전으로 다시 설치를 해 주어야 하는 것이다. 이러한 불편한 점을 개선하기 위하여 nvm (Node Version Manager) 을 설치하여 사용한다.


package.json

package.json이란?

package.json이란 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일이다.


의존성을 관리한다는 의미


{
  "name": "react-sample",
  "version": "0.1.0",
  "private": true,
  "dependencies": { // !의존성 관리 부분!
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Bundler

번들러(Bundler)의 탄생 배경

인터넷이 등장하고 처음에는 웹 페이지와 서비스들의 규모가 그렇게 크지 않았다. 때문에 이를 구성하는 HTML이나 자바스크립트 파일의 크기도 상대적으로 작았고 해당 서비스를 유지하는데 큰 무리가 없었다. 하지만 인터넷이 발달하면서, 적게는 수 십 만 줄에서 많게는 수 백 만 줄의 코드로 이루어진 대규모 웹 서비스들이 생겨나기 시작했다. 하나의 웹 서비스에서 수십 수백개의 자바스크립트 파일을 다루면서 여러 문제들이 발생했다.


중복된 이름으로 인한 충돌, 위험

파일 전송 속도 문제

번들링을 했을 때의 장점은?

모듈 단위 코딩의 의미

💡 개발하는 애플리케이션의 크기가 커지면 파일을 여러개로 분리하게 된다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부른다. ES5, ES6의 [ export (name,default) | import ] 문법을 사용하여 쉽게 모듈을 만들 수 있다. 플러그인 파일이나 잘개 쪼개진 자바스크립트 코드 조각을 재사용하기 위해서 각각의 파일을 등록하고, 등록된 파일을 자바스크립트에서 불러와서 사용할 수 있게 된다.


모듈 단위 코딩의 필요성


번들러 기능 요약


Webpack

Webpack이란?

웹팩은 웹 애플리케이션에서 사용하는 수많은 리소스를 하나의 파일로 병합 및 압축 해주는 모듈 번들러이다.


자바스크립트에서의 모듈

자바스크립트에서의 모듈이란 특정 기능을 가진 코드들을 하나의 파일로 관리하는 것을 의미한다.

date.js
**date.js**
export const getIosStringDate() => new Date().toISOString();
export const getNumberDate() => new Date().valueOf();

예를들어 위 date.js는 날짜를 parsing 하는 기능들을 가진 모듈이라고 할 수 있다.


웹팩에서의 모듈

웹팩에서의 모듈은 자바스크립트 모듈뿐만이 아니라 HTML, CSS, Javascript, Images, Font 등 웹 애플리케이션을 구성하는 모든 자원들을 모듈이라고 한다.


파일 단위의 자바스크립트 모듈 관리의 필요성

module1.js
var foo = 10;

module1.js
foo = 20;

main.html
<body>
  <script src="./module1.js"></script>
  <script src="./module2.js"></script>
  <script>
    console.log(foo); // 20
  </script>
</body>

위 코드에서 foo는 전역 변수이기 때문에 어디서든 접근할 수 있고 값을 변경할 수 있다. 프로젝트가 커지고 이러한 변수가 많아진다면 남이 사용한 변수를 실수로 변경할 수 있는 문제 등이 발생한다. 그리고 script의 순서를 바꾸면 foo의 값도 바뀌게 된다.

이러한 문제를 해결하기 위해 javascript 파일을 모듈로 관리하게 되었고, CommonJS, AMD, ESModule 등의 모듈 시스템이 만들어졌다. 웹팩은 다양한 모듈화 방식 중 ESModule 방식을 사용하고 있다.

웹 애플리케이션의 빠른 로딩 속도와 높은 성능

웹페이지에 접속하게 되면 js, image, font 등의 수많은 리소스 파일들이 다운 받아지게 된다.

만약 페이지에서 사용하는 js파일이 5개라면 위와 같이 5개의 js파일을 다운로드하게 되는데 5개가 아니라 수천 개라면 그리고 사이즈가 크다면 로딩 시간에 지친 사용자들은 페이지를 나갈지도 모른다.


<body>
  <script src="./module1.js"></script>
  <script src="./module2.js"></script>
  <script src="./module3.js"></script>
  <script src="./module4.js"></script>
  <script src="./module5.js"></script>
  ...
  <script src="./module1000.js"></script>
</body>

이러한 문제를 해결하기 위해 웹팩은 여러 파일을 하나로 병합 및 압축하는 기능을 제공하고 있다. 그 결과 서버로의 수많은 요청을 줄이기 때문에 네트워크에 부담을 줄여 더 빠른 서비스를 제공할 수 있다. 예제에서는 js 파일을 위주로 설명했지만 위에서도 말했다시피 웹팩은 js 뿐만이 아니라 모든 리소스를 모듈로 취급하고 그 리소스들을 하나의 파일로 병합 및 압축할 수 있다. 이 작업은 Loader를 통해 할 수 있다.


me
@banhogu
안녕하세요 배움을 나누며 함께 전진하는 1년차 주니어 개발자 방호진입니다.