프론트엔드 개발환경의 이해 : Webpack (심화)

개발 환경

지금까지는 프로젝트 상단에 파일, 이미지 등을 직접 로딩해서 결과물을 확인했다

하지만 실제 운영으로 들어가면 인터넷에서 이 파일들을 읽어 온 뒤에 클라이언트에 전달해주어야한다

개발환경도 위와 같은 운영환경과 유사하게 맞추어 주는 것이 좋다

배포시에 발생할 수 있는 잠재적인 문제들을 미리 확인할 수 있기도 하기 때문

이러한 서버를 제공해주는 것이 webpack-dev-server다

설치 및 사용

npm i -D webpack-dev-server으로 설치한 후에 package.json에서 스크립트 명령어를 추가해주자

...
scripts: {
  ...
  start: "webpack-dev-server"
}
...

start는 기본 명령어이기 때문에 run을 붙여주지 않아도 실행이 가능하다

npm start로 실행시키면 디폴트 설정인 8080포트로 서버가 돌아가게된다

브라우저로 서버에 접속한 상태에서 코드를 바꿔보면 실시간으로 반영되는 것을 볼 수 있는데 이것만으로도 큰 수확이다

매번 코드를 바꾸고 브라우저를 새로고침하는 것은 귀찮은 일이니까

기본 설정

이 서버또한 설정이 가능한데 webpack.config.js에서 devServer 객체에서 옵션을 줄 수 있다

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    publicPath: "/",
    host: "dev.domain.com",
    overlay: true,
    port: 8081,
    stats: "errors-only",
    historyApiFallback: true,
  },
  ...
}

contentBase: 정적파일을 제공할 경로로 기본값은 웹팩 아웃풋이다

publicPath: 브라우져를 통해 접근하는 경로로 기본값은 '/' 이다.

host: 개발환경에서 도메인을 맞추어야 하는 상황에서 사용한다. 예를들어 쿠기 기반의 인증은 인증 서버와 동일한 도메인으로 개발환경을 맞추어야 한다. 운영체제의 호스트 파일에 해당 도메인과 127.0.0.1 연결한 추가한 뒤 host 속성에 도메인을 설정해서 사용한다

overlay: false값이면 코드나 어딘가 에러가 발생했을 때 서버 콘솔에만 에러가 뜨는데 true이면 브라우저에서도 볼 수 있다

port: 개발 서버 포트 번호를 설정한다 기본값은 8080

stats: 메시지 수준을 정할수 있다 'none', 'errors-only', 'minimal', 'normal', 'verbose' 로 메세지 수준을 조절한다

historyApiFallBack: 히스토리 API를 사용하는 SPA 개발시 설정한다 404가 발생하면 index.html로 리다이렉트한다

API 연동

before

프론트엔드에서 프로젝트를 개발할 때 백에서 api를 개발하기 전 까지 개발이 곤란한 경우가 생긴다

그럴 때 가짜 데이터로 임시api를 사용하면서 개발을 진행하는데 webpack-dev-server는 이런 기능을 지원한다

webpack.config.js에서 devServer라는 객체로 옵션을 설정했는데 여기서 before함수로 api설정이 가능하다

    devServer: {
        overlay: true,
        stats: "error-only",
        before : (app)=>{

        }
    },

여기서 app은 node의 express에서 사용하는 Express인스턴스다

app.get()안에 들어오는 파라미터는 url과 컨트롤러이고 컨트롤러는 또다시 req 요청객체와 res 응답객체를 받는다

        before : (app)=>{
            app.get('/api/users', (req, res) =>{
                res.json([
                    {
                        id: 1,
                        name: 'Alice',
                    },
                    {
                        id: 2,
                        name: "Bek"
                    },
                ])
            });
        }

이렇게 작성해 줄 수 있다

이 api를 app.js에서 요청하고 받아와서 콘솔에 찍어보자

document.addEventListener('DOMContentLoaded',async ()=>{
    try{
        const data = await axios.get('/api/users');
        console.log(data);
    }catch (e){
        console.log(e);
    }

데이터가 제대로 나오는 것을 확인할 수 있다

connect-api-mocker

임시 api이기 때문에 데이터가 가벼워서 설정파일에 넣어도 괜찮았지만 필요한 데이터가 커지면 커질수록 설정 파일에 넣는 것은 가독성 및 개발에 도움이 되지 않는다

그래서 해당하는 경로의 api폴더를 만든 뒤에 JSON파일로 데이터를 넣어두기만 하면 이를 api로 제공하는 패키지이다

우선 패키지를 깔고 npm install -D connect-api-mocker

mocks 폴더에 원하는 api 디렉토리를 만들자

mocks/api/users 폴더 아래에 get메서드로 호출할 GET.json 파일을 만들자

post로 받아올 데이터라면 POST.json으로 만들어야한다

[
  {
    "id": 1,
    "name": "Alice"
  },
  {
    "id": 2,
    "name": "Bek"
  }
]

위에서 before함수에서 반환했던 데이터를 그대로 들고왔다

        before : (app)=> {
            app.use(apiMocker('/api', 'mocks/api'))
        }

app에 미들웨어 추가를 위한 use메서드를 사용해서 mockup미들웨어를 추가했고 /api 로 들어오는 요청은 mocks/api으로 보내겠다는 뜻이다

실제 api 연동

백에서 api개발이 끝나서 프론트에서 api를 받아 쓰려한다

그럴 때 api의 도메인이 다를텐데 그 경우에 동일 출처 정책에 의해 거부당한다 쉽게 말하면 도메인 A에서 도메인 B로 api 요청을 날리면 안되고

A에서는 A로만 날려야한다는 것

이를 해결하기 위해선 서버쪽에서도 해결해 줄 수 있지만 프론트에서 해결하는 방법을 알아보자

webpack-dev-server에서는 proxy라는 옵션으로 이를 해결할 수 있는 방법을 지원한다

devServer: {
        overlay: true,
        stats: 'errors-only',
        before : (app)=> {
            app.use(apiMocker('/api', 'mocks/api'))
        },
        proxy: {
            '/api': "url"
        }
    },

proxy 객체는 key : /api로 들어오는 모든 요청을 value : url로 대신해서 요청을 보낸다