반응형

js 24

[React.JS] 자식창에서 부모창 호출하기.

보통 자식창에서 작동하는건 iframe태그 안에서 호출하는데, 도메인이 다른 사이트에서 부모창의 이벤트를 관리해줘야 하는 부분이 생겼다. 팝업 자식창을 호출하는데 있어 흔하게 사용하는 window.open(url, '이름', '옵션); 을 사용했다. 해당하는 자식창에 부모함수를 호출을 어떻게 하나 했는데, 아주 좋은 글이 있어서 해당 글을 참조했다. window.opener는 맞는데, 그 이후 window.opener.document 등등 적혀있어 죄다 작동이 안된다. cors 오류 뿜뿜... CORS 문제로 인해서 아래의 링크를 참조. // 자식창에서 코드 인입. window.opener.postMessage({code:'event'}, 'domain주소'); // 난 1번라인의 코드로 수정해서 사용했..

취업/React.JS 2023.01.26

[nest] 동일한 포트에서 사용 시 library @nest/common가 뻗는 오류 발생...

nest g resource Users 명령어를 사용하여 CRUD 기능을 학습 중인데, 카페에서 공부하다 보니까 웹서버 3000포트를 내가 잡았다가 오류 잡느라 다시 껐다가 켰는데, 그 사이에 누가 잡아채갔다. 그러다보니 갑자기 작동이 안되는 오류가 발생하였는데, 로그에서 mapping이 되어야 하는데 먹통이 되고, @nest/common쪽에서 import 오류가 발생하길래 무엇이 잘못인고 했었다. 생각해보니 바로 옆에서 aws공부하는 사람들이 아마도 포트를 가져가는 바람에 발생한 것 같아 아예 안 쓰는 이상한 6400번대 포트를 사용하기로 하여, 해당 포트로 기능을 진행했다. 바로 작동... node쪽에서 해당 문제가 발생하면 금방 잡을텐데, nest는 나도 처음이라 해당 문제 해결이 좀 어려웠다.

코딩/Nest.js 2023.01.08

[JS] INPUT 소수점 컨트롤 및 소수점 한번만 입력하게 하기

HTML JS let decimalType = 1; function isNumberKey(evt) { let charCode = (evt.which) ? evt.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode 57)) return true; // Textbox value let _value = event.srcElement.value; // 소수점(.)이 두번 이상 나오지 못하게 if(decimalType == '특정타입') { // 특정 타입의 경우 아예 입력 못하게 막기 if (charCode == 46) { return false; } } else { let _pattern0 = /^\..

[chart.js] Radar 차트 마지막 외곽선만 두껍게 하기

카카오 서버에 불나는 바람에 이전 글이 안 가져와지는데, 이전 글을 참고해서 기본코드를 작성한 후. 진행 할 것. 기존 작성된 코드는 context => 부분에서 index를 따로 가져와야 해서 이걸 반응형으로 고쳣더니 화면에 따라 테두리가 사라지는 버그가 있었다. 그러다가 겨우 찾았다. 정답은 index가 아닌 value 값을 통해 해당 line을 찾는 것이었다. 이러한 질문을 보고 원개발자가 해당 기능을 추가하겠다고 적었다. https://github.com/chartjs/Chart.js/issues/10007 Radar graph - grid customization · Issue #10007 · chartjs/Chart.js I'm using a Radar graph and I would like..

취업/Chart.js 2022.10.17

[JS]DATATABLE AJAX를 통한 새로운 값 변경하기.

버튼 클릭할 경우 해당 기간에 맞춰 동적으로 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가 깨지는 문제가 발생하더..

취업/Datatable 2022.08.23

[Node.js] text파일 읽어와서 excel파일로 저장하기.

text를 이전에 만들어놨는데, 파일 안 형식은 json파일과 동일하다. [ {'이름': "홍길동", '나이':'70'}, {'이름': "홍길동2", '나이':'72'}, {'이름': "홍길동3", '나이':'70'}] 대충 위와 같이 이렇게 구성되어 있는데, 이를 읽어오기 위해서 fs모듈을 사용하고, xlsx를 사용하였다. sheetjs보다 좋은게 너비 설정이 가능해서 참 좋네~(sheetjs는 이건 유료 기능) // array 데이터 이용 const xlsx = require('xlsx'); const path = require('path'); const fs = require('fs'); let file = './해당 text.txt'; let textString; fs.readFile(file, ..

[ci4] DataTable 서버-사이드 Server-side Processing

데이터 테이블을 구현하는데 있어 서버사이드 기능이 필요했다. 프론트만 쓰면 좋지만, 이게 5천개가 넘어간 순간 1분이 넘게 로딩된다... 그래서 이전에는 구현하지 못했지만, 이번에 구현하게 되었다. 아래 테이블 컬럼들은 의미 없는 데이터입니다. // front.js 네트워크 통신시 전달되는 데이터 값. draw: 3 columns[0][data]: 0 columns[0][name]: columns[0][searchable]: true columns[0][orderable]: true columns[0][search][value]: columns[0][search][regex]: false columns[1][data]: 1 columns[1][name]: columns[1][searchable]: tru..

취업/CodeIgniter 2022.07.15

[JS] 프리티포토 모바일 크기 수정하기.

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

[php] 자동 개행, 줄바꿈, \n 기능 실행하기

nl2br 함수 자바스크립트에선 동일하게 작동되는 내장함수가 없으므로 만들어줘야한다. 원래 replace는 알고 있었는데, 글쓰려고 찾아보니 누가 만들어놓은 함수가 있더라. 자바스크립트 함수 출처는 요기 https://ezcode.tistory.com/51 [Js] php의 nl2br과 같은 기능의 javascript textarea 같은 개행이 가능한 데이터를 개행처리하고자 할때 대부분은 php의 nl2br함수를 사용한다. 하지만 부득이하게도 javascript 로 처리해야 한다면 아래의 function을 정의하고 사용하자. ezcode.tistory.com

취업/PHP 2022.06.10

[php]간단하게 장바구니 기능 만들기

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

취업/PHP 2022.03.29
728x90