웹팩(Webpack) 이해하기 - 개발 서버

저번 글에 이어서 웹팩 개발 서버에 대해 알아보자.

 

웹팩 개발 서버 외에도 VS code의 Extension인 Live Server나 Node.js로도 로컬 서버를 구현할 수 있다. 이런 여러 선택지 중에서 웹팩 개발 서버를 통해 얻을 수 있는 이점은 무엇일까 생각을 해봤다.

운영 환경과 비슷하게 만들기

개발 환경에서도 운영 환경과 비슷한 환경을 만들어 주는 것이 좋다. 운영 환경과 맞춤으로써 배포 시에 잠재적 문제를 미리 확인하고, 예방할 수있다. 이런 노력은 타입스크립트를 사용하는 것과 비슷한 맥락이다. 협업에서의 이점도 있지만 타입을 지정하여 운영 환경의 문제들을 예방할 수 있다.

학습 비용 감소

처음엔 Node.js를 통해 서버를 구현하고 목업 API 작업을 했었다. Node.js를 공부하니 Express.js가 등장하고 배울 것들이 훨씬 늘어난 느낌이었다. 사전에 Express.js를 학습해서 좀 더 수월하긴 했지만 웹팩을 통해 목업 API 작업을 패키지의 도움을 받고, 개발 서버를 쉽게 구현해서 시간을 아낄 수 있었다.

 

게다가 웹팩 개발 서버는 프로젝트 파일의 코드를 변경하고 저장할 때마다 자동으로 웹팩으로 빌드한 후 브라우저를 새로고침 해준다.

하나로 두 가지일 해결하기

이것도 꽤나 중요한 이유가 될 수 있다고 생각한다. 번들도 하고 서버에 접속할 수 있다면? 일석이조다.

// package.json 📂

"scripts": {
  "start": "webpack serve"
}

npm start

이렇게 빌드 후 개발 서버를 실행할 수 있는데, 이 경우 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 다시 말해 웹팩 개발 서버로 빌드한 결과물은 메모리에 저장 되어 파일로 생성하지는 않기 때문에 개발이 완료되면 웹팩 명령어를 이용해 결과물을 파일로 생성해야 한다.

컴퓨터 구조 관점에서 파일 입출력보다 메모리 입출력이 더 빠르고 컴퓨터 자원이 덜 소모됩니다 😄
- 웹팩 핸드북

이런 이점들과 함께 웹 애플리케이션 개발 시 웹팩을 사용한다면 웹팩 개발 서버는 필수로 사용된다.

웹팩 개발 서버(Webpack Dev Server) 시작하기

이제 설치 및 사용을 시작하자.

npm i -D webpack-dev-server

설치를 완료하고 npm scripts로 등록하면 비교적 편리하게 사용할 수 있다.

// package.json 📂

"scripts": {
  "start": "webpack serve"
}

그 다음으로 개발 서버에 필요한 옵션들을 알아보자.

기본 설정

// webpack.config.js 📂

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },
};

• static/directory: 정적 파일들이 위치하는 디렉토리 설정
• compress: 정적 파일들 모두를 gzip(압축) 할지 설정
• port: 서버 실행 시 포트 설정. 기본값은 8080이다

브라우저 화면에 에러와 경고 표시

// webpack.config.js 📂

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
  },
};

• overlay: 빌드 후 에러나 경고를 브라우저 화면에 표시 할지 설정. 에러나 경고 표시 세부 설정 가능

사용자 정의 미들웨어

내가 프로젝트를 진행하면서 가장 필요했던 기능이기도 하다. 해당 기능으로 다양한 서버 응답을 만들어서 API를 테스트해 볼 수 있다.

 

다른 모든 미들웨어보다 먼저 사용자 정의 미들웨어를 실행할 수 있는데 예시는 다음과 같다.

// webpack.config.js 📂

module.exports = {
  //...
  devServer: {
    onBeforeSetupMiddleware: (devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/some/path', (req, res) => {
        res.json({ custom: 'response' });
      });
    },
  },
};

서버를 구동 후 curl로 http 요청을 보내보자.

curl localhost:8080/some/path

{"custom":"response"}

응답할 목업 API 작업이 많을 때는 connect-api-mocker를 사용하자. 해당 패키지로 실제 REST API 서버 없이 쉽게 REST API 테스트를 할 수 있다. 특정 폴더를 만들어서 파일 경로대로 API 응답을 해주는 기능을 한다.

 

예를 들어 REST 요청이

GET /api/messages

라면 파일 구조는

_ api
    \_ messages
         \_ GET.json

가 된다. 그럼 이제 웹팩에서 사용해보자.

npm i -D connect-api-mocker

// webpack.config.js 📂

module.exports = {
  //...
  devServer: {
    onBeforeSetupMiddleware: (devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.use(apiMocker('/api', 'mocks/api'));
    },
  },
};

첫번째 인자의 '/api'는 설정할 라우팅 경로이다. 즉 /api로 들어온 요청에 대해 처리하겠다는 의미이다.

 

두번째 인자는 응답으로 제공할 목업 파일 경로를 설정한다. 위의 예시에선 mocks/api로 경로를 전달했다.

이런식으로 파일 경로를 만들어 REST API를 테스트 할 수 있다

웹팩 개발 서버에 대해 알아봤다

여기까지 개인 프로젝트를 진행하면서 써봤던 기능들을 정리해봤다. 위에 있는 기능들 말고도 CORS 문제를 해결해주는 프록시, 핫 모듈 리플레이스먼트, 히스토리API폴백 등 다양한 기능들로 확장할 수 있다.

 

새로운 기술을 학습할 때, 해당 기술을 어느정도까지 사용할 지가 중요한 것 같다. 내가 현재 필요한 기능들은 여기까지여서 몇개만 사용해봤지만 웹팩도 파고들면 굉장히 범위가 넓고 기능들이 많다.

 

이제 사용법은 어느 정도 알았고, 앞으로 자주 사용할 것 같아서 천천히 몇개씩 사용해보며 넓혀야겠다.