Developer's blog

이전에 포스팅된 Table Id 클릭 시, 해당 Table ID의 User Betting Logs 결과를 보여주기 위해 개발한 라우팅 기능에서 현재, 같은 창에서 URL이 넘어가서 결과를 보여주기에 뒤로가기 클릭 시, 데이터가 유실되는 문제점이 있었다. 따라서, 기존의 창이 아닌 새로운 창을 또는 새로운 탭을 통해 결과를 보여줌으로써 데이터가 유실되지 않도록 변경한다. 먼저, 새 탭, 새 창을 이용한 라우팅을 위해 찾아본 결과로는 https://rocabilly.tistory.com/84 해당 블로그를 찾았다. 해당 글에 따르면 window.open(URL); 을 통해서도 간단히 새 창을 띄울 수 있다는 것을 알게 되었고 기존의 코드를 location.href = "/report/router?tableI..

each() 메서드는 jQuery를 사용해 배열을 관리하고자 할 때 사용할 수 있다. each() 메서드는 매개 변수로 받은 것을 이용하여 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드이다. each() 메서드는 두 가지 타입으로 구성이 되는데, 다음과 같다. (출처: https://webclub.tistory.com/455 [Web Club]) // jQuery 유틸리티 메서드 $.each(object, function(index, item){ }); // jQuery 일반 메서드 $(selector).each(function(index, item){ }) 첫 번째로 사용되는 $.each() 메서드는 object와 배열 모두에서 사용할 수 있는 일반적인 반복 함수이다. 다시 ..

지금 개발하고자 하는 Copy 기능은 요즘 어디서든 찾아볼 수 있는 기능이다. 이는, 바로 텍스트 옆에 복사 버튼이 있고, 그것을 클릭한다면 옆의 텍스트가 복사되는 기능이다. 이를 위해서 처음은 Javascript에서 주로 쓰이는 Text를 Clipboard로 복사하는 방법을 찾아보았다. 그 결과, https://sub0709.tistory.com/144님의 블로그를 찾을 수 있었고 JavaScript에서 쓰는 텍스트 복사 방법을 알 수 있었다. 이를 적용시키기 위하여 내가 현재 작성한 DataTable의 Code는 다음과 같다. 더보기 function initTable() { table = $('.dataTables-example').DataTable({ serverSide: true, processi..

먼저, 다른 페이지로 원하는 파라미터를 넘기기 위해 버튼 클릭 시, 해당 값을 다른 페이지로 옮기는 코드를 먼저 구현한다. $('.dataTables-example').on('click', '#TableIDInfo', function() { const row = $(this); const tr = row.closest('tr'); const dataTableRow = table.row(tr[0]); const rowData = dataTableRow.data(); const tableId = rowData.GameTablesID location.href = "/report/router?tableId=" + tableId; }); 위의 코드는 DataTable 내의 데이터 값을 버튼으로 변경한 id가 Ta..

input form에 숫자 관련 금액을 입, 출금하기 위해 숫자를 입력할 시, 자동으로 콤마(,)를 생성하는 기능을 개발하고자 합니다. 먼저 Input box에 콤마를 찍어주기 위한 정규식을 기반으로 한 자바스크립트 함수를 제작한다. 콤마를 찍기 위한 대표적인 방식은 .toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') 이다. 콤마 생성을 위한 함수는 https://mi-nya.tistory.com/248 님의 블로그를 참고했습니다ㅎㅎ 그 후, Form의 Input에 value="" onkeyup="inputNumberFormat(this)"를 추가하여 주었다. 이 방식을 적용하니, Form의 Input Box에 숫자를 입력하면 자동으로 콤마가 생성이 되었다!! 하지만..

React.js React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다 React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. React의 필요성? React를 사용하지 않아도 html, css, javascript를 이용해서 웹 페이지를 만들 수 있지만, React를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용된다. React의 특징 Data Flow Component 기반 구조 Virtual Dom Props and State JSX 1. Data Flow React는 데이터의 흐름이 한 방향으로만 ..