웹팩 서버 정리

웹팩 서버

웹팩 서버는 프론트엔드 개발환경에서 개발용 서버를 제공해준다. 웹팩을 통해 빌드한 파일들을 정적인 형태로 제공해주는 서버인 것이다. 사용법은 아래와 같다.

우선 웹팩 서버를 설치한다. npm i webpack-dev-server
설치한 뒤에 npx webpack serve 명령어를 입력하여 서버를 띄울 수 있다. 포트 기본값은 8080인듯하다. 8080포트에 서버를 열면서 설정에 따라서 해당 폴더 내에 있는 정적 파일들이 올라간다. 그럼 이제 해당 웹팩 설정에 포함되는 코드를 변경하면 바로바로 반영하여 브라우저에 보여준다.

웹팩 설정 예시

contentBase는 파일을 올릴 대상의 폴더이름이다. dist라고 설정이 되어있으니 dist 폴더 내의 파일들이 올라갈 것이다.
overlay를 true로 설정하면 에러를 브라우저 화면에 표시한다.

 

목업 API

프론트에서 개발을 해야하는데 백엔드서버에서 아직 api가 준비안되어있는 상황이라고 생각해보자. 굉장히 개발하기가 난감하다고 할 수 있겠다... 그래서 이때 웹팩 서버를 이용해 목업 api를 만들면 이것을 바탕으로 개발을 진행할 수 있다.

devServer : {
    overlay : true,
    stats : 'errors-only',
    before : app => {
      app.get("/api/users", (req,res) => {
        res.json([
          {
            id : 1,
            name : "Alice",
          },
          {
            id : 2,
            name : 'joo won'
          },
          {
            id : 3,
            name : 'lsh'
          }
        ])
      })
    },
}

before 내부를 잘보면 어디서 많이 본 코드이다. 바로 express이다. before 함수는 express서버 객체를 app이라는 이름으로 받고 그다음부턴 흔히 아는대로 api를 만들고 리턴값으로 목업 데이터를 넣어주면 되는 것이다. 그럼 저렇게 해놓고 8080포트의 /api/users에 접근하면 데이터가 나올까?

신기..... 아주 잘나온다 ㅋㅋㅋㅋㅋㅋㅋ 이제 저기 url로 요청하면서 개발하면 될 것이다.

실무에서는 목업 api 한두개로 개발하지는 않을 것이다. 많은 목업 api를 만들기 위해서는 connect-api-mocker 를 이용해야한다. 위의 예시를 사용해보겠다.

1. 폴더를 하나 만들고 그안에 api폴더 안에 users 폴더를 만들어 경로를 똑같이 만든다. 나는 mocks/api/users 라고 했다.
2. GET.json 파일을 만든다.

//GET.json 파일
[
    {
      id : 1,
      name : "Alice",
    },
    {
      id : 2,
      name : 'joo won'
    },
    {
      id : 3,
      name : 'lsh'
    }
  ]

3. 웹팩 서버 설정을 아래와 같이 바꾼다.

const apiMoker = require('connect-api-mocker');

devServer : {
    overlay : true,
    stats : 'errors-only',
    before : app => {
      app.use(apiMoker('/api','mocks/api'))
    },
    hot : true
  },

이렇게 하면 /api 로 시작하는 요청들은 전부 mocks/api내에서 다 처리해줄 것이다. 이제 백에서 api가 준비가 될 됐다고 하더라도 개발이 가능하다👍👍

 

핫로딩

 웹팩 개발 서버를 사용하면 코드를 수정한 것이 실시간으로 브라우저에 반영되는 것을 확인할 수 있다. 하지만 파일 하나를 수정해도 전체가 다시 로딩되는 것이기 때문에 만약 input 태그에 이것저것 입력해둔 상태에서 버튼 디자인 수정해도 전체가 새로고침되어버려서 입력한 내용들이 다 날아간다 이것은 테스트에 지장 생겨, 생산성 저하 까지 연결된다.

 핫로딩을 이용하게 되면 전체가 아닌 파일 단위로 로딩되어서 이런 문제를 예방할 수 있다. 핫로딩 설정하는 방법은 일단 웹팩 설정파일에는 hot : true 만 넣어주면 된다. (웹팩 설정파일 내부에 웹팩 서버 설정 부분에 넣어야한다) 그 후에 핫로딩이 필요한 파일로 가서 코드를 추가해주면 된다.

if(module.hot) {
  module.hot.accept('./src/result', async () => {
    resEl.innerHTML = await result.render();
  })

  module.hot.accept('./src/form', () => {
    formEl.innerHTML = form.render(); 
  })
}

이 파일은 입력폼.js 파일과 리스트출력.js 부분을 import 해서 사용하는 파일이다. 이 파일 가장 아래에다가 핫로딩이 켜져있다면 어떤 파일에서 변화가 감지되면 이 코드를 실행해라~ 하는 콜백함수를 넣어준다. 위와같이 넣으면 변경된 부분에 따라 부분적으로 변경될 것이다.

module.hot.accept('감지하고자 하는 파일', 변경 감지시 실행되는 콜백함수)

 

원래는 이랬는데

이렇게 되는 것이다. 리스트 목록을 변경해도 input 태그에는 전혀 영향을 미치지 않는다...!!😮

(참고로 webpack 설정 파일은 건드려도 반영이 안된다. 서버를 내렸다가 다시 실행해야한다)

 

관련글

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/dashboard