JS - Local 서버랑 개발/운영 서버의 동작이 달라요.

며칠 전에 정말 파악이 어려운 문제에 봉착했었다.

분명 Local 서버에서 실행했을 때는 문제없었던 코드가

개발/운영 서버에만 배포해서 실행하면 문제가 생겼다.

 

대략 어떤 문제냐 하면,

3개의 Object들을 합쳐서 1개의 Object로 만들어야 하는데

자꾸 3개 중에 1개가 빠지고 2개만 Object로 만들어지는 현상이었다.

 

해당 코드는 대략 아래와 같았다. (JavaScript)

var originalParam = 1;
makeFromParam(originalParam);

function makeFromParam(originalParam) {
    var originalParam = [1,2,3]
    var secondParam = [4,5,6]
    var thirdParam = [7,8,9]

    var resultParam = []

    for(a=0; a<3; a++) {
        resultParam.push([originalParam[a],secondParam[a], thirdParam[a]])
    }

    console.log(resultParam);
}

originalParam, secondParam, thirdParam에 있는 데이터들을

resultParam으로 만들어 주도록 하는 코드다. 

아무리 뜯어봐도 딱히 문제는 없어 보였다.

(물론 makeFromParam의 parameter가 함수 내의 originalParam이랑 이름이 겹치긴 하지만

함수 내에서 선언된 originalParam을 쓰게 되어 있다.)

 

그러나 위의 코드가 개발/운영서버에 배포하면 아래와 같이 바뀌었었다.

(아래와 같이 재현해보려고 집에서 closure, yuicompressor 등을 사용해봤지만 똑같이 재현되지는 않아 일부 수정함)

var originalParam = 1;
makeFromParam(originalParam);

function makeFromParam(b) {
    b = [1, 2, 3];
    var a = [4, 5, 6],
        e = [7, 8, 9],
        c = [];
    for (a = 0; 3 > a; a++) c.push([b[a], a[a], e[a]]);
    console.log(c)
};

for 문에서 var로 선언한 a가 0으로 초기화되면서 c.push부분에서 undefined로 입력이 되니

결국 3개 중에 1개가 빠지고 2개만 Object로 만들어지는 현상이 발생한 것이었다.

 

이를 해결하기 위해

for문에서 쓰이는 index 변수를 var로 선언해서 마무리 지었다.

 

별로 문제가 될 거 같지 않은 부분이었는데.. ducktyping언어로 코딩할 때는 항상 유의해야 할 것 같다.

 

위의 문제를 파악하고 해결하기 위해

Local 서버와 개발/운영 서버에 서비스를 띄우는 과정을 차이를 알게 되었고

Chrome에서 개발자 도구로 개발/운영 서버에 올라간 서비스도 디버깅하는 방법을 배우게 되었고 (덤으로 vscode에서 Beautify plug-in 사용법도 익힘)

JS 코드 작성 시 유의해야 할 점도 배우게 되었던

매우 뜻깊은 Trouble Shooting 사례였다.