자바스크립트)웹펙.... 모듈 번들러

 

재사용성이라는 말이 있다.

흔히 말해 한 번 작성한 코드를 여러 번 재사용 하는 것이다.

예를 한 번보자.

단순히 x,y값을 받아 둘의 합을 리턴해주는 함수이다.

  const Calc = (x: number, y: number) => {
    return x + y;
  };

굉장히 간단한 함수이다. 하지만 단순히 x,y값을 받아 둘의 합을 리턴해주는 것이 아닌, 특정 api를 요청하고 서버로부터 받은 값 중에 무엇을 비교하고, 올림/내림을 수행하고 등등의 복잡한 함수라면 우린 분명 어떤 파일에 해당 함수를 저장하여 사용할 것이다.

하지만 " 특정 api를 요청하고 서버로부터 받은 값 중에 무엇을 비교하고, 올림/내림을 수행하고 등등"의 모든 일련의 과정을 하나의 함수로 담는 것은 매우 안좋다.

따라서 모든 것을 재사용할 수 있게 쪼개야 재사용성이 높아진다.

  const Minus = (x: number, y: number) => {
    const a = 10 - x;
    const b = 10 - y;
    return { a, b };
  };

  const plus = (x: number, y: number) => {
    return x + y;
  };

  const Calc = (x: number, y: number) => {
    return x > y;
  };

Minus함수와 plus함수, Calc함수를 각각 a.js, b.js, c.js라는 파일에 담아보자.

우리는 개발을 진행하며 위와 같은 파일을 무수히 많이 만들것이고, 이를 그대로 서버에 배포한다면 HTTP 요청 부하가 발생해 사용자 경험을 해칠수 있다.

때문에 모든 파일(모듈)을 bundle.js라는 하나의 파일로 묶어주는데, 이 과정을 번들링이라 하며 가장 대표적이고 익숙한 도구가 바로 "웹펙"이다

 

그럼 웹펙을 한 번 설치해보자.

우선 웹펙을 실행하려면 프로젝트가 npm에 의해 관리가 되어야한다.

npm init -y

 

명령어를 실행하면 프로젝트 루트폴더 내에 package.json파일이 생성된 것을 확인할 수 있다.

package.json이 있는 것을 확인한 후 아래 명령을 실행한다.

npm install --save-dev webpack webpac-cli

로컬환경에 설치된 cli를 실행하기 위해선 npx명령어를 사용하면 된다.

npx webpack --entry YOUR_FILE_PATH --output path YOUR_BUNDLING_FILE_PATH

entry명령어를 사용해 어떤 파일을 기준으로 번들링을 진행할지, 그리고 그 번들링한 파일을 어디에 지정할지(output path)를 지정하면 output에 입력한 폴더 내에 main.js라는 파일이 생성될 것이다. 

우리는 단지 폴더에 새로 생성된 main.js라는 파일 "하나만" 사용하면 된다.

하지만 이를 파일이 매우 많은 리액트 프로젝트나 next.js프로젝트에서 진행하기엔 우선 러닝커브가 어마어마하다.

따라서 리액트는 react-script에서 자동으로 생성해준다. (프로젝트, 또는 개발자에 따라 webpack을 또 설치해서 사용하기도 함)

 

"클론코딩"이라는 말이있다.

스파게티 코드, 에일리언 코드를 지양하고 다른 사람이 쉽게 알아볼 수 있고 무엇을 위한 코드인지, 무엇이 동작/실행되는 코드인지 한눈에 파악하기 쉽게 작성하는 기법이다.

사람에 따라선 방법이 매우 많지만 공통적으로 지향하는 것이 바로 가독성이다.

그 가독성을 최대한 해치지않고 사용자에게 최고의 경험을 선사해주기 위해 우리는 한 줄의 코드를 짤때에도 매우 많은 고민을 한다.

리액트니 넥스트니 같은 프레임워크가 나온 까닭도 좀 더 빠른 렌더링 시간을 위해서 출시되었다.

 

우리가 웹펙을 알아야 할 이유는 여러가지지만 웹펙을 몰라야 할 이유는 단 한가지도 없다고 생각한다.