웹에서 Binary Data를 파일로 저장하기

웹에서 ArrayBuffer를 파일로 저장하기 위한 코드에 대한 내용입니다.

웹에서는 PC에 저장된 파일을 읽거나 쓸때 반드시 사람의 행위가 수반되어야 합니다. 즉, 버튼과 같은 UI를 사람이 의도하여 클릭을 해야만 한다는 것입니다. 이를 위해 필요한 UI에 대한 DOM 요소를 아래처럼 생성해 둡니다.

<button id="exportFile">Export To File</button>

그리고 위의 버튼에 대한 클릭 이벤트에 대한 코드는 다음과 같이 지정하구요.

const exportButton = document.getElementById( 'exportFile' );
exportButton.addEventListener( 'click', exportFile );

위의 exportFile 함수에 대한 코드는 다음과 같습니다.

function exportFile() {
    const buffer = createData(); /* ArrayBuffer 형식의 데이터를 생성하는 함수 */ 
    const blob = new Blob( [ buffer ], 
        { type: 'application/octet-stream' } )
    link.href = URL.createObjectURL( blob );
    link.download = 'file.dat';
    link.click();
}

위의 코드에서 link는 다음처럼 동적으로 생성된 a 테그 요소입니다.

const link = document.createElement( 'a' );
link.style.display = 'none';
document.body.appendChild( link );

결과적으로 사용자가 버튼을 클릭하면 a Tag가 클릭한 것으로 처리되어 파일 저장이 진행됩니다.

여기서 추가로 만약 저장하고자 하는 데이터가 바이너리가 아닌 텍스트라면 위의 코드 중 변경해야할 부분은 어딜까요? exportFile 함수에 대한 코드 중 3,4번의 buffer가 단순한 문자열 값이며 type: ‘text/plain’로 지정해 주면 됩니다.

DBMS 살펴보기

운영 중인 시스템에서 사용하는 DBMS를 살펴보는 방식은 해당 DBMS의 내용을 기술해 놓은 문서를 보거나 실제 DBMS에 저장된 데이터를 DB 툴을 통해 살펴보는 방식이 있습니다. 이 포스트는 운영중인 DBMS의 내용을 문서나 DB 툴 없이 java 코드를 통해 살펴보는 내용을 정리한 글입니다.

DBMS를 파악함에 있어서 관련 문서나 담당자의 설명 없이 해당 DBMS에 저장된 데이터를 통해 파악하는 것은 정확하지 않은 추측일 가능성이 큽니다. 관련 문서나 담당자의 설명과 DB 툴이나 이 글의 내용을 통해 DBMS에 실제로 저장된 데이터를 살펴보는 것 모두를 병행하여 코로스체킹(Cross Checking)을 해야 합니다.

흔히 가장 많이 사용하는 DBMS인 MySQL을 토대로 하였고 Java의 JDBC를 사용하였습니다. 테스트한 서버의 MySQL의 버전이 무엇인지는 모르겠으나 사용한 JDBC에 대한 jar 라이브러리는 mysql-connector-java-8.0.22.jar입니다.

이 프로그램의 결과는 해당 DBMS를 JDBC로 연결하고 해당 DB에 저장된 테이블 이름들을 가져온 후 각 테이블에 대해 최근에 저장된 단 3개의 필드값을 지정된 파일에 저장하는 것입니다. 테이블들이 많을 경우 제외할 테이블을 지정할 수 있습니다.

코드는 다음과 같습니다.

package tstMySQL;

import java.io.File;
import java.io.FileWriter;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashSet;
import java.util.Iterator;
import java.util.Set;

public class MainEntry {
    public static void main(String[] args) {
        File file = new File("d:/text.txt");
        PrintWriter writer = null;
			
        Connection con = null;
        PreparedStatement pstmt = null;   
        ResultSet rs = null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            con = DriverManager.getConnection("jdbc:mysql://localhost:3306/geos", "ID", "#PW");
            pstmt = con.prepareStatement("SHOW TABLES");
            rs = pstmt.executeQuery();
            ArrayList<String> tableNames = new ArrayList<String>();
            
            while(rs.next()) {
                String tableName = rs.getString(1);
                tableNames.add(tableName);
            }
            
            rs.close();
            pstmt.close();
            
            writer = new PrintWriter(new FileWriter(file));
            
            String[] ignoredTablesArray = { "etc", "abc" };
            Set<String> ignoredTables = new HashSet<String>(Arrays.asList(ignoredTablesArray));
            
            Iterator<String> iter = tableNames.iterator();
            while(iter.hasNext()) {
            	String tableName = iter.next();
            	if(ignoredTables.contains(tableName)) continue;
            	
            	writer.println("# TableName : " + tableName);
            
            	pstmt = con.prepareStatement("SELECT * FROM " + tableName + " ORDER BY ID DESC LIMIT 3");
            	rs = pstmt.executeQuery();
            	ResultSetMetaData rsmd = rs.getMetaData();        
                int fieldCount = rsmd.getColumnCount();

                while(rs.next()) {
                    for(int iField=0; iField<fieldCount; iField++) {
                        Object obj = rs.getObject(iField+1);
                        String value = obj == null ? "NULL" : obj.toString();
                        String fieldName = rsmd.getColumnName(iField+1);
                        writer.println("  " + fieldName + " : " + value);
                    }
                    writer.println();
                }

                rs.close();
                pstmt.close();
                            }
        } catch(Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if(rs != null) rs.close();
                if(pstmt != null)pstmt.close();
                if(con != null) con.close();
                if(writer != null) writer.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

27번 코드에 DBMS 연결을 위한 정보를 정확히 입력해야 합니다. 42번 코드는 파악할 필요가 없는 테이블의 이름으로 변경하면 되구요. 52번째 코드에서 각 테이블에 대해 살펴보고자 하는 SQL 문을 지정하고 있는데요. 여기서는 최근에 저장된 3개의 레코드만을 조회하고 있습니다. 이 부분은 DBMS의 테이블에 맞는 쿼리로 구성해야 합니다. 최종 결과는 19번 코드에서 지정한 D:/text.txt 파일로 저장됩니다.

GLSL를 이용한 그래픽 효과

3차원 그래픽에서 특수 효과는 쉐이더를 통해 대부분 구현됩니다. 이 글은 간단한 GLSL 쉐이더 코드를 통해 물과 불에 대한 효과를 소개합니다.

먼저 불에 대해 구현하고자 하는 모습은 다음과 같습니다.

다음은 물에 대한 결과입니다.

전체 소스코드는 아래 링크를 통해 다운로드 받으실 수 있습니다. 웹기반에서 구현된 코드이므로 js와 css, html 파일로 구성되어 있으며 WebGL 2.0으로 쉐이더 코드가 실행됩니다.

chart.js 코드 정리

MIT 라이선스인 chart.js를 예제를 통해 간단하게 정리해 봅니다. 구현하고자 하는 모습은 아래의 영상과 같습니다.

꺽은선 차트이며, 2개의 데이터 축을 가지고 1초마다 데이터가 변경됩니다.

먼저 DOM 구조입니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
    <canvas id="chart"></canvas>
</div>

CSS는 다음과 같구요.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

body {
    margin: 0;
    padding: 0;
}

div {
    width: 600px;
    height: 400px;
    padding: 20px;
}

이제 JS 코드에 대한 내용인데, 먼저 차트를 위한 기본 골격은 다음과 같습니다.

Chart.defaults.font.family = 'Noto Sans KR';

const ctx = document.getElementById('chart');

const config = {
    // CORE PART !!
};

const chart = new Chart(ctx, config);

위의 config에 속성값을 지정함으로써 차트를 정의하는 세세한 내용을 결정할 수 있습니다. config에 대한 속성값은 다음과 같이 정의했습니다.

const config = {
    type: 'line',
    data: {
        labels: ['빨강', 'Blue', 'Yellow', '초록', 'Purple', '오렌지'],
        datasets: [
            {
                label: '변곡점1',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: 'yellow',
                borderColor: 'black',
                borderWidth: 1
            },
            {
                label: '변곡점2',
                data: [10, 16, 7, 6, 4, 2],
                backgroundColor: 'white',
                borderColor: 'gray',
                borderWidth: 1
            }
        ]
    },
    options: {
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: '차트, 그것이 알고 싶다.'
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: '색상'
                }
            },
            y: {
                title: {
                    display: true,
                    text: '변곡량'
                }
            }
        },

    }
}

앞서 실행 화면을 보면 1초마다 차트의 값이 변경되는 것을 볼 수 있습니다. 이에 대한 코드는 다음과 같습니다.

setInterval(() => {
    const datasets = config.data.datasets;

    for (let iDataset = 0; iDataset < datasets.length; iDataset++) {
        const data = datasets[iDataset].data;
        for (let iValue = 0; iValue < data.length; iValue++) {
            data[iValue] += Math.random() * 2.0 - 1.0;
        }
    }

    chart.update();
}, 1000);

Javascript의 Array, Set, Object, Map에 대한 데이터 순회하기

자바스크립트에서 데이터 컨테이너로써의 관점에서 데이터를 순회하는 코드를 정리합니다.

먼저 Array입니다.

const arr = new Array(1, 2, 3, 4, 5)

console.log('Array Iteration 1')
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

console.log('Array Iteration 2')
arr.forEach(v => {
    console.log(v)
})

console.log('Array Iteration 3')
for (let v of arr) {
    console.log(v)
}

console.log('Array Iteration 4')
for (let i in arr) {
    console.log(arr[i])
}

다음은 Set입니다.

const set = new Set([1, 2, 3, 4, 'Hello'])

console.log('Set Iteration 1')
for (let v of set) {
    console.log(v)
}

console.log('Set Iteration 2')
for (let v of set.values()) {
    console.log(v)
}

console.log('Set Iteration 3')
set.forEach(v => {
    console.log(v)
});

다음은 Object입니다.

const obj = { a: 1, b: 2, c: 3, 9: 4, e: 'Hello' }

console.log('Object Iteration 1')
const keys = Object.keys(obj) // [ 'a', 'b', 'c', '9', 'e' ]

for (let i = 0; i < keys.length; i++) {
    const k = keys[i]
    const v = obj[k]
    console.log(k, v)
}

console.log('Object Iteration 2')
const values = Object.values(obj) // [ 1, 2, 3, 4, 'Hello' ]
for (let i = 0; i < values.length; i++) {
    const v = values[i]
    console.log(v)
}

console.log('Object Iteration 3')
const entries = Object.entries(obj) // [ ['a', 1], ['b', 2], ['c', 3], ['9', 4], ['e', 'Hello'] ]
for (let i = 0; i < entries.length; i++) {
    const k = entries[i][0]
    const v = entries[i][1]

    console.log(k, v)
}

console.log('Object Iteration 4')
for (let k in obj) {
    const v = obj[k]
    console.log(k, v)
}

끝으로 Map입니다.

const map = new Map( [ ['a', 1], ['b', 2], ['c', 3], ['9', 4], ['e', 'Hello'] ])

console.log('Map Iteration 1')
for (let [k, v] of map) {
    console.log(k, v)
}

console.log('Map Iteration 2')
for (let k of map.keys()) {
    console.log(k, map.get(k))
}

console.log('Map Iteration 3')
for (let v of map.values()) {
    console.log(v)
}

console.log('Map Iteration 4')
for (let [k, v] of map.entries()) {
    console.log(k, v)
}

console.log('Map Iteration 5')
map.forEach(function(v, k) {
    console.log(k, v)
})

사실 Map의 출현으로 더 이상 Object를 데이터 컨테이너로써 사용하는 것은 옳지 않습니다. Object는 기본적으로 생성될 때 기본 키값을 갖지만 Map은 개발자가 추가하지 않은 데이터는 갖지 않습니다. 또한 Map의 Key는 문자열 객체 이외에도 타입도 가능합니다. 또한 저장한 순서대로 값을 얻을 수 있으며 데이터의 개수도 size 함수를 통해 바로 얻을 수 있습니다. 게다가 Map은 데이터의 추가와 삭제 시 Object보다 성능이 뛰어납니다.