Developer's blog

이번에는 테이블을 클릭하면 테이블이 확장되며 child row를 보여줄 수 있도록하는 기능을 개발하고자 한다. 먼저, table expand를 위한 expand용 화살표를 만들기 위해 테이블의 제일 앞에 화살표를 둘 수 있도록 html을 아래와 같이 구성하였다. 문의유형 제목 등록일 진행상태 회원정보 회원 정보는 어떻게 수정하나요? 2022-07-23 답변대기 회원정보 회원 정보는 어떻게 수정하나요? 2022-07-23 답변완료 회원정보 회원 정보는 어떻게 수정하나요? 2022-07-23 답변완료 회원정보 회원 정보는 어떻게 수정하나요? 2022-07-23 답변완료 회원정보 회원 정보는 어떻게 수정하나요? 2022-07-23 답변완료 여기서 빈 td에 contact-control이라는 클래스를 부여한 이..

오늘은 새로운 프로젝트의 웹 페이지를 제작하기 시작하며, 새롭게 로그인 폼을 만들고자 하였다. 이번에는 저번에 사용하지 않았던 기능인 비밀번호 보이기/숨기기를 개발하여 사용해보고자 생각하였다. 로그인 개발 시, 비밀번호 input type은 password로 지정하는데 그럼 비밀번호가 ****라고 표시되기 때문에 사용자는 자신이 입력한 값을 알 수 없다. 따라서 눈모양 아이콘을 클릭하면 토글 형식으로 비밀번호가 보였다, 안보였다 하는 기능을 개발하였다. 이때 필요한 코드는 비밀번호 입력 input box 와 눈모양 아이콘은 위한 i 태그를 한 번에 감싸주는 div를 선언하는 html이 필요하며, 아이콘을 input box 내의 적당한 위치에 배치하기 위한 css가 필요하다. 또한, 아이콘을 누르면 act..

이번은 쇼핑몰 또는 서점 웹사이트와 같이 이미지를 클릭하면 다음 페이지에서 해당 이미지를 큰 모습으로 상세화면으로 보이도록 하는 코드를 개발하고자 하였다. ex) 서점에서 마음에 드는 책을 고르면 다음페이지로 넘어가 그 책의 사진이 그대로 있고 설명되어 있는 페이지 이 방법을 어떻게 구현할까 지속적인 고민을 해보고 라우팅 방식으로 URL에 이미지 정보를 넘겨주고 받아서 보여주는 방식으로 개발하고자 하였다. 먼저 클릭한 이미지에 대한 정보를 알아오기 위해 클릭한 이미지의 src 값을 받아오는 코드를 작성하였다. 선택할 이미지 리스트는 아래와 같이 6개가 있다. 선택한 이미지에 대한 src 값을 가져오고자 아래와 같은 코드를 작성하였다. var test = document.getElementsByClassN..

현재 개발하고 있는 페이지에서 게임이 진행된 과정을 담은 동영상이 AWS의 S3에 저장되고 API를 통해 해당 URL을 불러와 웹 화면에서 스트리밍하는 화면을 개발하고자 한다. 이 과정에서 동영상이 저장된 정보를 불러오기 위해 서버에서 개발된 API 주소와 응답값은 아래와 같았다. /studio/channel/table/record/info 응답 값은 Ajax Success 시, data.msg.URL이라는 파라미터로 접근할 수 있었다. 처음 작성되어 있던 동영상 정보를 보여주기 위한 HTML 코드는 iframe을 이용하여 아래와 같이 작성되어 있었다. 따라서 해당 코드를 그대로 이용하기 위해 javascript를 이용하여 아래의 코드를 통해 속성을 부여하는 방법을 사용해보았다. $("iframe").a..

기존 관리자 페이지 제작에 있어 JsTree 사용법에 관해 구글링해서 필요한 정보만을 가져와 정리해두는 글이다. 1. jsTree 사용방법 및 실무 활용 예제 - https://blog.naver.com/PostView.nhn?blogId=gaeean&logNo=221522138823

이전에 포스팅된 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..