javaScript&jQurey (39) 썸네일형 리스트형 [React] react-datepicker 라이브러리 사용 하기(캘린더, 달력 라이브러리) 📖 들어가며 이번에 팀 프로젝트로 팀 프로젝트를 구하는 웹앱을 클론 코딩하게 되면서 프로젝트 진행 기간을 선택할 수 있게 하는 Input이 필요했습니다. 그래서 캘린더가 표시되고 캘린더에서 날짜를 선택하면 Input에 해당 날짜가 입력될 수 있게 구현하고 싶었습니다. 캘린더를 일일이 구현하기에는 많은 시간이 걸릴 거 같아서, 리액트 캘린더 관련 라이브러리를 찾아보던 중에 react-datepicker라는 라이브러리를 발견했습니다. 지금껏 공부하면서 캘린더 관련해서는 처음이기 때문에 알게 된 내용을 정리하려 합니다. 1. react-datepicker react-datepicker는 리액트에서 달력을 매우 간단하고 재사용이 쉽게 가능하게 만들 수 있게 한 라이브러리입니다! npm 사이트의 주간 다운로드 횟.. jQuery - 클릭이벤트 동적 처리하기($("").click(), on('click') 차이) 클릭 이벤트를 처리하고자 할때, jQuery를 통해 보다 쉽게 이벤트를 정의할 수 있습니다. on(), click(), bind(), onclick()등 여러가지 방법이 있는데, 제가 주로 사용하는 on()과 click()의 차이에 대해 알아보겠습니다. click() 단순하게 정적페이지에 로드된 요소에 클릭이벤트를 처리하고자 할때 click()메소드를 자주 사용합니다. 해당 클릭이벤트는 동적처리가 불가능합니다. 다음 예제를 확인해보겠습니다. html 저장 javascript $(document).ready(function () { $("button[name='save']").click(function () { $("body").append("click!!! "); }); }); name속성이 save인 .. fetch() 함수 사용법 백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받습니다. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있습니다. 참고로 Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수라고 생각하시면 됩니다. 실무에서는 여러 이유로 axios를 많이 사용하지만, fetch 함수로도 웬만한 기능을 충분히 구현할 수 있습니다. 이걸 읽고 계신 >wecode 분들도 4주차 과제까지, 그리고 1차 프로젝트 까지는 fetch() 함수를 사용하기를 권장 드립니다. axios 사용법도 굉장히 쉽습니다. fetch를 쓰다가 axios를 사용하는 것만으로는 사실 학습 의미가 없습니다. 어느 라이브러리를 더 써보았는지가 중요한 것이 아니라 http .. [jQuery]동적 태그에 이벤트 바인딩하기 $(document).on 과 $(document).ready 에 대해서 정리해보려고 합니다. $(document).ready 가 무엇인가? $(document).ready(function(){ // click 이벤트 - 예시 }) 보통 위와 같은 형식으로 많이 쓰인다. 이 코드를 풀어 말하자면, DOM이 준비가 됐을 때 click이벤트를 시작하겠다는 뜻으로 간주할 수 있다. 이거 외에도 $(window).load 와 같은 경우도 있습니다. 이 경우는 window에서 모든게 load된 시점을 뜻합니다. 문제는 동적으로 생성되는 엘리먼트들에 한해서는 해당 위에 적혀있는 내용부분이 반영되지 않는다는 것이다. 여기서 동적이란 말은 무엇을 뜻하는가? - 보통 ajax를 통해 만들어지는 것들을 뜻한.. [jQuery] jquery로 라디오버튼을 재 클릭해서 체크 해제 html의 input 태그의 타입의 종류중에 checkbox(체크박스)와 radio(라디오) 버튼이 있다. 이 글에서는 정의가 중점이 아니니 간략하게 설명하고 넘어간다! 버튼생성은 이런식으로 가능한데, 속성으로 name, value, checked를 설정할 수 있다. 이 두개의 타입은 비슷하나 차이점이 존재한다. * checkbox는 중복체크가 가능하고 체크를 해제할 수 있음 * radio는 중복체크가 불가능하고 체크를 해제할 수 없음 체크박스를 라디오버튼처럼 사용하는 예제는 많은데 라디오 버튼을 체크박스처럼 만드는 예제는 많이 없어서 공부하고 배운 토대로 코드를 올려본다. var beforeChecked = -1; $(function(){ $(document).on("click", "input[type.. [jQuery] 자식 요소를 찾는 children() , + find() jQuery를 사용하여 특정 선택자를 기준으로 자식 요소들을 어떻게 찾을 수 있을까? --> 바로 아래 요소, 즉 자식 요소만 탐색할때는 children()을 사용, 자식 및 하위 태그 모두에서 찾을 때는 find()를 사용 예시)) 다음과 같은 DOM이 있는 경우 첫번째 두번째 1. ul을 기준으로 자식 태그에 있는 li 태그를 찾고 싶을 때 --> children() 사용 $('ul').children('li'); // return 'li' 배열(li 두개) // 첫번째 li를 찾을때 $('ul').children('li:eq(0)'); /return 첫번째 li 2. ul을 기준으로 손자 태그에 있는 span을 찾고 싶을 때 --> find() 사용(children은 자식 태그까지만 찾을 수 있다).. [jQuery] .eq() 사용 요소 찾는법 [jQuery] .eq() 선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다. .eq() 선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다. 문법(Syntax) $("선택자").eq("숫자"); 정의(Definition) 선택한 요소의 형제 중 숫자를 통해 선택합니다. 음수를 설정하면 끝을 기준으로 선택합니다. 비교(Compare) .eq() 선택한 요소를 메서드를 통해 선택합니다. :eq() 선택한 요소를 선택자를 통해 선택합니다. Sample1 .eq(index) 형제 요소 중에 숫자를 통해 선택할 수 있습니다. 결과 탐색(Traversing) .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다. .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습.. [Javascript] 반올림(round), 올림(ceil), 내림(floor) - 소수점, 음수,자리수 지정 보호되어 있는 글입니다. 이전 1 2 3 4 5 다음
