[jQuery]map()과reduce()란 무엇일까? 실무에서 하드 코딩을 하다가 배열 안에서 중복되는 값들을 count 해야 하는 상황이 왔다. 찾아보니 reduce()라는 기능을 가진 녀석이 있었는데 글을 적으며 이해하기 위해 노력해본다. ex) arr = {"김동수","김동수","김영희","김영희"} 라는 녀석이 있는데 중복 값을 count 해야 한다. 얼핏 정리한 글들을 봤는데 자바스크립트 내장 메서드 중에서 제일 강력하다는 글을 보았다. 먼저 map()을 살펴보자. map()이란? map의 기본 원리는 간단한데, 반복문을 돌며 배열 안의 요소들을 1:1로 짝지어 주는 것이다. 어떻게 짝지어줄 것인가 정의한 함수를 메서드의 인자로 넣어주면 된다. // map 활용 const arr = [1,2,3]; let result = arr.map( (resu..
썸네일 [jQuery]change()란? | change() 란? javascript를 사용하여 이벤트를 동작하기 위해서는 addEventListener() 라는 함수가 존재합니다. 이벤트를 구현할 경우 jQuery를 사용하면 간단한 방법으로 이벤트를 제어할 수 있습니다. ex)bind(),on(),change() | 문법 해당요소.change(실행할 코드); change() 메소드는 해당하는 요소의 value에 변화가 생길 경우 이를 감지하여 등록된 callback함수를 동작시킵니다. 해당 코드는 input,textarea,select 태그에 동작합니다. 예시) 파일 첨부가 완료되었음을 알리는 알림창을 띄우는 코드 파일을 첨부해주세요! 이벤트를 동작시킬 코드 이처럼 파일이 등록되면 change() 함수가 감지하여 이벤트(alert)를 발생시키..
썸네일 [JQuery]Ajax활용한 파일업로드 FormData | FormData란 ? 이번에는 FormData를 사용하여 태그처럼 파일을 넘겨주는 방식을 알아보겠습니다. FormData 인터페이스는 XMLHttpRequest.send()로 쉽게 보내질 수 있는 폼 filed와 key / value 쌍을 쉽게 만들 수 있습니다. 인코딩 type이 "multipart/form-daata"로 설정 되어 있으면 폼이 사용하는 것과 같은 포맷으로 사용합니다 contentType,processData 옵션은 false로 설정해야 합니다 ※processData란 ? 일반적으로 서버에 전달되는 데이터는 query string 형태로 전달되기 때문에) ex) http://example.com/over/there?title=Main_page&action=raw data 파라미터로 ..
썸네일 [JQuery] each()란? jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있습니다. each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다. each() 메서드는 다음과 같은 두 가지 타입이 있습니다. // jQuery 유틸리티 메서드 $.each(object, function(index, item){ }); // jQuery 일반 메서드 $(selector).each(function(index, item){ }) 간략한 설명을 드리겠습니다. $(selector).each(function(index, element)) $('li').each 셀렉터는 앞에 알맞게 본인이 원하는걸 선택하면 되겠습니다. function 반복문 한..
제이쿼리 동기,비동기식 방식 Ajax Ajax-Ajax란 비동기 방식의 javascript와 XML을 가리킨다. 동기 방식과 빙동기 방식의 차이점에 대해 설명한다면, %차이점동기방식->서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행비동기식 방식->반대로 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다. 사용이유-AJax를 이용하는 이유는 화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버간에 XML과 JSON,텍스트,HTML등의 정보를 교환하기 위해서이다.즉, Ajax를 이용하면 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송받을 수 있다. 또한 자료를 요청할 경우 어느정도 시간이 소요되는데 반해 Ajax는 기다릴 필요 없이 바로 수행 가능하다.
제이쿼리 -애니메이션 효과 제어 메서드 애니메이션 효과 제어 메서드‘효과’ 또는 ‘애니메이션’이 적용된 요소의 동작을 제어하는 메서드이다. 개념함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장이된다. 큐는 ATM기기를 통해 은행 일을 보는 사람들을 생각하면 이해하기 쉽다.사람들이 줄을 서 있고, 먼저 마친 사람은 먼저 나간다. 이와 같이 큐에 저장된 애니메이션 대기열이 있다면 먼저 들어간 애니메이션이 먼저 실행된다.% 먼저 들어간 데이터가 먼저 처리되는 형식을 FIFO(first in first out)이라고 부른다.종류stop ,delay , queue , clearQueue , dequeue , finish가 있다. -stop / delay 메서드1.stop-> 요소에 적용한 애니메이션을 정지시킨다.기본형$(“요소 선..