데브심의 개발자 레퍼런스

* 개요: 이제는 서비스 종료된 CentOS 7-2009를 오래된 장비 사용 등의 이유로 설치하는 경우 ISO 파일 다운로드 및 USB 만드는 법을 기록한다. 최신 장비에는 로키 리눅스를 설치하도록 하자.

1. https://www.centos.org/download/ 이동

2. 하단의 CentOS Vault 클릭

3. 본인이 다운로드 하고자 하는 버전을 다운로드 한다.

4. isos 디렉토리 클릭

5. x86_64 디렉토리 클릭

6. 원하는 iso 파일을 다운로드 한다. 보통 DVD-버전.iso 파일이 적당하다.

7. Rufus 프로그램으로 USB에 부팅디스크를 생성한다. Rufus 프로그램 사용법은 인터넷에 많이 나와있다.

8. /etc/sysconfig/network-scripts/ 경로로 이동한다. ifcfg-enXXXX 파일을 vi를 이용하여 수정한다. 

...
BOOTPROTO=none
...
ONBOOT=yes
IPADDR=
prefix=24
GATEWAY=
DNS1=
을 입력한다.
wq를 저장한 후 systemctl restart network 명령어를 이용하여 네트워크 재시작 후 ping 8.8.8.8 해서 ping이 가면
네트워크 연결 끝!

9. putty 등으로 sshd 접속을 하기 위해 준비한다.

vi /etc/ssh/sshd_config
이동 후 Port 22 주석을 해제한다.

systemctl restart sshd.service
명령어로 sshd 서비스를 재시작한다.

그 후
firewall-cmd --permanent --zone=public --add-port=22/tcp
방화벽에 22포트를 추가한다.

firewall-cmd --reload
방화벽 재시작 후
putty로 접속해본다.

// 방화벽 목록 조회: firewall-cmd --zone=public --list-all

10. 이제 모든 준비는 끝났으니 본인이 원하는 작업을 시작하자 !

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

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