글

작성일자

gwc-resizable-panel를 이용해 사이드 패널 구성

크기 조절이 가능한 gwc-resizable-panel 태그를 이용한 사이드 패널을 구성하기 위한 코드를 정리합니다. 아래의 이미지에서 우측의 초록색과 빨간색 외곽선을 내용으로 가지는 것이 이 글의 주인공입니다.

이제 웹 개발도 클래스 기반으로 개발을 하는게 당연한데요. 사이드 패널에 대한 JS 코드는 다음과 같습니다.

class SearchResultUI {
    constructor() {
        const domLayout = document.createElement("div");
        domLayout.classList.add("search-result-ui");

        domLayout.innerHTML = `
            
                
  
                

                

                

            
        `;

        document.body.appendChild(domLayout);

        GeoServiceWebComponentManager.instance.update();
    }
}

7번의 gwc-resizable-panel의 resizable-left와 min-width는 각각 패널의 왼쪽 모서리를 이용해 크기를 조절할 수 있고, 패널의 가로 크기는 최소 200px를 유지해야 한다는 것입니다. min-width 값의 단위는 px이며 값을 지정할 때는 단위를 지정하지 않습니다./p>

해당되는 CSS는 다음과 같습니다.

.search-result-ui > gwc-resizable-panel {
    box-shadow:  0 0 2px rgb(0 0 0 / 50%), 0 0 10px rgb(0 0 0 / 50%);;
    left: calc(100% - 20em);
    right: 0;
    top: 3em;
    width: 20em;
    height: calc(100vh - 3em);
}

.search-result-ui > gwc-resizable-panel > .search-result-header {
    border: 2px solid green;
    background-color: #202020;
    height: 2.6em;
    display: flex;
}

.search-result-ui > gwc-resizable-panel > .search-result-content {
    border: 2px solid red;
    min-height: calc(100% - 2.6em);
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    background: #0f0f0f;
}

중요한 부분은 gwc-resizable-panel의 처음 크기를 지정하기 위해 width를 20em으로 지정했다면 left의 값을 지정할 때 초기 크기의 width 만큼 빼줘야 한다는 것입니다. 크기 조정을 위해 반드시 고려해야 할 부분입니다.

작성일자

지오코딩 서비스(GEOCODER-XR) 기능 개선

OpenAPI 형태의 서비스 단위로 제공되는 GEOCODER-XR이 고객의 요구사항에 맞춰 개선되었습니다. 다음과 같이 3가지 내용이 변경되었습니다.

  1. 지오코딩 결과에 대한 정좌표, 인근좌표, 대표좌표에 대한 구분(기존에는 인근좌표와 대표좌표의 구분이 없었음)
  2. 결과가 여러 개인 경우 정확도 순서에 따라 정렬해서 모든 결과를 다 제공하도록 변경
  3. 결과 형식을 JSON으로 변경(기존은 XML 형식였음)

예를들어 주소 중 “중앙동”으로 검색을 하기 위한 REST 방식의 OpenAPI는 다음과 같습니다.

http://localhost:8080/Gp?command=gc;addr=중앙동

위의 호출에 대한 결과는 다음과 같습니다.

[
   {
      "user-input":"중앙동",
      "full-address":"경기도 성남시 중원구 중앙동",
      "coordinate":[
         37.43959765091859,
         127.1505276103632
      ],
      "vicinity":true,
      "type":"대표좌표"
   },
   {
      "user-input":"중앙동",
      "full-address":"경상남도 통영시 중앙동",
      "coordinate":[
         34.84482143430977,
         128.42308057122085
      ],
      "vicinity":true,
      "type":"대표좌표"
   },
   {
      "user-input":"중앙동",
      "full-address":"경상남도 창원시 진해구 중앙동",
      "coordinate":[
         35.14902784720422,
         128.66126916577852
      ],
      "vicinity":true,
      "type":"대표좌표"
   },

   ...
]

JSON 형식이며 중앙동이라는 이름의 행정명칭은 우리나라에 여러 개이므로 복수의 결과를 모두 전달하고 vicinity가 true이므로 인근좌표이면서 type을 통해 “대표좌표”라는 것을 파악할 수 있습니다.

이번에는 “중앙로10″으로 호출하기 위해 다음 API를 사용합니다.

http://localhost:8080/Gp?command=gc;addr=중앙로10

결과는 다음과 같습니다.

[
   {
      "user-input":"중앙로10",
      "full-address":"경기도 가평군 중앙로 10 (가평읍)",
      "coordinate":[
         37.82638794989058,
         127.5132600931772
      ],
      "vicinity":false,
      "type":"도로명주소"
   },
   {
      "user-input":"중앙로10",
      "full-address":"강원도 영월군 중앙로 10 (영월읍)",
      "coordinate":[
         37.18337775533778,
         128.46505641724204
      ],
      "vicinity":false,
      "type":"도로명주소"
   },
   {
      "user-input":"중앙로10",
      "full-address":"강원도 원주시 중앙로 10 (인동)",
      "coordinate":[
         37.34571078558531,
         127.95473309264851
      ],
      "vicinity":false,
      "type":"도로명주소"
   },

   ...
]

vicinity 값이 false이므로 “정좌표”를 의미합니다.

마지막으로 정확히 1건으로 매칭되는 주소에 대한 경우입니다.

http://localhost:8080/Gp?command=gc;addr=아차산로7나길18

결과는 다음과 같습니다.

[
   {
      "user-input":"아차산로7나길18",
      "full-address":"서울특별시 성동구 아차산로7나길 18 (성수동2가)",
      "coordinate":[
         37.54770170889392,
         127.05746040023593
      ],
      "vicinity":false,
      "type":"도로명주소"
   }
]
작성일자

CryptoJS를 이용한 AES256 암호화 / 복호화

자바스크립트에서 CryptoJS 라이브러리를 사용하여 AES256 방식으로 데이터를 암호화하기 위한 함수는 다음과 같습니다.

encodeByAES56(key, data){
    const cipher = CryptoJS.AES.encrypt(data, CryptoJS.enc.Utf8.parse(key), {
        iv: CryptoJS.enc.Utf8.parse(""),
        padding: CryptoJS.pad.Pkcs7,
        mode: CryptoJS.mode.CBC
    });

    return cipher.toString();
}

위의 함수를 사용하는 예는 다음과 같구요.

const k = "key";
const rk = k.padEnd(32, " "); // AES256은 key 길이가 32자여야 함
const b = "암호화는 보안을 위해 매우 중요합니다.";
const eb = this.encodeByAES56(rk, b);

console.log(eb);

출력 결과는 다음과 같습니다.

mXK9nlcT70QdTjKgzxAD99zS4UYah0OZI8GFT8Pg+Vu3GFmF/HPmlV0PA/sUy7rr4+2Sh319ZEIz2TlyiPWcvw==

암호화된 위의 문자열을 복호화하는 함수는 다음과 같습니다.

decodeByAES256(key, data){
    const cipher = CryptoJS.AES.decrypt(data, CryptoJS.enc.Utf8.parse(key), {
        iv: CryptoJS.enc.Utf8.parse(""),
        padding: CryptoJS.pad.Pkcs7,
        mode: CryptoJS.mode.CBC
    });

    return cipher.toString(CryptoJS.enc.Utf8);
};

위의 함수를 사용하는 예는 다음과 같구요.

const k = "key"; // 암호화에서 사용한 값과 동일하게 해야함
const rk = k.padEnd(32, " "); // AES256은 key 길이가 32자여야 함
const eb = "mXK9nlcT70QdTjKgzxAD99zS4UYah0OZI8GFT8Pg+Vu3GFmF/HPmlV0PA/sUy7rr4+2Sh319ZEIz2TlyiPWcvw==";
const b = this.decodeByAES56(rk, eb);

console.log(b);

실행 결과는 다음과 같습니다.

암호화는 보안을 위해 매우 중요합니다.

작성일자

SharedArrayBuffer 사용을 위한 Live-Server 서버 설정

일단 SharedArrayBuffer API를 웹브라우저에서 사용하기 위해서는 다음과 같은 해더값을 웹서버에 추가해줘야 합니다.

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Tomcat이나 Apache 등과 웹서버가 아닌 VS.Code의 확장 기능으로써의 웹 서버인 Live-Server에서 위의 해더값을 추가하기 위해서 먼저 live-server가 설치된 폴더(필자의 경우 C:\Users\GEOSERVICE-PT\.vscode\extensions\ritwickdey.liveserver-5.7.5\node_modules\live-server)의 index.js 파일을 열고 “if (cors) {” 문자열에 대한 코드를 찾은 후 이 코드 바로 직전에 다음 코드를 추가해주면 됩니다. 

app.use((req, res, next) => {
    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
    res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
    next();
});