You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
♻️ 제이쿼리 함수를 → 자바스크립트로 구현 (모음집)
제이쿼리를 자바스크립트로 제이쿼리는 무겁고 느리다. 그리고 요즘에는 리액트, 뷰를 쓰지 제이쿼리는 레거시 프로젝트에만 잔존하는 구시대적 유물이 되어 버렸다. 그렇지만 이전에는 전세계에서 가장 많이 사용된 웹라이브러리라는 명성이 있었는데, 그 이유는 기존 자바스크립트에 없는 여러 편리한 전용 선택자나 메서드를 지원해 주었기 때문이다. 또한 제이쿼리를 이용한 파생 여러 스타일리쉬 라이브러리 숫자도 한몫했다. 하지만 퍼포먼스 문제 때문에 가능한 한 제이쿼리 사용을 지양해야 되지만, DOM을 다루는데 있어 압도적인 편리함은 포기하기엔 너무 달콤하다. 따라서 이번 포스팅에선 몇가지 자주 애용되는 제이쿼리 메서드를 바닐라 자바스크립트로 구현해보아 웹 코딩에 있어 좀 더 편하게 이용해보도록 하자. You might ..
📚 jQuery 요소 인덱스(index) 넘버 구하기
JQuery에서 요소 익덱스 구하기 같은 태그 요소들이 여러개 있는데, 이들의 익덱스를 구해서 순서로 제어하고 싶을때 index() 메소드를 통해 가능하다. 다음은 똑같은 li 5개의 요소들을 인덱스를 통해 특정 요소를 구별하는 예제이다. 1 2 3 4 5 6 /* 같은 이름의 li.papers 요소들에게 각각 클릭 이벤트들을 등록해준다. */ $(".test > ul > li").click(function () { // 만일 li 요소를 클릭한다면, 그 클릭한 형제요소 간의 인덱스 순서를 구해 반환해준다. let num = $("li").index(this); $('.result > p > span').text(num + 1); }); See the Pen jquery index by barzz12 (..
📚 $.getScript() 동적 스크립트 로딩 사용법
제이쿼리 $.getScript() $.getScript() 메소드는 예전에 ajax통신을 위한 api로 쓰이던 메소드다. 요즘은 fetch() 나 $.ajax() 를 사용하기에 잘 안쓰이는 편이지만, 간단한 코드로 원격지 또는 로컬의 javascript 파일을 동적으로 읽어들여 실행하는 역할로서 가끔 쓰이기도 한다. 다른 도메인의 자바스크립트도 읽어들일 수 있다. $.getScript(url, callback); // url : 읽어들이는 페이지의 위치 // callback : 통신 성공시의 콜백 함수 예를들어 이런식으로 단축하여 사용할 수 있다. 바닐라 자바스크립트에선 따로 제이쿼리에서는 하나의 메소드만 사용하면 되는 걸 알 수 있다. (콜백 뿐만 아니라 프로미스도 지원한다.) $.getScript("..
📚 제이쿼리 AJAX 요청 문법 정리
제이쿼리 AJAX 요청 이번 포스팅에는 ajax의 기본개념 간단 정리와 제이쿼리 ajax 메소드를 살펴봅니다. AJAX 란? AJAX란 asynchronous Javascript and XML입니다. 요즘은 XML보다 HTML이나 JSON을 더 많이 쓰지만, 개발 당시 xml이 주류라서 이름이 그렇게 된 것입니다. 기존의 웹에서는 한 번 페이지를 로딩하면 다른 페이지를 로딩하기 위해서 링크를 타고 넘어가야 했습니다. 그렇게 되면 흔히 말하는 페이지 깜빡임이 발생합니다. 구글 검색을 해보면, 페이지를 전환하지 않고도 예상 검색어와 결과를 보여줍니다. Gmail도 마찬가지죠. 바로 AJAX 기술을 사용하였기 때문입니다. 이처럼 비동기적으로 서버에 요청을 하여 페이지 전환 없이도 새로운 데이터를 가져올 수 있..
📚 제이쿼리 이벤트 종류 & 설정 총정리
jQuery 이벤트 문법 웹 페이지는 사용자와 수많은 상호작용을 하게 된다. 사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행한다. 이러한 사용자의 동작들이 모두 이벤트(event)를 발생시키는 것이다. 정리하자면, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다. 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 한다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행하게 되는 원리이다. 제이쿼리는 자바스크립트의 이벤트 헨들러와 동일하게 ..
📚 제이쿼리 메소드 종류 총정리
jQuery 메소드 정리 요소 getter & setter 메소드 설명 .html() 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. .text() 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. .width() 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함. .height() 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함. .attr() 해당 요소의 명시된 속성의 속성값을 반환하거나 설정함. .val() 요소의 값을 반환하거나 설정함. .value = 같은 거 html() == innerHTML과 같다. 안녕하세요. text() == textContent와 같다. 안녕하세요. width(), height() // setter $("i..
📚 제이쿼리 선택자(Selector) 종류 총정리
jQuery CSS 선택자 모음 기본 선택자 선택자 예제 설명 * $("*") 모든 요소를 선택 .class $(".class") 지정한 클래스를 가지는 모든 요소를 선택 element $("element") 지정된 태그명을 가지는 모든 요소를 선택 #id $("#id") 지정한 ID 속성을 가지는 하나의 요소를 선택 , $("selector1, selecotr2") 모든 지정한 선택자들의 결과들을 결합하여 선택 자식 선택자 (child) 선택자 예제 설명 :first-child $("div:first-child") 부모의 첫 번째 자식인 모든 요소를 선택 :first-of-type $("div:first-of-type") 동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택 :last-child ..
📚 자바스크립트 this vs 제이쿼리 $(this) 차이
자바스크립트 this 자바스크립트에서 this는 현재 실행 컨텍스트에서 참조되는 객체를 가리킨다. 일반적으로 함수 내에서 사용되며, 함수 호출 방식에 따라 this가 가리키는 객체가 달라지게 된다. 예를들어 이베트 핸들러를 인라인으로 등록할 경우 함수내의 this는 버튼이 아닌 window 객체를 가리키게 된다. Button 반면 addEventListener 이벤트 핸들러 같은경우 이벤트에 바인딩된 요소를 가리킨다. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다. Button 제이쿼리 $(this) 자바스크립트 this와 제이쿼리 $(this)는 명칭은 같을 지라도 실제로 표시되는 정보는 서로 다르다. 제이쿼리에서 $(this)는 이벤트 핸들러 내에서 이벤트가 발생한 요소를 가리키는 역..
📚 jQuery 기본 문법 $() 정리
jQuery 기본 문법 $(선택자).동작함수1().동작함수2() $(선택자).동작함수1().동작함수2() 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다. - 선택자를 이용하여 원하는 HTML 요소를 선택하고, - 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다. jQuery $객체 jQuery를 사용하기 위해서는 먼저 jQuery 객체를 생성하여야 한다. 생성된 jQuery 객체는 다양한 메소드를 가지는데, jQuery를 학습한다고 하는 것은 대체로 이 메소드를 사용하는 방법을 익히는 것이다. $() // jQuery() 함수의 축약형 jQuery() 함수는 전달되는 인수의 종류에 따라 다른 움직임을 하지만 결국 jQuery 객체를 반환한다. 인수의 종류..
📚 jQuery 설치 & 적용 방법
제이쿼리 설치 한때 전세계에서 가장 많이 쓰던 자바스크립트 라이브러리 설치 & 적용 방법에 대해 포스팅 해본다. 1. 로컬 다운로드 방법 아래 링크로 들어가 jquery 파일을 다운로드 한뒤, 자신의 프로젝트에 넣으면 된다. jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.c..
