본문 바로가기

Java Script & j Query37

$.ajax(에이젝스) 비동기식 처리와 동기식 처리 async | AJAX로 할 수 있는 것 AJAX라는 네트워크 기술을 이용하여 client - > Server로 Data 요청하고 그에 대한 결과를 돌려받을 수 있다. AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request한다. 이 경우,JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그 만큼의 자원과 시간을 아낄 수 있다. Client란? -Server에서 정보를 가져와서 사용자에게 보여줄 수 있고 사용자와 상호작용할 수 있는 소프트웨어를 일컫음 ex)web browser, 핸드폰 어플리케이션 Server란? - 네트워크 상에서 접근할 수 있는 프로그램으로서 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램 (일반적으로 사용.. 2020. 7. 26.
[jQuery]map()과reduce()란 무엇일까? 실무에서 하드 코딩을 하다가 배열 안에서 중복되는 값들을 count 해야 하는 상황이 왔다. 찾아보니 reduce()라는 기능을 가진 녀석이 있었는데 글을 적으며 이해하기 위해 노력해본다. ex) arr = {"김동수","김동수","김영희","김영희"} 라는 녀석이 있는데 중복 값을 count 해야 한다. 얼핏 정리한 글들을 봤는데 자바스크립트 내장 메서드 중에서 제일 강력하다는 글을 보았다. 먼저 map()을 살펴보자. map()이란? map의 기본 원리는 간단한데, 반복문을 돌며 배열 안의 요소들을 1:1로 짝지어 주는 것이다. 어떻게 짝지어줄 것인가 정의한 함수를 메서드의 인자로 넣어주면 된다. // map 활용 const arr = [1,2,3]; let result = arr.map( (resu.. 2020. 7. 16.
[jQuery]change()란? | change() 란? javascript를 사용하여 이벤트를 동작하기 위해서는 addEventListener() 라는 함수가 존재합니다. 이벤트를 구현할 경우 jQuery를 사용하면 간단한 방법으로 이벤트를 제어할 수 있습니다. ex)bind(),on(),change() | 문법 해당요소.change(실행할 코드); change() 메소드는 해당하는 요소의 value에 변화가 생길 경우 이를 감지하여 등록된 callback함수를 동작시킵니다. 해당 코드는 input,textarea,select 태그에 동작합니다. 예시) 파일 첨부가 완료되었음을 알리는 알림창을 띄우는 코드 파일을 첨부해주세요! 이벤트를 동작시킬 코드 이처럼 파일이 등록되면 change() 함수가 감지하여 이벤트(alert)를 발생시키.. 2020. 3. 23.
[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 파라미터로 .. 2020. 3. 23.
encodeURIComponent(), encodeURI()란? | encodeURIComponent() ? encodeURIComponent() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나,둘 OR 셋의 연속된 이스케이프 문자로 나타냅니다. ※두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네개로 변환됩니다. 다음 문자를 제외한 모든 문자를 이스케이프(유니코드 형식으로 변환) 합니다. 1BYTE 문자는 %XX, 2BYTE 문자는 %uXXXX 형태로 Not Escaped: A-Z a-z 0-9 - _ . ! ~ * ' ( ) //영 대소문자, 숫자 , *-_.,! ~ ' ( ) 은 제외 구문 encodeURIComponent(str); 매개변수 : URI 구성요소 반환 값 주어진 문자열을 URI 구성요소로서 인코딩한 새로운 문자열 | encodeUR.. 2020. 3. 23.
[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 반복문 한.. 2020. 3. 19.