크롬에서 쉽게 사용 가능한 업무 자동화 제작하기 (Javascript)

백그라운드 설명

운영하고 있는 쇼핑몰(신세계몰)에서 들어온 주문 데이터를 ERP (이카운트 ERP)에다가 입력하는 부분을 물류팀이 사용할 수 있도록 자동화하는 과정.

• 첫번째 SSG에서 엑셀 데이터를 다운 받아 python 코드를 실행 시, 이를 이카운트 API 판매입력으로 쏴주어서 바로 입력되도록 진행,
  => 다만 이카운트의 API 허용 전송 기준이 좀 빡빡한 편이라 가끔 전송 오류가 나는 문제
• 두번째 Svelte로 클라이언트 페이지를 제작, 이 후 해당 input html 태그에 업로드하면 클립보드에 이카운트 웹자료 올리기 형식으로 return 하도록 제작.
  => 엑셀을 매일 다운로드 받아야 하는게 귀찮다 정도..? 고객 정보를 다운로드 받는 것이기에 꽤나 귀찮게 하는 부분이 있음. 그리고 Svelte로 빌드한 파일을 S3에 올려서 하는 정적 호스팅에 대한 지식이 있어야 한다는 단점?

실제로 신세계몰의 화면에서 table의 형태로 다 나와있기 때문에, 이를 바로 파싱해서 웹자료 올리기 형태로 하면 되지 않을까라고 기획. 그리고 사용자가 제일 쉽게 사용할 수 있는 방법이 뭐일까 고민하게 되었다.

• NODE 또는 PYTHON으로 하는 자동화. 결국에 로그인 부터 (신세계몰은 로그인할 때 사용자의 인증정보를 넣어야 하는 성가심이 있음) selenium, bs4 (python), 또는 puppeteer와 cheerio를 통해 구현하여 사용자 환경에서 실행하는 방법도 있겠다만. 더 심플한 방법이 없을 까 고민.

• 그 과정에서 listly (https://www.listly.io/ko)나 크롬 확장프로그램인 웹스크래퍼 (https://webscraper.io/) 등도 고려. 세팅해야할 것이 복잡했지만, 그래도 데이터를 그대로 화면에 띄어놓은 상태에서, 그대로 데이터를 정제할 수 있을까? 하는 아이디어 수립.

• 신세계몰에서 송장을 뽑기 위해 아래와 같이 반드시 접속한 상태에서 클릭 한번에 이를 이카운트 웹자료 올리기 형태로 올릴 수 있는 방법에 대해 크롬 내장 console로 이것저것 파싱해보던 중, 의외로 console에서 쉽게 데이터 string 형태로 만들 수 있을 것이라고 생각.
  

• 작성한 JS 코드를 크롬에서 클릭 한번으로 실행할 수 있는, 크롬 북마크 기능을 통한 자바스크립트 코드의 실행을 활용하고자 생각하게 되었다.

• bookmark js code 검색 => Bookmarklets

Bookmarklets

북마크를 등록할 때, URL에 javascript 코드를 등록하여 북마크 클릭하여 내가 원하는 코드를 실행할 수 있는 기능이다. 위의 코드는, 북마크 버튼을 클릭하면 alert 창을 띄운다. 이를 이용해서 사용자의 웹브라우저 상에서 필요로 하는 데이터를 파싱 한 뒤 이를 이카운트에 웹자료올리기 형식 (즉 엑셀 데이터 형식) 으로 만든 뒤, 이를 클립보드에 복사한다. 이 후 이카운트 웹자료 올리기에 Ctrl+V만 하면, 귀찮게 node나 python 실행환경을 구성할 필요도 없고, 크롬 북마크 하나로 간단한 크롤링이 끝난다 :)
=> 사용자로 하여금, 제일 간편하게 만들었지 않았나 싶다.

javascript:
function getToday(){
    var date = new Date();
    var year = date.getFullYear();
    var month = ("0" + (1 + date.getMonth())).slice(-2);
    var day = ("0" + date.getDate()).slice(-2);
    return year + month + day;
}

function main() {
    var iframe = document.getElementById('iframe_5000004468_1').contentWindow.document;
    var list = iframe.querySelectorAll("tr.ev_dhx_skyblue , tr.odd_dhx_skyblue ");
    if (list.length == 0) { alert("리스트가 없습니다.");}
    else {
        var resultString = '';
    
        for ( var i = 0; i < list.length; i++){
            var resultText = list[i].innerText;
            var SplitedText = resultText.split("\t");
            var Code = SplitedText[24];
            var orderEa = SplitedText[17];
            var price = Number(SplitedText[30].replace(',', ''));
            var date = getToday();
            var EcStirng = `${date}\t\t신세계몰\t\t10030\t광주 소창고\t\t\t\t\t\t\t\t${Code}\t\t\t${orderEa}\t${price}\t\t${price*orderEa}\t\t\tY`;
            resultString += EcStirng + '\n';
        }
        
        navigator.clipboard.writeText(resultString);
        null;
        alert("해당 내역이 클립보드에 복사되었습니다. 이카운트 판매입력 웹자료로 붙여넣기 해주세요.");
    }

}

main();

전부 다 공개 가능한 수준이니 공개.

여태껏 제작한 코드 중에, 배포와 사용이 제일 간편하다고 생각한다. 그냥 북마크 만들어 드리고 클릭 한번이면 실행이 완료되니, 사실 여태껏 selenium으로 굵직굵직한 자동화 프로그램을 많이 만들어 놨었는데 기능들이 많이 추가되다 보니 조금 감당하기 어려운 수준까지 커져버렸는데,, 사용자들이 아무래도 CLI 환경이 익숙지 않다보니까 어떻게 하면 사용자들이 쉽게 할 수 있을 까 고민하다, JS를 활용하는 방법으로 해결하게 되었다. 그래도 이카운트가 사용자들을 고려하여 API나 웹자료올리기 엑셀로도 쉽게 할 수 있는 양식을 만들어주다 보니 가능하긴 했지만, 실제로 저 항목을 엑셀에 붙여넣기 해도 스프레드 시트로 들어가니, 엑셀을 활용하시는 분들이라면 쉽게 접근 가능한 자동화가 아닐까 싶긴 하다.