336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

[ ※ 결론만 필요하신 경우에는 맨 밑으로 내려가시면 될것 같습니다!!! ]

 

어쩌다보니.. IE5 환경을 기본으로 개발을 하게 되었는데...

그냥 흔히 쓰던 Date를 쓰는데... 아래와 같이 NaN이 뜨더라...

 

IE(Internet Explorer) 5
CHROME

크롬으로 개발할때는.. 정말 정말.. 위처럼.. 당연한듯이 썼는데.. 안되더라고요..ㅠ,ㅠ

그래서 호기심에 어디까지 되나 테스트를 해보게 되었는데.. IE5~8까지는 '-' 구분자로 이루어진 날짜 형식을 지원하지 않고 IE9부터 지원하는걸 아래와 같이확인 해볼 수 있었습니다..

 

IE(Internet Explorer) 7

 

IE(Internet Explorer) 8

 

IE(Internet Explorer) 9
IE(Internet Explorer) 10
IE(Internet Explorer) 11

 

그럼 이제 날짜 지정을 해서 선택하려면 어떻게 해야 하나!?

아래와 같이 다른 형식의 날짜를 쓰거나 Number 타입의 파라미터를 넣어주면 됩니다!!!

 

첫번째로 구분자가 '-'가 아닌 '/'로 String 형태로 선언('YYYY/MM/DD')을 해주면 위와 같이 정상적으로 표현되는 걸 확인할 수 있습니다.

두번째로 파라미터로 년 월 일을 Number 형태로 선언(YYYY, M-1, D)을 해주면 위와 같이 정상적으로 표현되는 걸 확인할 수 있습니다.

단, 이 경우에는 주의하실점이 있는데, Date 객체를 써보신 분들은 아실 수 있지만, 다시 한번 말씀드리면, 월의 경우는 원하는 달에서 -1을 한 값을 넣어줘야 합니다. (예를들어, 1월이라면 0)

추가적으로 시분초를 생략하면 0시0분0초로 초기값이 지정되어 있는데, 위와 같은 형태로 String일때는 한칸 띄고 01:01:01과 같은 형태('YYYY/MM/DD HH:mm:ss')로 시분초를 선언하시면 시분초도 지정할 수 있으며, Number형태로 넘길때는 뒤에 시분초를 콤마(,)를 구분자로 Number 형태(YYYY, M-1, D, H, m, s)로 선언하시면 지정할 수 있습니다.

결론은, IE5~8은 '-' 구분자의 String 선언은 정상적으로 되지 않고 IE9부터 지원이 되기 때문에 '/' 구분자의 String 형태로 선언을 하던가 Number 형태로 선언을 해서 사용을 하시면 될것 같습니다!

도움이 되셨기를 바라며, 이 글을 마치겠습니다.

오늘도 행복한 하루 되시기 바랍니다ㅎ,ㅎ

저작자표시

'[WEB] javascript, jQuery, html, css ...' 카테고리의 다른 글

[Javascript] == (동등연산자, euqality operator ) vs === (일치연산자, identity operator)  (1) 2019.04.23
웹 코딩 툴 Repl.it  (2) 2019.04.15
tr onclick 특정 td 제외  (3) 2018.11.22
[꾸울팁!] a 태그 onclick 사용하기!!!  (0) 2017.10.30
javascript debugger (자바스크립트 디버거)  (0) 2017.08.14
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

 프로그래밍 공부를 C언어로 시작하고 비교 연산자에서 같다라는 표현은 == 이 연산자를 사용해야 한다고 배우고 줄곧 ==(동등연산자, equality operator)만을 사용했었습니다.

 그러던 어느날 다른 분 자바스크립트 소스를 보다 ===(일치연산자, identity operator)를 사용 하는 걸 보고 궁금해서 알아보게 되었고, 알아본 것을 같이 공유하고자 이 글을 포스팅하게 되었습니다!

 

== vs ===

 자바스크립트에서는 == 연산자를 사용시에 type이 다를 경우에는 자동으로 형변환을 해서 비교를 한다고 합니다.

위에 예제에서 9,10,11번 라인을 보면 false가 예상되는 비교지만 실질적으로는 자동으로 형변환되서 true가 출력되는걸 확인 할 수 있습니다. 그리고, 8번 라인의 경우에는 type이 같고 값도 같으니 당연히 true가 출력되는걸 확인할 수 있고, 12번 라인의 경우에는 type은 같으나 값이 달라 false가 출력되는걸 확인할 수 있습니다.

 

 반면에, === 연산자를 사용시에는 type이 달라도 형변환이 이루어지지 않기 때문에, type이 다르다면 당연히 다른값이 되며, 우리가 실질적으로 원하는 비교를 한다고 보시면 됩니다. 그래서 16,17,18번 라인을 보면 형변환이 되지 않으니 당연히 number와 string은 같을 수 없기에 false가 출력되고, 15번 라인의 경우에는 타입이 같고 값도 같기 때문에 true가 출력되고, 19번 라인의 경우에는 타입은 같지만 값이 달라 false가 출력되는 것을 볼 수 있습니다.

 

 

 저 같은 경우에는 숫자를 비교할 경우에 저도 모르게 string으로 선언된 1과 number로 선언된 1이 다른 값이라고 생각해야되는데 같다고 생각해서 사용을 했었습니다. 예를 들어 서버에서 가져온 데이터가 문자열('1')로 넣어있든 숫자(1)로 넣어져있든 == 연산자로 비교하여 같다고 처리를 했었습니다. 이걸 공부하면서 이처럼 사용하던게 틀리다고는 하기엔 애매하지만 지양해야하는 방식이란걸 생각되며, 앞으로는 type도 같아야 된다라고 생각하면서 === 연산자를 사용하여 비교를 해야겠다라는 생각을 하게 되었습니다. 

 

 이 글을 보신분들은 자바스크립트에서 같다라는 비교연산자를 사용하실때 한번 더 생각해보시면 좋을것 같습니다ㅎㅎ

해당 포스팅이 도움이 되셨기를 바라며 공부하다가 찾아본 다른 예시를 몇개 실행해본 것을 아래 공유해봅니다.

 이중에 0==-0, 0===-0 의 결과 true와 NaN==NaN, NaN===NaN의  결과 false는 어떻게 이 결과가 나오는지 사실..

잘 모르겠습니다.. 나머지는 그래도 어느정도 예측을 해볼만 한데 이 두 녀석은 잘 모르겠네요..ㅠ,ㅠ

 

== vs ===

 

 

 

'[WEB] javascript, jQuery, html, css ...' 카테고리의 다른 글

IE(Internet Explorer) DATE NAN  (2) 2019.10.23
웹 코딩 툴 Repl.it  (2) 2019.04.15
tr onclick 특정 td 제외  (3) 2018.11.22
[꾸울팁!] a 태그 onclick 사용하기!!!  (0) 2017.10.30
javascript debugger (자바스크립트 디버거)  (0) 2017.08.14
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

 유튜브를 보다가 얼마전에 알게된 웹 코딩툴을 하나 소개하려합니다.

 UI도 깔끔하고 간단한 무언가를 보여줄때라던지 테스트할때 정말 좋은 것 같아 소개해봅니다!

 

 구글에서 repl이나 repl.it 을 검색하면 최상단에 검색결과가 나오고 클릭해서 접속 할 수 있습니다.

 

또는 주소창에서 https://repl.it 을 바로 입력해도 접속 할 수 있습니다.

 

딱히 의미는 없지만, 검색해서 들어가면 로그인창으로 바로 이동하고 주소를 입력해서 접속하면 위와 같은 홈화면으로 이동합니다.

처음 하는 이용자는 당연히 Sign up을 클릭해서 회원가입을 해주도록 합니다.

(회원가입 과정이 귀찮을수 있지만 회원가입 절차도 간단하고, 필자는 그 이상의 가치가 있다고 생각합니다.)

 

 

위와 같이 이름, 이메일, 패스워드만 입력해서 가입을 하거나 구글,깃허브,페이스북을 연동해서 가입하셔도 됩니다.

필자는 구글연동으로 해보았습니다.

(회사정보 같은거는 따로 입력 안하고 그냥 SAVE를 누르셔도 상관없습니다.)

 

그럼 다음과 같은 화면으로 넘어가고 Quick Start Guide를 누르시면 가이드 페이지로 넘어가고 Start coding no를 누르시면 시작 하는 화면으로 넘어갑니다.

(가이드페이지 URL : https://repl.it/site/docs/misc/quick-start )

 

 

다음과 같은 페이지가 뜨고 해당 페이지에서 원하는 언어를 선택하면 코딩을 할 수 있는 페이지로 넘어갑니다.

(필자는 간단하게 보여주기 위해 HTML을 선택했습니다.)

 

왼쪽 상단에 아이디와 프로트 명이 나오며 프로젝트명과 설명은 수정이 가능합니다.

 

 

그리고 html 코드에 <h1>안녕하세요</h1> 을 <body> 태그 안에 작성하고 상단에 run을 클릭하면 오른쪽 화면에 결과를 볼수 있습니다. (console 탭에서는 console 내용도 확인 할 수 있습니다.)

왼쪽에 폴더와 파일도 등록,삭제,수정 할 수 있으며 다른 코딩툴을 쓰는것 처럼 이용하실 수 있습니다.

간단하게 html 말고 css와 js를 수정후 결과물을 확인해보면 다음과 같습니다.

 

css 코드 작성후 run → 결과 확인
javascript 코드 작성후 run → 결과 확인

 

이 처럼 편리하게 간단한 소스를 테스트 해볼 수 있습니다.

그리고 상단에 my repls를 선택하면 그동안 작업한 프로젝트를 볼수 있습니다.

 

 

다음과 같이 그동안 프로젝트를 관리할수 있어, 정말 좋은 웹 코딩 툴이라고 생각이 됩니다.

Repl.it이라는 웹 코딩툴을 간단하게 소개해드렸는데요, 도움이 되셨으면 좋겠습니다.

 

아 추가로 상단에 +new repl 버튼을 선택하면 현재 화면에서 팝업으로 새 프로젝트를 생성 할 수 있습니다.

단, 생성을 하면 기존꺼는 사라지고 새로운 프로젝트가 보여지게 됩니다.

(그렇다고 해서 삭제되는것이 아니라, my repl에 가잘 간직 되어 있는 것을 볼 수 있습니다.)

 

그리고 이 작업들이 임시로 되는게 아니라 수시로 저장이 되고 계정에 프로젝트 별로 저장이 되어 관리도 할 수 있어, 정말 좋다고 생각이 됩니다.

 

깃허브와도 연동할 수 있는것 같고, 다양한 언어들을 사용 할 수 있으니, 한번 사용해보시면 좋을것 같습니다.

 

오늘도 좋은 하루 되시고, 행복한일만 있으시길 바라겠습니다!

 

'[WEB] javascript, jQuery, html, css ...' 카테고리의 다른 글

IE(Internet Explorer) DATE NAN  (2) 2019.10.23
[Javascript] == (동등연산자, euqality operator ) vs === (일치연산자, identity operator)  (1) 2019.04.23
tr onclick 특정 td 제외  (3) 2018.11.22
[꾸울팁!] a 태그 onclick 사용하기!!!  (0) 2017.10.30
javascript debugger (자바스크립트 디버거)  (0) 2017.08.14
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


 테이블에서 <tr>에 onclick을 넣다보면 일부 td에선 안쓰고 싶을때가 있습니다..

 예를들어 체크박스라던지 다른 이벤트박스라던지 머 그런것들을 쓸 때 입니다.

 그때는 다음과 같이 특정 td에 onclick="event.cancelBubble=true" 를 넣어서 해당 td에선 이벤트를 막아주는 방법이 있습니다.


 간단하게 예를 들어보면


 1) 다음과 같은 테이블에 tr에는 onclick="alert('클릭')이 선언되어 있고 td에 체크 박스 2개가 있습니다.


 2) 첫번째 체크박스를 클릭하면 다음과 같이 alert 창이 뜨고 


 3) 그 후에 다음과 같이 체크가 됩니다.


 4) 반면, 두번째 체크박스를 클릭하면 onclick="event.cancelBubble=true"가 선언되어 있기 때문에 alert창이 뜨지 않고 체크만 됩니다.



 부족한 포스팅이지만, 해당 포스팅이 도움이 되시길바라며...

 오늘도 좋은하루되세요~


 아 그리고 별건 아니지만 테스트 할수 있도록 샘플 파일을 올려두겠습니다.

 (이상한 파일 아니니 안심하셔도 됩니다!ㅎㅎ)


test.html


저작자표시

'[WEB] javascript, jQuery, html, css ...' 카테고리의 다른 글

[Javascript] == (동등연산자, euqality operator ) vs === (일치연산자, identity operator)  (1) 2019.04.23
웹 코딩 툴 Repl.it  (2) 2019.04.15
[꾸울팁!] a 태그 onclick 사용하기!!!  (0) 2017.10.30
javascript debugger (자바스크립트 디버거)  (0) 2017.08.14
javascript, jquery 배열(Array) 중복제거 !  (0) 2017.08.11
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

웹 개발을 하다보면


버튼을 a태그로 해서 css를 입혀 만드는 경우가 많다.

그럴 경우에 this라는 놈을 쓰고 싶은 경우가 있는데

a태그에서 href에 javascript:함수명(this)를 쓰면.. 내가 원하는 결과를 얻을 수가 없습니다!!

onlick 속성을 써야만 함수명(this)에서 내가 원하는 this 값을 가져오는 것을 알 수 있습니다.

그래서 a태그에 onclick을 두면 href 때문에 고민을 하는 경우가 있습니다.

그럴때 다음과 같이 href을 막고 onclick을 사용하면 해결할 수가 있습니다.


 <a href="javascript:void(0); onclick="함수명(this)">꾸울팁</a>

 

 

href가 동작은 하지만 void(0)으로 사실상 동작이 안하는 식이 되고 onlcick이 실행되는 것을 볼 수 있습니다.


시간이 되면, 캡쳐까지 했을텐데, 시간이 부족하여, 글로만 남깁니다.


내용이 알차진 않지만 이 포스팅을 보시고 잘 해결되셨으면 좋겠습니다.

저작자표시

'[WEB] javascript, jQuery, html, css ...' 카테고리의 다른 글

웹 코딩 툴 Repl.it  (2) 2019.04.15
tr onclick 특정 td 제외  (3) 2018.11.22
javascript debugger (자바스크립트 디버거)  (0) 2017.08.14
javascript, jquery 배열(Array) 중복제거 !  (0) 2017.08.11
톰캣(TOMCAT) UTF-8 설정!!  (0) 2017.08.10
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

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

 

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

 

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

저랑 비슷한 경력이나 배우고 있거나 이제 일을 막 시작했거나 하는경우에는 말이다..(참고로 전.. 현재 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 >

 

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

 

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

 

저작자표시

'[WEB] javascript, jQuery, html, css ...' 카테고리의 다른 글

tr onclick 특정 td 제외  (3) 2018.11.22
[꾸울팁!] a 태그 onclick 사용하기!!!  (0) 2017.10.30
javascript, jquery 배열(Array) 중복제거 !  (0) 2017.08.11
톰캣(TOMCAT) UTF-8 설정!!  (0) 2017.08.10
form 태그 안에 있는 button 사용 시 리로드!?  (0) 2017.08.10
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

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

 

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

저작자표시

'[WEB] javascript, jQuery, html, css ...' 카테고리의 다른 글

[꾸울팁!] a 태그 onclick 사용하기!!!  (0) 2017.10.30
javascript debugger (자바스크립트 디버거)  (0) 2017.08.14
톰캣(TOMCAT) UTF-8 설정!!  (0) 2017.08.10
form 태그 안에 있는 button 사용 시 리로드!?  (0) 2017.08.10
차트.js  (0) 2017.08.03
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

 톰캣 UTF-8 설정!!

 

 이클립스에서 모든 캐릭터셋을 UTF-8로 했다고 방심하지 말자..ㅠ,ㅠ

  ( ex : 프로젝트, 프로퍼티, Web.xml )

 방금 다한줄 알았는데... 톰캣 서버 안해서 혼쭐났다...

 꽤 오랜 시간 캐릭터셋 어디가 문제인지 찾아본것 같다...

 

 혹시나 안했을 경우에는, 톰캣 sever.xml 에서 다음 라인을 찾아

 

 

 다음과 같이 URIEncoding = "UTF-8" 을 추가해주자!

 

 

 그리고 깨지지 않는 한글을 봅시다!ㅎ

저작자표시

'[WEB] javascript, jQuery, html, css ...' 카테고리의 다른 글

[꾸울팁!] a 태그 onclick 사용하기!!!  (0) 2017.10.30
javascript debugger (자바스크립트 디버거)  (0) 2017.08.14
javascript, jquery 배열(Array) 중복제거 !  (0) 2017.08.11
form 태그 안에 있는 button 사용 시 리로드!?  (0) 2017.08.10
차트.js  (0) 2017.08.03
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 엑셀 업로드 관련 테스트를 하는 도중에.. 문제가 발생했다..ㅠ,ㅠ


 form태그 안에 버튼이 있고, 그 버튼을 클릭하면, 기능은 동작하는데, 

먼가 화면이 다시 불러와지고, 기능이 동작해서 불러온 것들이 없어지는데....


첨에는.. 어리둥절 했다.. 머가 문제인지.. 사실 잘 몰랐다...

하나씩 뒤져보니.. form 태그 밖에 있는 버튼은 문제가 없었다..

알고보니.. form 태그 안에 있는 버튼은.. submit 동작을 하는 것이였다..

form 태그에 action 도 지정 안해놓고 그래서 그런지.. 애꿎은 화면만 다시 불러오더라...


서론이 길었는데, 잠깐 화면을 보면,


 

 

( 테스트용이여서... 너무 없어보이긴 하네요...ㅠ )

 

대충 내용은 엑셀 파일을 선택해서, gO 라는 버튼을 누르면 아래쪽에 있는

셀렉트 박스에 시트 정보를 넣어주는 것입니다.

 

기존에는 위와 같이 단순히 버튼으로 했더니, submit  동작을 해서 문제가 발생한것입니다. 그래서 제가 찾은 해결법은 2가지가 있습니다.

 

첫번째는, button에 type attribute에 button 으로 주는 방법입니다.

 

 

두번째는, form에 onsubmit attribute에 return false 를 주는 방법입니다.

 

 

 

위 처럼 2가지 방법을 사용하면, 폼 안에 버튼을 사용하더라도, submit 처리가 다시 되지 않고, 정상적으로 작동하는 것을 다음과 같이 확인 할 수 있습니다.

 

 

 아 그리고 궁금해서 a 태그도 확인해봤는데, a태그는 문제없이 동작하는 것을 확인 하였습니다. a태그를 확인한 이유는 제 경험상 보통 버튼은 저렇게 버튼 태그보다 a태그에 css를 입혀서 사용 하는 경우가 많아서 테스트 해보았습니다. 기존에는 그래서 a태그로 사용해 몰랐고, 간단하게 테스트하려고 버튼 태그를 하다 보니 이와 같은 현상을 발견할 수 있었던 것 같고, 오늘 또 하나 배워가는 것 같습니다.ㅎ,ㅎ

 

 

 

저작자표시

'[WEB] javascript, jQuery, html, css ...' 카테고리의 다른 글

[꾸울팁!] a 태그 onclick 사용하기!!!  (0) 2017.10.30
javascript debugger (자바스크립트 디버거)  (0) 2017.08.14
javascript, jquery 배열(Array) 중복제거 !  (0) 2017.08.11
톰캣(TOMCAT) UTF-8 설정!!  (0) 2017.08.10
차트.js  (0) 2017.08.03
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

차트 라이브러리!


https://gionkunz.github.io/chartist-js/index.html


저작자표시

'[WEB] javascript, jQuery, html, css ...' 카테고리의 다른 글

[꾸울팁!] a 태그 onclick 사용하기!!!  (0) 2017.10.30
javascript debugger (자바스크립트 디버거)  (0) 2017.08.14
javascript, jquery 배열(Array) 중복제거 !  (0) 2017.08.11
톰캣(TOMCAT) UTF-8 설정!!  (0) 2017.08.10
form 태그 안에 있는 button 사용 시 리로드!?  (0) 2017.08.10

+ Recent posts

티스토리툴바