일상_자기계발

클라이언트에서 서버로 통신을 하려고 할 때, 여러 가지 타입을 사용할 수 있다. 예를 들어 가장 일반적인 application/json 또는 application/x-www-form-urlencoded 등이 있다. 해당 방법들을 사용해서 어떻게 데이터를 보낼 수 있는지 정리를 하려고 한다. application/json contentType에서 applicayion/json을 작성 data에서 return type을 JSON.stringify 를 사용해서 보내면 된다. Spread Operator 방법을 사용해서 합쳐준다. JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 자바에서 Map 객체로 받아서 데이터를 쉽게 처리할 수 있다. $('#examp..

데이터 테이블 플러그인의 사용방법에 대해 알아보겠습니다. HTML 준비 아래와 같이 HTML table 태그를 준비하면 된다. DataTable 생성 방법 type: 요청 보내는 방법 (GET, POST 등등) contentType: 요청 보내는 데이터 Type에 대해 정의하는 곳. dataType: 응답을 받는 데이터 Type을 정의하는 곳. data: 요청 보내는 데이터를 정의하는 곳이다. dataSrc: 응답으로 받은 데이터를 중간에서 조작 할 수 있다. columnDefs: 컬럼별 조작을 할 수 있는 곳. 생성 방법 1. jQuery의 selector를 사용해서 Id로 target_table을 가지고 있는 HTML 태그를 불러온다. $("#target_table").DataTable({ ajax:..

💡 데이터 테이블 컬럼별 검색 및 검색 초기화 방법 에 대해 작성해 보았습니다. (※ 정답이 아닐 수 있습니다. 저만의 방법으로 구현했습니다.) 빠른 결론: 컬럼마다 값을 초기화하고 테이블을 draw 하는 방법이다. HTML 준비 검색에 필요한 컬럼 개수만큼 th 태그를 직접 생성해야 한다. ... 필요한 개수 만큼 ... DataTable 컬럼 생성 target_table의 Id를 가진 테이블 태그의 thead tr을 복사(clone)하고 추가(appendTo)하게 된다. target_table 테이블의 thead tr 중 첫 번째에서 th를 반복문(each)으로 호출하고 html을 추가한다. $('#target_table thead tr').clone(true).appendTo('#target_tab..

관련 기능 paging: 페이지 네이션 기능으로 전체 데이터를 나눠서 볼 수 있게 하는 기능이다. lengthChange: 사용자가 화면에서 페이지 당 몇 개의 데이터를 볼 수 있을지 설정할 수 있다. pageLength: 개발자가 코드에서 페이지 당 몇 개의 데이터를 볼 수 있을지 설정할 수 있다. 문제점 서버에서는 DB의 전체 데이터를 불러 왔지만, 화면(프론트)에서 10개밖에 보이지 않는다면? 해결 방법 두 개의 설정을 모두 false로 하면 전체 리스트 개수가 보이게 됩니다. paging과 lengthChange 기능은 default가 true 입니다. paging: false, lengthChange: false paging 이 비활성화이면 lengthChange 도 자동으로 비활성화가 되는 것..

on 을 메서드라고 불러도 되는지 정확히 모르겠지만, 해당 글에서는 메서드라고 표현을 하겠다. on 메서드가 당연히 자바스크립트로 생각했지만, jQuery 에서 사용하는 메서드라는 것을 알고 너무 놀라 정리를 해보았다. Ps. $("#test").on(생략) 이면 당연히 jQuery 인데... (조금 멍청했다..) on 메서드 Description: Attach an event handler function for one or more events to the selected elements. 필수 매개변수: events, handler 선택 매개변수: selector, data .on( events [, selector ] [, data ], handler ) Example 아래 두 코드를 비교했을 때..

jQuery의 data() 메소드는 HTML 요소에 임의의 데이터를 연결할 수 있도록 하는 메소드입니다. 이 메소드를 사용하면 HTML 요소에 대한 데이터를 저장하고, 필요할 때 가져올 수 있습니다.