재밌는 Coding

1. 시험환경

    ˙ HTML

    ˙ JavaScript

    ˙ proj4.js

2. 목적

    ˙ CDN 방식으로 proj4.js 라이브러리를 연동설정한다.

    ˙ proj4()를 이용하여 UTM 좌표계와 wgs84 좌표계 간 상호 변환한다.

3. 적용

    ① 예제 코드를 실행한다.

        - proj4.js 라이브러리 추가

        - proj4()를 이용하여 utm과 wgs84 간 좌표변환

4. 결과

    ˙ 웹브라우저에서 콘솔로그(<F12>)를 확인하여 UTM과 WGS84 좌표계간 변환 결과를 비교한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다 ※

1. 시험환경

    ˙ HTML

    ˙ cecium.js v1.96

2. 목적

    ˙ cecium 사이트 계정 등록 및 접속 토큰을 발급 받는다.

    ˙ cecium 사이트에서 제공하는 QuickStart 튜토리얼을 실습한다.

        - HTML 파일에 Cecium.js 라이브러리를 설정한다.

        - HTML 파일을 실행하여 3D 초기화면이 표현되는지 확인한다.

3. 적용

    ① cecium.js 사이트에 회원가입 후 토큰을 발급받는다.

        - URL : https://cesium.com/

    ② HTML 파일을 생성한다.

        - cecium.html

    ③ CDN방식으로 cecium.js 라이브러리를 연동한다.
        - 참고 : https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

4. 결과

    ˙ 정상 동작을 확인한다.

    ˙ 튜토리얼 등 여러 문서들을 참고하여 사용법을 본격적으로 익혀보자.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다 ※

1. 시험환경

    ˙ 윈도우 10

    ˙ Node.js 14.15.4 LTS

    ˙ vis.js 라이브러리

2. 목적

    ˙ CDN 방식이 아닌 Local PC에서 vis.js 라이브러리를 사용해 보자.

    ˙ node.js만 설치된 상황에서 최대한 간단하게 vis.js 라이브러리를 사용해 보자.

3. 적용

    ① 아래 경로로 vis.js 사이트에 접속하고 git 아이콘을 클릭한다.

        - URL : visjs.org/

    ② vis.js에서 제공하는 네트워크 샘플 파일을 다운 받는다.

    ③ 다운받은 샘플 파일을 압축 해제 한다.

        - 샘플 폴더명 : vis-network-master

    ④ 예제 파일 중 아래 경로에서 nodeLegend.html 파일을 실행해 보자.

        - 실행하면 가시화되지 않고 콘솔 로그(F12 확인)에서 에러가 발생할 것이다.

    ⑤ nodeLegend.html 파일을 열어보면 vis 라이브러리 포함 경로에 아래와 같은 폴더와 파일이 없기 때문이다.

        - 지금까지 vis network 샘플 폴더만 다운 받았을 뿐이고, 가시화를 위한 vis 라이브러리 파일은 설치하지 않았음에 주의하자.

    ⑥ 그럼, 이제부터 node.js를 이용하여 vis 가시화를 위한 라이브러리를 설치하자.

        - "npm" 아이콘 클릭

    ⑦ npm을 이용하여 vis-network 가시화 라이브러리를 설치하는 방법이 나와 있다.

        - node.js 설치 참조 : http://languagestory.tistory.com/24 

        - node.js가 설치되어 있다면 다음과 같이 입력하고 설치하자.

    ⑧ 설치 폴더에서 standalone 폴더를 확인할 수 있다.

        - ⑤번 절차에서 실행했던 sample 파일(nodeLegend.html)에 포함된 경로인 것을 기억할 것이다.

    ⑨ standalone 폴더를 샘플파일이 지시하는 경로에 맞추어 복사한다.

        - 원본 : vis-network 가시화 라이브러리에 있는 standalone 폴더

        -  대상 : network 샘플 폴더 하위

4. 결과

    ˙ 샘플 파일 (nodeLegend.html)을 실행하면 네트워크 가시화가 나타나는 것을 확인할 수 있다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다 ※

1. 시험환경

    ˙ Javascript

2. 목적

    ˙ Javascript 이벤트 처리 코드를 참고하자.

3. 적용

    ① 변경 이벤트 처리 코드

        - <select>선태한 option value를 selected 변수에 저장

    ② 클릭 이벤트 처리 코드

    ③ 활성화 및 비활성화 처리 코드

    ④ <select>태그 selected option 값 가져오기

    ⑤ Text 값 변경 처리 코드

    ⑥ checkbox 변경(체크, 해제) 이벤트 발생시 처리 코드

        - 변경 이벤트가 "체크"인 경우 처리 코드

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다 ※

1. 시험환경

    - Bootstrap

    - Java Script

2. 목적

    - <ESC> 입력시 Modal 창이 닫히는 것을 방지한다.

    - Modal 영역 밖에서 마우스 클릭시 Modal 창이 닫히는 것을 방지한다.

3. 적용

① Modal 태그에 적용하는 방법

<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop='static' data-keyboard='false' id="signup-modal" >

② JavaScript에서 적용하는 방법

$('#signup-modal').modal( {data-backdrop: 'static', data-keyboard: 'false'} );

4. 결론

① data-backdrop과 data-keyboard 속성을 함께 설정하면 동작하는 것을 확인할 수 있다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

    - javascript, jQuery, ajax

2. 목적

    - 테이블 데이터를 javascript로 직접 코딩하여 json, jsonArray 형식으로 저장한다.

3. 적용

function createTable() {
    console.log("=== createTable() ===");

    var theadLength = $('#markerTable > thead > tr').length
    var tbodyLength = $('#markerTable > tbody > tr').length

    // remove body rows
    if(tbodyLength > 0)
    {
        $('#markerTable > tbody > tr').remove();            // 테이블 body 부분 기존 내용 삭제
    }

    // create header
    if(theadLength == 0)
    {
        var tblHead = '';
        for(var i = 0; i < header.length; i++)
        {
            tblHead += '<td>' + header[i] + '</td>'
        }
        $('#markerTable > thead').append('<tr>' + tblHead + '</tr>');        // 테이블 최초 생성시 header 부분 추가
    }

    // create body rows
    for(var i = 0; i < csvRespList.length; i++)
    {
        var tblRow = '';
        var item = csvRespList[i];
        for(var j = 0; j < header.length; j++)
        {
            tblRow += '<td>' + item[header[j]] + '</td>'
        }
        $('#markerTable > tbody:last').append('<tr>' + tblRow + '</tr>');        // 테이블 body 부분 추가
    }
}

4. 결론

    - jsGrid와 같이 잘 만들어진 table library를 사용하자.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

    - javascript, jQuery, ajax

2. 목적

    - ajax를 이용하여 URL 호출하는 코드

    - front-end에서 수집한 json object를 controller로 전달하는 코드

3. 적용

var result = jsonFromTbl($('#markerTable'));

if(result != null)
{
    console.log('result', result);

    $.ajax({
        url: "sendMdbData.do",                // 호출할 URL
        type: "POST",                             // 호출 type
        data: JSON.stringify(result),           // 전달 데이터 : result(JSON Object)를 문자열로 변환(JSON.stringify)
        dataType: "json",
        contentType: "application/json; charset=UTF-8",
        success: function(response) {
        }
    });
}

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.

1. 시험환경

    - javascript

    - jQuery

2. 목적

    - 테이블 데이터를 javascript로 직접 코딩하여 json, jsonArray 형식으로 저장한다.

3. 적용

function jsonFromTbl(targetTbl) {
    
    var rowSize = targetTbl.find('tbody > tr').length;         // 대상 테이블의 행의 갯수
    var colSize = targetTbl.find('thead > tr > td').length;    // 대상 테이블의 열의 갯수

    if(rowSize < 1)
    {
         alert("테이블에 데이터가 없습니다!");
         return;
    }

    var objArr = new Array();      // 하나의 JSON Object (행)을 저장할 배열 변수
    var tr, td;
    for(var i = 0; i < rowSize; i++)
    {
        tr = targetTbl.find('tbody').find('tr:eq(' + i + ')');

        var obj = new Object();
        for(var j = 0; j < colSize; j++)
        {
            td = tr.find('td:eq(' + j + ')').text();
            obj[header[j]] = td;         // JSON Object에 테이블 컬럼명을 key로 저장, 각 셀을 값으로 저장
        }
        objArr.push(obj);
    }

    console.log(objArr);    // 테이블에서 획득한 데이터 확인

    return objArr;
}

4. 결론

    - jsGrid 등과 같은 잘 만들어진 테이블 library를 사용하자.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.