디바운싱(Debouncing) 이란?디바운싱은 연속적으로 발생하는 이벤트를 글로벌화해서 마지막 이벤트만 실행되도록 하는 기술이다. 사용자가 빠르게 연속해서 입력할 때, 모든 입력마다 함수를 실행하지 않고 마지막 입력 후 일정시간 대기 후에 함수를 실행하는 방식이다.디바운싱에서 전역 상태관리가 필요한 이유는, 모든 화면 위에서 관리해야 하기 때문이다. 나의 경우에 입력을 완료하고 직후에 실행되는 자동저장 기능을 구현하기 위해 디바운싱을 적용했다. 매 입력마다 저장을 실행하면 API 호출도 너무 많고, 저장되는 동안 새로운 저장이 실행될 수 있기 때문에 디바운싱이 필요하다 판단하였다. 디바운싱이 필요한 사례 1. 검색창 자동완성2. 입력값 유효성 검사3. 자동저장 다음은 검색어 입력의 디바운싱 예제이다..
프로젝트를 진행하다 보면 어느 순간 코드가 복잡해지고, 같은 로직이 여러 곳에 중복되어 있는 것을 발견할 수 있다. 이번에 프로젝트를 진행하며 상태 코드 관리 로직을 리팩토링한 경험을 기록하고자 한다. 처음에는 조건에 따라 파트를 보여주는 해당 요건을 개발하기 위해, 각 부분에 상태 값을 하드코딩하여 조건을 붙였다. 근데, 1차 개발했던 것을 수정하려고 하니 꽤나 쉽지 않았다. 나야 내가 만든 코드지만, 운영할 사람이 이 코드를 파악하는건 너무 어려울 것 같았다. 또한 코드 값이 변경되거나 코드가 추가되면 관리하기 쉽지 않을 것 같았다. // Before: 여러 컴포넌트에 분산된 하드코딩if (code === 'AAA' || code === 'BBB' || code === 'CCC') { // ...}..
회사에서 잘못된 useEffect 사용으로 인해 화면에 무한루프가 걸리는 문제가 발생했다.내가 원인도 파악을 못해서, 과장님이 의심되는 부분 확인해주셨다. 문제는 새로고침 후, 팝업 렌더링에서 useEffect 를 사용하는게 문제였다. useEffect 를 사용하며 새로고침이 발생해, 로그인 인증을 재실행하고, 인증 재실행 후 팝업 렌더링이 재실행되는 무한루프에 빠진 것이다. 어렴풋이 사용하고 있던 useState 와 useEffect 를 정리하고자 한다. useStateuseState 는 컴포넌트의 상태 (데이터) 를 관리하기 위해 사용한다.useState는 컴포넌트가 기억해야 할 값 (상태) 를 만들고 관리할 수 있게 해주는 Hook이다.컴포넌트 내에서 변경될 수 있는 데이터를 관리한다.useSt..
이미 존재하는 리액트 프로젝트를 실행했는데 아래와 같이 에러 메세지가 발생했다. Cannot find module 'react' or its corresponding type declarations. 해당 에러는 React 가 설치되지 않거나, 인식되지 않아 발생하는 문제이다. 아래의 과정을 통해 해결해보겠다. NodeJs 설치1. nodeJs 설치 여부 확인윈도우의 경우 windows + R > cmd 입력 > 확인으로 명령 프롬포트 실행.맥의 경우 https://skylarcoding.tistory.com/348 게시글에서 참고하면 된다.node -v 설치되어 있다면 버전 표시v18.17.1설치되지 않은 경우 'node'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아..
error when starting dev server:Error: EACCES: permission denied, .. 관련 오류가 발생했다. nodejs 버전 때문에 이거저거 시도하면서 파일의 권한이 변경된 것으로 확인된다.방법은 간단하게, 문제가 발생한 부분으로 가서 아래 명령어 입력해주면 된다.sudo chown -R (사용자명) node_modules 그러면 정상적으로 잘 실행되는 것을 확인할 수 있다.
1. 넥사크로 사이트에 들어가 라이선스를 신청한다.https://support.tobesoft.co.kr/Support/?menu=License_Info&page=1 TOBESOFT Technical Support:투비소프트 기술지원 사이트TOBESOFT Technical Support, 투비소프트 기술지원 사이트support.tobesoft.co.kr 2. 라이선스 메일을 확인한다. 3.라이선스를 입력한다.Application/Service 옆의 이름 : TOBESOFT라이선스 키 : 라이선스 > Tool
그리드 이벤트의 onheadclick 에 해당 함수를 설정해준다. 함수 내용을 다음과 같이 채운다.this.grid_allcheck = function (obj:nexacro.Grid, e:nexacro.GridClickEventInfo){ // 체크박스의 ds 컬럼 이름 var sCol = "CHK" if(e.col == 0) { // 헤더의 가장 왼쪽의 체크박스일 경우 var headState = this.grd_Name.getCellProperty('head', 0, 'text'); // 셀 상태 가져옴 var updateFlag = headState == '0' ? '1' : '0'; // 0일 경우 1로, 1일 경우 0으로 변경 f..
this.ds.addRow();this.ds.deleteRow(this.ds.rowposition); 위 코드를 이용하면 dataset 내부의 row를 추가하고 삭제할 수 있다.
combo의 index를 원하는 값의 index로 설정하면 된다.this.form.combo.set_index(0); index 순서는 바인딩한 dataset의 Rows 에서 확인할 수 있다.
처음에는 dsSelData 데이터셋을 만들어서 , 팝업 화면에서 선택한 값을 데이터셋에 담아 object 로 반환하여 전달하도록 구현하려고 했다.그러나 넥사크로 고객센터에 문의했는데 그게 불가능하다고 한다. 어쩐지 ㅜㅜ 3일동안 삽질했는데 하 .. 허무하다 ... 팝업에서 문제인 줄 알았지 설마 그냥 오브젝트 반환이 안될줄은 몰랐지 ... 그런데 내가 원하는 답이 나오는 질문을 준비하기까지 3일이 걸린거라 생각하자 ..this.close();팝업창에서 부모창으로 값을 리턴할 때는기본형(Primitive Type) 데이터형(int, floa, string)만 지정 가능합니다. 부모창에서 팝업을 여는 함수를 작성한다. 이부분은 다양한 방법이 있으므로 자세한 설명은 생략하겠다.this.Button00_oncl..
