2. Front-end

JS - [ input date로 받아온 날짜 비교 ]

input date로 받아온 날짜는 String형의 yyyy-MM-dd와 같은 형식이다. 같은 형식의 날짜 값끼리는 부등호를 이용해 비교가 가능하다. ex) input date로 받아온 두 날짜 사이에서 >, < 를 이용해 비교 가능함 아래는 yyyy-MM-dd 로 받아온 날짜를 date형식으로 변환하는 함수이다. // date 날짜 계산 function calcDate(dateData) { const year = dateData.split('-')[0]; const month = dateData.split('-')[1] - 1; const date = dateData.split('-')[2]; return new Date(year, month, date); } 사용자에게 아래처럼 날짜를 2개 입력하도록..

JS - [input 태그 엔터키 눌렀을 때 이벤트]

text타입의 input 태그에 엔터키를 눌렀을 때 코드를 적용시키고 싶을때 onKeypress="javascript:if(event.keyCode==13) {showMember();}" => enter키의 아스키 코드값이 13이므로, 엔터키가 입력되었을 때 showMember() 함수를 실행시키겠다는 의미 검색 참조 더보기 https://hsol.tistory.com/550 HTML 텍스트 input 폼에 Enter(엔터)키 이벤트 주기 네이버나 구글, 다음 등 포털사이트 검색창에 텍스트를 입력하고 엔터를 치면 검색이 되는것 처럼 블로그에도 적용하고 싶다는 생각이 들어 만들었습니다. 일단 예제 다른건 겉치레니 건너뛰 hsol.tistory.com

JS - [ 모달 데이터 전달 ]

정확히는 데이터 전달이라기 보다 조금 야매스런 방법인 것 같다. 구글링해보니 jquery로 이용하는 방법들이 많던데 js로 하는 방법을 생각하다 보니.. 우선 모달 버튼 html 코드이다. onclick 이벤트 함수의 매개변수로 전달하고자 하는 값(여기서는 그룹 넘버 값이었음)을 준다. add_circle 그리고 전역변수로 grpNum을 두고, 모달 버튼의 onclick 이벤트가 실행될 때 받아온 매개변수 값을 해당 전역변수 값에 넣어주고 사용했다. let grpNum = 0; function setGrpNum(num) { grpNum = num; }

JS - [ parentNode parentElement 차이 ]

node는 내장 DOM 엘리먼트(document, document.body)나 HTML의 특정 태그(input, p) 또는 텍스트 노드가 될 수도 있다. element는 node의 특정한 하나의 타입으로 HTML tag로 바로 특정할 수 있거나, id나 class 같은 속성을 가진 것들이다. parentElement는 노드의 부모 요소를 반환하는데, 부모가 없거나 부모가 DOM 요소가 아니라면 null을 반환한다. 즉 parentElement의 반환값은 언제나 DOM 요소이거나 null이다. => 부모가 요소인지 아닌지 따지지 않고 가져올 땐 parentNode, 부모가 Element 형식일때만 반환받고 싶으면 parentElement 참조 더보기 https://dev-dain.tistory.com/12..

JS - [ 모든 자식 엘리먼트 삭제 ]

const memberList = document.querySelector('ul.member-list'); while (memberList.hasChildNodes()) { memberList.removeChild(memberList.firstChild ); } const datePlanContainer = document.querySelector('ul.date-plan-container'); while (datePlanContainer.firstChild) { datePlanContainer.removeChild(datePlanContainer.lastChild); } 참조 더보기 https://unikys.tistory.com/249 [자바스크립트] 모든 자식 엘레멘트 삭제하기 (Remove al..

JS - [ 카카오 맵 API ]

https://developers.kakao.com/ 에서 내 애플리케이션 이동 애플리케이션 추가하기 클릭 대충 이름과 사업자명 입력 후 저장 그러면 키 값이 뜨는데 여기서 JavaScript키는 코드에서 SCRIPT 태그로 연결할 때 넣어줘야 한다. 앱 키 아래에 플랫폼 클릭 아래쪽에 Web 플랫폼 등록 클릭 도메인 입력 후 저장 카카오에서 사용할 API를 불러올 때 APP KEY를 넣는 부분이 있는데, 여기에 앞서 봤던 JavaScript키를 넣어주면 된다.