kasumil의 코딩 공작소

기존에 DIV태그 복사 기능을 구현해두었다. https://curryyou.tistory.com/358 [자바스크립트] div, p, a, span 텍스트 복사(copy)기능 구현 방법 보통 자바스크립트에서 텍스트를 클립보드에 복사하는 방법은 textarea, input[text]태그의 value값을 선택하여 document.execCommand('copy') 명령어를 실행하는 것이다. [자바스크립트] 텍스트 클립보드 복사 curryyou.tistory.com 위 내용으로 썼는데, 문제는 크롬에서 document.execCommand('copy'); 위 내용이 Deprecated된 상태.. 작동이 안됨. 그래서 찾아보았다. 클립보드 API를 사용하길 권장. // div 내부 텍스트 취득 const val..

버튼 클릭할 경우 해당 기간에 맞춰 동적으로 DataTable을 변경하는 기능이 필요했다. 코드는 기존에 작성했던대로 사용했으면 됐으나 기존 값이 있는 경우 새로 갱신이 되지 않았다. 2021.11.03 - [취업/Datatable] - [PHP] DATATABLE AJAX 통신하기2. [PHP] DATATABLE AJAX 통신하기2. https://kasumil.tistory.com/196 이전편에서 해당 내용을 언급했었다. 하지만, 해당 부분은 완벽하지 않았다. DB값에서 온 것을 바로 넣는 수준이었기때문에 그러하다. 응답 값을 수정하지 못 했으니까! kasumil.tistory.com 그래서 찾아보니 datatable을 destroy해라 이것을 사용해도 된다. 그런데, ui가 깨지는 문제가 발생하더..

워드프레스 라이브러리 같은데, 엄청 오래된 라이브러리다. 아마도 수정이 되어야 했을 거 같은데 안되어서...그냥 있는 버그였다. jquery.prettyPhoto.js 파일에서 코드 난독화를 제거하고, imageWidth, imageHeight를 찾아보면 -200을 수정해야한다. 예쁜 사진에서 같은 문제가 발생했고 rafael.dev에서 게시한 것과 동일한 CSS 코드 수정 사항을 찾았습니다. 다만, 이전 버튼과 다음 버튼이 사라지고 스타일이 정말 이상해서 여전히 좋지 않은 것 같습니다. 크기 조정 계산으로 인해 문제가 발생한 것 같아서 js 소스에서 크기 조정 기능의 스니펫을 찾으려고 하면 아래와 같이 쉽게 솔루션을 얻을 수 있습니다. 저는 3.1.6 버전을 사용하고 있습니다 _fitToViewport..

간단하게 메타마스크 내에서 굴러가는 부분을 구현하기 위해서 React로 해당 부분을 구현해보았다. 목적: 로그인 값이라던가 프론트 세션스토리지와 쿠키값 소실 여부를 체크하기 위함. 로그인 인증방식에는 세션 기반과 토큰 기반으로 구성되는데, php로 접속시 헤더값인 세션이 삭제되어 로그인 유지가 안되는 끊김이 생기는 문제가 발생하고 있었다. 그래서 React 세션스토리지 저장과 쿠키값 저장을 구현해보았더니 잘되네.. 서버 통신해서 success를 주기로 구성해놨더니 그 값을 잘 받아와서 저장하더라. 이번에 기능을 구현하면서 발견한 점이 React에선 내부 통신이 안된는 것 같더라. php는 내부 통신을 통해서 해당 Controllers에 접근하여 외부 통신을 다르게 하고, 호출시 아예 도메인을 분리하여 사..

리액트나 뭐나 어차피 내용은 같다. 그냥 배열 하나 만들고, 그곳에 해당 정보를 넣어준 뒤 그것을 화면에 뿌려주는 것. 이렇게 왜 하냐고? 나중에 까먹을까봐... 구조는 겁나 간단하다. 내 경우 셀렉트 박스로 해당 제품을 선택하는 것이라 그러한 셀렉트 박스의 선택에 따라서 해당 bind된 값이 들어오면 그것을 넣어주면 되는 것이었다. 상태 관리 라이브러리인 리덕스도 배열 갖고 장난치는건데, 그냥 어디든지 접속가능하냐 못하느냐 이것 차이. 한번 수정했는데, 작성했다가 보니 splice를 사용할 경우 없어져야 하는 대상만 배열에 남는 문제가 생겨서, filter 함수로 교체했다. 안쓰던 map 함수의 idx 매개변수도 삭제하고. let cart = []; $(`.셀렉트박스`).change(function()..

let data = [1,2,3,4,5,6]; let arrId = 0; setInterval(() => { console.log(data[arrId]); arrId++; if(arrId == data.length) { arrId= 0; } }, 1000); 이렇게 하면 1초마다 해당 data에 있는 배열값이 하나씩 찍힌다. 회사에서 일하면서 주기적으로 해당 부분을 인터벌 돌려줘야하는 곳이 있어, 만들어보았다.

인터넷을 하다보면 기존에 흔히 보는 막대 그래프들을 볼 것이다. 그것은 보통 프로그레스 태그일 것이다. 하지만 이것을 쓰면 귀찮게 css도 컨트롤해야한다. 하지만, 동일한 기능을 갖고 있지만 css까지 포함한 신기한 태그들이 있다. 그것은 바로 meter 태그. 자동으로 바의 컬러가 바뀐다. 이렇게 사용하면 진짜 편리함. details태그. 접는 기능. 대부분 접는 기능은 js로 사용할 것이다. 하지만 해당 detail 태그를 쓰면 자동으로 해당 부분을 만들어준다. 제목 내용 마지막으로 picture 태그 해당 부분은 media 쿼리를 내장해서 자동적으로 크기에 맞춰 로딩하도록 하게 만들어준다. // 이 태그는 디폴트인데, 해당 태그들이 지원되지 않는 브라우저의 경우 사용된다. 이게 좋은 점이 여러개를 ..

비교를 위해서 다른 사이트의 쿠키 값을 가져왔다. 보기만해도 도메인이 다르지 않는가. 이런 문제로 인해서 동일한 이름의 쿠키이더라도 생성 방식이 다르면 도메인을 다르므로 쿠키가 덮어쓰기가 안되고 중복되는 문제가 발생한다. 쿠키값을 읽는 부분인데, 이를 수정했으나 다음날 이상이 있다고 하길래 뭔가 했더니 고쳤던 부분이 다른 test컴에선 남아 있어 그런 문제였다. 보통 여러명이 코딩하면 발생할 수 있는 문제인데, 통일된 쿠키값을 만드는 게 중요하다. 필요할때마다 쿠키 값을 만들 필요가 있어 인터넷에서 구한 setcookie 코드를 사용하는데, 이번에 경우 쿠키값을 만드는 모듈을 다르게 생긴 문제가 있었다. 쿠키를 만드는데, 모듈을 다르게 쓰니 생성된 도메인이 달라 쿠키를 동일한 명으로 2개를 만드는 경우가..

원래는 이분 코드를 썼으나 나에게 맞지 않아서 수정하였다. https://wooncloud.tistory.com/26#comment21335878 [자바스크립트] Date Range Picker : 기간 날짜 라이브러리 웹 개발을 하면서 날짜를 선택하여 사용자로부터 기간을 받고 싶을 때, 여러분들은 어떻게 하나요? 기본적으로 input 태그에 type을 date로 하여 2개의 input 필드를 만들 겁니다. See the Pen basic-date by w wooncloud.tistory.com $(function () { $('#dates').daterangepicker({ "locale": { "format": "YYYY-MM-DD", "separator": " ~ ", "applyLabel": "확..

오늘의 후기. 서버 두번 뻗게 만들어서 한소리 들었다. PHP 문제부분이 기존에는 백엔드 측에서 데이터를 만들어서 줬는데, 이번에는 SQL문 자체를 가져와 내가 배열->객체로 넘겨주는 부분에서 발생했다. 원래는 dataTable을 사용하여 해당 부분을 sheet.js를 통해서 excel을 만들었는데, 테이블 보이는 게 10개고 실제 1,2,3페이지 이렇게 구성되어 있으면 보이는 10개만 excel 파일로 만들어주는 것이 문제였다. 원인은 3번 예시인 html table를 사용했더니 발생한 문제였다. 말 그대로 화면에 보여지는 부분이 10개니 그냥 tag에서 10개만 있다고 뽑아오는 것이 문제. 이름 CP 망나뇽 4000 마기라스 3900 해피너스 3800 파일 내보내기(HTML TABLE) : https..