현재 버전

front-end webpack javascript

webpack 써서 두 자바스크립트 파일을 번들링 했는데여..


번들링된 js 의 18074줄에는 분명이 updateStats라는 함수를 정의 해주게 되어있고,

18179 라인에서 이 함수를 호출하는데 

계속 이 함수가 정의되지 않았다고 에러가 뜹니다...

신기한 점은 두 js파일을 따로따로 불러와서 호출하면 정상작동한다는 점입니다.

이걸 뭐라 검색해야 원인을 찾을 수 있을지 잘모르겠어서 질문게시판에 선배님들에게 여쭤봅니다

18060 부터 18184 까지의 코드입니다.

/* WEBPACK VAR INJECTION */(function($) {var SERVER_URL = "http://localhost:8000/api";

function updateLeaderBoard() {
  $.ajax({
    url: SERVER_URL + "/leaders"
  }).then(function (data) {
    $('#leaderboard-body').empty();
    data.forEach(function (row) {
      $('#leaderboard-body').append('<tr>' + '<td>' + row.userId + '</td>' + '<td>' + row.totalScore + '</td>' + '</tr>');
    });
  });
}

function updateStats(userId) {
  $.ajax({
    url: SERVER_URL + "/stats?userId=" + userId,
    success: function success(data) {
      $('#stats-div').show();
      $('#stats-user-id').empty().append(userId);
      $('#stats-score').empty().append(data.score);
      $('#stats-badges').empty().append(data.badges.join());
    },
    error: function error() {
      $('#stats-div').show();
      $('#stats-user-id').empty().append(userId);
      $('#stats-score').empty().append(0);
      $('#stats-badges').empty();
    }
  });
}

$(document).ready(function () {
  updateLeaderBoard();
  $('#refresh-leaderboard').click(function (event) {
    updateLeaderBoard();
  });
});
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(2)))

/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function($) {var SERVER_URL = "http://localhost:8000/api";

function updateMultiplication() {
  $.ajax({
    url: SERVER_URL + "/multiplications/random"
  }).then(function (data) {
    //폼 비우기
    $("#attempt-form").find("input[name='result-attempt'], input[name='user-alias']").val(""); //무작위 문제를 api 로 가져와서 추가하기

    $(".multiplication-a").empty().append(data.factorA);
    $(".multiplication-b").empty().append(data.factorB);
  });
}

function updateResults(alias) {
  var userId = -1;
  $.ajax({
    url: SERVER_URL + "/results?alias=" + alias,
    async: false,
    success: function success(data) {
      $('#results-div').show();
      $('#results-body').empty();
      data.forEach(function (row) {
        $('#results-body').append('<tr>' + '<td>' + row.id + '</td>' + '<td>' + row.multiplication.factorA + ' x ' + row.multiplication.factorB + '</td>' + '<td>' + row.resultAttempt + '</td>' + '<td>' + (row.correct === true ? 'YES' : 'NO') + '</td>' + '</tr>');
      });
      userId = data[0].user.id;
    }
  });
  return userId;
}

$(document).ready(function () {
  updateMultiplication(); //폼 기본 제출 막기

  $("#attempt-form").submit(function (event) {
    event.preventDefault();
    var a = $(".multiplication-a").text();
    var b = $(".multiplication-b").text(); // let $form = $(this),
    //   attempt = $form.find("input[name='result-attempt']").val(),
    //   userAlias = $form.find("input[name='user-alias']").val();

    var attempt = $("input[name='result-attempt']").val();
    var userAlias = $("input[name='user-alias']").val(); //json

    var data = {
      id: null,
      user: {
        id: null,
        alias: userAlias
      },
      multiplication: {
        id: null,
        factorA: a,
        factorB: b
      },
      resultAttempt: attempt,
      correct: false
    };
    $.ajax({
      url: SERVER_URL + "/results",
      type: "POST",
      data: JSON.stringify(data),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function success(result) {
        if (result.correct) {
          $(".result-message").empty().append("<p class='bg-success text-center'>정답입니다! 축하드려요!</p>");
        } else {
          $(".result-message").empty().append("<p class='bg-danger text-center'>오답입니다! 그래도 포기하지마세요! </p>");
        }
      }
    }).then(function () {
      updateMultiplication();
      setTimeout(function () {
        var userId = updateResults(userAlias);
        updateStats(userId);
        updateLeaderBoard();
      });
    });
  });
});



수정 이력

2020-10-14 10:41:46 에 아래 태그에서 변경 됨 #4
2020-10-13 21:57:53 에 아래 내용에서 변경 됨 #3

번들링된 js 의 18074줄에는 분명이 updateStats라는 함수를 정의 해주게 되어있고,

18179 라인에서 이 함수를 호출하는데 

계속 이 함수가 정의되지 않았다고 에러가 뜹니다...

이걸 뭐라 검색해야 원인을 찾을 수 있을지 잘모르겠어서 질문게시판에 선배님들에게 여쭤봅니다


18060 부터 18184 까지의 코드입니다.

/* WEBPACK VAR INJECTION */(function($) {var SERVER_URL = "http://localhost:8000/api";

function updateLeaderBoard() {
  $.ajax({
    url: SERVER_URL + "/leaders"
  }).then(function (data) {
    $('#leaderboard-body').empty();
    data.forEach(function (row) {
      $('#leaderboard-body').append('<tr>' + '<td>' + row.userId + '</td>' + '<td>' + row.totalScore + '</td>' + '</tr>');
    });
  });
}

function updateStats(userId) {
  $.ajax({
    url: SERVER_URL + "/stats?userId=" + userId,
    success: function success(data) {
      $('#stats-div').show();
      $('#stats-user-id').empty().append(userId);
      $('#stats-score').empty().append(data.score);
      $('#stats-badges').empty().append(data.badges.join());
    },
    error: function error() {
      $('#stats-div').show();
      $('#stats-user-id').empty().append(userId);
      $('#stats-score').empty().append(0);
      $('#stats-badges').empty();
    }
  });
}

$(document).ready(function () {
  updateLeaderBoard();
  $('#refresh-leaderboard').click(function (event) {
    updateLeaderBoard();
  });
});
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(2)))

/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function($) {var SERVER_URL = "http://localhost:8000/api";

function updateMultiplication() {
  $.ajax({
    url: SERVER_URL + "/multiplications/random"
  }).then(function (data) {
    //폼 비우기
    $("#attempt-form").find("input[name='result-attempt'], input[name='user-alias']").val(""); //무작위 문제를 api 로 가져와서 추가하기

    $(".multiplication-a").empty().append(data.factorA);
    $(".multiplication-b").empty().append(data.factorB);
  });
}

function updateResults(alias) {
  var userId = -1;
  $.ajax({
    url: SERVER_URL + "/results?alias=" + alias,
    async: false,
    success: function success(data) {
      $('#results-div').show();
      $('#results-body').empty();
      data.forEach(function (row) {
        $('#results-body').append('<tr>' + '<td>' + row.id + '</td>' + '<td>' + row.multiplication.factorA + ' x ' + row.multiplication.factorB + '</td>' + '<td>' + row.resultAttempt + '</td>' + '<td>' + (row.correct === true ? 'YES' : 'NO') + '</td>' + '</tr>');
      });
      userId = data[0].user.id;
    }
  });
  return userId;
}

$(document).ready(function () {
  updateMultiplication(); //폼 기본 제출 막기

  $("#attempt-form").submit(function (event) {
    event.preventDefault();
    var a = $(".multiplication-a").text();
    var b = $(".multiplication-b").text(); // let $form = $(this),
    //   attempt = $form.find("input[name='result-attempt']").val(),
    //   userAlias = $form.find("input[name='user-alias']").val();

    var attempt = $("input[name='result-attempt']").val();
    var userAlias = $("input[name='user-alias']").val(); //json

    var data = {
      id: null,
      user: {
        id: null,
        alias: userAlias
      },
      multiplication: {
        id: null,
        factorA: a,
        factorB: b
      },
      resultAttempt: attempt,
      correct: false
    };
    $.ajax({
      url: SERVER_URL + "/results",
      type: "POST",
      data: JSON.stringify(data),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function success(result) {
        if (result.correct) {
          $(".result-message").empty().append("<p class='bg-success text-center'>정답입니다! 축하드려요!</p>");
        } else {
          $(".result-message").empty().append("<p class='bg-danger text-center'>오답입니다! 그래도 포기하지마세요! </p>");
        }
      }
    }).then(function () {
      updateMultiplication();
      setTimeout(function () {
        var userId = updateResults(userAlias);
        updateStats(userId);
        updateLeaderBoard();
      });
    });
  });
});


2020-10-13 21:56:08 에 아래 내용에서 변경 됨 #2

번들링된 js 의 18074줄에는 분명이 updateStats라는 함수를 정의 해주게 되어있고,

18179 라인에서 이 함수를 호출하는데 

계속 이 함수가 정의되지 않았다고 에러가 뜹니다...

이걸 뭐라 검색해야 원인을 찾을 수 있을지 잘모르겠어서 질문게시판에 선배님들에게 여쭤봅니다


18074 부터 18179 까지의 코드입니다.

function updateStats(userId) {
  $.ajax({
    url: SERVER_URL + "/stats?userId=" + userId,
    success: function success(data) {
      $('#stats-div').show();
      $('#stats-user-id').empty().append(userId);
      $('#stats-score').empty().append(data.score);
      $('#stats-badges').empty().append(data.badges.join());
    },
    error: function error() {
      $('#stats-div').show();
      $('#stats-user-id').empty().append(userId);
      $('#stats-score').empty().append(0);
      $('#stats-badges').empty();
    }
  });
}

$(document).ready(function () {
  updateLeaderBoard();
  $('#refresh-leaderboard').click(function (event) {
    updateLeaderBoard();
  });
});
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(2)))

/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function($) {var SERVER_URL = "http://localhost:8000/api";

function updateMultiplication() {
  $.ajax({
    url: SERVER_URL + "/multiplications/random"
  }).then(function (data) {
    //폼 비우기
    $("#attempt-form").find("input[name='result-attempt'], input[name='user-alias']").val(""); //무작위 문제를 api 로 가져와서 추가하기

    $(".multiplication-a").empty().append(data.factorA);
    $(".multiplication-b").empty().append(data.factorB);
  });
}

function updateResults(alias) {
  var userId = -1;
  $.ajax({
    url: SERVER_URL + "/results?alias=" + alias,
    async: false,
    success: function success(data) {
      $('#results-div').show();
      $('#results-body').empty();
      data.forEach(function (row) {
        $('#results-body').append('<tr>' + '<td>' + row.id + '</td>' + '<td>' + row.multiplication.factorA + ' x ' + row.multiplication.factorB + '</td>' + '<td>' + row.resultAttempt + '</td>' + '<td>' + (row.correct === true ? 'YES' : 'NO') + '</td>' + '</tr>');
      });
      userId = data[0].user.id;
    }
  });
  return userId;
}

$(document).ready(function () {
  updateMultiplication(); //폼 기본 제출 막기

  $("#attempt-form").submit(function (event) {
    event.preventDefault();
    var a = $(".multiplication-a").text();
    var b = $(".multiplication-b").text(); // let $form = $(this),
    //   attempt = $form.find("input[name='result-attempt']").val(),
    //   userAlias = $form.find("input[name='user-alias']").val();

    var attempt = $("input[name='result-attempt']").val();
    var userAlias = $("input[name='user-alias']").val(); //json

    var data = {
      id: null,
      user: {
        id: null,
        alias: userAlias
      },
      multiplication: {
        id: null,
        factorA: a,
        factorB: b
      },
      resultAttempt: attempt,
      correct: false
    };
    $.ajax({
      url: SERVER_URL + "/results",
      type: "POST",
      data: JSON.stringify(data),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function success(result) {
        if (result.correct) {
          $(".result-message").empty().append("<p class='bg-success text-center'>정답입니다! 축하드려요!</p>");
        } else {
          $(".result-message").empty().append("<p class='bg-danger text-center'>오답입니다! 그래도 포기하지마세요! </p>");
        }
      }
    }).then(function () {
      updateMultiplication();
      setTimeout(function () {
        var userId = updateResults(userAlias);
        updateStats(userId);
        updateLeaderBoard();
      });
    });
  });
});


2020-10-13 21:51:22 에 아래 내용에서 변경 됨 #1

번들링된 js 의 18074줄에는 분명이 updateStats라는 함수를 정의 해주게 되어있고,

18179 라인에서 이 함수를 호출하는데 

계속 이 함수가 정의되지 않았다고 에러가 뜹니다...

이걸 뭐라 검색해야 원인을 찾을 수 있을지 잘모르겠어서 질문게시판에 선배님들에게 여쭤봅니다