Daily Develope

[React]웹 (프론트엔드) 개발을 위한 JavaScript library로, 동적 웹앱 구성을 위한 SPA(Single Page Application)를 지원합니다.* SPA : 사용자와의 상호작용에서 신규 페이지를 로드하는 것이 아니라 단일 페이지에서 동적으로 처리하는 app.또한 가상 DOM 을 사용해 상태(state) 변경에 따라 가상 DOM을 수정하고 실제 DOM으로 이식하는 과정을 통해 처리 속도를 제공합니다. 바인딩이벤트 핸들러 사용class 컴포넌트의 method : 바인딩 필요class Button extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bi..

환경설정datatables 다운로드 접속원하는 환경 설정하단의 JS 및 CSS 연결주소를 복사하거나, 해당 파일을 다운받아 삽입(설치 후 사용하려는 경우 링크 참고)사용 예시HTML 파일본 예시에서는 간단하게 헤더만 정의해두고 데이터는 JS에서 동적으로 처리 index col_01 col_02 col_03 JS 파일테이블 초기화시 다양한 옵션을 사용해 쉽게 구성할 수 있다.(사용 가능한 옵션은 Option 링크 참고.)아래 코드는 앞서 선언한 table element에 DataTable 객체를 할당하는 방법으로 테이블 구성하는 예시이다.var myData = [{"id":"id1", "..

query를 사용한 개체 검색xpath에 해당하는 모든 개체들을 불러와 순회하는 예시 코드검색쿼리는 css selector 문법 사용.// div 아래 model 이라는 클래스명을 가지는 모든 개체 검색const modelList = document.querySelectorAll("div.model");// 검색된 항목에 대한 순회modelList.forEach(element => { console.log(element);});AjaxPost (Form 데이터 전달)post 통신으로 form 데이터 전달var formData = new FormData();formData.append('data_a', data_a);formData.append('data_b', data_a);$.ajax({ url: ..

최상단부터 하단의 내용이 overwrite되는 방식으로 규칙 적용태그 유형별 스타일 적용 (예시)/*모든 div 태그에 적용*/dix { width: 100%;}/*id 기준 스타일 적용*/#my_id { width: 100%;}/*class 기준 스타일 적용*/.my_class { width: 100%;}/*div의 모든 my_id에 적용*/div my_id { height: 10px;}/*div 밑의 my_class 밑의 list item에만 스타일 적용*/div>.my_class>li { text-align: center;}class에 스타일 적용