2. Front-end/2-3. Java Script

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키를 넣어주면 된다.

JS - [ CSV 파일 파싱 - 카카오 맵 API에 CGV 좌표 표시 ]

우선 CGV의 좌표를 가져오기 위해 영화관 시설 데이터가 담긴 CSV 파일을 다운로드 https://www.culture.go.kr/bigdata/user/data_market/detail.do?id=54331f17-d090-4b91-bc8c-95ccb134303f 문화 빅데이터 - 포털- 전체 상품 www.culture.go.kr 카카오 맵 API를 이용해 화면에 지도를 출력 후, CSV파일에서 CGV의 데이터만 파싱 후 지점명, 주소, 도로명 주소, 위도 경도를 가져와 뿌려주었다. d3.csv 메서드를 이용할 때 두 번째 함수가 비동기로 실행되어서 여기서 애를 많이 먹었다... 처음엔 아래처럼 코드를 작성했다. let test = []; d3.csv("cgvList.csv", function (dat..

JS - [ CSV 파일 불러오기 ]

CSV 파일 불러오기 - d3 라이브러리 이용 https://d3js.org/ D3에서 CSV파일을 로딩하면 data변수에 객체 배열로 로딩한다. 참고로 두 번째 매개변수로 들어가는 function은 비동기로 실행된다. 참조 더보기 https://curryyou.tistory.com/252 [자바스크립트] CSV to JSON 변환 출력 방법+샘플예제코드(node.js 파일 처리 포함) | 자바스크립트로 CSV를 JSON으로 변환하는 방법 CSV는 Comma Seperated Values의 약자로, 콤마( , )로 구분된 문자열을 말합니다. 행의 항목(컬럼)들은 콤마로 구분되며, 각 행은 줄바꿈으로 구분됩니다. curryyou.tistory.com https://continuous-development...