19.12.17 개발기록 -[Javascript] 개발 중 비동기로 인한 이슈 사항

자 오늘 포스팅할 내용은 무엇이냐~

Javascript의 가장 큰 특징 중 하나인 비동기로 인해 일어나는 이슈 중 한가지 !

우선 비동기가 무엇이냐? 특정코드의 연산이 끝나기 전에 코드의 실행을 끝내지 않고, 그 다음 코드를 먼저 실행하는 자바스크립트의 특성이다. 

그러니까 내가 적어놓은 코드를 위에서부터 아래로 내려가기는 하지만, 특정코드를 불러놓고 그것이 실행될 때까지 정지하고 기다리는 것이 아니라, 불러놓고 오든지 말든지 그냥 그다음 코드를 실행하면서 쭉쭉 내려간다는 것이다.

나는 Javascript로 개발에 입문을 해서, 이게 특이한 건지, 뭔지 몰랐지만 요거 때문에 Javascript 개발자들이 디-게 힘들어하는 것 같았다.

특히나 내가 아래 구현해놓은 코드에서 ajax를 이용할 때 이 특성이 크게 잘 나타난다.

중간에 sv_controller.getMarketBettings가 보이는 가? 여기가 ajax를 이용하는 부분이다.

ajax를 이용하여 데이터를 불러올 때, Javascript는 ajax로 데이터를 불러오기를 시켜놓고, 데이터가 오기까지 기다리지 않고, 그다음 코드들을 실행하며 내려간다.

위 코드를 불러오는 클릭 이벤트를 실행했을 때 약간의 끊김과, 스크롤이 제일 위로 올라가는 현상이 발생했다.

그래서 이게 무엇때문에 그러는 가....봤더니, 위 코드의 3번째 줄에 $(parent).empty(); 를 실행하여 parent를 비워준 다음에, ajax를 통한 데이터를 불러들여서 그러는 것 같았다.

그리하여 위 코드와 같이 순서를 조금 바꿔 ajax로 데이터를 불러온 후에 $(parent).empty();를 통하여 parent를 비워줬더니, 위와 같은 현상이 없어졌다.

내가 발견한 이 이슈가 비동기와 얼마나 관련이 있을 지 확실하진 않지만, 오늘 다시한번Javascript 비동기에 대해서 자각할 수 있는 시간이었고, 나중에도,비동기를 신경써서 개발할 수 있어야겠다고 생각할 수 있었다!

오늘 하루도 한걸음 더 성장할 수 있어서 행복하고, 감사하다!

 

이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :) 감사합니다 !