dev/자바스크립트 (20) 썸네일형 리스트형 Javascript FileReader csv 파일이나 txt 파일을 서버에 업로드하는 경우 각 파일에 맞는 maven 라이브러리가 필요합니다. 라이브러리를 추가해서 진행하는 것이 어렵지 않으나 클라이언트에서 직접 데이터를 보내줄 수 있습니다. 자바스크립트 FileReader 클래스를 사용하면 클라이언트가 직접 데이터를 읽을 수 있습니다. 위의 예제 코드는 클라이언트로 csv 파일이나 txt 파일을 받아 파일 내용을 출력하는 것입니다. 주의해야 할 점은 파일을 읽을 때 읽는 작업이 다 끝나야 내용을 확인할 수 있다는 점입니다.(19~27라인) 나머지 코드는 주석을 참고하시면 됩니다. 예제에서 csv 파일을 첨부하면 해당 파일의 내용이 출력되는 점을 확인할 수 있습니다. FileReader에 대한 API는 아래 링크에서 확인하시면 됩니다. ht.. javascript async await 자바스크립트에서 비동기 함수를 동기 함수처럼 호출하려면 일반적으로 콜백함수를 사용합니다. 하지만 호출을 여러 번 사용하면 콜백 지옥에 빠질 수 있기 때문에 async와 await를 사용해야 합니다. 위의 예제 코드를 보게 되시면 fetch를 사용해 서버에 데이터를 요청하는 fetchTest1, fetchTest2 함수가 정의되고 있습니다.(12~18라인) 그리고 fetchTest1, fetchTest2를 await로 동기 처리하는 함수 asyncTest 함수가 정의되고 있습니다.(1~10라인) await로 동기 처리하기 위해서는 먼저 asyncTest 함수 앞에 async 키워드가 있어야 합니다.(1~3라인) fetchTest1, fetchTest2의 리턴값으로 Response 객체를 받아서 콘솔로 출력.. excel download 엑셀파일을 다운받을 때 서버를 통하지 않고 FileSaver.js를 이용해서 클라이언트에서 바로 다운받을 수 있습니다. 구글링하다가 우연히 알게 됐는데 아래 코드 참고하시면 되겠습니다. 해당 예제 파일 첨부했습니다. 필요하신 분들은 다운받으시면 됩니다. jquery deferred jquery에서 비동기 처리 함수를 여러 건 호출하는데 여러 개의 비동기 함수들을 한 번에 처리해야 하려면 어려운 점이 많습니다. 이럴 때 jquery deferred를 사용하면 쉽게 해결할 수 있습니다. testFnc1 함수는 setTimeout으로 1초 뒤에 deferred resolve를 실행하고 혹시 예외가 발생되면 deferred reject를 실행합니다. testFnc2와 testFnc3도 시간 차이만 있지 testFnc1와 똑같이 실행합니다. 그리고 testDfd 함수는 testFnc1, testFnc2, testFnc3을 순차적으로 실행시켜 모두 정상적으로 끝나면 done을 실행하고 testFnc1, testFnc2, testFnc3 중 하나라도 예외가 발생하면 fail을 실행합니다. te.. 브라우저 현재 위치 조회 웹 브라우저 지도 화면에서 현재 위치를 찾아야 하는 경우 브라우저의 navigator 객체를 사용하면 됩니다. 위의 소스를 간단히 설명하면 navigator.geolocation.getCurrentPosition를 통해 현재 위치를 요청하고 있고 getCurrentPosition 함수 파라미터 success와 error는 현재 위치 조회가 성공했을 때와 실패했을 때의 콜백함수입니다. 현재 위치 조회가 성공하면 좌표를 알림창으로 표출하고 (success 함수) 실패하면 위치 조회 실패 메시지가 표출됩니다. (error 함수) 배열 추가 삭제 자바스크립트에서 배열을 추가하는 방법으로 주로 Array 객체의 push를 사용하거나 concat을 사용합니다. push는 1개의 데이터를 배열에 추가할 때 쓰고 concat은 2개 이상의 배열을 하나로 합칠 때 사용합니다. push를 통해서 배열에 데이터를 추가하면 stack의 push와 똑같이 데이터가 추가됩니다. 반대로 push를 이용해서 1개씩 추가할 필요 없이 concat을 사용하면 2개 이상의 배열을 하나로 합칠 수 있습니다. 배열의 데이터를 삭제해야 할 때 Array 객체의 pop를 사용하거나 splice를 사용합니다. pop은 배열에서 데이터 1개를 삭제할 때 쓰고 splice는 1개 이상의 데이터를 삭제할 때 사용합니다. pop은 stack의 pop와 같이 맨 마지막에 추가된 데이터 1개.. 정규표현식 전화번호 체크 회원가입 기능 구현할 때 사용자가 입력한 전화번호가 제대로 입력되었는지 체크해야 될 때가 있습니다. (이상한 값을 입력한 경우 대비) ========================================================= //전화번호 입력 체크 function checkPhoneNumberCallback(value){ if(value === ""){ return; } var reg = /^\(?(\d{0,3})\)?[-]?(\d{0,4})[-]?(\d{0,4})$/; var checkFlag = reg.test(value); if(!checkFlag){ alert("전화번호 다시 입력하세요."); } } ===============================================.. 1000 단위 표출 사용자가 입력한 데이터가 숫자인 경우 특히 금액이면 1000 단위로 끊어서 표출해야 하는 경우가 있습니다. 그럴 때 정규표현식으로 해도 되지만 더 쉽게 하는 방법이 있습니다. 위의 예시를 보게 되면 값(1000000)을 Number 객체로 생성한 다음에 toLocaleString 함수를 사용해서 1000 단위씩 표출하고 있습니다. 이전 1 2 3 다음
