데브심의 개발자 레퍼런스

 * 개요: 자바스크립트 웹 컴포넌트 정보를 탐색해 보았다.

1. jQWidgets

   - https://www.jqwidgets.com/

   - 주요 컴포넌트: jqxGrid, jqxTextArea, jqxWindow, jqxTree, jqxComboBox, jqxEditor...

   - 업무때문에 개인적으로 많이 사용해본 웹 컴포넌트이다. 자잘한 버그가 있지만 커뮤니티 응답이 빠른 편이어서 유용하게 사용할만 하다.

2. Smart HTML

   - https://www.htmlelements.com/

   - 주요 컴포넌트: Grid, Scheduler, Chart, Gantt Chart, Card View, Editor...

   - 위에서 소개한 jQWidgets 회사에서 새제품으로 출시한 컴포넌트다. html에 태그를 입력하는 것만으로도 위젯 생성이 가능하다. 단, 복잡한 기능 구현에는 자바스크립트 작성이 필요하다.

3. ax5ui

   - https://ax5ui.axisj.com/

   - 주요 컴포넌트: ax5ui-grid, ax5ui-mask, ax5ui-dialog, ax5ui-toast, ax5ui-modal, ax5ui-calendar...

   - 한때 AxisJ라는 대한민국 grid 컴포넌트로 매우 유명한 라이브러리였으나 현재는 ax5ui로 변경되고 더 이상의 유지 보수가 되고 있지 않는 것 같다.

4. Kendo UI

   - https://www.telerik.com/kendo-ui

   - 주요 컴포넌트: Grid, Charts, Button, Calendar, Scheduler, AutoComplete... 

   - 여기저기서 많이 들어본 컴포넌트다. 하지만 써보지는 않았다. Angular, React, Vue, jQuery를 지원하며 약 100여가지의 컴포넌트가 있다.

5. DHTMLX

   - https://dhtmlx.com/

   - 주요 컴포넌트: Suite, Gantt, Scheduler, Kanban, Event Calendar, Spreadsheet, Pivot, Grid...

   - 폴란드 중소기업에사 만든 UI 컴포넌트다. 사용해보지는 않았지만 UI가 시원시원하고 직관적이어서 마음에 든다.

6. Ext JS

   - https://www.sencha.com/

   - 주요 컴포넌트: app, calendar, chart, d3, dataview...

   - Ext JS도 여기저기서 많이 들어본 UI컴포넌트다. 홈페이지를 가보면 대기업에서 많이 사용한다고 광고하고 있다. 도큐먼트를 보면 거의 UI 컴포넌트를 넘어서서 프레임워크로 사용해도 될 정도로 기능이 정말 많다.

* 마무리: 개인적으로 인터넷에서 찾아본 것을 갈무리한 것이다. 다른분들이 새로운 웹 컴포넌트를 찾는데 도움이 되었으면 좋겠다..

※ 개요: TypeScript 때문에 VSCode에 ESLint를 설치하였는데 노란색 경고 밑줄이 생기지 않아서 당황하였다. 노란색 밑줄이 생기게 하는 방법을 알아보자.

※ 방법:

1. 확장 탭에서 ESLint 설치 상태화면의 오른쪽 톱니바퀴 클릭 후 확장 설정 항목을 선택한다.

2. 검색 필드에서 vscode-eslint 오른쪽에 스페이스 한칸 띄고 working이라고 입력 후에 엔터를 친다.

3. settings.json 파일하단에 위 이미지와 같이 "eslint.workingDirectories" 하위에 {"mode":"auto"} 입력 후 저장한다.

4. 위의 방법을 하였는데도 반응이 없으면 ts 프로젝트의 .eslintrc.js 파일의 rules 하위를 아래 이미지와 같이 수정한다.

    prettier/prettier 하위에 endOfLine: 'auto' 옵션을 추가한다. 나머지 코드는 모두 주석처리 후 저정한다.

* 개요: 서버단은 View를 반환하고 반환하는 View는 AbstractXlsxView를 상속받은 클래스의 객체를 반환하도록 되어 있는 엑셀저장이 form.submit이나 window.location.href로 잘 동작하는데 로딩바를 추가할 필요가 있어서 ajax 호출로 변경하는 경우 참고하면 된다. 

$.ajax({
	type: "GET",
    url: "your URL",
    data: "your param",
    contentType: "application/json",
    xhrFields: {
    	responseType: "blob"
    },
    // xhrFields 필드는 ajax 공식 문서에 보면 나온다.
    // https://api.jquery.com/jQuery.ajax/
    // blob은 Binary Large Object 그림, 오디오, 멀티미디어 오브젝트를 뜻한다.
    success: function (data, status, xhr) {
    	if (xhr.status == 200) {
        	let blob = new Blob([data], { type: 'application/vnd.ms-excel' });
            let link = document.createElement("a");
            link.href = window.URL.createObjectURL(blob);
            let disposition = xhr.getResponseHeader("Content-Disposition");
            // 서버단에서 response header에서 filename을 넘겨주면 클라이언트에서 응답받아 사용한다.
            let filename = decodeURI(disposition.substring(23, disposition.indexOf('";charset="UTF-8"')));
            // 자르고 버무려서 파일명을 만든다.
            link.click();
            
            window.URL.revokeObjectURL(link.href);
            // mdn web docs를 보면 "URL.revokeObjectURL() 정적 메서드는 이전에 URL.createObjectURL()을 통해 
            // 생성한 객체 URL을 해제합니다" 라고 설명되어 있다.
        }
        // 본인 환경에 맞게 처리
    },
    error: function (err) {
       // 본인 환경에 맞게 처리
    }

* 주저리: 스프링 공식 문서를 아무리 찾아봐도 AbstractXlsxView 공식 예제를 찾을 수가 없다. 시간이 너무 지나서인가.... ajax 공식 doc은 왜이렇게 뭐가 없는지.... 믿을건 쳇gpt뿐이다... 쳇gpt가 출현하니 샘플 코드를 너무 잘 보여줘서 이런 블로그를 운영할 필요가 있는지 회의감이 들기도 한다..........

* 개요: 서버가 문제가 있어서 shell script로 아파치 톰캣 재기동 sh을 작성할 때 정상적으로 동작을 하지 않아서 강제로 ps를 kill 하고 톰캣을 재기동하는 shell script를 작성해보았다.

var1=`netstat -nap | grep 9091`   // 톰캣 ps 확인 명령어
// 포트 정보와 listen 상태 ps/ps명이 결과로 나타난다

IFS=' ' read -ra ps_arr <<< "$var1"   // 위 결과를 배열로 만든다

arr_size=${#ps_arr[@]}   // 배열 크기 저장

var_str=${ps_arr[arr_size - 1]}   // ps/ps명 마지막 string만 필요하니 변수에 담는다

var_ps="${var_str:0:(-5)}"   // ps/ps명(예: 12345/java)에서 /java 글자를 빼고 ps만 담는다

kill ${var_ps}   // kill ps

* 주의: 깔끔하게 한다고 변수명 뒤 = 앞뒤에 공백이 있으면 에러가 발생한다.

* 마무리: 생각보다 어렵지는 않아서 검색하면서 수정하면 본인에 맞게 원하는 sh 작성이 가능하다.

* 배열 관련 참고: https://blog.naver.com/juner84/100191014657

※ 개요: 웹페이지 서비스 시 한글 입력 시 jQuery on이벤트 하위 keydown 이벤트가 동작하도록 구현된 페이지에서 MS 엣지 브라우저 사용 시 keydown 이벤트가 먹지 않는 현상이 발생한다. 윈도우 10보다 특히 윈도우 11에서는 거의 발생하는 것을 확인 하였다.

※ 조치: 윈도우 11 기준 -> 설정 진입 -> 시간 및 언어 -> 언어 및 지역 -> 한국어 -> 언어 옵션 -> Microsoft 입력기 -> 키보드 옵션 -> 호환성 켬으로 설정

상세 사항은 아래 링크를 참조한다.(출처: 메디넷코리아 홈페이지)

http://www.mnkorea.co.kr/bbsmnk/board.php?board=mnkpds01&config=2&command=body&no=28

※ 고민: 꼭 코드를 고쳐서 해결하기 보다는 윈도우 설정을 변경해서 문제를 해결하는 방법도 고민해보자. 물론 설정을 바꾸고 충분한 테스트는 필수인 것 같다. 앞으로 이 방법이 제대로 동작하는지 더 확인을 해봐야 할 것 같다...

※ 개요: putty로 여러 서버를 띄우고 접속하는 경우 내가 작업중인 putty가 어느 서버인지 헷갈릴 때가 있다. hostname이나 맨 상단에 IP주소가 나오지만 hostname이 동일하거나 특수한 상황으로 상단의 IP주소를 확인하기 어려울 때가 있다.

putty 접속 시 타이틀명을 고정하는 방법을 알아보자 !

※ 방법

1. putty 좌측 상단 아이콘 → 마우스 오른쪽 클릭 → Change Settings... 클릭 → Window 하위 Behaviour 클릭 → Window title에 원하는 명칭 입력

2. Teminal - Features 선택 후 - Disable remote-controlled window title changing 체크

3. Session 탭 - 타이틀명을 입력한 서버를 선택 후 - Save - Apply 버튼 클릭

※ 문서 표기법

- 숫자 및 금액 : 금123,456원(금일십이만삼천사백오십육원)
- 날짜 : 2024.03.26
- 시간 : 09:30
- 항목표기 방법 : 1. -> 가. -> 1) -> 가) -> (1) -> (가) -> ① ...

IT 개발자 & 엔지니어도 회사원이다... 일반적인 교양도 알아야된다...

잘모르면 공공기관의 문서를 참고하고 보고서를 작성하자 !

※ 개요: 서버를 운영하다보면 속도가 느려지는 등의 이유로 서버 모니터링에 대한 관심을 가져야할 때가 있다. VisualVM이 입문자가 사용하기에 괜찮은 프로그램인데 초기 설정에 애를 많이 먹었다... 겨우 성공하여서 나중에 삽질을 덜하기 위하여 적어논다.

※ 환경:

   - CentOS Linux release .7.1908 (Core)

   - apache-tomcat-8.5.50

   - VisualVM 2.1.7

※ catalina-jmx-remote.jar 파일 다운로드 명령어

   - 톰캣/lib 하위에 위치시킨다.

wget http://apache.mirror.cdnetworks.com/tomcat/tomcat-8/v8.0.45/bin/extras/catalina-jmx-remote.jar

※ catalina.sh 옵션 추가 방법

   - 입력 내용중 -Dcom 부분을 보기 좋게 한다고 엔터를 쳐서 입력하면 오류가 발생한다. 그냥 복사해서 사용하자..)

   - 인터넷에서 찾아보면 setenv.sh 파일만 입력하거나 setenv.sh와 sever.xml을 수정하는 방법 2가지가 나오는데 나는 두번째만 되서 두번째 방법을 기록한다.

#setenv.sh
#파일 권한체크도 중요 -rwxr-x---

JMX_OPTS=" -Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.authenticate=false -Djava.rmi.s
erver.hostname=서버주소 -Dcom.sun.management.jmxremote.ssl=false"
JAVA_OPTS="$JAVA_OPTS $JMX_OPTS -Djava.security.egd=file:/dev/./urandom -Xms8192m -Xmx8192m"

※ server.xml 파일 수정

<Server port="8005" shutdown="SHUTDOWN">

  <Listener className="org.apache.catalina.mbeans.JmxRemoteLifecycleListener"
        rmiRegistryPortPlatform="9840" rmiServerPortPlatform="9841" />

   - SHUTDOWN 아래에 내용을 추가한다. 9840, 9841 포트는 당연히 방화벽 예외에 추가되어야 한다.

   - 수정이 완료되면 톰캣 재기동 !

※ 접속 테스트

   1. 처음은 JConsole 로 접속이 되는지 테스트 해본다. Remote Process 체크 후 IP주소: 포트(위의 예시 9840) 입력 후 Connect

   2. JConsole이 정상적으로 접속되면 VisualVM 접속을 시도한다. Remote에 IP가 추가되었으면 아이피 우측 선택 후 Add JMX Connection 클릭 후 IP주소와 포트(위의 예시 9840)를 입력하고 Connect 하면 정상적으로 연결된다.

※ 도움을 받은 곳

https://infotake.tistory.com/87

웹개발 시 유효성 검사 등으로 Object Array의 중복값을 알아내서 사용자에게 경고해주는 기능을 만드는 경우가 있다.

이를 예시로 만든 자바스크립트 코드이다.

let arr = [
	{
    	year: '2024', 
    	name: '가철수'
	},
	{
    	year: '2024', 
    	name: '나철수'
	},
	{
    	year: '2024', 
    	name: '다철수'
	},
	{
    	year: '2024', 
    	name: '다철수'
	},
	{
    	year: '2024', 
    	name: '라철수'
	}
];

let dup = [];
let check = arr.reduce((acc, cur) => {
	if (objFound = acc.find(accItem => accItem.year === cur.year && accItem.name === cur.name)) {
		dup.push(cur);
	}
	else {
		acc.push(cur);
	}
	return acc;
}, []);
     
// console.log("check: ", check);
console.log("dup:", dup);   // {year: '2024', name: '다철수'}

개선하는 방법이 있으면 댓글 부탁드립니다..

reduce.. find.. filter.. map.. set..

공부를 더 열심히 하자..... ㅜㅜ

도움을 받은 곳..

https://stackoverflow.com/questions/58754685/find-duplicate-objects-in-array-and-return-new-array-of-object-with-number-of-du

오랜만에 오라클을 설치 해보았다.

노트북에 centos 7을 설치하고 오라클 19c 스탠다드를 설치하였다. 오랜만에 설치해보니 역시나 삽질을 너무 많이 했다.

만약 이러저러한 이유로 삽질을 하고 계신분이 이글을 보고 계신다면 잠시 휴식을 취하고 머릿속을 비우고 하나 하나 짚어보셔서 해결되는 마음으로 글을 작성한다.

1. 원격으로 접속해서 설치할 것인지 서버에서 직접 설치할 것인지.. 알아야될 키워드는 x11과 xhost +

2. oracle 계정으로 접속 시 bash 쉘이 정상적으로 동작중인지 확인하자(오라클 설치 디렉토리 권한 체크는 덤~)

3. oracle_home과 oracle_base를 나도 모르게 이상한 위치에 설치했을 수도 있다.

4. 환경설정도 잊지 말자 ! more ~/.bash_profile

5. oracle_home/network/admin 위치의 listener.ora, tnsnames.ora IP주소도 설정해야 해요~

6. 방화벽은 selinux는 ??

7. 오라클 서비스는 당연히 실행했겠죠? sqlplus "/as sysdba" startup lsnrctl start .....

8. 오라클 접속 계정 만들기 ~ create, grant

9. 자 이정도만 체크해도 오라클 설치 후 접속은 OK~!