웹 개발의 기록들

폐쇄망에서 pip 또는 pip3에 호환되는 패키지 버전 찾는 방법

Nerd_Lee — Fri, 23 Dec 2022 16:53:49 +0900

$pip 또는 pip3 debug --verbose

이렇게 입력하면, 해당 pip 버전에 맞는 패키지가 무엇인 지 리스트가 출력된다.

그거에 해당하는 버전을 pypi에서 다운로드 받아서 설치하면 된다.

Poi 엑셀 양식 다운로드 쉽게 만들기

Nerd_Lee — Thu, 27 Oct 2022 15:13:20 +0900

미리 webapp 폴더 안에, 양식 다운로드에 필요한 엑셀 파일을 만들어서 넣어놓자.

그리고, 버튼으로 엑셀 다운로드를 하는 방식이라면

document.location.href = "엑셀파일이 있는 경로/엑셀파일.확장자";

이렇게 입력해주면, 굳이 Workbook 객체를 사용해서, 만들지 않아도 충분히 쉽게 양식 다운로드를 만들 수가 있다.

만약 양식을 변경해줘야 된다면, 파일만 변경해주면 끝이다ㅎㅎㅎ

아니 이렇게 간단한 게 있다니?!ㅎㅎ

Ajax <-> Controller 통신 시, javascript에서 json 데이터 깨질 때 해결법

Nerd_Lee — Thu, 13 Oct 2022 17:32:01 +0900

RestController에서, Ajax와 통신을 하는 쪽에

RequestMapping 어노테이션에서, produces 속성에 "application/text; charset=UTF-8" 이 값을 추가하자.

dispacther-servlet.xml에 bean 설정, ajax contents-type을 변경하는 게 아닌, 저게 가장 확실한 방법이다.

나는 그랬다.

전자정부 프레임워크... 아.. 진짜 미치겠다ㅋㅋㅋㅋ

스프링 부트가 진짜 편한 거였단 걸 현재 프로젝트하면서 깨닫는다.. 진짜ㅋㅋ

mecab과 word2vec 라이브러리 설치하기

Nerd_Lee — Wed, 5 Oct 2022 13:20:36 +0900

https://happygrammer.github.io/nlp/word2vec/

Word2vec를 이용한 임베딩

happygrammer.github.io

https://cleancode-ws.tistory.com/97

윈도우 python3.X mecab 설치 간단~

1. mecab-ko-msvc 설치하기 'C 기반으로 만들어진 mecab'이 윈도우에서 실행될 수 있도록 하는 역할 1-1. 링크 클릭 https://github.com/Pusnow/mecab-ko-msvc/releases/tag/release-0.9.2-msvc-3 1-2. 윈도우..

cleancode-ws.tistory.com

mecab 설치시, 자신이 설치할 환경이 아나콘다인지 아니면 기본 베이스로 설치할 것인지에 따라 다르다는 것을 명심하자.

[ JAVA ] ReplaceAll에서 정규표현식 특수문자

Nerd_Lee — Thu, 22 Sep 2022 12:18:39 +0900

ReplaceAll을 사용해서, 특수문자를 지우고 싶은 경우가 생기게 된다.

특히 괄호를 없애고 싶은 경우가 생기는데 "[[]]" 이렇게 한다고 해도 치환이 되질 않는다.

그럼 괄호는 치환을 어떻게 해야하는가?

"[\\[\\]]" 이렇게 하면 '[' 괄호와 ']' 괄호를 치환을 할 수 있다.

앞에 \\이걸 붙여줘야하는 기호는 '(' , ')' , '{' , '}' , '^', '[' , ']' 이 기호만큼은 앞에 \\ 붙여줘야 한다.

String s = "['A','B','C','D']";
System.out.println(s); // ['A','B','C','D']

String result = s.replaceAll("[\\['\\]]", "");
System.out.println(result);	// A,B,C,D

Spring과 Python ProcessBuilder로 실행시 인코딩, 한글 깨짐 해결

Nerd_Lee — Thu, 1 Sep 2022 15:25:34 +0900

ProcessBuilder로 스프링 내에서 Python을 실행해야하는 경우가 있을 수도 있다.

하지만 분석한 값을 return 받아보면 글자가 깨져서 나오는 경우가 있는데...

java에서도 인코딩 해보고, python 파일에서도 인코딩해봐도 소용없는 경우가 있다.

하지만 방법이 있다!

import 하는 곳에, sys와 io 라이브러리를 import 하고

그 밑에 코드 2줄만 작성해주면 해결이 간단하게 된다ㅎㅎ

import sys
import io

sys.stdout = io.TextIOWrapper(sys.stdout.detach(), encoding="utf-8")
sys.stderr = io.TextIOWrapper(sys.stderr.detach(), encoding="utf-8")

참 쉽죠?

문제를 겪고 있는 모든 분들이 이 코드로 해결이 되었기를 바란다.

Spring Boot와 Python 연동하기

Nerd_Lee — Thu, 1 Sep 2022 15:20:06 +0900

일단 나는 파이썬은 잘 알지 못한다.

아직은 배우고 싶은 생각도 없다.

하지만, 스프링과 파이썬을 연동해야하는 경우가 생겨버렸다.

어떻게 하면 연동하는 지에 대해 알아보자.

일단, REST API로 통신을 해서, 파이썬을 실행하는 방식으로 만들었다.

만약 RestController로, api/test 라는 걸로 통신했다고 예를 들어보자. RestController는 생략하겠다.

그리고 @Component 객체를 만들어줘야 한다.

PythonRunComponent.java 파일을 만들어주고, @Component 어노테이션을 붙여주자.

@Component
public class PythonRunComponent{
	...
}

이런식으로 클래스를 만들어줬다면, 통신을 할 때 실행 할 메서드를 하나 만들어주자.

@Component
public class PythonRunComponent{
	@Value("classpath:static/python/test.py")
    private Resource pythonFile;
    
    public String runPython(){
    	
    }
}

@Value 어노테이션 안에 있는 값은

src/main/resources/python 폴더 안에 있는 test.py 파일을

pythonFile에 가지고 있겠다라는 뜻을 가지고 있다.

그리고, REST API 통신을 실행하는 메서드에

PythonRunComponent 객체 안에 있는 runPython 메서드를 실행하도록 하기 위해

runPython이란 메서드를 만들어주었다.

그냥 test.py에, print("hello world") 라는 출력 함수 하나만 있다면, 저걸 어떻게 실행해서 Console창에 띄우거나 저 값을 받아올 수 있을까?

답은 ProcessBuilder다. ProcessBuilder 객체로, 명령 프롬프트 처럼 command를 날려서 python을 실행하게 하면 된다.

@Component
public class PythonRunComponent{
	@Value("classpath:static/python/test.py")
    private Resource pythonFile;
    
    public String runPython(){
    	boolean isWindows = System.getProperty("os.name").toLowerCase().startsWith("windows");
        String python;
        
        python = isWindows ? "python" : "python3";
    
    	ProcessBuilder builder = new ProcessBuilder();
        
        try{
        	builder.command(python, pythonResource.getFile().getAbsolutePath()).redirectErrorStream(true);
            
            builder.directory(new File(System.getProperty("user.home")));
            
            BufferedReader br = new BufferedReader(new InputStreamReader(process.getInputStream(), "utf-8"));
            
            String line = null;
            
            while((line = br.readLine()) != null){
            	System.out.println(line);
            }
            
            br.close();
            
            int exitCode = process.waitFor();
            
            if(exitCode == 0){
            	return "success";
            }
            else{
            	return "fail";
            }
        }
        catch(Exception e){
        	e.printStackTrace();
        }
        
        return "error";
    }
}

이게 최종코드이다. 그러면 python 파일이 잘 실행이 될 것이다.

하지만 중요한 점도 있다. InputStreamReader에서, "utf-8"로 설정을 해줬는데도 글자가 깨져서 나오는 경우가 생긴다.

그러면 값을 line으로 받아와도 무용지물이 된다.

기존에 나와있는 python 파일의 인코딩 코드를 사용해도 글자는 깨져서 나온다.

그 방법은 밑에 링크로 남겨놨다.

해당 코드를 이용해서 잘 실행되기를 바란다.

Spring과 Python ProcessBuilder로 실행시 인코딩, 한글 깨짐 해결

ProcessBuilder로 스프링 내에서 Python을 실행해야하는 경우가 있을 수도 있다. 하지만 분석한 값을 return 받아보면 글자가 깨져서 나오는 경우가 있는데... java에서도 인코딩 해보고, python 파일에서도

includecoding.tistory.com

[ 넥사크로 ] 6. 넥사크로 기본화면 개발 실습

Nerd_Lee — Wed, 10 Aug 2022 16:46:16 +0900

Dataset을 활용하는 방법에 대해서 알아보도록 하자.

[ 이전 내용 ]

2022.08.03 - [web & develop/웹 공부] - [ 넥사크로 ] 1. 넥사크로 설치하기

2022.08.03 - [web & develop/웹 공부] - [ 넥사크로 ] 2. 넥사크로 구조 살펴보기

2022.08.04 - [web & develop/웹 공부] - [ 넥사크로 ] 3. 넥사크로 화면 만들어보기

2022.08.04 - [web & develop/웹 공부] - [ 넥사크로 ] 4. 넥사크로 개발 툴 사용방법

2022.08.08 - [web & develop/웹 공부] - [ 넥사크로 ] 5. 넥사크로에서의 Components와 Dataset

1 ) Dataset 만들고, Dataset 연결하기

- Dataset을 만들고, 바인딩하는 것은 굉장히 쉽고 간편하다. UI 만드는 아이콘쪽에 Dataset이란 아이콘이 있는데 클릭 후 Invisible Object에 클릭하면 Dataset 만들기 끝.

그리고, 데이터베이스에서 받아 올 Column의 속성값들을 만들어줄 수도 있다.

Dataset을 더블클릭하면 Dataset Editor가 뜨는데, Column 부분에 Add Column to the dataset을 클릭해서, 하나씩 만들어준다.

이 때 주의할 점은 데이터베이스 테이블에서 받아올 Column의 이름과 속성값이 같아야 한다는 점이다. Size는 달라도 괜찮다고 한다.

만약 데이터베이스 테이블을 아직 만들 지 못한 상태라면, 걱정하지 마라! 테스트 데이터 또한 만들 수 있다. 밑에 Row가 있는데 거기에 테스트를 할 데이터를 만들어주자.

그리고 Dataset을, Grid에 드래그 앤 드롭해주면, 바인딩 완료!

그럼 Row에 만들어놓은 데이터들이 한 눈에 테이블 형태로 보여질 것이다.

그럼 각각의 Row를 클릭할 때 Edit이나 MaskEdit UI에 클릭한 Row의 각각의 속성값을 넣어주고 싶다면?

그것도 쉽다. Dataset을 Edit에 드래그 앤 드롭 해주고 ColumnID를 출력하고 싶은 데이터를 지정해주면 된다.

그리고 위에꺼 보다 복잡하지만, 또 하나의 방법이 있다.

Project Exploler -> Dataset을 만들었던 form -> Objects -> Dataset 이름을 보면, 여러 Column들이 보이게 되는데, 그걸 드래그 앤 드롭해도 된다.

2 ) Grid 테이블 셀을 UI로 변경하기

- Grid에 Dataset을 넣고, 더블클릭하면, Grid Contents Editor가 나오는데, 거기에 body 부분이 데이터를 출력하는 공간이다.

그 쪽에, combo나, edit으로 데이터를 출력하고 싶다면 Action에 displaytype과 edittype이 있는데 그걸 상황에 맞게 변경해주면 그냥 static text가 아닌, 상황에 맞는 UI로 출력이 가능하다.

3 ) 넥사크로 Expression

- Grid Contents Editor에서, body cell을 클릭하면, 오른쪽에 text 속성이 있는데, text 속성을 클릭하고, 오른쪽에 있는 버튼 중 Set Expression 버튼을 누르면, Expression을 설정할 수 있는데

한 예로, 스크립트 작성을 아래와 같이 작성을 해보자.

var var1 = "123";
this.var2 = "abc";

this.functionName = function(arg){
	return arg + ' hello';
}

이렇게 스크립트를 작성하고, grid contents editor로 이동해서, Column 3개를 만들어보자. 그리고 각각의 컬럼에 var1, var2, function 이라는, head cell을 만들어주고, head cell 밑에, body에 expression을 추가해주자.

var1 cell : comp.parent.var1
var2 cell : comp.parent.var2
function cell : comp.parent.functionName(currow + 1)

: 왼쪽에 있는 건 head cell을 뜻하기 때문에, expression 입력 시 같이 적으면, 안되고, : 오른쪽 comp로 시작되는 부분부터 작성해야 한다.

그리고, OK 누르고 저장 후 브라우저를 실행해보자. 그럼 var2와 function cell에서는 데이터가 잘 출력 될 것이다.

하지마 , var1 셀에서는 데이터가 빈 값이 나온다. 이유가 뭘까? 이유는 var 자료형은 그냥 comp로 참조 할 수가 없다.

this.로 시작한 것만 comp.parent에서 참조가 가능해진다는 점 잊지말자!

Grid Expr이 궁금하다면, 교안을 참고해보자. ( 넥사크로 홈페이지에서 제공해주는 교안이다. )

넥사크로N 교안.zip

5.43MB

4 ) 넥사크로 데이터 통신

- 넥사크로는, 라이센스를 구매한 회사로 개발자가 방문해서, WAS가 설치되어 있다는 가정하에, X-API를 WAS에 설치해줘야만, 넥사크로와 통신이 가능해진다고 한다. ( 에효.. 라이센스 없으면 사용해보지도 못하는구나 )

일단, 라이센스 구매 없이 기본적으로 교육용 서비스를 구현해놓은 것이 있다고 한다. 그 부분은 교안 파일을 다운받아서 확인해보면 된다.

그냥 영상으로 확인하자. 그게 빠를 것이다.

또한, %나 fit to width, height에 관련 된 내용들 또한 있기 때문에 영상을 참고하는 것이 좋다.

https://www.youtube.com/watch?v=13h0rMZqv6A&list=PLgoHUQa-ZzHA8TEIwVYspbaosEtItwNK9&index=6

그리고 https://www.playnexacro.com/# 홈페이지도 참고하는 것도 좋은 방법이다.

[ 넥사크로 ] 5. 넥사크로에서의 Components와 Dataset

Nerd_Lee — Mon, 8 Aug 2022 11:50:45 +0900

기본적인 것은 넘어가고, 중요하다 싶은 Components에 대한 것과 Dataset의 중요한 내용들만 정리할 것이다.

[ 이전 내용 ]

2022.08.03 - [web & develop/웹 공부] - [ 넥사크로 ] 1. 넥사크로 설치하기

2022.08.03 - [web & develop/웹 공부] - [ 넥사크로 ] 2. 넥사크로 구조 살펴보기

2022.08.04 - [web & develop/웹 공부] - [ 넥사크로 ] 3. 넥사크로 화면 만들어보기

2022.08.04 - [web & develop/웹 공부] - [ 넥사크로 ] 4. 넥사크로 개발 툴 사용방법

1 ) MaskEdit

- 정형화된 포맷을 입출력 할 때 사용되는 컴포넌트이다. 예를 들어, 주민등록번호, 카드번호, 우편번호와 같은 포맷이다.

MaskEdit의 주의할 점은, 2가지 속성을 반드시 지정해줘야만 한다.

Maskedit을 클릭하고 Properties 메뉴를 보자. type 속성이 있다. type 속성은, string과 number가 있다.

주민등록번호는 string 자료형이다.

그리고 format 속성을 지정해줘야 한다. 사용자에게 보여 줄 layout이라고 보면 될 것이다.

그런데, 주민등록번호는 앞에 6자리, 그리고 뒤에 7자리이다. 하지만 앞에 여섯자리는 보여주고, 뒤에 일곱자리 중 제일 앞에 있는 성별 구분에 대한 부분을 제외한 나머지 부분은 Asterisk(*) 아스타 처리를 해주는 것이 대표적이다.

그럼 아스타 처리는 어떻게 하는가?

format을 보면 밑에 처럼 되어 있을 것이다.

######-#######

앞에 6자리 - 뒤에 7자리 형식의 format으로 지정되어 있는데, 우리는 123456-7****** 이런 형태를 원하는 것이다.

그럼 format을 밑에와 같이 변경해주면 된다.

######-#{######}

그러면, 중괄호 안에 있는 #은, *로 처리가 된다. 보안상으로도 좋다.

하지만, Password는, format 지정을 할 필요가 없고, 최대 입력 수가 정해져 있을 수도 있기 때문에 MaskEdit이 아닌 Edit으로 만들어서, Properties에, password 속성을 true로 하면 아스타 처리가 가능해진다.

2 ) Div와 Tab 컴포넌트사용 주의점

- div와 Tab 컴포넌트를 사용할 때, 잘못 사용하게 되면 발적화 현상이 일어날 수도 있다고 한다.

만약에 똑같은 기능을 하는 UI가 div에 같이 묶여있다면, 다른 form에서도 똑같이 그 UI를 새로 만들어줘야 할까?

답은 아니다! div에서 속성 중에, url이라는 것을 제공하는데 이 속성은 UI를 하는데 사용된다.

div를 클릭하고, properties에서 url을 찾아서, xfdl 파일을 참조해보자. 아주 편하고 새로 UI를 만드는 것 보다 메모리 사용량도 적을 것이다. 이 url을 사용하는 이유는, 만약에 조건 검색에 대한 UI가 있다라고 가정을 해보자. 검색에 대한 UI는 어느 메뉴를 가도 비슷할 것이다.

근데 이걸 해당 메뉴에 대한 form을 제작할 때마다 새로 만들어줘야 한다면? 그것만큼 귀찮은 작업은 없을 것이다. 또한 유지보수면에서도 좋기 때문에, url을 참조해서 사용한다면, 해당 참조 UI만 변경해주면 참조를 하고 있는 form에서 검색관련 UI가 변경이 될 것이다.

Tab 또한 url 속성이 있어서, 다른 form을 그릴 수가 있다. tab은 무조건 url 속성으로 하는 것이 좋다. 만약 tabpage의 갯수가 여러개 있다고 생각해보자. 컴포넌트의 갯수가 많아진다. 그러면 로딩에 심각한 문제를 주게 될 수 있다.

왜 url 속성으로 참조를 해서 출력을 해야하는가? Tab을 예로 들어 설명하면, 기본적으로 tab은 page1과 page2가 있다.

요즘 같은 인터넷 속도로 이 정도도 커버못하겠어? 라고 생각하지만, 그건 인터넷 속도고 사용자 메모리를 생각해야 한다.

모든 사용자가 메모리 16GB 이상의 데스크탑이나, 갤럭시 S 시리즈, 아이폰 13 pro max를 사용하진 않는다.

이런 걸 다 종합해서 고려해봤을 때, 개발자는 최적의 조건을 맞춰서 개발을 해야한다.

tab은, 로딩이 끝났다는 것을 tabpage1에 있는 컴포넌트가 로딩이 끝나고, 그 다음 tabpage2의 컴포넌트 로딩이 끝나야만 끝났다고 생각하게 된다. tabpage2는 보지도 않을 수 있는데, 굳이 이걸 로딩해서 메모리를 낭비한다고?

만약 이 탭이 10개이고, 탭 하나에 100개의 컴포넌트가 있다라고 가정한다면?

단순하게 계산하자면 100개의 컴포넌트를 총 10번 로딩하니깐 1,000번의 로딩이 필요하다. 굉장히 비효율적이지 않은가?

그럼 url은? page1에 대한 컴포넌트만 로딩하고, 나머지 tabpage는 클릭했을 때 컴포넌트에 대한 부분을 로딩한다.

그러면, 웹페이지가 로딩하는 속도도 빠르고 메모리 낭비도 심해지지 않는다.

최적화를 생각한다면, div는 묶을 수 있는 것은 따로 form을 만들어서 빼고 tab은 무조건 따로 form을 만들어서 빼서 url 속성으로 참조를 시키도록 하자.

3 ) Dataset 이란?

- 데이터를 테이블(2차원) 형태로 관리하는 오브젝트

- 내부에서 사용하는 데이터로 컴포넌트와 바인딩하여 사용

- 서버와의 통신시 데이터를 주고 받는 형식으로 사용

- 데이터가 수정, 삭제되면 변경 전 내용을 Origin Buffer라는 곳에 저장

[ 참조 영상 ]

https://www.youtube.com/watch?v=5UR2S0_GguU&list=PLgoHUQa-ZzHA8TEIwVYspbaosEtItwNK9&index=4

[ 넥사크로 ] 4. 넥사크로 개발 툴 사용방법

Nerd_Lee — Thu, 4 Aug 2022 18:12:40 +0900

중요하다고 생각한 부분만 추가하도록 할 것이다.

1 ) 버튼 이벤트 제거하고 복사 붙여넣기 하기

- 버튼에 만약 event가 추가되어 있다. 근데 복사한 버튼에서는 그 이벤트를 사용하지 않을 가능성이 크다.

그런데 번거롭게 계속 event를 계속 지워주기엔 모든 사람들이 귀찮다고 생각할 것이다.

그럴 땐, Ctrl + Shift + V를 누르면, 복사 할 옵션만을 체크할 수 있는데 그 때 event를 uncheck하고 복사하면 이벤트는 자연스럽게 없어지게 된다.

2 ) div 안에 컴포넌트 추가하기

- division을 만들고, 그 영역 안에 컴포넌트를 추가해야지만, div 자식으로 컴포넌트가 들어가진다.

만약에 외부에 있는 컴포넌트를 division 안에 넣고 싶다면?

그럴 땐, 방법이 있다. div 자식으로 넣고 싶은 컴포넌트를 복사 또는 잘라내기를 한다.

그리고, div를 클릭해서, 붙여넣기를 해준다. 그러면 보이지 않을 것이다.

그 이유는, 해당 컴포넌트가 영역 밖에 있기 때문이다.

그럼 div를 더블 클릭 X, 클릭하고 시간 좀 지났다가 한 번 더 클릭하면, div 영역을 제외하고 나머지 부분들이 흐려지게 보일텐데, 그 때 안보였던 컴포넌트가 짠 하고 보일 것이다. 그 컴포넌트를 div 영역으로 드래그 해준 다음, 엔터키를 눌러주면 완료.

3 ) 드래그 해서, 컴포넌트 영역이 닿기만 해도 선택이 되게 하기

- 드래그를 했을 때, 컴포넌트를 선택하고 싶은데 해당 컴포넌트가

전부 드래그 영역안에 닿아있어야만 선택이 되게 될 것이다. 굳이 이렇게 만든 이유가??!

하지만, 드래그 영역에 닿기만 해도 선택을 할 수 있게 만들 수 있다.

상단 메뉴 Tools -> Options -> Form Design -> Select Type -> Select Part 선택 후 OK 버튼 누르면, 영역이 닿기만 해도 선택이 될 것이다.

4 ) 여러 개의 컴포넌트를 정렬하기

- 아마 Align 메뉴가 보이지 않을텐데, 컴포넌트 아이콘을 생성하는 곳에서, 아이콘이 없는 부분을 오른쪽 마우스 클릭하면

추가를 할 수 있다. 그 안에 Align이란 메뉴가 있을 것이다. 그리고 여러개의 컴포넌트를 드래그해서 선택해보자.

그 중에서도, 테두리가 진한 컴포넌트가 있을 것이다. 그 컴포넌트가 기준이 된다. 그 컴포넌트 기준에 맞춰서 정렬을 진행하면 된다. 만약 기준점을 바꾸고 싶다면, 변경하고 싶은 기준점이 되는 컴포넌트를 Ctrl 키를 누른채로 클릭하고 다시 한 번 클릭하면 기준점이 변경된다.

5 ) 만약에 기능은 사용하고 싶은데 화면에서 보이지 않게 하고 싶을 땐?

- 버튼생성 아이콘 옆에 Move 아이콘이 있다 그 아이콘을 눌러서, 왼쪽으로 드래그를 해보면, 마이너스 좌표가 나온다. 그 좌표에다가 컴포넌트를 옮기면 된다. 옮길 땐, Move 아이콘 옆에 Select 아이콘을 클릭해서 옮기자.

6 ) 넥사크로 브라우저만의 기능

- 해당 디자인이 어디있는 지 확인하고 싶다면, 오른쪽 마우스를 클릭해서 View Source를 클릭하면, 넥사크로 애플리케이션에서 Source 탭으로 전환되고, 그 옆에 Design을 눌러서 참고할 수도 있고 만약에 위치나 여러가지를 변경했는데

다시 브라우저를 껐다가 켜야되는가? 아니다. 오른쪽 마우스를 눌러서 reload를 눌러주면, 변경 된 내용으로 다시 reload를 해주게 된다.