모나리자몽
95
2020-10-13 21:43:31 작성 2020-10-14 10:41:46 수정됨
7
204

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();
      });
    });
  });
});


1
  • 답변 7

  • Frudy
    6k
    2020-10-13 21:47:22 작성 2020-10-13 21:47:45 수정됨

    18074 라인부터

    18184 라인까지 전체 코드를 올려주실 수 있나요?


    버그 케이스 확보하고싶고, 저도 해결해보고싶은 에러에요.

  • 모나리자몽
    95
    2020-10-13 21:52:30

    #Frudy

    넵 코드 올렸습니다!

  • Frudy
    6k
    2020-10-13 22:12:42

    번들링된 파일만 봐서는 못찾는게 당연해요.


    문제의 updateStats() 함수는 첫번째 (function ... 안에 있구여

    그 첫번째 (function이 닫히고,


    그 다음 (function이 오고있죠?


    updateStats함수는 첫번 째 (function ...안에서만 유효해요.

  • Frudy
    6k
    2020-10-13 22:13:34 작성 2020-10-13 22:13:55 수정됨

    그나저나 웹팩이 이렇게 번들링을 한 이유가 궁금하네요.

    전 항상 뭔가 잘못되면 웹팩이 이래서 번들링 못한다고 때려치던데...


    번들링 되기 전 원본소스를 올려주실수있나요?


  • 모나리자몽
    95
    2020-10-14 00:07:29

    #Frudy

    넵 올려드릴게요 그러게요 쭉봐보니 함수가 서로 다른 함수에 정의되어 있네욤..



    gamification-client.js


    const SERVER_URL = "http://localhost:8000/api"
    
    function updateLeaderBoard(){
        $.ajax({
            url: SERVER_URL + "/leaders"
        }).then(data => {
            $('#leaderboard-body').empty();
            data.forEach(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: data => {
                $('#stats-div').show();
                $('#stats-user-id').empty().append(userId);
                $('#stats-score').empty().append(data.score);
                $('#stats-badges').empty().append(data.badges.join());
            },
            error: () => {
                $('#stats-div').show();
                $('#stats-user-id').empty().append(userId);
                $('#stats-score').empty().append(0);
                $('#stats-badges').empty();
            }
        })
    }
    
    $(document).ready(() => {
        updateLeaderBoard();
        $('#refresh-leaderboard').click(event => {
            updateLeaderBoard();
        })
    })
    


    multiplication-client.js


    const SERVER_URL = "http://localhost:8000/api"
    
    function updateMultiplication() {
      $.ajax({
        url: SERVER_URL + "/multiplications/random",
      }).then(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) {
      let userId = -1;
      $.ajax({
        url: SERVER_URL + "/results?alias="+alias,
        async: false,
        success: data => {
          $('#results-div').show();
          $('#results-body').empty();
          data.forEach(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(() => {
      updateMultiplication();
    
      //폼 기본 제출 막기
      $("#attempt-form").submit(event => {
        event.preventDefault();
        let a = $(".multiplication-a").text();
        let b = $(".multiplication-b").text();
        // let $form = $(this),
        //   attempt = $form.find("input[name='result-attempt']").val(),
        //   userAlias = $form.find("input[name='user-alias']").val();
        let attempt = $("input[name='result-attempt']").val();
        let userAlias = $("input[name='user-alias']").val();
        //json
        let 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 (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(() => {
          updateMultiplication();
          setTimeout(() => {
            let userId = updateResults(userAlias)
            updateStats(userId);
            updateLeaderBoard();
          })
        })
      })
    })


  • 모나리자몽
    95
    2020-10-14 00:57:25

    아 제가 웹팩의 기본을 아예 모르고있었더군요 

    모듈을 정의하고 모듈을 사용하도록 로딩하는 방법은 어렵지 않다. 다만 모듈로 만든 파일은 바로 웹 페이지에 넣어 브라우저에서 실행할 수 없다. webpack으로 컴파일해 브라우저에서 실행할 수 있는 형태로 바꿔야 한다.

    https://d2.naver.com/helloworld/0239818


    기본적으로 모듈들을 정의해서 서로 의존하게 만든 후 webpack으로 번들링하는 것이 당연한 과정이였는데 제가 이부분을 놓치고 바로 '적용방법' 만 보고 끼워넣어서 이런 현상이 발생했네요;; 하하..


  • Frudy
    6k
    2020-10-14 22:09:24

    오... 좋은링크 감사합니다. 저도 웹팩 잘 몰라요어

    근데 왜 알람이 안왔지 직접 안왔으면 naver d2 링크 못가져갈뻔..


    그나저나 여전히 신기한건

    import 안하신건가? 라고 추측을 하긴 했어요...

    그런데 분명 그러면 웹팩이 번들링 못하겠다고 때려칠탠데.. 제 웹팩은 항상 때려쳤는데..

    질문자님 웹팩은 왜 얌전히 번들링했을까요.


    이부분은 저도 모르게씁니다..

    링크는 감사히 잘 쓰겠습니다~

  • 로그인을 하시면 답변 을 등록할 수 있습니다.