데브심의 개발자 레퍼런스

환경: STS 3.9.4.RELEASE

개요: 이클립스(or STS) Servers 우측 Properties 클릭 하고

Properties 화면에서 [Switch Location] 버튼을 클릭하는 실수를 종종 하곤 한다.

[Switch Location] 버튼 클릭 후 화면이다. Location이 변경되어있다.

서버를 실행하면 아래와 같이 오류가 발생한다.(로컬에서 실행이 안된다.)

내가 생각한 조치 방법: 

일단 Run 하위 [Run Configurations...]  -> 해당 프로젝트의 VM arguments 설정값이 초기화 되는 것은 확인하였다. 본인이 추가했던 것이 있다면 다시 추가하도록 한다.

되겠지? 이제...

하지만 안된다.........

어 뭐지?

아 그럼 Maven Update 해보자....

이제 잘되겠지?

그런데 Server startup in 6441 ms에서 더이상 진행이 안된다....

자 그럼 이제 Cleanup....

또 안된다...

당황하기 시작한다....

남은건 Servers의 Clean Tomcat Work Directory...

그래도 안된다..............................................

해결책: STS를 종료시키고 다시 실행한다.

종료했다가 다시 실행하니 잘 실행된다...

결론: 최신 툴을 사용하자 !

* Tool: 이클립스 or STS

* 개요: 이제는 오래된 툴인 이클립스에서 Servers 창에서 New Server로 아파치 톰캣 추가 시 Unknown version of Tomcat was specified. 오류 조치하는 방법

* 확인: 아파치 톰캣을 오래된 버전을 사용하는 경우 src 디렉토리가 아닌 bin 디렉토리 하위의 zip파일을 다운 받은 후 Tomcat installation directory 경로를 잡는다.

 ○ 개요: VSCODE 자바 프로젝트 실행 시 Could not find or load main class App 에러 해결

 ○ 증상: 오른쪽 상단 화살표 클릭 시 에러, 왼쪽 Run 클릭 시 정상 동작

 ○ 조치: 확장 프로그램 중 Code Runner 「사용 안 함」 처리

 ○ 개요: VSCODE 자바 프로젝트 실행 시 터미널에서 실행이 안되고 윈도우 CMD에서 실행될 때 조치

 ○ 조치: Ctrl + , 후에 console 입력 후 위 이미지와 같이 Java program Console 위치 설정

 ○  도움을 받은 곳: https://stackoverflow.com/questions/57857855/could-not-find-or-load-main-class-vs-code

* 개요: 이제는 서비스 종료된 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 버튼 클릭