[카테고리:] 미분류

외래키는 외부 테이블의 어떤 필드의 값을 참조함으로써 1:N, N:N, N:1과 같은 관계를 맺어주는 키 필드입니다.

외래키로 참조하고 있는 외부 테이블의 값이 변경되거나 제거되면 DB에 논리적인 오류가 남게 됩니다. 그래서 기본적으로 외부 테이블의 값이 변경되거나 제거를 하기 전에 외래키를 검사해서 문제가 없을 경우에만 변경 또는 제거를 수행하게 됩니다.

우리가 원하는 것은 외부 테이블의 참조 값이 변경되거나 삭제될때 외래키에 해당되는 값도 그에 맞게 변경시켜주거나 삭제해줘야 합니다. 이때 외래키에 대한 제약조건을 걸때 다음처럼 해주면 됩니다.

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

user 테이블의 생성은 다음과 같습니다.

CREATE TABLE "user" (
    id VARCHAR(20) PRIMARY KEY, -- 사용자 ID
    name VARCHAR(20),
	CONSTRAINT chk_id CHECK (CHAR_LENGTH(id) >= 5)
);

그리고 이 user의 id를 참조하는 coin 테이블의 생성은 다음과 같습니다.

CREATE TABLE coin (
	id SERIAL PRIMARY KEY,
    user_id VARCHAR(20) NOT NULL, -- 사용자 ID
	amount INTEGER,
    CONSTRAINT fk_user_id FOREIGN KEY(user_id) REFERENCES "user"(id) ON DELETE CASCADE ON UPDATE CASCADE
);

즉 user 테이블의 id 값을 coin 테이블의 user_id에서 외래키로 참조하도록 제약 조건을 걸고 있습니다. 이때 ON DELETE CASCADE ON UPDATE CASCADE를 걸어주면 됩니다. 만약 이 조건(ON DELETE CASCADE ON UPDATE CASCADE)을 지정하지 않으면 제약 검증을 실패할 경우 삭제 또는 수정이 되지 않습니다.

웹에서 파일을 선택하기 위해서는 사용자의 행위가 필요한데, 파일 열기 대화상자를 통해 파일을 선택해 주거나 파일을 드래그해서 웹브라우저에 드랍해줘야합니다.

먼저 파일을 드랍해서 떨굴 영역을 마련해 줍니다.

    
    
        

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

.file-zone에 대한 div 영역이 파일을 드랍해서 떨굴 영역입니다.

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

fileZone.addEventListener("drop", (event) => {
    const files = event.dataTransfer.files;
    const file = files[0];
    if(file) {
        processFile(file);
    }

    event.preventDefault();
});

fileZone.addEventListener("dragover", (event) => {
    event.preventDefault();
});

processFile은 떨군 파일을 처리하는 함수인데요. 예를 들면 다음과 같습니다.

function processFile(file) {
    const name = file.name;
    const size = file.size;
    const reader = new FileReader();

    reader.onload = function() {
        const aBuf = this.result; // ArrayBuffer
        //const dView = new DataView(aBuf);
        //const validFlag = dView.getUint8(0);
        //const numRecords = dView.getInt32(4, true);

        const MD5 = CryptoJS.MD5(aBuf).toString();
        const SHA256 = CryptoJS.SHA256(aBuf).toString();
        
        gwcMessage(`Size ${size} bytes
MD5 ${MD5}
SHA256 ${SHA256}`);
    };

    const blob = file.slice(0, size);
    reader.readAsArrayBuffer(blob);
}

이제 파일 열기 대화상자를 통해 file을 선택해 처리해보겠습니다. 앞서 HTML 코드를 보면 file 타입의 input tag가 있는데 이 DOM 요소를 통해 파일 열기 대화상자를 표시합니다. 이 DOM 요소의 display는 none으로 해서 화면에 보이지 않도록 하는게 일반적입니다.

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

const fileZone = document.querySelector(".file-zone");

fileZone.addEventListener("click", () => {
    document.querySelector("input").click();
});

document.querySelector("input").onchange = function() {
    const file = this.files[0];
    if(file) {
        processFile(file);
    }                
};

웹 UI 라이브러리인 GWC에서 제공하는 IconButton 컴포넌트에 대한 예제 코드입니다.

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

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

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

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

window.onload = () => {
    button1.addEventListener("click", () => { 
        gwcMessage("ADD 버튼 클릭");
    });

    button2.addEventListener("click", () => {
        gwcMessage("CREATE 버튼 클릭");
    });

    button3.addEventListener("click", () => {
        gwcMessage("TOOLS 버튼 클릭");
    });
};

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