( ※ 모든 사진은 클릭시 확대해서 보입니다 )

자바스크립트 디버거에 대해 알아보자.

이미 알고 계신분도 많지만, 모르고 있으신 분들도 많다고 생각한다..

저랑 비슷한 경력이나 배우고 있거나 이제 일을 막 시작했거나 하는경우에는 말이다..(참고로 전.. 현재 1년쯤..)

디버거라는 녀석은 정말정말 많은 도움이 된다.

오류를 찾아 수정할때라던지, 다른 사람의 소스를 분석할때라던지 정말정말 도움이 된다고 생각한다. (다른분들은 모르겠지만 개인적으로는..)

그래서 알아두고 있으면 정말 코딩하는데 도움이 될 것이라 저는 생각합니다!!ㅎ

지난번에 중복제거에서 잠깐 언급을 했었는데,

그 소스를 가지고 크롬에서 간략하게 보도록 하겠습니다.

위와 같이 어떠한 로직에 이클립스에서 디버거를 할때 breakpoints 를 찍듯이 지점에 debugger; 라고 적습니다. 그리고 저장을 하고 브라우저에서 어떻게 되는지 확인을 해보겠습니다.

위와 같이 화면을 띄우고 F12를 눌러 개발자모드를 엽니다!

그리고 debugger가 적혀있는 로직을 태우면 다음과 같이 debugger모드가 실행됩니다.

위와 같이 debugger 모드가 실행되는 것을 볼 수 있고, 우리는 이 것을 제어 할 수 있습니다.

많이 쓰는 3가지 정도 기능을 알아보면

첫번째, 단축키로는 F8 이고, 다음과 같은 버튼이다. 왼쪽 화면과 오른쪽 화면에서 모두 찾아 볼 수 있다. 이 버튼은 쉽게 말해서 다음 debugger라던지 breakpoints를 찾아간다고 보면 된다. 한번에 슈융 하고 넘어간다. 만약에 다음 debugger랑 beakpoints가 없으면 디버거가 종료 된다고 보면 된다.

두번째, 단축키는 F10이고, 다음과 같은 버튼이다. 이 역시 많이 쓰이기 때문에 왼쪽화면과 오른쪽 화면에서 모두 찾아 볼 수 있다. 이 버튼은 쉽게 말해서 한줄씩 넘어간다고 보면 된다. 이클립스에서는 F5 단축키에 해당한다, 그래서 디버거를 사용하다보면 자주 이클립스랑 혼동을 한다...ㅠ

세번째는, 단축키는 F11이고, 다음과 같은 버튼이다. 이는 많이 사용이 안되다보니 오른쪽에만 배치되어 있는 것 같다. 이 버튼은 쉽게 말하면 function이 보이면 다 들어간다고 보면 된다. 한줄씩 넘기다가 어떠한 function을 만나면 그 function으로 넘어가게 된다.

다음으로 간략하게 어떻게 넘어가지는 보여드리겠습니다.

관리자도구를 열어 debugger를 입력한 곳에 debugger가 걸린 모습입니다.

첫번째는 가장 많이 사용되는 F10을 눌러보겠습니다.

그럼 다음과 같이 한줄이 넘어가는 것을 볼 수 있습니다.

두번째는 해당줄에 function이 있으면 찾아 들어가는 F11을 눌러보겠습니다.

그럼 다음과 같이 인클루드한 jquery js 파일로 찾아 가는것을 볼 수 있습니다.

그 다음 이 함수를 빠져나와 마지막으로 F8을 눌러보겠습니다.

위에 모습은 jqeury 함수를 빠져나온 다음 모습이고, F8을 누르기전에는 위에서도 간략하게 설명 했듯이 다음 debugger 구문이 있거나, breakpoints가 있어야 합니다. 그래서 저는 F8을 누르기 전에 57번 라인에 breakpoints를 지정 해놨습니다. ( breakpoints를 지정하는 것은 해당 라인 숫자를 클릭하면 간단하게 지정 할 수 있습니다.)

그 후에 F8을 누르면 다음 breakpoints로 이동 하는 것을 볼 수 있습니다.

이 과정에서 제가 생각하는 가장 좋은 장점은 콘솔창을 제어 할 수 있는 점이라고 생각합니다. 이클립스 같은 경우에는 variable 테이블이 있긴 하지만 콘솔창에서 직접 변수를 써서 확인하거나 코딩을 할 수가 없는데 이 곳에서는 그 것이 가능해 코딩을 하기에 정말 좋은 것 같습니다. 예를 들어 스크립트 구문을 짜고 이곳에서 확인하는 것이 아니라 이 곳에서 먼저 테스트를 해보고 구문을 넣을 수가 있어서 확인과정을 한번 줄 일 수 있습니다.

위와 같이 콘솔창에서 실행구문이 넘어간 후론 콘솔창에서 입력하여 확인 할 수가 있으며, 전혀 없는 변수인 a를 선언해서 확인할 수 있듯이 테스트도 해 볼 수 있습니다. 그리고, 그 해당 변수의 타입에 따라 딸려 있는 함수를 바로 확인 할 수 있어 사용하기에도 더욱 편리합니다.

더욱 와 닿는걸 하나 보여드리면,

엑셀 업로드 테스트를 하는 로직인데 ajax로 가서 원하는 데이터를 여러개 가져 오는 것입니다. returnData라는 변수에 담겨져 오는데, 여러가지 타입이 담겨져 옵니다. 처음으로 returnData라는 것을 입력하면, 그 안에 map 데이터로 data, sheetContent라는 이름을 가진 것이 있고, 그 안에는 또 returnData.data를 입력해서 확인하면 문자 배열이 하나 있고, 다른 returnData.sheetContent에는 여러개의 배열들이 있고 그중에 하나를 골라 returnData.sheetContent[0]을 입력하면 map으로 들어있는 데이터를 확인 할 수 있습니다. 그렇기에 좀 더 정보를 확인 할 수 있고, 코딩하기에도 좋다고 생각을 합니다.

결론은!! debugger를 사용해 좀 더 쉽고 빠르게 오류도 확인하고, 정보도 확인해서 잘 하는 개발자가 같이 됩시다!ㅎ

아 그리고 마지막으로, 다른 브라우저도 사용이 가능하다는것을 보여드리고 마무리 짓겠습니다.

< 익스프롤러, 개발자모드 F12 >

< 파이어폭스, 개발자모드 F12 >

<오페라, 개발자모드..를 못찾아서 우클릭해서 요소검색으로 했습니다..>

오늘도 좋은 하루 되세요  ^ ^ㅎ

( ※ 답만 필요하신분은 아래에서 빨간 박스를 참조하시기 바랍니다. )

javascript, jquery를 이용한 배열 중복제거를 알아보자!

중복제거에 대한 로직이 필요해서 처음엔 찾아보지 않고 혼자 생각을 해서 해보았다.

그리 어려운 로직은 아니였으나, 여러번 수정을 하긴했다...

우선 생각한 로직은, A라는 배열에 있는 값들을 B라는 빈 배열로 하나씩 옮길때마다 B 배열을 탐색해 그 값이 있는지 없는지 검사를 하고 있으면 넣지 않고, 없으면 넣는 간단한 로직이다.

화면으로 테스트를 보여주기 위해 간단하게 다음과 같이 만들어보았다.

왼쪽 맨 윗칸에 아무거나 입력을 하고 ▽ 버튼을 누르면 아래 멀티 셀렉트 박스로 들어가도록 했고, 중복제거 버튼을 누르면 중복을 제거하고 결과를 보여주도록 만들었다.

간단하게 다음과 같이 테스트를 해보자.

(※ 중복제거1은 검색전 내가 짠 로직이고, 중복제거2는 검색 한 로직이다..)

중복제거1 버튼을 누르면 다음과 같은 결과가 나타난다.

1과 2와 33이 2개씩 있었는데, 제거가 되고 하나씩들만 남아 중복 값들이 제거되는 것을 확인할 수 있다! 이제 어떻게 구현했는지 한번 봐보자!

머 우선 위에는 select 박스 사이즈 구해서 for문을 돌려 jquery로 select 박스 값을 인덱스로 찾아 preArray에 배열로 넣었다.

그 다음이 박스친 중복제거 로직이다.

afterArray는 처음에 빈 배열이기 때문에 처음에는 무엇이든 들어가도 중복이 되지 않는다, 그렇기 때문에 처음으로 afterArray에 들어가는 놈은 중복체크 없이 바로 넣고 continue 된다. 그 뒤론, preArray 값을 차례대로 옮길때마다 afterArray를 탐색해 똑같은 같이 있으면 chkDupl 이라는 변수를 true로 주고 탐색이 끝난후 chkDupl의 변수값이 true로 변하지 않고 false로 남아 있는다면 중복값이 없는것이기 때문에 그때 preArray의 값을 afterArray로 옮겨준다.

 처음에는 고민을 좀 했었는데, 하고 나니 생각보다 간단한 로직이었다.

(참고로 위 소스는 조금의 필터를 거친것이다... 처음에는 더 지저분했는데.. 보다보다 보니 조금은 깔끔해졌다.. 역시.. 머든.. 계속 보다보면 좋아지는것 같다..)

그 다음에 검색을 해봤는데, jquery의 each라는 놈을 써서 엄청 간략하게 하는 것을 찾았다.. 신기했다.. 역시 많이 알수록 좋은것 같다..

(jquery each함수는 for문과 마찬가지로 반복문의 일종이다.)

중복제거2 함수에 그걸 구현해봤다, 테스트 해보면 다음과 같은 결과를 볼수 있다!

 중복제거1을 사용한 것과 같은 결과를 나타내주며, each를 사용한 로직은 다음과 같다.

 중복제거 로직 위아래는 위에 소스와 똑같고, each함수를 살펴보자.

보면 preArray배열를 기준으로 반복문이 돈다. function 파라미터의 index는 preArray의 index가 되고 element는 preArray index의 value가 된다.

그 안에 inArray라는 함수가 있다, 이 녀석은 해당 배열에 내가 찾는 value가 있냐 없냐를 체크해주는 함수이다. 있을경우에는 index 값을 리턴해주고 없을경우에는 -1을 리턴해준다. 그걸 이용하면 위에 로직과 마찬가지로 preArray에서 afterArray로 옮길때마다 중복을 검사해 없을 경우에만 넣는 로직이다. 첫번째 로직과 똑같은 로직임에도 불구하고 좀 더 신기술로 간단하게 구현이 되는 것을 알 수 있다.

 저는 보자마자 신기했습니다.. 이제 하나하나 배우고 있는 입장에서..ㅋ,ㅋ

 그나저나 저는 오늘도 이렇게 또 하나를 배웠습니다..ㅎ,ㅎ

아! 그리고 debugger라는 녀석이 있습니다!!

제가 의도치 않게 의도적으로(?) 빨간줄 쳐놨는데, 이놈에 대해서도 조만간 알아봅시다, 제 생각엔 웹 개발하는 사람에겐 참 유용한 놈입니다!!ㅎ

https://0taeng.tistory.com/21