[Visual Python] 오픈소스 컨트리뷰션 - 새로운 기능 추가하기

지난번 글

[Visual Python] 오픈소스 컨트리뷰션을 위한 개선점 찾기

[Visual Python] 오픈소스 컨트리뷰션을 위한 개선점 찾기

 

메인테이너와의 의견 교환

이슈에서 메인테이너에게 의견을 요청했다.

내가 실컷 개발해놓고, 잘못하면 전혀 다른 방향으로 흘러가버리니

그전에 내가 개발한 내용을 간략하게 설명하고

이 방식으로 개발해도 될지에 대한 질문이었다.

 

나는 select option 형식을 사용하려 했다.

 

메인테이너는 pyArrow를 사용하는 방식에는 찬성했지만

pandas냐 pyarrow냐를 선택하는 방법은 checkbox를 사용하길 권장했다.

 

기능 추가를 위한 개발

그래, 체크박스로 만들어보자

 

내가 만들 대상은 File App이다

내가 구현해야할 것은 아래와 같다

• file type 옆에 checkbox 만들기. 단, csv json parquet 타입에만 적용
• checkbox 체크 할 경우, 코드를 pandas가 아닌 pyarrow로 생성할 것
• Read, Write 모두 적용할 것
• pyarrow를 사용할 경우, 옵션창은 제거할 것

일단 체크박스부터 만들어보자

 

기존 테이블에 html 코드를 추가하는 방식이었다.

pyarrow는 read csv, json, parquet / write csv, parquet을 지원했다.

그래서 조건을 걸어주어 특정 상황과 파일타입에 맞는 경우에만 checkbox를 추가했다.

if ((pageType == 'Read' && selectedType == 'json') || selectedType == 'parquet'|| selectedType == 'csv') {
    // add checkbox 'Use PyArrow', next to File Type
    $(this.wrapSelector(prefix + '#vp_inputOutputBox table tbody')).prepend(
        $('<tr>').append($(`<td><label for="fileType" class="vp-bold vp-orange-text">File Type</label></td>`))
                .append($('<td><select id="fileType" class="vp-select"></select>  <label><input id="fileReadAs" type="checkbox"/><span>Use PyArrow</span></label></td>'))
    );
}
else{
    $(this.wrapSelector(prefix + '#vp_inputOutputBox table tbody')).prepend(
        $('<tr>').append($(`<td><label for="fileType" class="vp-bold vp-orange-text">File Type</label></td>`))
                .append($('<td><select id="fileType" class="vp-select"></select> </td>'))
    );
}

물론 다른 file type에는 체크박스가 존재하지 않는다.

 

다음에는 checkbox 클릭 이벤트를 만들어줘야 한다.

checkbox를 누르면

1) 아래 옵션 화면이 사라진다. 왜? 아직 pyarrow에 옵션으로 넣을 파라미터를 선정하지 않았기 때문

2) 생성되는 파이썬 코드가 pandas가 아닌 pyarrow로 변경되어야 한다.

 

// fileReadAs change Event, Use PyArrow
$(document).on('change', this.wrapSelector('#fileReadAs'), function() {
    let isChecked = $(this).prop('checked');
    var fileioType = that.state.vp_fileioType;
    var prefix = '#vp_file' + fileioType + ' ';
    var selectedFileFormat = that.fileState[fileioType].selectedType;
    var fileioTypePrefix = fileioType.toLowerCase();
    if(fileioTypePrefix == 'write'){
        fileioTypePrefix = "to";
    }

    if(isChecked){  // pyArrow
        that.fileState[fileioType].fileTypeId[that.state.fileExtension] = "pa_" + fileioTypePrefix + selectedFileFormat[0].toUpperCase() + selectedFileFormat.slice(1);
        $(that.wrapSelector(prefix + '#vp_optionBox')).closest('.vp-accordian-container').hide();
    }
    else{  // pandas
        that.fileState[fileioType].fileTypeId[that.state.fileExtension] = "pd_" + fileioTypePrefix + selectedFileFormat[0].toUpperCase() + selectedFileFormat.slice(1);
        if (that.state.fileExtension != 'parquet'){  // parquet has no options area
            $(that.wrapSelector(prefix + '#vp_optionBox')).closest('.vp-accordian-container').show();
        }
    }

    var fileTypeObj = that.fileState[fileioType]['fileTypeId'];
    var selectedType = that.fileState[fileioType]['selectedType'];
    let fileId = fileTypeObj[selectedType];
    let pdLib = pandasLibrary.PANDAS_FUNCTION;
    let thisPkg = JSON.parse(JSON.stringify(pdLib[fileId]));

    that.fileState[fileioType].package = thisPkg;
});

우선 JQuery로 change 이벤트를 구현하고

check 여부에 따라 fileExtension 값을 pd_readCsv 혹은 pa_toParquet 처럼 바꾸어주었다.

이는 다른 파일의 정보를 참조하여 코드를 생성하게 된다.

 

또한 hide() show()를 통해 간단하게 option 화면을 숨겼다.

 

아래는 write -> parquet 화면이며, option 화면이 사라지고, 코드는 pyarrow를 사용하여 생성된 것을 확인할 수 있다.

 

주요 코드는 이러하며, 구현은 대충 끝난 듯 하다.

 

어려웠던 점/ 아쉬운 점

1. pyarrow를 선택하고 다른 file type을 선택했다가 다시 돌아오면

default인 pandas가 아닌 pyarrow로 나타나는 현상이 발생했다.

이는 내가 stateResult에 최근 값을 계속 저장해주고 있어서 생긴 문제였고,

그것을 제거하니 file type 선택 시마다 초기화되어 문제가 해결되었다.

 

2. File App 구조 자체가 file type이나 새로운 라이브러리를 활용하기에 좋지 못한 구조였다

file type 조건문을 통해 체크박스를 별도로 생성해준다던가

혹은 fileExtension의 값을 pandas냐 pyarrow냐 변경해주어 코드 생성을 달리했는데

이게 좋은 방법인지는 더 고민이 필요한 것 같다.

 

Pull Request 날리기

개발이 끝났다면 당연히 PR을 날려야지

 

https://github.com/visualpython/visualpython/pull/238

Fixed #233 - Using parquet and pyArrow, when R/W files by Minku-Koo · Pull Request #238 · visualpython/visualpython

중요한 것은

1. 이슈 번호를 #000 으로 작성하면 이슈와 PR이 연결되니, 꼭 작성할 것

2. PR 제목은 이슈와 연결되게 작성할 것

3. PR은 기능별로 분리되어야 하며, 내가 무엇을 변경했는지 상세히 작성할 것

4. 본 레포의 main 브랜치가 아닌, 현재 개발이 진행중인 dev 브랜치로 날릴 것

 

자, 그럼 이제 PR이 approve되는지 기다릴 차레이다.

 

 

---

그리고 시간이 지나서

메인테이너의 답변이 달렸다.

 

 

다른 작업중이니 나중에 릴리즈할 때, 같이 merge 해주겠다는 답변

 

다행이다.

추가 수정할 필요는 없을 것 같고, 이제 merge되는 것을 기다리기만 하면 될 것 같다.