글

작성일자

GWC UI Library를 이용한 입력폼 개발

GWC 라이브러리를 이용해 실제 프로젝트에 적용한 예입니다. 아래의 영상은 GWC 라이브러리만을 이용해 만든 UI입니다.

JS 코드는 다음과 같습니다.

const dlg = gwcCreateModalDialog("SHP 파일을 레이어로 추가");
dlg.content = `
    

        

            
            
        

        

            
            
            
        
                                
        

            
            
이곳을 클릭하거나 
이곳에 파일을 드래그 하세요.

        

        

            
             
                
                    4326
                    5174
                    5178
                    5179
                    5181
                    3857
                
            
        
                                
        

            
            
                
            
        

        
                
            
            
        

    

`;

dlg.content.querySelector("gwc-button").addEventListener("click", () => {
    dlg.remove();
});

dlg.show();

GeoServiceWebComponentManager.instance.update();

위의 코드에서 사용한 css는 다음과 같습니다.

/* common */

.vertical-linear-layout {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.horizontal-linear-layout {
    display: flex;
    gap: 0.3em;
    flex-direction: row;
    padding: 0 1em;
}

.v-center {
    align-items: center;
}

.h-center {
    justify-content: center;
}

.v-space {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

gwc-toolbutton {
    zoom: 0.45;
}

gwc-button {
    zoom: 0.9;
}

gwc-select {
    zoom: 0.8;
}

/* AddSHPFileDialog */

.add-shp-file-dialog .file-zone {
    font-size: 1em;
    width: 20em;
    height: 10em;
    
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px dashed rgba(255,255,255,0.3);
    background-color: rgba(0,0,0,0.4);
    box-shadow: inset 1px 1px 20px black, 1px 1px 5px black;
    border-radius: 0.4em;
}

.add-shp-file-dialog gwc-label {
    width: 120px;
}

.add-shp-file-dialog gwc-select {
    width: 10em;
}

.add-shp-file-dialog .title {
    width: 20em;
}

.add-shp-file-dialog .folder {
    width: 17.3em;
}

.add-shp-file-dialog gwc-resizable-panel {
    position:relative;
    width: calc(20em + 7px);
    height: 10em
}

.add-shp-file-dialog gwc-resizable-panel gwc-memo {
    width: 100%;
    height: 100%;
}
작성일자

#GWC UI Library : gwcCreateModalDialog 함수 [DEPRECATED]

웹 UI 라이브러리인 GWC에서 제공하는 gwcCreateModalDialog 함수에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1em;
}

.hcenter {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0.3em;
    gap: 0.6em;
 }

.vcenter {
    display: flex;
    align-items: center;
}

gwc-textinput {
    width: 20em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    btn.addEventListener("click", () => {
        const dlg = gwcCreateModalDialog("모달 대화상자");
        dlg.content = `
            

                

                    
                    
                

                
            

        `;
    
        dlg.content.querySelector("gwc-button").addEventListener("click", () => {
            dlg.remove();
        });

        dlg.show();
    
    });

    //GeoServiceWebComponentManager.instance.update();
};

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

작성일자

PostreSQL의 PL/pgSQL에서, 최대값을 구해 다음 값으로 데이터 추가하기

먼저 다음과 같은 테이블이 있습니다.

-- DIRECTORY
CREATE TABLE directory (
    id INTEGER, -- 디렉토리 ID
    parent_id INTEGER, -- 부모 디렉토리 (null 값일 때 루트)
    user_id INTEGER NOT NULL, -- 사용자 ID

    PRIMARY KEY (id, user_id),
    CONSTRAINT fk_parent_i FOREIGN KEY(user_id, parent_id) REFERENCES directory(user_id, id) ON DELETE CASCADE
);

그리고 이 테이블에 데이터를 추가하는 함수는 다음과 같습니다.

-- 신규 데이터 추가 함수
CREATE OR REPLACE FUNCTION add(_parent_id INTEGER, _user_id INTEGER) RETURNS INTEGER
LANGUAGE plpgsql AS $$
DECLARE
    max_id INTEGER;
    next_id INTEGER;
BEGIN
    -- 해당 user에 대해서 최대값의 id 값을 구해서 max_id 변수에 할당
    SELECT MAX(id) INTO max_id FROM directory WHERE user_id = _user_id;

    IF max_id IS NULL THEN -- max_id 값이 없다면
        next_id := 0; -- 다음 id 값은 0으로 할당
    ELSE
        next_id := max_id + 1; -- 다음 id 값은 최대값에 1을 더해서 할당
    END IF;
	
    -- 다음 id 값을 콘솔에 출력해서 확인
    RAISE NOTICE 'next_id = %', next_id;
	
    -- 다음 id 값으로 데이터 추가
    INSERT INTO directory VALUES (next_id, _parent_id, _user_id);

    -- 다음 id 값 반환
    RETURN next_id;
END $$
작성일자

자바스크립트의 Optional Channing, Nullish Coalescing Operator 문법

용어 자체가 이리 어려우니 개념은 간단하고 매우 좋은 기능임에도 손에 잘.. 안붙습니다.

Optional Channing은 ?. 키워드로 사용되며 객체에 어떤 속성이 있다면 그 속성을 반환하고 없다면 undefined을 반환합니다. 즉 if 문으로 해당 속성을 검사할 필요가 없습니다. 이 Optional Channing의 예는 다음과 같습니다.

const person = { name: "Dip2K", company: { name: "GEOSERVICE", address: "Korea, Seoul" }};
console.log(person.company?.name); // GEOSERVICE
console.log(person.skill?.language); // undefined

Optional Channing은 매서드 호출에 대해서도 사용할 수 있는데요. 객체에 어떤 매서드가 존재할 때 그 매서드를 호출해야 한다면 if 문으로 매서드 존재 여부를 검사할 필요 없이 다음처럼 하면 됩니다.

const obj = {
    getName() {
        console.log("Dip2K");
    }
};

console.log(obj.getName?.()); // Dip2K
console.log(obj.getAge?.()); // undefined

결국 ?.은 바로 직전에 붙은 녀석이 존재하면 그 녀석을 반환하고 존재하지 않는 녀석이면 즉각 undefined를 반환하고 끝납니다.

다음은 Nullish Coalescing Operator입니다. ?? 키워드로 사용되며 ?? 키워드를 중심으로 왼쪽값이 명확히 null 또는 undefiend 일때 오른쪽의 값을 반환합니다. 명확히 null 또는 undefined이라는 의미는 0이나 빈문자열 등은 null 또는 undefiend로 해석되지 않습니다. 예는 다음과 같습니다.

let name = "Dip2K";
console.log(name ?? "Jackass"); // Dip2K 

let age = 0;
console.log(age ?? 10); // 0

let last_name = undefined;
console.log(last_name ?? "Jackson"); // Jackson

결국 이 이름만 거창한 녀석은 값이 있음? 없음 말고(undefined)입니다.