우리정보 공유해요~

[소스코드]

    /**
     * @description 숫자를 한글(금액단위)로 변환한다.
     * @param {number} 숫자, 금액(정수)
     * @return {string} 한글(금액단위) 문자열
     */
    numToKor: function (sNum) {

                if( typeof(sNum) === 'number' ){
                        sNum = sNum.toString();
                }
                                        
                var result       = '';
                var bUnitWords   = ['', '만', '억', '조', '경'];
                var sUnitWords   = ['천', '백', '십', '']
                var numKor       = ['영', '일', '이', '삼', '사', '오', '육', '칠', '팔', '구'];
                var unitPow      = 10000;
                var convNumArray = [];

                for (var i = 0; i < bUnitWords.length; i++){

                    var bUnitValue = (sNum % Math.pow(unitPow, i + 1)) / Math.pow(unitPow, i);
                        bUnitValue = Math.floor(bUnitValue);
                        
                    if (bUnitValue > 0){
                        bUnitValue = bUnitValue.toString();
                        bUnitValue = bUnitValue.padStart(4, '0');

                        var convBigUintValue = '';
                                    
                        for(var j=0; j<bUnitValue.length; j++){

                                var cutNum = bUnitValue.charAt(j);

                                if(cutNum > 0){
                                        convBigUintValue += numKor[cutNum] + sUnitWords[j];
                                }
                        }

                        convNumArray[i] = convBigUintValue;

                    }
                }

                for (var i = 0; i < convNumArray.length; i++){
                        if(!convNumArray[i]) continue;
                        result = convNumArray[i] + bUnitWords[i] + result;
                }

                console.log('입력값 : ' + sNum + ', 출력값 : ' + result);

                return result;
        
    },

[실행결과]

[첨부파일]

원격저장소(Git) 소스를 내려받으려고 PULL 을 수행하였으나 소스 충돌 에러가 발생되었고 해결된 방법을 공유한다.

1. 프로젝트 마우스 우클릭으로 펼쳐진 단축 메뉴에서 [Team] > [Pull] 을 수행하였으나 에러가 발생함.

2. [Team] > [Synchronize Workspace] 수행결과 아래와 그림과 같이 확인되었으며

    다시 Pull 시도한 결과 빨간점선 팝업창을 참고하면 confict(충돌) 난 게 확인된다.

3. Git Staging 탭으로 이동하여 충동난 파일을 [Assume Unchanged] 클릭하여 동기화 대상에서 무시하면 된다.

4. 아래와 같은 결과화면이 나오고 Pull 을 수행하여 원격지저장소에 있는 파일을 받으면 된다.

다시 정리를 해보면 내 생각엔 이런 흐름이지 싶은데.... 맞나요?? ^^

이상 끝 ~~~~~

[소스코드]

    /**
     * @description 숫자를 거리단위로 변환해준다.
     * @param {number} length 길이
     * @return 길이 문자열
     */
    distance: function (length) {

        var result = '';
        
        if (parseInt(length) > 1000) {
            result = (Math.round(length / 1000 * 100) / 100) + '' + 'km';
        } else {
            result = (Math.round(length * 100) / 100) + '' + 'm';
        }
        
        console.log('입력값 : ' + length + ', 출력값 : ' + result);
        
        return result;
    },

[실행결과]

[첨부파일]

[소스코드]

    /**
     * @description 숫자를 1000 단위로 콤마로 구분한다.
     * @param {number} value 값
     * @return {string} 1000 단위 comma(,) 로 구분된 문자열
     */
    currency: function ( s ) {
        var result = '';
        
        if (s) {

            // 타입 체크
            if (typeof s == 'number') {
                result = s.toString();
            } else {
                result = s;
            }
            
            // 3자리마다 ',' 표시
            result = result.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        } else {
            result = s;
        }
        
        console.log('입력값 : ' + s + ', 출력값 : ' + result);
        
        return result;
    }

[실행결과]

[첨부파일]

지도 개발중에 출발지와 도착지 소요시간를 API 로 값을 리턴 받는데 초단위였다.

이동시 소요시간을 출력해야하니 아래와 같은 시,분,초 변환 함수가 필요하여 만들고 공유한다.

[소스코드]

        /**
         * @description 초단위를 시분초로 변환한다.
         * @param {number} second 초
         * @return {string} 시분초 문자열
         */
        secToHms: function (sec) {
        
            var result = '';
    
            if (sec / 60 > 1) {
                var minute = Math.floor(sec / 60);
                
                if (minute / 60 > 1) {
                    var hour   = Math.floor(minute / 60);
                    var minute = minute - (hour * 60);
                    
                    result  = hour + '시간 ';
                    result += minute ? minute + '분' : '';
                } else {
                    result = minute + '분';
                }
            } else {
                result = '1분';
            }
            
            console.log('입력값 : ' + sec + ', 출력값 : ' + result);
                    
            return result;

        }

[실행결과]

[첨부파일]

현재 프로젝트에서 주소를 검색한 결과를 그리드에 바인딩해주는 작업을 하는데 CROS 정책위반 오류가 발생되어 해결방안을 공유한다.

그림으로 공유를 먼저하면 아래와 같다.

서로 다른 도메인에서 데이터 요청, 반환되는 Json 데이터를 Dataset 에 바인딩하고 그리드에 표시하는 작업이었다.

넥사크로 컴포넌트에 DataObject 가 반환된 Json 데이터를 Dataset 바인딩까지 해주는 녀석이다.

DataObject 컴포넌트 설명은 아래 링크에서 참고하면 되겠다.

http://docs.tobesoft.com/developer_guide_nexacro_17_ko#124526e754a76021

지도 API 를 호출한 결과 아래와 같은 CORS 오류를 만나게 되었다. 알고 보니 해결방법은 여러가지.. 해결은 안됨..

Access to XMLHttpRequest at 'https://api.routo.com/v1/findpostcode?latlng=37.53491388888889, 126.9518527777&key=XXXXXXXX' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

10499 : 로딩하는 중에 에러가 발생하였습니다. 주소가 정확한지 확인하고 다시 시도하십시오. 경로 [http://10.5.150.93/map/data/sample.html] 상태코드 [10499]

해결은 의외로 너무 간단하게 되었다. 아래 가이드를 보면 빨간색 점선을 참고하면 된다.

async 기본값이 true 이며 이 값을 false 로 변경하니 잘 되었다.

이상 끝 ~~~~~~~~~~

현재 프로젝트에서 UI를 Nexacro 기반으로 진행중이고 지도는 순수 Web, Jquery 모듈도 사용해야하는데..

알아보니 Nexacro 컴포넌트중에 WebBrowser 를 사용하여 웹과 데이터를 주고 받고 함수 호출까지 가이드가 있다고 하니 사용해 보았다.

설명하기에 앞서 넥사크로와 웹 데이터 송수신이라고 하니 좀 거창해보이지만 알고나면 별거 없다.

넥사크로 가이드에 따라하기가 힘들뿐...

내가 개발하고했던 데이터 흐름은 아래 그림과 같았다.

대략 소스기반으로 설명 하자면........

Nexacro(팝업창) 기준으로 더 설명하면........... 

UI 구조

구현된 UI

소스는 첨부하지 못하고 구현시 필요한 소스만 공유한다.

Nexacro.xfdl 

this.wbRouto_onusernotify = function(obj:nexacro.WebBrowser,e:nexacro.WebUserNotifyEventInfo)
{
    if(e.userdata){
        
        var params = {};
        
        switch(e.userdata.type){
            case 1: case 3: case 5:
                console.log("1번");
            break;
                    
            case 'initParam':
                params.wbFn = 'fnSetInitMap';
                params.fnParams = {};
                params.fnParams.LAT  = this.gfnGetArgument('LAT');
                params.fnParams.LON  = this.gfnGetArgument('LON');
                params.fnParams.ADDR = this.gfnGetArgument('ADDR');
                params.fnParams.BTNS = this.gfnGetArgument('BTNS');
                this.wbCallMethod( params );
            break;
            default:
                console.log("3번");
            break;
        }
    }
};

this.wbCallMethod = function( obj ){
    
    var wb = this.wbRouto.getProperty("window");
        wb.callMethod(obj.wbFn, obj.fnParams);
    
    if(wb){
        wb.destroy();
        wb = null;
    }    
};

Web.html 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=1, initial-scale=0.1, width=device-width, target-densitydpi=device-dpi">
    <title>DEMO</title>
</head>
<body>
    웹 화면입니다.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/com/initialize.js"></script>
</body>
</html>

initialize.js 

    //--------------------------------------------------------------------------------------------------------
    if (!window.NEXACROHTML){
        window.NEXACROHTML = {};
    }
    
    window.NEXACROHTML.FireUserNotify = function(userdata){    
            
        if (window.NEXACROWEBBROWSER){
            window.NEXACROWEBBROWSER.on_fire_onusernotify(window.NEXACROWEBBROWSER, userdata);
        }else{
            window.document.title = userdata;
        }
    }
    
    window.NEXACROHTML.Init = function() {
        var cnt = 0;
        var interval = setInterval(function() {            
            
            if(cnt >= 10 || window.NEXACROWEBBROWSER) {
                clearInterval(interval);
                fnInit();
              }
            cnt++;
        }, 100);
    }    
    //--------------------------------------------------------------------------------------------------------
    
    /**
     * @description Nexa -> Web 
     *              넥사로부터 설정파일을 불러온다.
     */          
    function fnSetInitMap( obj ){

        if(obj){
            REQ_INIT_LAT  = parseFloat(obj.LAT);
            REQ_INIT_LON  = parseFloat(obj.LON);            
            REQ_INIT_ADDR = obj.ADDR;
            REQ_BTNS      = obj.BTNS;
            
            // 프로젝트 로직 구현이 필요합니다. 
        }else{
            // 프로젝트 로직 구현이 필요합니다.
        }

    }
    
    /**
     * @description 초기함수 호출 ( Web -->> Nexa ) 
     */          
    function fnInit(){
        var params = {};
            params.type = 'initParam';
        
        if( window.NEXACROWEBBROWSER == undefined ){
            window.NEXACROHTML.Init();
            return;
        }else{
            // 프로젝트 로직 구현이 필요할 수 있습니다.
        }
        
        // 지도생성 전 파라미터 가져오기        
        window.NEXACROHTML.FireUserNotify( params );
    }
    
    $(function () {
        fnInit();
    });

이상 끝 ~~~~~~~~~~~~~

소스를 Commit 을 하기 전에 반드시 나의 소스와 Repository 소스의 상태를 Synchronize 를 해봐야한다.

1. [프로젝트] 우클릭 > [Tema] > [Synchronize Workspace] 를 클릭한다.

2. Sync 된 결과 우측 그림과 같이 볼 수 있다.

    그림처럼 충돌이 없는 경우 반드시 Pull 을 먼저 수행 후 Commit and Push 를 하면 된다.

1. 반드시 Pull 먼저 수행 후 위 그림과 같이 Git Staging 탭에서 작업을 수행한다.

2. [Commit and Push] 를 클릭하여 Git Repository 에 소스를 올린다.

이상 끝~

참고로 

Sync 된 결과 충돌된 소스가 있을 경우 충돌이 발생된 소스는 백업 후 삭제하고 Pull 을 받고 Commit and Push 를 한다. 그리고 충돌난 소스를 수정하고 다시 Commit and Push 를 수행하면 된다.자세한 그림과 설명은 추후 게시를 하겠다. 소스 충돌을 방지하기 위해선 출근하고 Pull 을 수행한 후에 개발 작업을 하는걸로 하면 될 듯하다.

1. [File] – [Import...] 메뉴를 선택한다.

2. [Git] – [Projects from Git (with smart import)]를 클릭한다.

3. [Clone URI] 를 선택한다.

GitLab 프로젝트 URI 주소 복사방법은 아래 이미지 참고하세요.

[Next] 하고 Directory 경로를 프로젝트 환경에 따라 설정하고 [Next] 를 클릭한다.

위 화면에서는 프로젝트 소스를 내려받는 과정이 진행되는걸 확인 할 수 있고 완료되면 [Finish] 를 클릭하여 마무리한다.

받아진 결과는 아래와 같이 확인된다.