레퍼런스 마이닝

웹퍼블리셔가 위와 같이 a 태그를 정의해 주는 경우가 빈번하다. 이런 경우 React에서는 Warring이 나타난다. a 태그 사용 시 href 속성의 유효한 값이 필요하다는 뜻이다. 이런 태그는 strict mode에서 걸리게 된다. href 속성이 없어도 안되고 유효하지 않아도 문제가 된다. React에서 Warring을 제거하는 방법은 아래와 같다. false}> OR

이터레이블(iterable)은 "반복자" 의미로 iterator를 통해 next()로 순회가 가능한 구조를 말한다. Array, String, Map, Set, Dom 구조가 대표적이다. for in, for of 객체를 순회할 때 사용되며, iterator.next().done 값이 true가 될 때까지 next()로 순회한다. // 배열 for (const val of ['a', 'b', 'c']) { console.log(val); // "a","b","c" } // 문자열 for (const val of 'abc') { console.log(val); //"a","b","c" } for (let i in 'string') { console.log(i); } // 0, 1, 2, 3, 4, 5 fo..

Rest 파라미터 Rest 파라미터는 Spread 연산자(...)를 사용하여 함수의 파라미터로 작성된 형태이다. Rest 파라미터를 이용하면 데이터를 배열로 전달받을 수 있다. 자바에서 가변 인자와 유사한 방식이다. function foo(...rest) { console.log(Array.isArray(rest)); // true console.log(rest); // [ 1, 2, 3, 4, 5 ] } foo(1, 2, 3, 4, 5); 한 가지 유의할 점은 Rest 파라미터는 항상 제일 마지막 파라미터로 있어야 한다는 것이다. Spread 연산자 Spread 연산자는 연산자의 배열 또는 이터레이블(iterable)을 개별적으로 분리한다. 이터레이블은 iterator를 통해 next()로 순회가 가능..

다음 메서드를 사용하면 선택한 요소나 콘텐츠를 복사하여 새로운 HTML 요소나 콘텐츠를 생성할 수 있다. clone 메서드 .clone() 메서드는 선택한 요소를 복사하여 새로운 HTML 요소를 생성한다. 안녕하세요. jQuery입니다. $('#hello').clone().appendTo('#jq'); 위의 예제를 실행해 보면 알 수 있듯이 .clone() 메서드는 기존의 HTML 요소를 복사하여 새로운 HTML 요소를 생성할 뿐이다. 따라서 반드시 .append() 메서드나 .appendTo() 메서드와 같은 다른 메서드를 이용하여 요소를 추가해야 한다. .clone() 메서드를 사용하지 않고 .appendTo() 메서드만을 사용하면, 기존에 존재하는 HTML 요소를 그대로 추가하는 점이 다르다.

배열 메서드 둘 중에 평소에 잘 사용하지 않지만, 사용하면 생산성이 많이 올라가는 메서드들이다. indexOf 배열에서 특정 값 찾을 시 for Loop를 돌려서 찾는다면 생산성이나 코드 가독성에 도움이 되지 않는다. indexOf 메서드는 주어진 요소를 배열에서 찾아 반환하며 값이 없다면 -1을 반환한다. let found = false; let arr = ['apple','orange','pear']; for(let i = 0, len = arr.length; i < len; i++) { if('orange' === arr[i]){ found = true; } } found = (arr.indexOf('orange') !== -1 ); filter Json 오브젝트로 이루어진 배열중에 특정 값을 fi..

기존 요소의 내부 변경 다음 메서드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 반환하거나 설정할 수 있다. html 메서드 안녕하세요. $('p').html('jQuery입니다.'); .html() 메서드는 선택한 요소의 내용을 새로운 HTML 요소로 변경한다. text 메서드 안녕하세요. $('p').text('jQuery입니다.'); .text() 메서드는 선택한 요소의 내용을 새로운 단순 text로 변경한다. html() 메서드와 text() 메서드의 차이점 .html()는 선택한 요소의 내용에 html 태그 요소가 포함되어 있으면 태그를 적용하여 표시를 하지만, .text()인 경우는 html 태그를 적용하지 문장 그대로 표시를 하게 된다.

find 메서드가 크롬 및 파이어폭스 브라우저에서는 제대로 작동하지만 IE에서는 오류가 발생한다. 해당 함수를 지원하지 않는다는 말이기도 하다. 지원 범위는 아래 사이트에서 확인이 가능하다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find Array.prototype.find() The find() method returns the value of the first element in the provided array that satisfies the provided testing function. developer.mozilla.org // 중복 체크 const checkId = sele..

기존 요소의 내부에 추가 다음 메서드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다. append 메서드 .append() 메서드는 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다. 첫 번째 아이템 두 번째 아이템 $('#list').append('새로 추가된 아이템'); .append() 메서드를 이용하면, 두 번째 뒤에 새로운 HTML 요소를 추가할 수 있다. prepend 메서드 .prepend() 메서드는 선택한 요소의 첫 번째에 새로운 요소나 콘텐츠를 추가한다. 첫 번째 아이템 두 번째 아이템 $('#list').prepend('새로 추가된 아이템'); prepend() 메서드를 이용하면, 첫 번째 에 앞에 새로운 HTML 요소를 추가할 수 있다. appe..

선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해서는 jQuery 메서드를 통해 해당 요소에 접근할 수 있다. getter/setter 메서드 getter 메서드는 선택된 요소에 접근하여 그 값을 읽어오기 위한 메서드이다. getter 메서드는 아무런 인수를 전달하지 않고 호출한다. setter 메서드는 선택된 요소에 접근하여 그 값을 설정하기 위한 메서드이다. setter 메서드는 대입하고자 하는 값을 인수로 전달하여 호출한다. var const = $('#hello').html(); $('#newText').html(newText); 요소에 접근하여 요소의 값을 읽거나 설정할 수 있도록 해주는 대표적인 getter 메서드와 setter 메서드는 다음과 같다. method chaining gett..

jQuery에서는 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용할 수 있다. 이러한 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 할 수 있다. 선택한 요소를 변수에 저장 jQuery에서는 선택한 요소들을 변수에 저장하여 사용할 수 있다. 바나나 레몬 수박 const fruits = $('li'); $('#length').text('과일의 종류는 총 ' + fruits.length + '가지 입니다.'); 선택한 요소를 필터링 jQuery에서는 선택한 요소 중에서 더욱 세분화된 선택을 하기 위한 필터링을 진행할 수 있다. 바나나 레몬 수박 $('li:has(b)').append(' - 추천 과일입니다.'); input 요소의 선택 jQuery에서는 입력 양식에 관..