Joker

ERC721 Token Standard

Joker2 — Thu, 1 Aug 2024 17:35:51 +0900

ERC721

ERC721 Method

function balanceOf(address _owner) external view returns (uint256)

특정 계정이 보유한 ERC721 토큰 수량을 반환합니다.

(OpenZepplin 기준) _balances 변수에 _owner 주소값을 key 으로 조회된 수량값을 반환합니다.

function ownerOf(uint256 _tokenId) external view returns (address)

특정 ERC721 토큰 소유자 계정의 eoa 를 반환합니다.

(OpenZepplin 기준) _owners 변수에 _tokenId 값을 key 로 조회한 사용자 eoa 주소를 반환합니다.

function safeTransferFrom(address _from, address _to, uint256 _tokenId, bytes data) external payable

function safeTransferFrom(address _from, address _to, uint256 _tokenId) external payable

function transferFrom(address _from, address _to, uint256 _tokenId) external payable

function approve(address _approved, uint256 _tokenId) external payable

특정 ERC721 토큰(_tokenId)을 소유자 대신에 다른 계정(_approved)이 전송할 수 있도록 설정합니다.

(OpenZepplin 기준) _tokenApprovals 변수에 tokenId 값을 key 로, _approved 주소를 value 로 저장합니다.

function setApprovalForAll(address _operator, bool _approved) external

모든 ERC721 토큰을 소유자 대신에 다른 계정(_operator)이 전송할 수 있도록(or 전송 못하도록) 설정합니다.

(OpenZepplin 기준) _operatorApprovals 변수에 TX 발생자(=소유자) 주소와 _approved 주소값을 key 로, 승인 여부(=true/false)를 value 로 저장합니다.

function getApproved(uint256 _tokenId) external view returns (address)

특정 ERC721 토큰(_tokenId)를 다른 계정이 전송할 수 있도록 설정된 경우 해당 계정 주소를 반환합니다.

(OpenZepplin 기준) _tokenApprovals 변수에 tokenId 값을 key로 조회하여 획득한 계정의 주소를 반환합니다.

function isApprovedForAll(address _owner, address _operator) external view returns (bool)

모든 ERC721 토큰을 특정 계정(_owner) 대신에 다른 계정(_operator)이 전송할 수 있도록(or 전송 못하도록) 설정된 여부를 반환합니다.

(OpenZepplin 기준)_operatorApprovals 변수에 TX 발생자(=소유자) 주소와 _approved 주소값을 key 로, 승인 여부(=true/false)를 value 로 저장합니다.

ERC721 Event

event Transfer(address indexed _from, address indexed _to, uint256 indexed _tokenId);

event Approval(address indexed _owner, address indexed _approved, uint256 indexed _tokenId);

event ApprovalForAll(address indexed _owner, address indexed _operator, bool _approved);

ERC20 Token Standard

Joker2 — Sat, 13 Jul 2024 01:36:02 +0900

ERC20

이더리움에서 사용하는 (대체 가능한) 토큰(=Fungible Token, FT) 표준입니다.

ERC20 Method

function name() public view returns (string)

ERC20 contract 에 설정된 토큰 이름(=name)을 반환하는 함수입니다. 보통 생성자(constructor)의 입력을 통해 설정합니다.

function symbol() public view returns (string)

ERC20 contract 에 설정된 토큰 심볼(=symbol)을 반환하는 함수입니다. 보통 생성자(constructor)의 입력을 통해 설정합니다.

function decimals() public view returns (uint8)

ERC20 contract 에 설정된 토큰 소수자릿수(=decimals)를 반환하는 함수입니다. 보통 생성자(constructor)의 입력을 통해 설정하거나, 생성시 별도로 설정하지 않는다면 많은 ERC20 에서 사용하는 18을 default 값으로 사용하는 경우가 일반적입니다.

function totalSupply() public view returns (uint256)

ERC20 contract 를 통해 발행된 총 토큰수량을 반환하는 함수입니다. 만약, ERC20 토큰이 운영 중에 추가된다면 추가수량만큼 증가된 총 토큰 수량이 반환됩니다. 예를 들어, 어떤 ERC20 토큰이 OpenZeppelin 에서 (개발자 편의를 위해 미리 템플릿을 만들어 제공하는) ERC20 contract 로 개발되었고, 이 contract 가 총 수량을 추가할 수 있는 함수(ex, _mint() 함수)가 public 하게 오픈되어 있다면, 이 함수를 통해 총 발행 수량을 늘릴 수 있고, 이렇게 변경된 총 발행수량은 totalSupply() 함수의 결과값으로 반환하게 됩니다.

function balanceOf(address _owner) public view returns (uint256 balance)

ERC20 토큰을 _owner 계정(=eoa)이 얼마나 보유했는지 수량을 반환하는 함수입니다. ERC20 contract 에는 아래와 같이 _balances 라는 (외부서 직접 접근 및 변경이 불가능한) private 변수가 정의되어 있습니다. 이 변수는 key-value 구조인 map 자료형을 사용하는데, key 값은 사용자의 eoa 를 address 자료형으로 저장하고, 해당 key 의 value 값은 토큰 수량을 uint256 자료형으로 저장하고 있습니다.

mapping(address account => uint256) private _balances;
(출처 : OpenZepplin)

사용자(=eoa)가 ERC20 토큰을 전송할 때마다 전송한 수량만큼 value 값이 변경됩니다. balanceOf() 함수는 _owner 계정을 key 값으로 조회하여 해당 value 값을 그대로 반환하는 처리를 수행합니다.

function transfer(address _to, uint256 _value) public returns (bool success)

ERC20 토큰을 to 주소로 value 수량만큼 전송하는 함수입니다. transfer() 함수는 아래와 같이 contract 내의 _transfer(from, to, value) 함수를 호출하며, 이때 from 위치에는 TX를 실행한 사용자의 eoa 를, to 위치에는 입력값 중 _to 주소값을, 그리고 value 위치에는 입력된 value 값을 사용하여 호출하게 됩니다.

address owner = _msgSender();
_transfer(owner, to, value);

(출처 : OpenZepplin)

_transfer() 함수는 ERC20 의 전송 처리를 담당하는 함수인데, 이 함수는 위에서 언급한 _balance 변수의 값을 변경시키며, _transfer() 에 입력된 from 을 key 값으로 조회하여 가져온 value 값을 증가시키고, _transfer() 에 입력된 to 를 key 값으로 조회하여 가져온 value 값을 감소시키는 작업을 수행하며, 이러한 숫자 변환 처리 자체가 전송 처리의 매커니즘을 만들게 됩니다.

function approve(address _spender, uint256 _value) public returns (bool success)

ERC20 contract 는 자신의 토큰을 자신이 전송하는 것이 아닌, 다른 사람이 자신을 대신해서 전송할 수 있도록 하는 매커니즘이 있습니다. 아래와 같이 _allowances 라는 private 변수가 정의되어 있는데, 이 변수는 이중 key-value 구조를 가집니다. key 값은 TX를 실행한 본인의 eoa가 저장되며, value 값에는 자신을 대신하여 전송을 허용할 사용자들의 주소 혹은 컨트랙트 주소와 얼마나 허용할지에 대한 수량이 저장하고 있습니다.

mapping(address account => mapping(address spender => uint256)) private _allowances;

(출처 : OpenZepplin)

만약, 사용자 A가 사용자 B와 사용자C에게 자신을 대신해서 각각 50개씩 전송하도록 허용하고 있다면, _allowances 에는 아래처럼 저장되어 있을 것입니다. (참고, 아래는 json 포멧으로 map 구조를 변환하여 작성한 것입니다.)

{ "사용자 A" : { "사용자 B" : 50, "사용자 C" : 50 } }

위처럼 _allowances 변수가 설정되어 있을때, 사용자 B와 사용자 C는 각자 사용자 A를 대신하여 사용자 A가 보유한 토큰을 최대 50개씩 전송이 가능하게 됩니다.

function allowance(address _owner, address _spender) public view returns (uint256 remaining)

_owner 의 계정이 _spender 계정에게 (_owner 의 계정을 대신하여 _owner 의 계정소유의 토큰을) 얼마나 대신해서 전송하는 것을 허용할지에 대한 수량을 반환하는 함수입니다. allowance() 함수는 _allowances 변수에서 _owner 계정을 기준으로 key 값을 조회하고 _spender 값을 기준으로 value 값을 한번 더 (value 값 안에서 key 값으로) 조회하여 가져온 값(=허용수량)을 반환합니다.

function transferFrom(address _from, address _to, uint256 _value) public returns (bool success)

ERC20 토큰을 to 주소로 value 수량만큼 전송하는 함수입니다. transferFrom() 함수는 transfer() 함수와 다르게 _from 값을 추가로 받습니다. 이 함수는 TX 를 실행한 자신을 대신하여 다른 사용자가 자신의 토큰을 전송하려할 때 사용되는 함수입니다. 아래는 transferFrom() 함수의 처리과정의 일부분이며, _allowances 변수와 참조하는 로직이 추가로 있다는 점이 transfer() 함수와 다릅니다.

address spender = _msgSender();
_spendAllowance(from, spender, value);
_transfer(from, to, value);

(출처 : OpenZepplin)

_spendAllownace() 함수가 내부에서 호출되는 것을 볼 수 있는데, 이 함수는 from 계정이 spender 계정에 value 수량 이상을 허용하고 있는지 확인하는 과정과 (허용하고 있다면) _allowances 변수에서 from 계정이 spender 계정에 허용한 토큰 수량을 value 만큼 줄이는 과정이 포함되어 있습니다. 이 처리 과정 때문에 spender 는 허용된 수량만큼만 전송이 가능하게 됩니다.

ERC20 Event

event Transfer(address indexed _from, address indexed _to, uint256 _value)

ERC20 토큰이 전송하는 TX가 발생되는 경우 발생되는 event 입니다. 실제로 이 event 는 _balances 변수값이 변경될 때 발생됩니다.

event Approval(address indexed _owner, address indexed _spender, uint256 _value)

ERC20 토큰이 전송하는 TX가 발생되는 경우 발생되는 event 입니다. 실제로 이 event 는 _allowances 변수값이 변경될 때 발생됩니다.

Reference

ERC-20: Token Standard

ModuleNotFoundError: No module named 'six'

Joker2 — Fri, 5 Apr 2024 09:43:07 +0900

Okta - ModuleNotFoundError: No module named 'six'

에러 (Error)

(okta-awscli) ModuleNotFoundError: No module named 'six'

Console Error Log

환경 (Environment)

Mac M1 Max
Mac OS (Monterey 12.6)

원인 (Cause)

okta-awscli 를 사용해 로컬에서 인증을 시도할 때 에러가 발생했다. 인증이 되어야 local 에서 의존되어 있는 툴들을 실행할 수 있기 때문에 해결되어야 했다. 하루 전에 homebrew 업그레이드를 한 것이 okta-awscli 툴 사용에 영향이 미친 것은 아닐까 생각된다. 원인을 하나씩 찾다가 python 버전이 okta-awscli 에서 사용하는 것과 local 에 설치된 python 버전이 다르다는 것을 알았다.

local 에 설치된 python 버전 (v3.12.2)

% python3 --version
Python 3.12.2

okta-awscli 에 사용 중인 python 버전 (v3.9)

에러에 포함된 문구
"/opt/homebrew/lib/python3.9/site-packages/oktaawscli/okta_awscli.py"

homebrew 사이트에 게시된 okta-awscli 에서 사용하는 python 버전은 3.12.2 (=2024.4.5 기준) 이므로, 기존에 local 에 설치되어 있던 버전은 old 버전인 것을 알았고, okta-awscli 를 최신으로 업데이트하면 문제는 해결될 것이라고 생각했다.

해결 (Solution)

아래와 같이 okta-awscli 패키지 재설치를 함으로써 에러 상황이 더이상 발생되지 않았다. (참고, uninstall 경우, background 로 처리되어 실행 후 몇초 뒤에 설치하면 된다.)

패키지 삭제
% brew uninstall okta-awscli

패키지 설치
% brew install okta-awscli

만약, okta-awscli 를 재설치했는데도 python 버전이 이전과 동일한 경우, uninstall 때 기존 binary 파일이 완전히 삭제된 것이 아니니 해당 파일을 제거하면된다.

% mv /opt/homebrew/bin/okta-awscli /opt/homebrew/bin/okta-awscli-tmp

Uncaught TypeError: XX is not a function

Joker2 — Sat, 4 Feb 2023 20:01:59 +0900

React - Uncaught TypeError: XX is not a function

에러 (Error)

XX.js:19 Uncaught TypeError: XX is not a function

Console Error Log

상황 (Situation)

redux 를 사용해서 개발 중에 function 을 찾을 수 없다는 에러가 발생했다. UI 에 필요한 component 들부터 개발한 후, BE의 API 응답을 받아 status 로 관리하기 위해 redux를 사용면서 코드 일부를 수정하는 과정에서 위와 같은 문제가 발생하였다. 문제되는 function (getUserInfo) 은 console 에서 undefined 로 찍히고 있었고, 에러가 발생하고 있던 코드는 아래와 같다.

Dashboard.js

import React, {useState, useEffect} from 'react';
import { bindActionCreators } from 'redux'
import { connect, useSelector } from 'react-redux'
import { getUserInfo as getUserInfoAction } from "../modules/account";

export const Dashboard = ({fetchUserInfo}) => {
    useEffect(() => {
    	console.log(fetchUserInfo); <-- undefined 로 출력 확인
        fetchUserInfo(token);
    },[]);
    
    ..
}

..
const mapDispatchToProps = (dispatch) => ({
    fetchUserInfo: bindActionCreators(getUserInfoAction, dispatch),
});

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Dashboard);

MyPage.js

import { Dashboard } from "../container/Dashboard";

원인 (Cause)

redux를 적용하기 전의 기존 코드에서는 Dashboad.js 에서는 "export const Dashboard" 로 export 를 한 후, MyPage.js 에서는 "import { Dashboard }" 로 improt 를 하고 있었다. 그런데, redux 를 적용하면서 Dashboard.js 에 "export default connect()" 코드가 추가되면서 default 로 export 를 하도록 바뀌었으나, MyPage.js 에서는 이를 고려하지 않았기 때문에 발생하였다.

해결 (Solution)

default 로 export 한 component 는 괄호("{}", brackets) 없이 import 를 해서 사용해야하므로, 아래와 같이 MyPage.js 에서 import 할 때 괄호를 제거함으로써 에러 상황이 더이상 발생되지 않았다.

MyPage.js

import Dashboard from "../container/Dashboard";

참고

stackoverflow : mapDispatchToProps not working. Props empty (error: redux action is not a function) link

macOS(M1)에 node 설치하기

Joker2 — Tue, 29 Mar 2022 22:32:50 +0900

macOS(M1)에 node 설치하기

글쓴이는 최신형 mac book을 새로 주문했습니다. 이전에 개발하던 프로그램들을 모두 하나씩 설치하는데, 새로운 mac book 의 환경이 달라져서 환경세팅을 하는도중에 몇가지 걸림돌들이 있었습니다. 그중 nodeJS 환경을 세팅하는데 차이가 있어서 글을 남깁니다.

현재 글쓴이의 mac book 스펙은 아래와 같습니다. M1칩을 사용하고 있는데, 이 칩은 Apple 이 자체개발한 것입니다. 이전 모델까지는 Intel사에서 만든 칩을 사용했었는데, 앞으로는 직접 개발한 M1칩을 사용한 것입니다. 그리고, 이 Intel과 M1칩은 다르기 때문에, 이전에 사용하던 프로그램들이 Intel과 M1 중에 어떤 환경을 대상으로 빌드되었는지를 보고 설치를 해주어야 합니다. 다시 말해서, 이전 프로그램들을 그대로 설치할 수 없는 경우들이 있다는 것입니다.

개발환경

mac book pro
macOS Monterey
버전 12.2.1
칩 Apple M1 Max
node 14.17.0

node 14 이상을 설치하려는 경우

error 내용

node 14.17.0 버전을 설치하려고 하는데 아래와 같이 에러가 발생했습니다. 이유는 M1칩에서 낮은 node 버전을 설치하려 시도했기 때문입니다. 아무래도 낮은 버전의 node 들은 Intel 칩만을 대상으로 빌드되었고, 높은 버전의 node 들은 M1 칩에서도 동작가능하도록 빌드되었기 때문으로 보입니다. 따라서, 낮은 버전의 node 들을 M1 칩에서 동작하기 위해서는 그대로 설치하면 안되고, [에러 1 : node 설치하기 (node 14 이상)] 가이드에 따라 설치해주면 되겠습니다.

...
clang: error: no such file or directory: 'CXX=c++'
...

node 설치하기

1. nvm 설치

$ brew install nvm

2. nvm 폴더 생성

$ mkdir ~/.nvm

3. .zshrc 편집

$ vi ~/.zshrc

export PATH=/opt/homebrew/bin:$PATH

export NVM_DIR="$HOME/.nvm" 
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh" # This loads nvm 
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion

4. .zshrc 내용 pc에 적용

$ source ~/.zshrc

5. nvm 설치 (낮은 버전 ex, 14.17.0)

$ nvm install 14.17.0
$ node --version

node 14 이하를 설치하려는 경우

error 내용

M1칩 환경에서 node 개발 환경 관련 내용을 찾다보니, 글쓴이처럼 M1칩에서 node 14버전 이상은 [이슈1 : node 설치하기 (node 14d 이상)]에 따라 환경세팅이 가능하지만 node 14버전 이하를 사용하려할 때는 아래처럼 에러가 발생해서, 추가적인 세팅을 해주어야한다고 합니다. nvm 깃허브 공식 사이트에 나와있는 것처럼 아래가이드에 따라 세팅해주면 실행됩니다. (직접 해보진 않아서 해당 문제에 부딪치면 그때 본 내용을 업데이트해두겠습니다.)

...
../deps/openssl/config/archs/linux-x86_64/asm/crypto/aes/aes-x86_64.s:2:1: error: unknown directive .type
...

node 설치하기

Macs with M1 chip

M1 칩을 사용하는 Mac 사용자들을 위한 가이드

So, if you want to run a version prior to v16.0 on an M1 Mac, it may be best to compile node targeting the x86_64 Intel architecture so that Rosetta 2 can translate the x86_64 processor instructions to ARM-based Apple Silicon instructions. Here's what you will need to do:

만약에, M1 칩에서 node 16 이전버전을 사용하기를 원한다면, x86_64 Intel 칩 위에서 실행가능하도록 컴파일된 것을 사용하는 것이 가장 좋습니다. macOS 에서 그렇게 실행하도록 도와주는 Rosetta 2 라는 프로그램이 있습니다. 이 프로그램은 x86_64 명령어들을 Apple Silicon 기반의 명령어들로 번역해줌으로써 M1 칩에서 동작가능하게 만듭니다. 자, 이어서 아래 가이드에 따라 Rosetta 를 실행해보겠습니다.

This same thing can also be accomplished by finding the Terminal or iTerm App in Finder, right clicking, selecting "Get Info", and then checking the box labeled "Open using Rosetta". Open a shell that's running using Rosetta

Finder 를 열고 > 응용프로그램의 Terminal 에서 > 마우스 우클릭 > 정보 가져오기 > Rosetta를 사용하여 열기를 체크하고 실행을 합니다. 그리고 아래 명령어를 실행합니다.

$ arch -x86_64 zsh

Install whatever older version of node you are interested in. Let's use 12.22.1 as an example. This will fetch the node source code and compile it, which will take several minutes.

오래된 node 버전을 설치해보세요. 그럼 정상적으로 설치될 것입니다.

$ nvm install v12.22.1

참고

(github) nvm 링크

redis transaction - 1. Multi, Exec, Discard, Watch, UnWatch

Joker2 — Sun, 4 Jul 2021 02:19:36 +0900

Redis Transaction

Multi, Exec, Discard, Watch, Unwatch
Pipeline, Non Transactional Pipeline
Lua Script

요약

Database 의 Transaction : ACID 를 보장하는 작업 단위를 말한다.
Redis 의 Transaction : (ACID 까지는 아니지만) 독립적인 작업단위를 말한다.
- Multi + Exec : Single Isolation Operation 방식으로 처리하는 방법이다.
- Watch + Multi + Exec : Optimistic Locking 방식으로 처리하는 방법이다.

개발을 할 때, Redis의 Transaction을 다루는 경우 Database의 Transaction의 개념과 헷갈리는 부분들이 있었고, 정확한 이해를 위해 Redis와 Database 에서 말하는 Transaction이 어떤 차이가 있는지 정리합니다.

Database 에서의 Transaction

트랜잭션은 데이터베이스(Database)에서 ACID (Atomic, Consistency, Isolation, Durability)를 보장하는 작업단위를 말합니다. ACID는 각각 원자성, 일관성, 독립성, 지속성을 의미하고 Transaction이라는 한가지 작업을 처리하는데 보장하는 성질을 의미합니다. 개발자는 Database 에 반영되어야 하는 한가지 작업을 완전히 수행하기 위해, 하나 혹은 둘 이상의 SQL문(ex, Select, Insert, Delete, Update) 조합하게 됩니다. 이 때, 둘 이상의 SQL 문들의 조합으로 구성하는 경우, 원자성(Atomic)은 여러 개의 SQL 문들이 마치 하나처럼 완전히 실행되거나 실행되지 않도록 Single Operation으로 동작하게 하는 것, 일관성(Consistency)은 실행 이전과 실행 이후의 상태가 일관된 유지된다는 의미로 무결성 제약조건에 위배되지 않는 것, 독립성(Isolation)은 Transaction 을 구성하는 SQL 문들이 실행 되는 중간에 다른 Transaction 들이 끼어들지 못하는 온전히 독립된 상태로 실행되는 것으로 동시성 제어(Concurrency Control)를 위함이고, 지속성(Durability)은 실행 완료 이후 변경사항이 영구적으로 유지된다는 것으로 SSD, Disk 등에 보관된 상태로 존재한다는 것을 의미합니다. Transaction이 실제로 어떻게 사용될 수 있는지 아래의 2가지 예시를 통해 살펴봅니다.

example 1

A 테이블의 특정 Record의 Column 값에 따라 B와 C의 테이블에 한번에 반영이 되어야 한다면, A 테이블 조회를 위한 Select + B 테이블 갱신을 위한 Insert + C 테이블 갱신을 위한 Insert 를 필요로 할 것입니다. 이를 Query 문으로 작성한다면 아래와 같을 것이고 이 Query 문들은 전부 실행이 되어 반영이 되거나 혹은 전부 반영이 되지 않아야 합니다. 만약에, B 테이블은 제대로 반영이 되었는데, C 테이블은 primary key 가 중복되어 duplicate entry 상황으로 에러가 발생되었다고 해서 C 테이블에만 반영이 안되는 상황이 일어나면 안된다는 것입니다. 다시 말해서, Database System 에서 Transaction의 특징 중 전체가 실행되거나 실행되지 않아야 한다는 원자성(Atomic) 보장해주고 있기하기 때문에 이러한 처리가 가능한 것입입니다.

각 query 문을 독립적으로 실행

select data1, data2 from A
insert into B (key) values (data1 조회 값)
insert into C (key) values (data2 조회 값)

각 query 문을 하나의 transaction으로 묶어서 실행 (=transaction의 ACID 를 보장)

> begin
> select data1, data2 from A
// data1, data2 조회값 확인
> insert into B (key) values (data1 조회 값)
> insert into C (key) values (data2 조회 값)
> commit

example 2

카카오페이, 토스, 국민은행 등에서 사용하는 돈을 관리하는 프로그램을 개발한다고 생각해본다면, 그리고 이 프로그램이 사용자의 계좌 정보를 유지하기 위해 만든 테이블을 간단히 구성해본다면 아래처럼 생각해볼 수 있습니다.

account table (계좌 테이블)

id	account (계좌)	balance (금액)
joker	01-001-0001	1000
batman	01-001-0002	2000

위 처럼 계좌 테이블이 구성되어 있을 때, joker가 batman 계좌로 500원을 입금한다면 joker의 계좌에서 -500, batman 계좌에서 +500이 되어야 합니다. 그리고 아래처럼 이 작업은 2개의 Select, 2개의 Update 쿼리의 조합과 쿼리문들 사이에 개발자가 작성해놓은 프로그램의 코드가 일부 작성되어 있을 것입니다. 개발자가 의도한 것은 코딩되어 있는 4개의 쿼리가 하나의 Transaction이 되어 DB에서 모두 완벽히 수행되는 것입니다.

만약, Transaction 내의 SQL문 실행 중에 다른 Transaction 의 SQL 문이 동일한 Table의 Record를 접근하려 한다면, 이를 막고 먼저 실행되고 있는 Transaction 의 처리가 완료된 이후 다음 Transaction이 처리되어야 합니다.

예를 들어, joker가 의도적으로 PC 은행앱과 스마트폰 은행앱으로 동시에 500원을 batman 으로 보내는 상황을 만든다고 할지라도, PC 은행앱에서 요청한 Transaction과 스마트폰 은행앱에서 요청한 Transaction은 각각 독립적으로 실행되어야 한다는 것입니다. 두 Transaction 내의 SQL 문들이 섞여서 처리된다면 어떤 문제가 발생할지 모르기 때문입니다. 독립적으로 실행되지 않고 섞일 수 있다면 joker의 돈은 500원만 줄었는데 batman의 돈은 1000원이 늘어나는 상황이나 joker의 돈은 1000원이 줄었는데 batman의 돈은 500원만 늘어나는 상황들이 발생할 수도 있구요. 다시 말해서, Database System 에서 Transaction의 특징 중 각 Transaction은 독립적인 환경에서 실행되어야 한다는 독립성(Isolation)을 보장해주고 있기하기 때문에 이러한 처리가 가능한 것입입니다.

각 query 문을 독립적으로 실행

> select balance from account where id = joker
// joker의 balance 조회값 확인
> select balance from account where id = batman
// batman의 balance 조회값 확인
> update account set balance = (joker의 balance 조회값 - 500) where id = joker
> update account set balance = (batman의 balance 조회값 + 500) where id = batman

각 query 문을 하나의 transaction으로 묶어서 실행 (=transaction의 ACID 를 보장)

> begin
> select balance from account where id = joker
// joker의 balance 조회값 확인
> select balance from account where id = batman
// batman의 balance 조회값 확인
> update account set balance = (joker의 balance 조회값 - 500) where id = joker
> update account set balance = (batman의 balance 조회값 + 500) where id = batman
> commit

Redis 에서의 Transaction

Redis 에서 Transaction 을 말하면 보통 Multi 와 Exec 명령의 조합으로 이루어진 Operation을 의미하며, 하나의 Single Isolation Operation 처리가 가능하도록 제공하는 것이 목적입니다.

Transaction은 (Lua script를 제외하고) 일반적으로 두가지 형태로 사용하는데, Multi + Exec 조합과 Watch + Multi + Exec 조합의 형태입니다. 각 조합에 대한 방법을 설명을 하기 이전에, 우선 Transaction 관련 명령들의 역할을 소개하면 아래와 같습니다.

Multi 명령 : Transaction 시작을 나타내는 명령
Exec 명령 : Transaction 작성을 마치고 내용들을 실행하는 명령
Discard 명령 : Transaction 을 취소시키는 명령
Watch 명령 : Transaction 이 마무리 되는 명령(Exec, Discard)이 실행되기 이전에 모니터링 중이던 key 의 변경사항이 있다면 반영하지 않도록 하는 사전에 등록해두는 명령 (=마치 Exec 명령 앞에 IF 조건문을 사용하는 형태)
Unwatch 명령 : Transaction 이 마무리 되는 명령(Exec, Discard)이 실행되기 이전에 모니터링 중이던 key 를 모니터링하던 Watch의 처리를 중단하는 명령 (=Exec, Discard 명령은 Unwatch 명령을 포함함)

Multi + Exec or Discard

Redis Transaction (Multi + Exec)

Multi 명령 이후, 각 명령들은 Atomic 하게 진행되므로 Transaction이 진행되는 동안 다른 명령이 끼어들 수 없습니다. Multi 명령 이후, Exec에 의해 한번에 실행될 때 만약 Multi ~ Exec 명령 이내의 어느 명령어가 실패하는 경우가 발생하더라도 나머지 명령은 실행될 수 있습니다. (이 말은 Database의 Transaction 처럼 Transaction내 명령들을 모두 반영하거나 모두 반영하지 않거나를 보장하지 않는다는 말입니다) Multi + Exec 명령으로 만들어진 Transaction은 일부 실패하더라도 롤백(Rollback)이 되지 않습니다. 이 점이 DB의 Transaction과 다른 점입니다. Redis는 태생자체가 롤백을 지원하지 않지만 만약, Watch 를 사용한다면 변경사항을 반영하기 이전에 처리 되는 중간에 참조하는 값에 대한 변화가 있었는지 체크하고 반영을 하지 않도록 처리하는 로직을 추가할 수는 있습니다. Watch에 대한 설명이 조금 어려운 것 같지만, Watch에 대해서는 아래에서 다시 설명합니다.

처리 순서

Multi 명령 실행 이후의 다음 명령들은 Queue에 넣는다.
(한번에 실행될) 명령들(ex, Get, Lpush, Set)을 Queue에 넣는다.
실행할 경우,
1. Exec 명령 실행으로, Queue의 모든 명령들이 실행되고 Trasnaction을 종료한다.
실행하지 않을 경우,
1. Discard 명령 실행으로 Queue는 모두 명령들을 비우고 Transaction을 종료한다.

처리 예시

MULTI
val1 = GET key1 // 코드 구현부 내용
val1 = val1 + 9 // 코드 구현부 내용
SET key1 $val1  // Multi/Exec 내에 있는 key들은 외부에서 변경이 불가능하다. (외부에서 key1 변경 불가능)
EXEC

Watch + Multi + Exec

Redis Transaction Optimistic Locking (Watch + Multi + Exec)

Transaction (Multi + Exec) 처리에서 Watch는 (CAS와 유사한 방법으로) Optimistic Lock 기능이 추가됩니다. Transaction 처리에서 Watch는 (Redis에서 처리하려는 Transaction에 포함된 키의 수정을 시도함으로써) Race Condition 상황을 발생시키는 다른 Client들의 요청들은 모두 실패로 만들어버립니다.

Muti + Exec 조합에서 Watch 가 추가되면, 위 그림에서 보면 Multi + Exec 명령 이전에 Watch 명령이 추가되어 있는데, Watch A 명령은 Unwatch 명령을 만날 때까지 A 키 값의 변경사항이 있는지를 모니터링하다가, Exec 이전에 변경사항이 있다면 Transaction 실행을 하지 말고(=중단시키고) Unwatch 명령을 실행하라는 의미를 가지고 있습니다. 위 그림에서 Watch 로 인해 Transaction 처리가 어떻게 달라질 수 있는지 3가지 case를 살펴보겠습니다.

case1 은 Client X의 Transaction이 실행되기 전에 "Transaction 내에 포함된 A키 값을 변경"시키는 상황입니다. 이 경우, 먼저 실행된 Incr A 명령이 반영되고 그 뒤에 Transaction 내용은 모두 무효화됩니다.

// Client X 에서 실행한 명령

> watch a
OK
> incr a
"1"
> multi 
OK
> incr a 
QUEUED
> exec
(nil) 	// Client X의 "incr a"가 실행이 되지 않았기 때문에 (nil)이 출력됨
> get a
"1"

case2 는 Client X의 Transaction이 시작되기 전에 Client Y가 "Client X의 Transaction 내에 포함된 A키 값을 변경"시키는 상황입니다. 이 경우, 먼저 실행된 Client Y의 Incr A 명령이 반영되고 그 뒤에 Client X의 Transaction 내용은 모두 무효화됩니다.

// Client X 에서 실행한 명령

> watch a
OK
> multi // 이 명령을 실행하기 이전에 Client Y 에서 "incr a" 를 실행
OK
> incr a 
QUEUED
> exec
(nil) 	// Client X의 "incr a"가 실행이 되지 않았기 때문에 (nil)이 출력됨
> get a
"1"

case3 은 Client X의 Transaction이 완료되기 전에 Client Y가 "Client X의 Transaction 내에 포함된 A키 값을 변경"시키는 상황입니다. 이 경우, 먼저 실행처리가 완료된 Client Y의 Incr A 명령이 반영되고 실행처리가 완료되지 않은 Client X의 Transaction 내용은 모두 무효화됩니다.

// Client X 에서 실행한 명령

> watch a
OK
> multi 
OK
> incr a // 이 명령을 실행하기 이전에 Client Y 에서 "incr a" 를 실행
QUEUED
> exec
(nil) 	// Client X의 "incr a"가 실행이 되지 않았기 때문에 (nil)이 출력됨
> get a
"1"

처리 순서

Watch 명령이후 특정 키 모니터링을 시작하고, Exec(Unwatch 포함) or Discard 명령(Unwatch 포함) or Unwatch 명령 이전까지 변경사항을 확인한다.
1. Multi 명령 실행 이후의 다음 명령들은 Queue에 넣는다.
2. (한번에 실행될) 명령들(ex, Get, Lpush, Set)을 Queue에 넣는다.
3. Exec 명령 실행으로, Queue의 모든 명령들이
  1. Watch 명령이후 모니터링하던 키 변경사항이 있었다면, 모든 변경사항이 반영되지 않는다.
  2. Watch 명령이후 모니터링하던 키 변경사항이 없었다면, 모든 변경사항이 반영된다.

처리 예시

WATCH key1
val1 = GET key1 // 코드 구현부 내용
val1 = val1 + 9 // Watch~Exec 내의 명령들이 Isolation Operation 처리가 되진 않지만, 모니터링을 하고 있으므로 변경을 감지한다.
MULTI
SET key1 $val1
EXEC

Redis 에서의 Transaction Q&A

Q. Check-And-Set or Compare-And-Swap (CAS) ?

Atomic 명령이 가능하게 하는 알고리즘을 의미합니다. 멀티 스레드, 멀티 코드 등의 병렬 구조를 위한 알고리즘으로, 요약하면, 여러개의 스레드 중 하나의 스레드에 저장된 값과 메인 스레드에 저장된 값을 비교하여 일치한다면 메인 스레드의 값을 새로운 값으로 세팅(교체)하고, 틀리다면 실패 후 다시 시도함으로써 여러개의 스레드이더라도 모두 하나의 값을 참조할 수 있도록 제공하는 방법입니다.

Q. Race Condition ?

둘 이상의 프로세스, 스레드가 하나의 데이터에 접근하려는 경우를 말하며, 이 경우 먼저 집입한 스레드가 해당 데이터 접근에 Lock을 걸어버리면서 해결합니다.

Q. Optimistic Lock ?

Begin, Modify, Validate, Commit/Rollback 단계를 거쳐서 여러 Transaction 들이 각각 독립적으로 실행이 한번에 되는 것을 말합니다.

Q. Redis 공식 홈페이지에서 설명하는 Transaction ?

Redis 사이트에서는 Redis에서 말하는 Transaction이 무엇인지를 정의하고 있는데, 몇가지 내용을 발췌하면 아래와 같습니다.

"All the commands in a transaction are serialized and executed sequentially. This guarantees that the commands are executed as a single isolated operation."

위 문장은 Transaction 내의 모든 명령은 순서대로 실행되며, 고립된 상태로 처리되어 중간에 다른 명령이 끼어들 수 없음을 의미합니다.

"Either all of the commands or none are processed, so a Redis transaction is also atomic."

위 문장은 모든 명령이 실행되는 것도, 모든 명령이 실행되지 않는 것도 가능하기 때문에, Redis Transaction을 atomic 이라고 부르기도 한다는 것을 의미합니다. 아래가 모든 명령이 실행되지 않을 경우에 대한 예시코드입니다.

// 아래 명령을 실행할 경우, LRANGE에 대한 문법이 틀려서 실패했지만, LPUSH를 실행하지 않는다.

> MULTI
OK
> LPUSH p 1 2 3 4 5
QUEUED
> LRANGE 0 -1 // 정상은 LRANGE p 0 -1 이므로 에러가 발생한다.
(error) ERR wrong number of arguments for 'lrange' command
> EXEC
(error) EXECABORT Transaction discard because of previous errors.
> get p
(nil)

"It's important to note that even when a command fails, all the other commands in the queue are processed – Redis will not stop the processing of commands."

위 문장은 Transaction 내 명령 하나가 실패하더라도 다른 명령들이 처리되니, 이 점을 잘 염두해두고 사용해야 한다는 것을 의미합니다. 아래가 예시코드입니다.

// 아래 명령을 실행할 경우, 2개는 정상처리되고 2개는 에러가 발생한다.

> SET a abc
OK
> SET b 1
OK
> MULTI
OK
> INCR a
QUEUED
> LPOP a
QUEUED
> INCR b
QUEUED
> LPOP c
QUEUED
> EXEC
1) (error) ERR value is not an integer or out of range // a는 integer 타입이 아니라서 증가시킬 수가 없다.
2) (error) WRONGTYPE Oeration against a key holding the wrong kind of value // a는 List 구조가 아니니 lpop 명령을 사용할수 없다.
3) "2"
4) (nil)

참고

(Redis) Transaction 설명 링크, 번역링크

(Redis) Command 설명 MULTI, EXEC, DISCARD, WATCH, UNWATCH

(Redis) Redis에서 Transaction Rollback이 필요없는 이유 설명

(Blog) CAS 알고리즘 링크

(Blog) Redis Transaction - MULTI/EXEC + WATCH (Optimistic Lock) 설명 링크

(Blog) Redis Transaction - WATCH/UNWATCH 설명 링크

(Blog) Redis Transaction - UNWATCH 사용 예 코드 링크

(Blog) Redis Transaction - MULTI/EXEC, DISCARD - java 예제 코드 링크

(Stackoverflow) Redis and Data Integrity 링크

(IBM) ACID properties of transactions 링크

(PPT) Redis Transaction - Optimistic locking 링크

AWS CloudFront - SignedURL 관련 CORS 에러

Joker2 — Fri, 15 Jan 2021 01:12:38 +0900

AWS CloudFront - SignedURL 관련 CORS 에러

에러 (error)

Access to XMLHttpRequest at 'URL A' from origin 'URL B' hash been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

[Browser Console Log]

[참고]

XMLHttpRequest ? Web Browser가 Web Server로 페이지 전환 없이 데이터를 요청하기 위한 방법을 제공하는 Web API이다.

Access-Control-Allow-Origin ? Web Server의 Http Response Header에 포함된 필드 중 하나로, 접근 허용할 Origin들이 포함된다.

CORS ? Cross-Origin Resource Sharing의 약자로, 서버에서 자신의 Resource를 다른 Origin들과 공유할지 여부를 설정할 때 사용된다.

환경 (environment)

OS : macOS

Browser : Chrome

Server : Go

Client : ReactJS

상황 (Situation)

개발 중인 Server에서 CloudFront Signed URL을 생성한 후, 개발 중인 Client에서 해당 URL을 받아서 접근하려고 했다. 이때, Signed URL 에 포함되는 정책 내용으로는 특정 시간 동안만 제한하는 기능을 사용하도록 하였다. 아래는 실제로 사용된 코드의 일부분이고, 코드를 따라 최종으로 생성된 Signed URL은 Client가 Signed URL이 만들어진 생성시점부터 1시간 동안 접근이 가능하게 된다. 하지만, Client에서는 Server로부터 받은 해당 Signed URL을 통해 접근을 시도했지만, 수십번을 다시 시도해도 위처럼 CORS 에러가 발생하였다.

// go language

import (
	cf "github.com/aws/aws-sdk-go/service/cloudfront/sign"
)

now := time.Now()
policy := &cf.Policy{
   Statements: []cf.Statement{
      {
         Resource: rawURL,
         Condition: cf.Condition{
            DateGreaterThan: cf.NewAWSEpochTime(now),
            DateLessThan: cf.NewAWSEpochTime(now.Add(1 * time.Hour)),
         },
      },
   },
}

signer := cf.NewURLSigner("Key ID", "Private Key")
signedURL, err := signer.SignWithPolicy(rawURL, policy)

원인 (Cause)

Server의 시간과 CloudFront의 시간의 기준이 동일하지 않았다는 것이 주요 원인이다. 만약, 개발 중인 Server와 CloudFront가 동일한 시스템 내에서 실행하고 있다면 시간이 완전히 일치할 것이다. 하지만, 지금 개발 환경을 보면 Server는 로컬에서 개발되고 있고, CloudFront는 AWS 위에서 운영되고 있다. 다시 말해서 서로 다른 시스템 위에서 실행되고 있기 때문에, 두 시스템 간의 시간도 조금은 차이가 있을 수 있는 것이다. 실제로 테스트한 결과 약 1초 이내의 차이가 나는 것을 확인할 수 있었고, 이 때문에 에러가 발생하고 있는 것이었다.

정리하면, 현재 Server보다 CloudFront가 조금 더 빠른 시간으로 세팅되어 실행되는 상황이었고, 이 상황에서는 Server 가 생성한 Signed URL의 접근 가능한 시작시간(=DateGreaterThan)이 CloudFront에서는 아직 지나가지 않은 시간일 수 있는 상황이 발생할 수 있다는 것이다. 예를 들어, Server 시스템의 시간이 CloudFront 시스템의 시간보다 3초가 빠르다면 아래와 같은 상황이 발생할 수 있다는 것이다.

Server 시스템의 현재 시간	CloudFront 시스템의 현재 시간
2021-01-14 14:00:15 <-- Server는 이때부터 ~	2021-01-04 14:00:12 <-- 이때 접근하면 에러 발생
2021-01-14 14:00:16	2021-01-04 14:00:13 <-- 이때.. (이때 접근해서 에러 발생)
2021-01-14 14:00:17	2021-01-04 14:00:14 <-- 이때 접근하면 에러 발생
...	2021-01-14 14:00:15 <-- Client는 이때부터 ~
2021-01-14 15:00:15 <-- 이때까지 유효한 Signed URL 을 생성	2021-01-14 14:00:16
2021-01-14 15:00:16	2021-01-14 14:00:17
2021-01-14 15:00:17	...
2021-01-14 15:00:18	2021-01-14 15:00:15 <-- 이때까지 CloudFront로 접근이 가능

위 표에서 나타난 것처럼 Server의 시간이 14:00:15 일때, CloudFront의 시간은 14:00:12 일 수 있다는 것이다. 그리고 해당 Signed URL을 사용해서 재빠르게 CloudFront로 접근을 시도한다면 유효시간이 아니기 때문에, 아래 그림처럼 실패나는 상황이 만들어지게 되는 것이다.

[ error 발생해서 실패한 응답을 받는 상황 ]

추가로, 현재 에러는 정확히 따지자면 CORS 관련 에러가 아닌, CloudFront에서 Policy 내용을 검증하다가 발생한 에러이다. 현재, CloudFront 에서는 HTTP Status Code 403 과 Response 로 Access Denied 라는 XML 데이터를 반환하고 있었지만, Chrome Browser Console 에서는 이러한 메시지가 나오지 않고 위 처럼 CORS 에러를 자동으로 내뱉고 있을 뿐이다. 그래서 실제로, 현재 문제를 해결하기 위해 CORS 부분만을 의심했었고, 이 때문에 CloudFront 설정, S3 설정, Client 요청코드에서 의심되는 부분들만을 검토하면서 원인을 파악하는데 시간을 많이 버렸었다. 참고로, CloudFront 에서 실패가 발생해서 403 코드와 Acces Denied 가 반환되는 내용은 Chrome Browser로는 확인이 되지 않기 때문에, 로컬에 별도의 proxy program(ex, mitmproxy)를 세팅한 후, 이를 통해 교환되는 메시지를 보고 확인을 했다.

해결 (Solution)

현재 상황을 해결하기 위한 방법이 아래처럼 몇가지 있을 수 있다.

시스템 시간을 직접 조정
- Server 시스템 시간을 CloudFront 시스템 시간보다 앞땅기는 것
- CloudFront 시스템 시간을 Server 시스템 시간보다 뒤로 미루는 것
Signed URL 의 정책시간을 조정
- DateGreaterThan 시간을 두 시스템 간의 차이만큼 앞땅기는 것
- DateGreaterThan 시간을 사용하지 않는 것

사실, 시스템이 서로 독립적이라면 시간의 차이는 (밀리초, 마이크로초 단위로) 조금이라도 분명 존재할 수 밖에 없다. 그리고 현재 개발 중인 프로그램은 Server에서 Signed URL로 접근하는 시점이 Signed URL을 생성한 직후부터 1시간으로 제한할 것이기 때문에, 이전의 시간까지 CloudFront에서 반드시 검증할 필요는 없다. 따라서, 위에 소개한 방법들 중에 4번째 방법처럼 접근 가능을 위한 시작 시간을 사용하지 않도록 DateGreaterThan 항목을 제거함으로서 해결하였다.

[ error 없이, 성공적인 응답을 받는 상황 ]

참고 (Reference)

AWS CloudFront 서명된 URL 사용하기 Link

macOS 기본 명령어 (File, Folder 관련)

Joker2 — Fri, 20 Nov 2020 01:03:38 +0900

macOS 기본 명령어

(File, Folder 관련)

터미널 사용이 익숙하지 않다면 명령어들이 너무 많아 헷갈리곤 합니다. 시간이 지남에 따라 자연스럽게 알게 되겠지만, 터미널 환경이 어색하다면 정말 많이 사용하는 기본적인 명령어 몇가지는 메모장에 적어두고 사용하는 것이 마음에 편할 것입니다.

[ 터미널 기본 명령어 구분 ]

터미널 명령어는 위 그림처럼 크게 macOS에서 제공하는 기본 명령어들과 그외 나머지 명령어들로 두가지 영역으로 구분할 수 있습니다. 두 영역의 명령어들 중에 이 글에서는 macOS 에서 자주 사용하는 기본 명령어들 몇가지들에 대해서만 소개합니다. 참고로 만약, nodejs 개발자라면 node를 설치한 후 npm 혹은 node 명령어를 사용할 것이고, android 개발자라면 android-sdk를 설치한 후 adb 혹은 logcat 등의 명령어들을 사용하게 될 것인데, 이때 외부 프로그램, 라이브러리, 툴 등을 설치해야만 사용 가능한 명령어들은 macOS 기본 명령어가 아닌 영역의 명령어들로 구분됩니다.

macOS 기본 명령어 : mac PC를 구입한 이후 아무것도 설치하지 않아도 사용 가능한 명령어를 의미 (ex, pwd, cd, ls, cp, touch 등)
(macOS 기본 명령어가 아닌) 외부 프로그램 명렁어 : 외부 프로그램을 직접 설치한 후 사용 가능한 명령어를 의미 (ex, brew, apt-get, npm, adb, logcat 등)

[ 터미널 기본 명령어 영역별 구분 ]

그리고, macOS 기본명령어는 위 그림처럼 크게 영역을 몇가지로 구분해두고 사용하는 것이 이해하기 편할 것입니다. 기본 명령어의 대부분이 파일과 폴더를 제어하는 명령어들입니다. 따라서, 정말 많이 사용하는 명령어들은 파일과 폴더 관련된 명령어들이기 때문에, 이 명령어들이 익숙해지면, 그 이후에 사용자가 필요한 기능을 하는 명령어들을 하나씩 찾아서 사용해나가는 것이 좋습니다. 참고로, 이 글에서는 네트워크 명령어(ex, ifconfig)처럼 컴퓨터에 대해 깊이 있는 개념들이 필요한 상태에서 사용해야 명령어들은 설명에서 제외했습니다.

파일 : 파일 추가, 삭제, 복사, 내용보기, 내용변경하기 등
폴더 (디렉토리) : 폴더 추가, 삭제, 복사, 이동, 목록보기 등

자주 사용되는 파일과 폴더 관련 명령어들에 대해 설명하겠습니다. 아래 명령어들을 사용해서 직접 PC에 파일을 추가하고 삭제하고 새로운 폴더를 만들고 이동시키는 등의 작업들을 하면서 30분 정도 하나씩 테스트하다보면 금방 외워질 것입니다. 아래 명령어들이 몇가지 안되지만, 아래 명령어들은 모든 개발자들이 터미널을 사용할 때 실행하는 50%이상의 명령어들이라고 할 수 있을 정도로 자주 사용되는 명령어들입니다.

pwd (print working directory) : 현재위치보기

pwd 명령어는 터미널에서 현재 위치가 어디인지를 나타냅니다. 평소에 윈도우나 macOS에서도 마우스를 주로 사용했다면 충분히 헷갈릴 수 있는 부분입니다. 터미널에서는 PC 화면에서 보이는 모든 파일과 폴더들에 접근할 수 있습니다. PC는 처음에 마우스로 조작할 수 있는 형태가 아니었습니다. 명령어들을 치면서 조작해야하는 형태였고, 사람들이 사용하기가 어렵기 때문에 마우스라는 것을 만들었고 마우스로 클릭이 가능한 UI들이 개발된 것입니다. 따라서, "터미널"은 명령어로 컴퓨터를 조작하는 형태이고, "PC 화면"은 마우스로 화면을 조작하는 형태라고 말할 수 있습니다.

$ pwd
/Users/joker/Desktop/lec

ls (list) : 목록보기

ls는 현재 위치에 존재하는 파일의 목록을 보여주는 명령어입니다. 현재 위치를 pwd 명령어로 확인했다면 그 위치가 현재 위치이고, 바로 그 위치에서 ls 명령을 실행하면 그 위치에 존재하는 파일 목록들이 모두 출력됩니다. 대부분의 명령어들은 명령어 옆에 옵션(option)을 사용해서 실행하려는 명령어를 조금 다르게 사용할 수 있습니다. 옵션(option)은 말그대로 명령어를 실행할 때 사용해도 되고 사용하지 않아도 됩니다. 대부분의 명령어 옵션들은 "-"가 붙습니다. ls 명령어의 경우 자주 사용하는 옵션으로는 -l 과 -al 이 있습니다. 이 둘의 차이는 파일을 출력할 때, 숨김파일까지 보여줄 것인지에 대한 여부 차이뿐입니다. "ls -l"은 숨김파일을 제외한 목록을 보여주고, "ls -al"은 숨김파일을 포함한 목록을 보여줍니다.

참고로, 출력된 파일들 중에 파일과 디렉토리를 구분하는 방법이 있습니다. ls -l 혹은 ls -al 명령을 실행했을 때, 가장 앞에 "d"라는 문자가 붙어 있는 경우 폴더(Directory)를 의미합니다. 만약에, "-"가 붙어 있다면 파일임을 의미합니다.

$ ls
abc aaa bbb ccc test.txt


$ ls -l
drwxr-xr-x@ 3 joker  staff     96  5 18  2020 abc
drwxr-xr-x@ 3 joker  staff     96  5 18  2020 aaa
drwxr-xr-x@ 3 joker  staff     96  5 18  2020 bbb
drwxr-xr-x@ 3 joker  staff     96  5 18  2020 ccc
-rw-r--r--  1 joker  staff    215 11  9 17:17 test.txt

$ ls -al
drwxr-xr-x@ 11 joker  staff    352 11  9 17:17 . <-- 현재 디렉토리
drwx------@ 24 joker  staff    768 11 18 23:06 .. <-- 상위 디렉토리
drwxr-xr-x@ 3 joker  staff     96  5 18  2020 abc <-- 현재 디렉토리의 abc 디렉토리
drwxr-xr-x@ 3 joker  staff     96  5 18  2020 aaa <-- 현재 디렉토리의 aaa 디렉토리
drwxr-xr-x@ 3 joker  staff     96  5 18  2020 bbb <-- 현재 디렉토리의 bbb 디렉토리
drwxr-xr-x@ 3 joker  staff     96  5 18  2020 ccc <-- 현재 디렉토리의 ccc 디렉토리
-rw-r--r--  1 joker  staff    215 11  9 17:17 test.txt <-- 현재 디렉토리의 test.txt 파일

cd (change directory) : 위치변경하기

cd는 터미널의 현재 위치에서 다른 위치로 이동하는 명령어입니다. cd 뒤에 현재 위치에 있는 폴더들 중에 하나를 입력하면 그 폴더 안으로 이동됩니다. 참고로, 터미널의 어느 위치에서든 자주 사용되는 위치가 있는데, 바로 상위 디렉토리로 이동하는 경우와 홈(Home)으로 이동하는 경우입니다.

상위 디렉토리로 갈 때는 "cd .."(점점) 를 입력하면 되고, 홈으로 이동할 때는 "cd ~"(물결) 을 입력하면 됩니다. 개발자가 아니라면, 홈(Home)이라는 키워드가 익숙하지 않을 수 있습니다. 홈은 현재 PC의 사용자 계정의 위치를 의미합니다. 현재 PC를 나말고 누군가와 같이 사용하고 있다면 계정이 여러개 존재할 수 있습니다. 예를 들어, 제 PC는 joker라는 계정과 batman이라는 계정을 만들어두었습니다. joker라는 계정으로 접속한 후 터미널에 cd ~ 를 입력하면 "/Users/joker" 의 위치로 이동하게 되고, batman이라는 계정으로 접속한 후 터미널에 cd ~ 를 입력하면 "/Users/batman" 의 위치로 이동하게 됩니다. 그리고 그 위치부터가 내가 맘대로 사용할 수 있는 공간입니다. 참고로, 바탕화면은 터미널에서 "Desktop"이라는 디렉토리 이름으로 접근이 가능하고, 이 Desktop 디렉토리는 홈(Home) 위치 안에 존재하므로, 만약 터미널 안에서 다른 어떤 위치에서 작업 중이었는데 바탕화면으로 이동시키고 싶다면 "cd ~/Desktop" 명령을 실행하면 됩니다.

$ cd aaa
$ pwd
/Users/joker/Desktop/lec/aaa

$ cd ..
$ pwd
/Users/joker/Desktop/lec

$ cd ~
$ pwd
/Users/joker/Desktop

touch : 파일 생성하기

touch는 파일을 생성하는 명령어입니다. touch를 사용해서 파일을 생성할 때는 확장자를 입력하는 것이 필수가 아니기 때문에 입력하지 않아도 파일이 생성됩니다. 만약, 생성하려는 파일 이름이 "test.txt" 혹은 "test.html" 처럼 확장자가 포함된 이름이었는데 실수로 이름을 "test"로 만들었다면, 다른 명령어(ex, mv)를 통해 이름을 변경할 수 있습니다.

$ touch test.txt
$ ls
abc.txt aaa bbb ccc test.txt

cp (copy) : 복사하기

cp는 파일을 복사하는 명령어입니다. cp를 사용해서 파일을 복사할 때는 복사되어 새로 생성될 파일의 이름을 직접 작성해야합니다.

$ cp test.txt test2.txt
$ ls
abc.txt aaa bbb ccc test.txt test2.txt

mkdir (make directory) : 폴더 생성하기

mkdir은 폴더를 생성하는 명령입니다. 파일을 생성할 때는 touch 명령을 사용하고 폴더를 생성할 때는 mkdir 명령을 사용하면됩니다.

$ mkdir ddd
$ ls
abc.txt aaa bbb ccc ddd test.txt test2.txt

mv (move) : 이동하기

mv는 파일을 이동시키는 명령어업니다. 이 명령도 cp 명령과 마찬가지로 복사되어 새로 생성될 파일의 이름을 직접 작성해야 합니다. 파일을 이동시키는 기능외에 이름을 변경시키는 기능도 겸해서 사용할 수 있어 유용하게 사용할 수 있습니다. 주의할 점은 이동시킬 때 정의한 이름과 동일한 이름의 파일이 존재한다면 기존 파일을 덮어씌워서 기존 파일이 없어져버리니 조심해서 사용해야 합니다.

$ mv test.txt test2.txt
$ ls
abc.txt aaa bbb ccc ddd test2.txt <-- test.txt 파일은 test2.txt 파일로 덮어씌우기 되었습니다.

$ mv test2.txt ddd/d.txt
$ ls
abc.txt aaa bbb ccc ddd <-- test2.txt 파일은 ddd 폴더로 이동되었고, 이름은 d.txt 파일로 변경되었습니다.

rm : 파일/폴더 삭제하기

rm은 파일 혹은 폴더를 삭제하는 명령어입니다. rm 명령어만 사용한다면 파일만 삭제할 수 있습니다. 만약, 폴더를 삭제하고 싶다면 "rm -rf" 명령어를 실행해서 옵션을 추가로 작성해주어야 합니다. "-rf" 라는 옵션을 추가해주어야 하고, -r 과 -f 옵션 두가지를 적용시키겠다는 의미로, -r 은 recursive 라는 의미로 해당 폴더 안에 있는 내용들을 모두 재귀적으로 탐색해서 싹다 지워버리겠다는 의미이고, -f 는 force 라는 의미로 읽기 권한이 없는 파일이 없는 등의 이유로 삭제가 애매한 파일들이 있더라도 싹다 지워버리겠다는 의미입니다. 주의할 점은 "rm -rf"로 삭제를 할 때 바로 해당 파일이나 폴더가 삭제되어 버리니 조심해서 사용해야 합니다. 예를 들어, 명령어 한번 실행으로 PC의 절반이 삭제되어버릴 수도 있으니 주의해야 합니다.

$ rm abc.txt
$ ls
aaa bbb ccc ddd <-- abc.txt 파일이 삭제되었습니다.

$ rm ddd <-- 빈 폴더가 아니기 때문에 삭제되지 않습니다.
$ rm -rf ddd <-- 폴더 삭제에 대한 옵션을 추가해서 삭제했습니다.
$ ls
aaa bbb ccc

nodejs - Web Server 만들기

Joker2 — Sun, 15 Nov 2020 21:29:33 +0900

nodejs로 Web Server 만들기

(Web Application 서버, Web API 서버 만들기)

[ Web Client - Web Server 구조 ]

nodejs 개발 툴 설치하기
1. nodejs & npm 다운
2. vsCode 다운
nodejs 개발 프로젝트 생성하기
1. nodejs 프로젝트 폴더 생성
2. npm 프로젝트 파일 생성
nodejs 프로젝트 개발하기
1. vsCode 열기
2. vsCode로 Terminal 열기
3. 외부라이브러리 (express) 설치
4. 외부라이브러리 (axios) 설치
5. Web Appilication 서버 개발하기
6. Web API 서버 개발하기
nodejs 프로젝트 실행하기
1. nodejs 프로젝트 실행
2. 브라우저로 url 접속
3. nodejs 프로젝트 종료

개발 환경

OS : macOS

IDE : Visual Studio Code

Server Platform : nodeJS

Dependency Library : express, axios

1. nodejs 개발 툴 설치하기

1-1. nodejs & npm 다운

Terminal에서 아래 명령어를 실행해서 nodejs와 npm을 다운로드합니다.

// nodeJS & npm 설치하기
$ brew install node

설치가 완료되었다면 아래 명령어로 어떤 버전의 nodejs와 npm이 설치되었는지 확인할 수 있습니다.

// 설치된 nodeJS 버전 확인하기
$ node -v

// 설치된 npm 버전 확인하기
$ npm -v

모든 nodejs 프로젝트들은 기본적인 뼈대 구조가 동일합니다. 이 말은 nodejs 프로젝트 코드를 다운 받으면 안에 구성되어 있는 폴더와 파일들의 구성이 동일하다는 것인데, 이 때문에 숙련된 nodejs 개발자들에게는 서로의 코드가 어떻게 구성되어 있는지를 빠르게 파악할 수 있게 해줍니다. 그래서 다른 사람이 개발한 nodejs 프로젝트를 다운받는다면, 개발자가 작성한 소스코드들은 정해진 곳에 위치해 있고, 개발자가 외부에서 개발된 다른 라이브러리들을 사용하고 있다면 해당 라이브러리 소스코드들도 정해진 곳에 위치하게 됩니다. 이처럼 nodejs 개발의 뼈대 구조를 동일하게 해주는 역할을 해주는 프로그램이 바로 npm (Node Package Manager)라는 프로그램이고, 추가적으로 이 npm은 개발자가 작성한 js 코드들을 빌드시키고, 테스트하고, 외부라이브러리를 가져와서 관리하기 등의 nodejs 프로젝트를 개발하기 위해 개발자가 필요한 대부분의 기능들을 지원하고 있기 때문에, nodejs 개발을 위해서는 반드시 필요한 프로그램입니다.

1-2. vsCode 다운

Browser에서 아래 URL 주소를 입력한 후 macOS용의 실행파일을 다운받아 설치합니다.

https://code.visualstudio.com/download

소스코드를 개발할 때, 코드의 변수 색깔들도 변하지 않는 메모장으로 개발하기는 힘듭니다. 따라서 소스코드 편집기가 필요한데, nodejs 프로젝으로 개발을할 때 많은 개발자들이 사용하는 소스코드 편집기가 바로 Visual Studio Code (=vsCode)입니다. 개발할 때 특별히 알고 있는 소스코드 편집기가 없다면 이 편집기를 사용하는 것이 좋습니다.

사실, nodejs 프로젝트를 개발할 때, 이 글에서 소개하는 방법처럼 반드시 vsCode 다운 받아두고 사용할 필요는 없습니다. 무료로 개발할 수 있는 방법을 소개했을 뿐이며, 유료 결제를 해서 좀 더 화려한 디자인과 기능들이 담겨져 있는 IntelliJ라는 개발 툴을 사용해서 개발해도 됩니다. 개인적으로, 실무에서는 두가지 편집기를 모두 혼용해서 개발하고 있기 때문에, 굳이 유료 결제를 해서 IntelliJ를 사용하지 않고 이 글에서 소개하는 것처럼 vsCode만으로 시작해도 개발에는 전혀 문제가 없을 것이라고 생각됩니다.

2. nodejs 개발 폴더 생성하기

2-1. nodejs 프로젝트 폴더 생성

Terminal에서 아래 명령어를 실행해서 "lec_nodejs" 폴더를 생성합니다. ("lec_nodejs"라는 폴더이름은 예시일 뿐, 다른 이름으로 만들어도 됩니다.)

// 워크스페이스 폴더 생성
$ mkdir lec_nodejs

// 워크스페이스 폴더로 진입
$ cd lec_nodejs

생성 후, 폴더로 진입이 완료되었다면, 아래 명령어로 현재 위치를 확인할 수 있습니다. (글쓴이의 경우 Home(="~" or $HOME)의 위치에 생성하였습니다.)

// 현재 위치 확인
$ pwd
/Users/joker/lec_nodejs

여기서 생성된 폴더를 앞으로는 프로젝트 폴더라고 부를 것입니다. 이 프로젝트(Project) 폴더에는 이 글에서 개발하려는 nodejs 프로젝트 관련 파일들이 모두 놓여지게 될 것입니다.

2-2. npm 프로젝트 파일 생성

Terminal에서 아래 명령어를 실행해서 npm 프로젝트 파일을 생성합니다.

// npm 프로젝트 파일 생성
$ npm init

package name: lec_nodejs
version: (1.0.0)
description: <-- 생략
entry point: <-- 생략
test command: <-- 생략
git repository: <-- 생략
keywords: <-- 생략
author: <-- 생략
license: (ISC)

위 명령이 정상적으로 완료되었다면, 현재 위치에 "package.json" 파일이 생성되었을 것입니다.

// npm 프로젝트 관련 파일 생성 확인
$ ls
package.json

"package.json" 파일이 생성되면 아래와 같이 기본적으로 몇가지 내용들이 작성되어 있습니다.

// package.json 파일 내용
{
  "name": "lec_nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {}
}

생성된 npm 프로젝트 관련 파일은 "package.json"이라는 하나의 파일입니다. 앞으로 글쓴이가 현재 글에서 개발하려는 프로젝트의 코드를 관리하기 위해 필요한 중요한 정보들이 이 파일에 담길 것입니다. 이 파일의 내용 중 일부는 개발자가 직접 수정해야하는 것이 있고, 일부는 자동으로 수정되는 것이 있습니다. 예를 들면, "name"필드나 "version"필드의 값은 직접 수정하지만, "dependencies"필드의 값은 직접 수정하지 않고 특정 명령어를 통해 수정하게 됩니다. 이 글에서는 각 필드가 무엇을 의미하는지에 대해서만 소개합니다.

package name : 패키지의 이름
version : 패키지의 버전
description : 패키지의 설명
entry point : 패키지 내에서 nodejs 서버를 실행했을 때, 외부 사용자가 접근하기 위한 메인 페이지 파일을 의미합니다. 만약에 다음 사이트가 nodejs로 개발되었고, 이 때 다음 사이트의 메인 페이지 파일이 index.html 파일이고, 이 파일의 내용을 다음 사이트에서 "http://www.daum.net/index.html"로 제공하고 있다면, 이 프로젝트의 "package.json" 파일 내에 entry point 값은 index.html 파일이 되는 것입니다.
test command : 패키지 내에서 nodejs 서버를 실행할 때, 개발자들의 편의를 위해 등록해놓은 매크로 명령어들을 의미합니다. 개발을 하다보면 자주 사용하는 명령어들을 미리 정의해두고 사용하는 경우가 많이 생깁니다. 현재 만들어둔 패키지의 소스 코드를 테스트하는 명령어, 현재 패키지의 소스 코드를 실행할 때 npm의 다른 몇가지 옵션을 추가해서 실행하기 위한 명령어 등등 빈번한 명령어지만 외우기 귀찮은 것들은 이곳에 미리 정의해두면, 쉽게 사용할 수 있습니다.
git repository : 패키지의 소스코드가 업로드 되어 있는 깃 주소를 의미합니다. 내가 개발한 코드를 오픈소스로 공개해서 다른 사람들이 모두 볼 수 있도록 한다면, 이 주소를 통해 원본 코드가 어디에서 관리되고 있는지 확인할 수 있습니다.
keywords : 패키지의 검색 키워드를 의미합니다. 내가 개발한 코드를 오픈소스 공간에 업로드하여 공개할 때, 내 프로젝트를 대표하는 키워드 몇가지를 이 곳에 등록해둔다면, 다른 사람들이 오픈 소스 프로젝트 사이트에서 검색할 때, 이때 작성해놓은 키워드들의 연관성이 높은 프로젝트들이 우선 검색되게 됩니다.
author : 패키지의 제작자
license : 패키지의 라이센스를 의미합니다. 내가 개발한 코드를 오픈소스 공간에 업로드하여 공개할 때, 다른 사람들이 내 프로젝트를 어느정도까지 사용할 수 있을지 범위를 제한할 수 있습니다. 라이센스의 종류에 따라, 내 코드가 완전 무료로 복제 후 수정까지 가능한 코드가 될지, 무료 사용은 가능하지만 수정은 불가능한 코드가 될지, 내 코드를 무료로 사용하지만 상업적으로 사용한다면 돈을 내야하는지, 내 코드를 내 허락없이는 사용할 수 없도록 만들지 등등의 사용 범위를 정할 때 중요한 역할을 하게 됩니다.

3. nodejs 프로젝트 개발하기

3-1. vsCode 열기

vsCode를 실행 한후, 위에서 만든 lec_nodejs 폴더를 열면 됩니다. (vsCode가 어색한 분들을 위해 아래 차례로 설명합니다.)

vsCode를 실행한다.
기본으로 열려져 있는 welcome 창은 x를 클릭해서 닫는다.
왼쪽 상단에 두개의 문석 겹쳐진 아이콘(=Explorer)를 누른다.
Open Folder를 누른다.
lec_nodejs 폴더를 선택한다.
열기를 선택한다. 아래 그림처럼 화면에 2등분으로 나눠지는데, 왼쪽는 열려진 폴더인 lec_nodejs 를 기준으로 폴더와 파일들을 탐색기처럼 트리형태로 나열한 것이고, 오른쪽은 왼쪽에서 파일을 누를 때마다 해당 파일의 내용들이 출력될 것입니다. 앞으로는 이 두 개의 화면을 보면서 개발을 하면 됩니다.
간혹 아래 그림처럼 update now 가 나오는데, vsCode 업데이트를 할 것이냐고 묻는 것이므로, 업데이트를 진행해주면 됩니다.

[ vsCode 열기 그림 참고 ]

3-2. vsCode로 Terminal 열기

vsCode > 상단 메뉴의 [Terminal] > [New Terminal]

위 단계까지는 macOS의 기본 Terminal을 실행했었지만, 앞으로는 vsCode에서 제공하는 Terminal을 통해서 명령어들을 실행시킬 것입니다. vsCode를 열었다면 상단에 [Terminal]이라는 탭이 보일 것입니다. 탭에서 [New Terminal]을 선택하면 vsCode 안에 터미널 창이 하나 추가될 것입니다.

참고로, macOS 에서 실행한 기본 Terminal과 vsCode 에서 실행한 Terminal 에는 차이가 전혀 없습니다. 단지, 별도의 Terminal 창을 띄워두고 개발하면 창 전환하는 번거로움이 생기기 때문에 vsCode에서 제공하는 Terminal을 사용하는 것 뿐입니다.

3-3. 외부라이브러리 (express) 설치

vsCode의 Terminal에서 아래의 npm 명령어를 실행해서 express를 다운로드합니다.

npm install express --save

express 패키지 다운이 정상적으로 완료된 이후에는, "package.json" 파일의 내용이 변경된 것을 확인할 수 있습니다.

{
  "name": "lec_nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

express 라이브러리 패키지는 nodejs 위에서 http 서버 기능을 제공하는 함수들을 묶어놓은 패키지입니다. 이 패키지를 다운 받는 이유는 현재 개발 중인 nodejs 프로그램이 외부에서 내부로 http 통신으로 접근할 수 있도록 서버 기능들을 탑재시키기 위함입니다. 이 기능을 사용해서 이 글의 프로젝트에서는 사용자가 브라우저로 Web Server #1 (http://127.0.0.1:3000/index.html) 페이지를 여는 것이 가능하도록 할 것입니다.

3-4. 외부라이브러리 (axios) 설치

vsCode의 Terminal에서 아래의 npm 명령어를 실행해서 axios를 다운로드합니다.

npm install axios --save

axios 패키지 다운이 정상적으로 완료된 이후에는, "package.json" 파일의 내용이 변경된 것을 확인할 수 있습니다.

{
  "name": "lec_nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.0",
    "express": "^4.17.1"
  }
}

axios 라이브러리 패키지는 nodejs 위에서 http 클라이언트 기능을 제공하는 함수들을 묶어놓은 패키지입니다. 이 패키지를 다운받는 이유는 현재 개발 중인 nodejs 프로그램에 내부에서 외부로 http 통신으로 접근할 수 있는 클라이언트 기능들을 탑재시키기 위함입니다. 이 기능을 사용해서 이 글의 프로젝트에서는 사용자가 브라우저로 Web Server #1 (http://127.0.0.1:3000/lastTransacstion/BTC) 로의 URL 로 요청을 했을 때, 외부 서버인 Web Server #2 (https://api.bitthumb.com/public/ticker/)에서 가져온 응답 데이터를 포함해서 페이지로 출력하도록 할 것입니다.

참고로, Web Server #2로 사용되는 서버는 빗썸(Bitthumb)이라는 가상화폐 거래소에서 제공하는 마지막으로 처리된 트랜잭션 내용의 응답을 반환시켜주는 API 서버를 활용했습니다. 만약, 예시로 작성한 가상화폐 거래서 데이터가 아니라, 코로나 19의 현재 각 나라별 발생 현황 데이터를 제공하는 API 서버나 NewYork Times의 뉴스기사 데이터를 제공하는 API 서버 등이 있다면, 이러한 데이터들 또한 axios 라이브러리에서 제공하는 기능들을 사용해서 쉽게 데이터를 요청하고 응답받아 올 수 있습니다.

3-5. Web Application 서버 개발하기

Web Application Server는 웹 페이지들은 이쁘게 만들어서 사용자에게 출력시켜주는 것이 목적입니다. 따라서, Web Front 와 Web Backend 영역에는 코드를 아래처럼 구분지을 수 있습니다.

Web Front

html : 웹 페이지 구조를 잡는 것이 목적
css : 웹 페이지를 이쁘게 디자인 하는 것이 목적
javascript : 웹 페이지를 자연스럽게 이동시키고, Web Backend와 통신하는 것이 목적

Web Backend

웹 페이지에 필요한 데이터들을 만들어서 Web Front로 응답하는 것이 목적

서버를 개발할 때, Web Front와 Web Backend의 영역이 모두 포함되어 개발할 수 있습니다. 이렇게 되면 하나의 프로젝트를 웹 프론트 개발자와 백엔드 개발자가 모두 참여해서 소스코드를 수정하는 형태가 될 것입니다. 이를 그림으로 그려보면 아래처럼 서버가 Front와 Backend가 영역은 구분되어 있지만 하나의 프로젝트 안에 포함되어 있습니다. 이러한 형태로 개발한다면, 하나의 프로젝트에 코드가 커질수록 관리하기가 힘들어지기 때문에, 조그만 프로젝트나 파일럿 수준 정도에서 많이 사용되는 개발 구조입니다.

[ Web Application Server 한 개 프로젝트로 개발하는 구조 ]

이번 항목에서 작성하는 Web Application Server 코드는 단 두 개의 파일로 구성되어 있습니다. 웹 페이지의 구조를 잡는 index.html 파일은 웹 서버에 있다가, 브라우저에서 http://127.0.0.1:3000/index.html 경로를 통해 웹 서버로 요청하면, 웹 서버는 index.js 파일에 작성해놓은 로직을 통해서 public 폴더에 해당 파일이 있는지 확인하고, 존재한다면 index.html 파일을 사용자의 브라우저로 전달한 후, 브라우저는 index.html 페이지를 출력하게 됩니다.

index.html 파일

//... /Users/joker/lec_nodejs/public/index.html

<html>
	<body>Hello, world!</body>
</html>

index.js 파일

//... /Users/joker/lec_nodejs/index.js

const express = require('express');
const app = express();
const axios = require('axios');

/**
 * 메인 웹 페이지 설정
 * public 폴더를 static 파일들(ex, html, css, jpg)을 위치로 지정한다.
 * 
 * example) 
 * http://127.0.0.1:3000
 * http://127.0.0.1:3000/index.html
 */
app.use(express.static('public'));

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  
  console.log('Server is working : PORT - ',port);
});

3-6. Web API 서버 개발하기

Web API Server는 Web Front의 요청에 따른 응답 데이터를 응답 시켜주는 것이 목적입니다. 따라서, Web Front 는 신경쓰지 않고 Web Backend 영역만 존재합니다.

Web Backend

웹 페이지에 필요한 데이터들을 만들어서 Web Front로 응답하는 것이 목적

서버를 개발할 때, Web Front와 Web Backend의 영역을 완전히 분리해서 개발할 수 있습니다. 이렇게 되면 프로젝트 두개를 만들어서 하나는 웹 프론트 개발자만 사용하고, 다른 하나는 백엔드 개발자만 사용해서 소스코드를 수정하는 형태가 될 것입니다. 이를 그림으로 그려보면 아래처럼 서버가 Front와 Backend가 완전히 구분되어 있습니다. Front 영역에서는 사용자의 시각적인 부분, 행위적인 부분에 집중해서 UI/UX만을 위해 개발을 하면되고, Backend 영역에서는 사용자의 UI/UX는 전혀 관여하지 않고 데이터만을 가공해서 정확히 전달해주기면 한다면 시간이 지남에 따라 프로젝트 코드 양이 커진다고 해도 큰 부담이 없을 것입니다. 따라서 어느정도 수준 이상의 서비스를 제공하는 서버라면 이러한 형태로 개발이 됩니다.

[ Web Application Server을 두개 프로젝트로 개발하는 구조 ]

이번 항목에서 작성하는 Web API Server 코드는 단 하나의 파일로 구성되어 있습니다. 웹 서버에 "/lastTransaction/:currency" 의 주소를 등록해두었다가, 브라우저에서 http://127.0.0.1:3000/lastTransaction/BTC 경로를 통해 웹 서버로 요청하면, 웹 서버는 index.js 파일에 작성해놓은 로직을 통해서 빗썸의 API 서버에 비트코인(BTC)의 마지막 거래내역을 요청하고, 그 응답값을 사용자의 브라우저로 전달한 후, 브라우저는 데이터를 출력하게 됩니다.

index.js 파일

//... /Users/joker/lec_nodejs/index.js

const express = require('express');
const app = express();
const axios = require('axios');

/**
 * 암호화폐 거래소의 특정 코인의 마지막 거래 정보 가져오기 REST API
 * 
 * BTC, ETH, DASH, LTC, ETC, XRP, BCH, XMR, ZEC, QTUM, BTG, EOS
 * example) 
 * http://127.0.0.1:3000/lastTransaction/BTC
 */
app.get('/lastTransaction/:currency', function (req, res) {
    var currency = req.params.currency;
    getData(currency)
    .then(function(data){
        res.send(data);
    }).catch(function(err) {
        console.error(err); 
    });
});

function getData(currency) {
    return new Promise(async function(resolve, reject) {
        var result = await axios.get(`https://api.bithumb.com/public/ticker/` + currency);
        resolve(result.data);
    });
};

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  
  console.log('Server is working : PORT - ',port);
});

4. nodejs 프로그랢 실행

4-1. nodejs 프로그램 실행

vsCode의 Terminal에서 아래의 명령어를 실행해서 현재 코드를 nodejs로 실행시킵니다.

// nodejs 서버 실행
$ node index.js
Debugger attached.
Server is working : PORT -  3000

4-2. 브라우저로 url 접속

Browser에서 아래 URL 주소들을 입력합니다.

// (Web Application Server) index.html 페이지 출력
http://localhost:3000/

// (Web API Server) 페이지 없이 응답 데이터만 출력
http://localhost:3000/lastTransaction/BTC

첫번째 주소를 입력하면 브라우저에는 index.html 페이지가 띄워지게 되고, 두번째 주소를 입력하면 브라우저에는 응답 데이터만 출력되게 됩니다.

참고로, 실무에서는 일반적으로 서버를 두 종류로 구분해서 개발하고 있습니다. 하나는 첫번째 주소처럼 웹 페이지를 띄워서 서비스하는 형태로, www.daum.net, www.google.com, www.naver.com 처럼 브라우저 위에서 화면을 직접 뿌려주면서 서비스를 하는 것입니다. 이러한 서버를 개발자들은 Web Application 서버라고 부르는데, 이 경우 프론트 서버 개발자(Front Server Developer)들의 javascript, css, html 작업들이 많이 필요합니다.

다른 하나는 두번째 주소처럼 웹 페이지는 필요 없이 서비스하는 형태로, 위에서 빗썸 가상화폐 거래소를 예시로 들은 것처럼 데이터만 제공하는 서비스를 하는 것입니다. 이러한 서버를 개발자들은 Web API 서버라고 부르는데, API 서버를 개발할 때는 프론트 서버 개발자 없이 백엔드 개발자(Backend Server Developer)들로만 구성되어 개발됩니다. 화면에 보여지는 개발을 할 필요가 없기 때문입니다.

4-4. nodejs 프로젝트 종료

vsCode의 Terminal에서 Ctrl + C 를 입력해서 실행 중인 nodejs를 종료시킵니다. 만약, nodejs 프로그램이 실행 중에 코드를 수정하고 저장했다면, 이 방법을 사용해서 종료시킨 후 다시 실행시켜주어야 합니다.

(서버 실행 중에 Ctrl + C를 눌러서 서버 종료)
^C

추가 설명

이 글을 따라 웹 서버 개발이 완료되었다면, 프로젝트의 폴더 구조는 아래와 같습니다.

lec_nodejs
|--public/
|  |--index.html
|--node_modules/
|--index.js
|--package.json
|--package-lock.json

프로젝트 폴더 구조를 보면, 직접 생성하지 않은 node_modules 폴더와 package-lock.json 파일이 보입니다. 이 두 개의 파일은 윗 단계에서 "npm install" 명령어를 실행할 때, 자동으로 생성된 것들입니다. "node_module" 폴더는 윗 단계에서 다운받은 "express"와 "axios" 라이브러리 패키지에 대한 소스코드들이 모두 담겨져 있습니다. npm은 실행할 때 필요한 외부 라이브러리가 있다면, "node_module" 폴더에 모두 다운받아두고 사용하게 됩니다. 실제로 "node_module" 폴더를 열어보면 다양한 이름의 패키지들이 있는 것을 확인할 수 있는데, "express"와 "axios" 라이브러리가 또 다른 라이브러리들을 참조해서 개발된 패키지이기 때문에, 의존하고 있는 모든 라이브러리들을 다운받게 된 것입니다. 그리고 npm은 이렇게 서로 의존적인 라이브러리들을 관리하기 위해 하나의 파일을 추가해서 관리하고 있습니다. 그 파일이 바로 "package-lock.json" 파일입니다. 이 파일 내용을 보면, "node_module" 안에 있는 라이브러리들에 대한 정보들이 작성되어 있는 것을 확인할 수 있습니다. 따라서, nodejs 프로젝트를 개발할 때, "node_module"과 "package-lock.json" 파일은 npm에 의해 자동으로 생성도는 것이니 개발자가 직접 수정하지 않아야 합니다.

참고 사이트

express에서 static파일들(ex, html, css, jpg, js)을 제공하는 방법 링크

웹 페이지 샘플 사이트 링크

GitHub - Image 올리기 (README, Issue, PR)

Joker2 — Thu, 10 Sep 2020 23:04:23 +0900

GitHub - Image 올리기

GitHub를 사용해서 코드를 관리하다 보면, 가끔 사진(Image) 파일을 올려야할 때가 종종 있다. 예를 들면, 프로젝트의 설명을 작성하는 README.md 파일에 이해를 돕기 위해 프로그램 일부를 캡쳐해서 포함시키거나, 문제를 제기하는 Issue나 문제를 해결했다는 Pull Request를 작성할 때에도 다른사람들이 빠르게 이해할 수 있도록 글 이외에 그림을 넣는 경우들이 있다. 하지만, GitHub는 코드를 관리하기 위한 목적으로 이용되기 때문에, 코드 이외에 사진 파일이나 압축 파일 등의 다른 파일들에 대한 지원을 쉽게 하고 있지 않다. 아래 몇가지 방법으로 Github에서 이미지와 함께 글을 작성하는 방법을 소개한다.

Issue 글을 작성할 때와 Pull Request(PR) 글을 작성할 때 Image 올리기

Issue 글과 PR 글을 작성할 때 Image를 업로드하는 방법은 동일하다. 아래 설명은 Issue 글을 올리는 상황에 대한 설명을 하고 있으나, PR 글을 작성할 때도 동일한 방법으로 글과 Image를 함께 작성하면 된다.

우선, Issue 글 작성하기를 눌렀다면, 아래처럼 글을 쓰는 공간에 이미지를 복사(Ctrl+C) & 붙이기(Ctrl+V)를 하거나 이미지 파일을 드래그(Drag) & 드롭(Drop)을 하면 된다. 붙이기를 하면 아래 캡처한 화면처럼 사진이 바로 삽입되는 것이 아니라, "![Uploading <업로드할 image>]()" 라는 문자열이 잠깐 동안 삽입이 되는 것을 확인할 수 있다. 이 문자열과 동시에 하단에 "Uploading your files..." 라는 표시가 나온다. 업로드 하는 사진의 용량에 따라 시간이 다르게 나오는데, 이 때, 알아두어야할 점은, png 이미지로 변환해서 올려진다는 것이다. 만약에 올리려는 사진의 확장자가 png 가 아닌 jpg, jpeg 등의 다른 확장자라면 png로 올라갈 것이다. 아마도 Github 에서 Issue와 PR에 올리는 사진은 참고용으로만 작성하는 것이기 때문이라고 가정하고 원본 파일을 올리지 않는 것 같다.

[ upload 진행 중 ]

약 1~5초 정도가 지나면 화면 문구가 "![image](<업로드된 url>)" 형태로 변환될 것이다. 이때, <업로드된 url>은 실제로 주소창에서 호출하면 해당 이미지가 뜨기 때문에 Github는 특정 공간에 저장시키는 것을 알 수 있다. 주소가 내 Git Repository 주소가 아니기 때문에 아마도 시간이 어느정도 지난후 Image를 포함하는 Issue나 PR이 필요없어질 때 쯤? 아니면 Git Repository가 삭제되면? 등의 특정 시간에 제거되지 않을까 생각된다. 하지만, 일반적으로 Issue나 PR은 오랜시간 동안 유지되는 글이 아니기 때문에, 상관없을 것이다.

[ upload 완료 ]

만약, 2개 이상의 사진을 추가하고 싶다면, 앞에서 했던 것과 동일하게 간단히 끌어다 놓으면 된다. 추가된 그림도 일반적인 글처럼 인식한다. 다시 말해서, 그림을 추가한다고 해서 자동으로 엔터가 붙지 않는다. 아래 그림은 세로와 가로로 작성 하는 방법을 나눠놨지만, 간혹 첨부된 이미지 이름이 길기 때문에 아래 그림처럼 내가 엔터를 쳤는지, 치지 않았는지 헷가릴 때가 있다. 따라서, 이미지가 세로로 보이기를 원한다면 그림 + 엔터, 이미지가 가로로 보이기를 원한다면 그림 + 스페이스로 작성하면 된다.

[ 2개 이미지 upload 완료 ]

너무 큰 이미지를 삽입하거나 너무 작은 이미지를 삽입해서 이미지의 크기를 조정하고 싶은 경우가 있다면, 위 첨부한 그림처럼 HTML 태그의 <img> 태그를 사용하면 된다. 앞 설명에서 이미지를 끌어다 놓은 순가 이미 Github에 이미지는 업로드되며 URL이 출력된다고 하였다. 이를 이용하면 <img src="<업로드된 url>">로 변경할 수 있다. 그리고 <img> 태그에서 제공하는 width 속성을 이용하면 삽입되는 이미지의 크기 또한 조절이 가능하다. 아래 화면은 위의 Issue 글이 작성되었을 때의 모습이다.

[ 2개 이미지 upload 완료 화면 ]

README.md 파일에 Image 올리기

리서치 해본 결과, 아래의 4가지 방법들을 사용해서 Image를 업로드하는 방법을 찾을 수 있었다. 개인적으로 [방법1]과 [방법3]이 사용하기에 적당할 것이라고 생각된다. README.md 파일을 빨리 작성해서 누군가 보여줘야 한다면 [방법1]을 사용하고, 누군가에게 프로젝트를 배포해야한다거나 장기간 안정적으로 유지되어야하는 프로젝트에 작성되어야하는 README.md 파일을 만들어야 한다면 [방법3]을 사용하는 것이 적당할 것이라고 생각된다.

[방법1] Issue와 PR을 이용해서 Image를 올린 후, 링크를 거는 방법 (=이미지를 Github가 관리하는 어딘가에 보관 / 언제 없어질지 모름)

1. 위에서 설명했던 것처럼 Issue와 PR을 통해 사진을 삽입한 후, 글 작성을 완료한다.

2. README.md에 업로드된 이미지 URL을 링크로 삽입한다.

[방법2] Issue와 PR을 이용해서 Image를 올린 후, 링크를 거는 방법 (=이미지를 Github가 관리하는 어딘가에 보관 / 언제 없어질지 모름)

1. 위에서 설명했던 것처럼 Issue와 PR을 통해 사진을 삽입한 후, 글 작성을 완료하지 않는다.

2. README.md에 업로드된 이미지 URL을 링크로 삽입한다.

[방법3] Git에 직접 Image를 올린 후, 링크를 거는 방법 (=이미지를 Repository에서 직접 보유하는 방법)

1. Image가 사용될 Git Repository에 directory를 생성하고 Image를 올린다.

2. README.md에 업로드된 이미지 URL을 링크로 삽입한다.

[방법4] Git에 직접 Image를 올린 후, 링크를 거는 방법 (=이미지 전용 Repository 생성하는 방법)

1. Image와 관련없는 Git Repository에 directory를 생성하고 Image를 올린다.

2. README.md에 업로드된 이미지 URL을 링크로 삽입한다.

README.md 파일에 이미지를 삽입할 때는 아래처럼 마크다운 포멧으로 혹은 HTML 포멧으로 작성하면 된다.

마크다운 포멧으로 작성
![<이미지 이름>](<업로드된 이미지 URL>)
![sample](https://...../sample.png)

HTML 포멧으로 작성
<img src="<업로드된 이미지 URL>">
<img src="https://...../sample.png">

APK 파일 versionCode, versionName 정보 확인

Joker2 — Tue, 4 Aug 2020 01:30:41 +0900

android apk 버전 정보 추출하기

(versionCode, versionName)

Android 애플리케이션은 개발자가 관리의 목적으로 만들어서 사용하는 버전 정보가 있다. 예를 들어, 지금 Android App Store 마켓을 들어가서 "Kakotalk"을 검색한 후 "자세히 알아보기" 버튼을 클릭하면 "8.9.6"이라는 버전 정보를 볼 수 있을 것이다. 혹은 "Line"을 검색한 후, 동일한 방법으로 버전 정보를 찾아보면 "10.12.1"이라고 볼 수 있을 것이다. 아래 첨부한 그림은 "Dropbox"앱에 대한 버전 정보를 나타내고 있다. (참고로, 앱 제작사가 계속해서 업그레이드 하고 있으니 저와 다른 버전으로 보일 수 있다.)

[ android application versionName ]

Android 애플리케이션이 다음 버전으로 올라갈 때마다 버전의 숫자는 올라가긴 하지만, 앱 제작사가 원하는 규칙에 의해서 카운팅되어 오르는 것이기 때문에, 제작사마다 사용하는 앱의 버전 규칙들은 모두 다를 것이다. 이렇게 만들어진 앱의 버전 정보는 Android 시스템이 업그레이드의 여부를 판단할 때 사용하는 기준이 된다. 따라서, 제작사가 새로운 기능을 넣어서 업그레이드 시켜야하는 앱은 항상 이전 버전보다 높아야만 한다.

Version Code와 Version Name 차이

Application Version Name : 버전을 사용자에게 보여주기 위한 것이 목적인 버전 닉네임 값 (Android App Store에서 보이는 정보)
Application Version Code : 개발자에 의해 작성되고, Android 시스템에 의해 앱 업그레이드시 동작하는 기준이 되는 정보로, 앱 개발시 특히 중요한 역할을 하는 값

versionCode, versionName 설정하기

아래 코드는 애플리케이션 설정파일인 gradle 내용 중 versionCode와 versionName을 설정하는 부분이다. 글쓴이는 현재 990이라고 임시로 작성했지만, 제작사들은 버전을 구성하는 숫자를 (자릿수를 기준으로 major한 변화나 minor한 변화들이 있을 때마다 특정 위치의 번호를 변경하는 등) 자신들만의 규칙을 정하고 그에 따라 버전 정보들이 관리되곤 한다.

// ...app.gradle

android {
    compileSdkVersion 29
    defaultConfig {
        applicationId "..."
        minSdkVersion 24
        targetSdkVersion 29
        versionCode 990		// 시스템이 보는 버전 이름
        versionName "9.9.0"		// 사용자가 보는 버전 이름
    }
    ...
}

Programming으로 versionCode, versionName 알아내기

Android API 중 PackageInfo를 사용해서 원하는 (패키지를 가진) 애플리케이션의 버전을 알아낼 수 있다. 참고로, API 28 이후로는 PackageInfo의 versionCode 변수는 deprecated 되었기 때문에, getLongVersionCode() 함수를 통해 가져와야 한다. 이처럼 프로그래밍 코드로 작성될 경우, 동작하려는 자신의 앱의 버전을 체크하거나 혹은 호출하려는 앱의 버전을 체크하려고 할 때 유용한 방법으로 사용된다.

// ...android java code

final PackageInfo pInfo = context.getPackageManager().getPackageInfo(context.getPackageName(), 0);
int versionCode;
String versionName;

if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
    versionCode = (int) pInfo.getLongVersionCode();
} else {
    versionCode = pInfo.versionCode;
}
versionName = pInfo.versionName;

APK로 versionCode, versionName 알아내기

apk만을 가지고 version을 알아내는 방법 몇가지를 소개한다. 현재 개발자가 가지고 있는 앱이 제작사가 몇번째 코드로 개발되었는지를 파악하려고 할 때 유용한 방법들로 사용될 수 있다.

apk확장자를 zip으로 변경한 후, AndroidManifest.xml 파일 확인하기
APK 디컴파일을 한 후, AndroidManifest.xml 파일 확인하기
Android Build Tool의 appt를 사용해서 AndroidManifest.xml 파일 확인하기

apk확장자를 zip으로 변경한 후, AndroidManifest.xml 파일 확인하기

sample.apk 파일을 강제로 sample.zip 으로 변경
sample.zip 압축 풀기
AndroidManifest.xml 파일 열기
1. Browser, 개발용 IDE 혹은 Editor으로 열기
versionCode, versionName 확인

APK 디컴파일을 한 후, AndroidManifest.xml 파일 확인하기

sample.apk 파일을 apktool 혹은 (첨부로 링크된) apk 디컴파일 사이트에서 디컴파일을 수행
AndroidManifest 파일 열기
Browser, 개발용 IDE 혹은 Editor으로 열기
versionCode, versionName 확인

Android Build Tool의 appt를 사용해서 AndroidManifest.xml 파일 확인하기

터미널 or 명령창 열기
로컬에서 android sdk 경로로 이동
1. macOS일 경우 default android SDK 경로 : "/Users/<user>/Library/Android/sdk/build-tools/<version>/"
2. windows일 경우 default android SDK 경로 : "C:\Users\<user>\AppData\Local\Android\android-sdk\"
아래 명령 실행

// aapt를 사용하는 경우
joker@MacBookPro$ aapt dump badging sample.apk

// aapt를 사용하는 경우
joker@MacBookPro$ aapt2 dump badging sample.apk.apk

// 출력 내용
versionCode='990' versionName='9.9.0' compileSdkVersion='29' 
...
...

참고

Android Developer Version Code 관리 링크

Android Developer getLongVersionCode() 링크

Android Get versionName or versionCode of an APK 링크

Android Developer AAPT2 (android asset packaging tool) 링크

APKTool 링크

APK Decompilers Online 링크

go - rune 타입 (한글, 유니코드, UTF-8)

Joker2 — Sun, 19 Jul 2020 03:26:04 +0900

rune

(한글, 유니코드, UTF-8)

rune 타입은 다른 언어에서 잘 볼 수 없는 타입이다. 타입의 이름을 왜 rune으로 정의했을까 궁금증으로 찾아보니, 룬 문자(runic alphabets)에서 가져온건 아닐까 생각된다. 룬 문자는 옛날에 북유럽의 게르만족(=독일사람)이 라틴문자를 사용하기 전에 사용되던 문자라고 한다. 아래 첨부한 그림에 포함된 글이 룬 문자로 작성된 것이라고 한다. 바로 이 문자를 컴퓨터로 표현할 수 있는 인코딩 타입 중 하나가 유니코드이다. 룬 문자에 대한 유니코드가 U+16A0 ~ U+16FF 사이에 정의되어있기 때문에, 개발자가 원한다면 프로그램 위에 출력시킬 수도 있다. 이러한 정황들을 봤을 때, 개인적으로 잠깐 "go언어를 설계한 사람이 언어를 전공한 친구에게 컴퓨터에 모든 문자를 표현할 수 있는 타입이 하나 있는데 작명을 부탁한 후, runic alphabet을 의미하는 rune이라는 이름을 받아오진 않았을까"생각해봤다.

[ unicode - runic alphabet ]

rune 타입은 유니코드(UTF-8/Unicode)를 쉽게 제어하기 위한 타입이다. Go 언어의 rune 타입은 int32을 재정의해서 사용되고 있다. 따라서 32bit로 제어되고 있다는 것을 알 수 있다. 직접 코딩을 할 때는 "unicode/utf8"패키지에서 제공하는 API들을 사용해서 rune 타입관련 함수들을 쉽게 활용할 수도 있으니 참고바란다. 추가로, 아래 영어로 작성된 문장은 go lang 문서에서 rune 타입을 어떻게 정의했는지에 대해 설명하는 내용이다.

"rune is an alias for int32 and is equivalent to int32 in all ways. It is used, by convention, to distinguish character values from integer values."

rune : 유니코드(UTF-8)을 표현하는 타입

16 bit로 표현되는 UTF-16이 아닌, 8 bit로 표현되는 UTF-8 (8-bit Unicode Transformation Format) 인코딩 방식을 사용한다는 것을 주의한다.
유니코드 인코딩에서 한글은 3byte를 사용하고, 영어는 1byte를 사용하는 것을 주의한다.
유니코드는 한글을 지원하는 인코딩 방식이기 때문에, 한글을 사용하는 프로그램 개발에 유용하게 사용할 수 있다.

[ unicode table - U+D600 ~ U+D77F]

[ unicode - UTF-8]

sample code

아래 코드는 rune 타입을 사용한 몇가지 코드들이 작성되어 있다. '홍' 글자를 UTF-8 단위로 제어할 수 있는 rune 타입을 사용한 예제이다. '홍' 글자를 unicode 표에서 찾아보면 U+D64D에 해당하는 것을 알 수 있다. 이 값을 코드로 작성하면 '\ud64d'로 표현할 수 있다. 참고로, 아래 예제 코드는 go language 기준으로 작성되었으니 다른 언어는 조금 다를 수도 있다는 것을 알아두자. 아래 코드를 실행하면 UTF-8 인코딩 기준의 '홍'값을, 10진수로 표현하면 54861이라는 값을 가지고, 한글 문자이므로 3byte가 필요하기때문에 출력도 동일하게 되는 것을 알 수 있다. 참고로, 영어 알파벳 문자인 'a' 값은 1byte가 필요하다.

package main

import (
    "fmt"
    "unicode/utf8"
)

func main() {
    // get rune from string
    var r1 rune
    str := "홍길동"
    r1 = []rune(str)[0]

    // get rune from character
    var r2 rune
    r2 = '홍'
    
    // get rune from character (unicode point)
    var r3 rune
    r3 = '\ud64d'
    
    // get len of rune type (한글) 
    len1 := utf8.RuneLen('홍')
    
    // get len of rune type (영어)
    len2 := utf8.RuneLen('a')
    
    fmt.Println(r1, r2, r3, len1, len2)
}

// 출력
// 54861 54861 54861 3 1

byte : 아스키(ASCII) 코드로 표현하는 타입

8bit 인코딩 방식이라는 것을 주의한다. 첫 비트는 0으로 시작하고 나머지 7개 비트로 표현하는 방식이다.

[ ascii code table ]

sample code

아래 코드는 byte 타입을 사용한 예제 코드이다. byte 타입은 1바이트 크기 내에서 표현되고, 7bit로 표현되는 ASCII코드로 많이 사용되는 타입이기 때문에, 이미 알고 있을 것으로 생각되어 자세한 설명은 추가하지 않았다.

package main

import (
    "fmt"
)

func main() {
    // get byte from string
    var b1 byte
    str := "apple"
    b1 = []byte(str)[0]

    // get byte from character
    var b2 byte
    b2 = 'a'
    
    // get byte from character (ascii)
    var b3 byte
    b3 = 97

    // get byte from character (hex)
    var b4 byte
    b4 = 0x61
    
    // get len of byte type
    bLen := len("a")
    
    fmt.Println(b1, b2, b3, b4, bLen)
}

// 출력
// 97 97 97 97 1

참고

룬 문자 (runic alphabet) link

유니코드 테이블 (unicode table) link

유니코드 UTF-8 표현 (unicode - utf-8) link link2

아스키 테이블 (ascii code) link

고 언어 문서 (go lang builtin 타입 - rune) link

circleci - config.yml 작성방법

Joker2 — Sat, 23 May 2020 04:06:52 +0900

CircleCI

(config.yml 작성방법)

CircleCI는 개발자가 코드를 개발할 때 생산성을 높여주는 CI 도구 중 하나이다. CI는 Continuous Integration의 약자로 지속적인 통합이라는 의미를 가진다. CI 툴을 사용하는 목적은 개발자의 코드의 품질을 좋게 만드는 것으로, CI 툴은 개발자의 코드가 미리 정의해둔 조건들에 만족하는지를 판단하고 이에 따라 코드를 통합시킴으로써 코드의 품질을 유지할 수 있는 기능들을 제공하고 있다.

Github 저장소를 만들고 올려둔, 개발 중인 프로젝트에 CI 툴인 CircleCI를 적용하면 달라지는 것들?

예)

Lint 실행과 Test 코드 실행에 대한 성공여부를 Slack 메시지로 전달받을 수 있다.
Circle Ci는 사용자가 Push를 할 때마다, 적용되는 코드에 Lint 적용이 되었는지 판단한다.
Circle Ci는 테스트가 모두 통과한 코드에 대해 자동으로 Tag를 만든다.

개발자가 실무에서 많이 사용하는 대표적인 CI 툴로는 CircleCI, Jenkins, TravisCI가 있다. 이 중에서 무료로 사용할 수 있는 CI인 CircleCI에 대해 포스팅해보려 한다. 이 글의 목적은 CircleCI에 대해 전부를 설명하는 것이 아닌, CircleCI를 처음 사용하면서 원하는 기능에 대한 자세한 설정이나 설명들을 찾아보기 전에 기본적인 구성을 알기 위함이기 때문에, 설명이 부족할 수 있다. 자세한 내용을 원한다면 CircleCI 공식 사이트 혹은 아래 참조로 추가해둔 사이트를 살펴보기 바란다.

CircleCI를 사용하면, 프로젝트 내에 .circleci 라는 디렉토리가 만들어지고, 그 안에 config.yml 이라는 파일이 있는데, 이 파일에 개발자는 자동화하기를 원하는 CI 기능들을 작성하게 된다. 따라서 CircleCI를 사용할 때는 config.yml이라는 파일을 어떻게 작성하는지를 알면 사용법의 반 이상은 이해하고 있는 것이라고 생각한다. CircleCI의 어떤 버전 사용하냐에 따라 config.yml에서 내에서 사용할 수 있는 내용이 약간 차이가 있는데. 현재 글에서는 CircleCI의 버전은 2.1을 바탕으로 설명하고 있으니 참고바란다. 또한 이 글은 Github와 CircleCI를 연동해서 사용하는 것을 전제로 가정하고 설명하는 것도 참고바란다. 가장 먼저 아래 작성된 config.yml 파일의 샘플을 살펴보자.

config.yml

version: 2.1

excutors:
    node-executor: 
        docker: 
            - image: circleci/node:8
    ruby-executor: 
        docker: 
            - image: ruby

jobs:
    build:
        executor: node-executor
        steps:
            - checkout
            - restore_cache:
                keys:
                    - dep-bundle-{{ checksum "package.json" }}
            - run: npm install
            - save_cache:
                key: dep-bundle-{{ checksum "package.json" }}
                    - /repo/node_modules
            - run: npm run lint && npm run test && npm run downloadsolc && npm run make-mock-compiler && npm run setupremix && npm run build
            - run: ./ci/browser_tests.sh

    a_test:
        executor: ..
        steps:
            - checkout
            - ...

workflows:
    version: 2
    build_and_others:
        jobs:
            - build
            - a_test:
                requires:
                    - build
                filters:
                    branches:
                        only: master

version : CI 버전으로 2.1을 사용하였다.

executors : 개발자가 정의한 작업을 실행시킬 환경을 정의하고 그 안에서 함께 실행되어야 하는 프로그램에 대한 이미지를 정의한다. (ex, docker, macOS) 이 곳에 정의한 executor는 작업(job) 내용을 작성할 때 실행환경을 적는 executor라는 필드에서 사용된다.

jobs : 자동화 하고 싶은 작업(job)으로, 네이밍은 개발자가 직접 정의한다. 여기서 알아둘어야 할 점은 job을 정의한 것일뿐, 모든 job들을 어떤 방법으로 실행시킬지에 대해서는 workflow 항목에서 정의한다는 것이니 혼동하지 말자. (ex, build, a_test)

executor : executors에 정의해둔 개발 환경 중에 작업에 필요한 환경에 대해 직접 정의한 이름을 작성한다.

steps : 작업(job)에 대해 실행할 내용들을 차례로 작성한다.

restore_cache : 캐시(cache)를 복원한다. 작업이 실행되기 전에, 다른 작업(job)에서 save_cache 을 통해 캐시에 저장된 것이 있다면 이를 사용하기 위해 복원시킨다.

save_cache : 캐시(cache)를 저장한다. 이때 캐싱으로 사용하기 위해 저장시킨 내용은 다른 job들에서도 사용된다. 아래 예시로 작성한 config.yml에선, nodeJS 프로젝트에서 dependency 라이브러리들이 저장되는 디렉토리가 node_module인데, 이 디렉토리를 캐싱해두고 다른 작업(job)들에서도 사용할 수 있도록 하는 것이다. 참고로, nodeJS 프로젝트의 node_module디렉토리는 maven 프로젝트의 .m2 디렉토리와 동일한 역할이므로 maven 프로젝트라면 .m2가 될 것이다.

run : 실행할 명령(command)이다. 예제에서는 npm 라이브러리들을 다운로드하는 npm install 이라는 명령을 실행시키거나 lint 라이브러리를 실행시키는 npm run lint 라는 명령을 실행시키는 등의 작업들을 예시로 작성하였다.

workflows : 앞에서 각 작업(job)들을 모두 정의했다면, 이 작업들을 어떤 조합으로 어떤 조건에서 어떤 순서로 동작할지를 정의한다.

requires : 현재 작업(job)을 수행하기 이전에 선행되어야할 작업 목록을 작성한다.

filter : 현재 작업(job)이 실행되기 위한 조건을 작성한다. 예를 들면, Github의 특정 Branch(ex, master, dev)만 실행할 수 있도록 제한할 수 있다. 예제에서는 master 브런치의 조건에서만 실행시키도록 작성했다.

각 항목들에 대한 설명으로 이해가 부족한 부분이 있을 것 같다. 글쓴이의 경우 예제 코드에서 작성된 내용 중에 직관적으로 이해가 가지 않았던 부분으로, CircleCI 에서 지원하는 기능 중에 executor와 cache 이 두 가지 관련 항목에 대해서 조금 더 설명해본다.

CircleCI Executor ?

executors와 executor항목과 관련된 것이다. Github에 오픈되어 올려둔 많은 프로젝트들을 보면, 대부분이 docker 환경을 사용하고 이 환경 내에 원하는 image를 적용해서 사용하고 있다. 하지만, docker 외에도 macOS, windows, linux를 더 지원하고 있고, 각 OS는 CircleCI에서 제공하는 가상 머신(Virtual Machine) 위에서 동작된다. 결과적으로 executor의 값을 변경해서 다른 원하는 OS 환경에서 테스트가 가능하다는 것이다.

[ circleci - executor using docker ]

[ cicleci - executor using macos ]

CircleCI Cache ?

config.yml 작성이 완료됬다면, 개발자가 정의해둔 작업(job)들이 많이 있는 것을 볼 수 있다. 이 파일에 작성된 각각의 작업들(jobs)은 서로 다른 프로젝트가 아닌, 하나의 동일한 프로젝트를 서로 다른 형태로 테스트하도록 정의한 것이다. 이 말은 정의해둔 서로 다른 작업들이 동일한 코드와 리소스들을 공유하고 있다는 것이기 때문에, 각 작업을 수행할 때마다 다른 작업에서 처리된 내용들을 그대로 써도 되는 부분들이 많다는 것이다. 따라서 CircleCI는 각 작업의 내용들에 대해 다른 작업(job)에서도 그대로 빠르게 사용할 수 있도록 cache라는 기능을 제공하고 있는 것이다. 아래 그림처럼 workflow에 정의된 작업들이 수행될 때 캐시가 그대로 다음 작업의 실행에 영향을 미치게 함으로써 테스트의 속도를 높일 수 있다. 이 cache는 restore_cache와 save_cache항목으로 설정할 수 있다.

[ circleci - cache ]

참고

Restoring Cache 설명 link

CircleCI Executors 설명 link

CircleCI 2.1 Docs 문서 link

Github의 어떤 nodeJS Project 중 .circleci/config.yml 파일 (CircleCI 2.1 사용) link

Github의 어떤 nodeJS Project 중 .circleci/config.yml 파일 (CircleCI 2.0 사용) link

Github의 어떤 maven Project 중 .circleci/config.yml 파일 (CircleCI 2.0 사용) link

javascript - yield (비동기 처리

Joker2 — Sat, 9 May 2020 01:24:28 +0900

yield

비동기 처리 (Asynchronous processing model)

javascipt에서 지원하는 함수 중에 yield라는 함수가 있다. 글쓴이는 javascript를 잘 모르는 상태에서 react를 개발을 시작했었고, 처음으로 yield라는 함수를 마주하게 되었다. 그 당시 이 함수가 react에서 제공하는 특수한 함수인 줄 알았다. 하지만, yield는 react를 개발하면서 처음 봤기에 잘 못알고 있었으며, javascript의 ES6부터 사용가능한 함수 중 하나라는 것을 알았다. yield 키워드는 javascript의 비동기 처리를 위해 만들어진 것으로, 개발을 할 때 자주사용하게 되는 함수이다. 특히 react 개발을 하고 있다면 분명 사용하는 키워드일 것이다. 이번 포스팅에서는 이러한 yield 키워드가 javascript에서 사용되는 상황과 react에서 사용되는 상황을 보고 어떻게 다른 형태로 사용되는지 비교해보려 한다.

javascript의 yield 키워드만을 사용하는 경우

[ yield 만 사용하는 경우 ]

function*으로 함수를 정의하고, 이 함수 내에 포함되어 있는 property 중에 next()를 차례로 호출함으로써, 함수 내에 코딩해둔 yield를 차례로 실행시키는 것이고, 아래 3가지 키워드를 사용해서 코드가 만들어진다.

function* : function 뒤에 astrok(*)를 붙이면, 이를 generator function이라고 불리는 함수형태가 된다. 이 함수는 비동기처리를 할 수 있는 함수로서 내부에서 yield라는 키워드를 사용해서 코딩을 하면, 해당 라인까지만 코드를 실행하고 뒷부분은 다시 실행을 요청할 때까지 실행하지 않게함으로써 마치 함수가 실행 중에 특정부분에서 일시 정지된 것처럼 동작함으로써, 비동기 처리를 하도록 만들 수가 있다.

yield : generator function 안에 yield 키워드를 사용한 곳들을 기준으로 코드가 잘려서 실행하게 된다고 볼 수 있다. 만약에, yield문을 만날때까지 특정 처리를 수행했다면, 함수는 잠깐 잘린 상태로 정지해있다가 다시 이 함수로 접근했을 때(=next함수를 호출했을 때) 멈췄던 부분부터 실행을 이어서 하고 다음 yield문을 만날때까지 쭈욱 실행이 되는 것이다. 이러한 구조로 인해 yield를 기준으로 처리가 나눠진 곳들을 실행시키는 명령을 외부로 넘기는 형태가 만들어지게 되는 것이다. 따라서, generator function을 호출하는 외부 함수(=caller)에서 next()를 실행시킬 때마다 yield로 나눠진 곳들이 하나씩 실행하게 되는 것이다.

next() : generator function에서 반환한 데이터를 generator라고 부르는데, generator의 next 함수를 실행하면 { value, done } 이라는 데이터를 반환한다. 참고로, next()를 실행하는 이유는 generator는 반복구조인 iterator를 사용하는 구조이기 때문이다.

아래는 yield를 사용해서 비동기 처리를 하는 call()이라는 함수를 만들어보았다. 참고로, 함수를 호출할 때는 next()를 사용해도 되지만, 배열을 반복하는 for..of문법을 사용해서 call() 함수 내에 있는 yield를 차례로 호출시킬 수도 있다.

sample code

function* call() { 
    console.log('execute joker 1'); 
    yield 10; 
    console.log('execute joker 2'); 
    yield (20 + 20); 
    console.log('execute joker 3'); 
    yield (30 * 3); 
} 

// call style 1
let gen = call(); 
console.log(gen.next()); 
console.log(gen.next()); 
console.log(gen.next()); 
console.log(gen.next());

// call style 2
for(let result of call()) { 
    console.log(result); 
}

sample code output

execute joker 1
{
    value:10,
    done:false
}
execute joker 2
{
    value:40,
    done:false
}
execute joker 3
{
    value:90,
    done:false
}
{
    value:undefined,
    done:true
}
execute joker 1
10
execute joker 2
40
execute joker 3
90

javascript의 yield와 (react) redux-saga의 effects를 함께 사용하는 경우

[ yield와 redux-saga/effects를 같이 사용하는 경우 ]

function*으로 함수를 정의하고, 이 함수를 호출하는 행위는 redux-saga/effects에 위임시키고, redux에서 제공하는 액션(action)을 사용해서 함수 내에 코딩해둔 yield를 차례로 실행시키는 것이다. 이때, redux에서 함수 내의 yield를 차례로 알아서 실행시켜주기 때문에 앞에서 순수 javascript만으로 개발했을 때처럼 next()를 차례로 호출시킬 필요는 없다. 참고로, redux는 앞에서 설명한 ES6의 genrator function을 기반으로 구현되었다. 아래 2가지 키워드와 redux-saga/effects 함수들을 사용해서 코드가 만들어지게 된다.

function* : ES6 javascript의 문법으로 앞 설명과 동일

yield : ES6 javascript의 문법으로 앞 설명과 동일

redux-saga/effects 함수 : react 개발을 할 때, redux-saga/effects 에서 제공되는 함수들(ex, call, put)을 사용하는 경우가 종종 있다. 이렇게 react 개발시 redux 라이브러리들을 사용하게 되면, 앞에서 설명했던 것처럼 function* 함수를 호출할 때 next()를 통해서 호출하는 것이 아닌, 액션(action)이라는 것을 통해서 호출하게 된다. 그리고 react에서는 액션을 통해 function* 함수를 한번 호출하고 나면 내부에 있는 여러 yield 함수들을 차례로 호출을 해준다는 점이다. 이러한 점이 개발자로 하여금 비동기처리에 대한 코드를 더욱 쉽게 만들어 준다.

참고로 redux-saga/effects 함수로는 all, call, put, takeLatest 등이 있으며, all은redux에서 (비동기 처리가 필요한) 함수들을 배열 형태로 넣어서 동시에 병행으로 처리를 수행하는 함수이고, call은 redux에서 (비동기 처리가 필요한) 함수를 실행하는 함수이다. 보통 ajax call, http, delay 등의 함수를 처리할 때 사용한다. put은 redux의 액션(action)을 디스패치(dispatch)하는 함수이고, takeLatest는 redux의 (기존에 진행중이던 작업이 있다면 취소하고) 가장 마지막으로 실행된 작업을 수행하는 함수이다.

아래는 yield를 사용하긴 하지만, react를 사용할 때는 어떠한 형태가 나오는지 만들어보았다. 아래 코드는 전체 코드의 일부분을 발췌한 것이기 때문에 동작을 하려면 다른 코드들이 더 있어야 한다. yield를 사용할 때의 상황이 react개발할때는 javascript만 사용할 때와 어떻게 다른지 살펴보기 위함이기 때문에 아래 코드만으로 이해가 가능할 것이라고 생각된다. 참고로, react 개발시 비동기 처리에 대한 다양한 기능들을 지원해주는 라이브러리인 redux-saga를 정말 많이 사용한다.

sample code

// using redux saga effects in react
import { createAction } from 'redux-actions';
import { delay } from 'redux-saga'
import { all, call, put, takeLatest } from 'redux-saga/effects';

// react-specific (2. 사용자가 react-component(=UI 부분코드)로 출력되는 특정 버튼을 누르면 login 액션을 호출)
const LOGIN = 'LOGIN';
export const login = createAction(LOGIN);

// javascript generator function (3. login 액션에 대한 수행을 하는 담당하는 함수)
function* loginSaga(data) {

    // check 1
    yield delay(3000);
    console.log('execute joker 1');

     // check 2
    yield delay(2000);
    console.log('execute joker 2');

    // check 3
    yield delay(5000);
    return yield call(httpRequest, { data });
}

// react-specific (1. redux-saga로 미리 사용할 액션을 등록해두어야 login 액션을 받을 수 있음)
export function* actionLogin() {
  yield takeLatest(LOGIN, loginSaga);
}

sample code output

// check 1에서 3초간 일시정지 후.. 다음 라인부터 실행한다.
execute joker 1

// check 2에서 2초간 일시정지 후.. 다음 라인부터 실행한다.
execute joker 2

// check 3에서 5초간 일시정지 후.. 다음 라인부터 실행한다.
// httpRequest함수에 대한 결과를 리턴한다.

참고

Mozila Generator.prototype.next() link

Mozila yield* link

javascript - 반복문(for, forEach/map, for..in/for..of)

Joker2 — Sat, 2 May 2020 23:41:10 +0900

javascript 반복문

(for문, forEach문, map문, for..in문, for..of문 비교)

[ javascript 반복문 비교 ]

javascript에서도 일반적으로 프로그래밍 언어에서 제공하는 반복문인 for문을 사용할 수 있다. 그런데, 오픈 소스들을 찾아보면 for문이 조금 다르게 생겨서 별것도 아닌데 형태가 다르다보니 이해가 바로 안될 수 있다. javascript 같은 경우에는 for문을 변형된 다른 몇가지 형태로도 제공하고 있으니, 잠깐 시간을 두고 살펴보고 넘어가는 것이 javascript 코드를 보는데 속이 편하다.

for 기본 문법

for( ..; ..; .. ) 형태

for 기본 문법이 변형된 형태

for( .. in .. ) 형태 / for( .. of .. ) 형태
array.forEach(callback function) 형태 / array.map(callback function) 형태

for 기본 문법

javascript도 아래처럼 c나 java언어에서 사용되는 형태의 for 문을 사용할 수 있다. 하지만, 이러한 스타일은 요즘 javascript 진영에서는 잘 사용되지 않는다.

for sample code

// ...for.js
const array = ["j1", "j2", "j3"];

for(let i=0; i<array.length; i++) {
    console.log(array[i]);
}


// result
j1
j2
j3

for 기본 문법이 변형된 형태

맵(map) 내 원소들을 반복하는 for..in 문법
배열(array) 내 원소들을 반복하는 for..of 문법
배열(array) 내 원소들을 (비동기) 함수를 적용해서 반복하는 forEach 문법
배열(array) 내 원소들을 (비동기) 함수를 적용해서 반복한 후, 반환하는 map 문법

1. 맵(map) 내 원소들을 반복하는 for..in 문법

반복시키려는 값이 맵(map)으로서 객체(object) 타입의 요소들을 가진다면, 그리고 이 요소들을 하나씩 접근하려 한다면 for..in을 사용한다. for..in 문법은 아래의 특징을 가지며, 예제 코드는 맵 객체 내의 요소들을 하나씩 출력시킨 것이다.

for..in 문법은 배열(array)가 아닌 맵(map)의 요소들을 반복한다. 따라서 배열의 요소가 아닌 맵의 요소가 반복될 때 사용된다.
for..in 문법에서 반복되는 element 값은 원소의 내용이 아닌 원소가 위치한 키(key)이다.
for..in 문법에서 반복되는 키(key)에 해당하는 값(value)은 대괄호([ ])를 사용해서 접근한다.

for..in sample code

// ...map_for.js
let map = { "j1": 10, "j2": 20, "j3": 30 };

for(let key in map) {
    console.log(key, map[key]);
}


// result
j1 10
j2 20
j3 30

2. 배열(array) 내 원소들을 반복하는 for..of 문법

반복시키려는 값이 배열(array)이라면, 아래처럼 for..in 문법을 사용해서 간단하게 사용할 수 있다. for..of 문법은 아래의 특징들을 가지고, 아래 예제는 배열 안의 원소들을 가지고 순서대로 출력킨 것이다.

for..of 문법은 배열(array)의 요소들을 반복한다.

for..of sample code

// ...array_for.js
let array = ["j1", "j2", "j3"];
let array2 = [ {"j1": 10}, {"j2": 20}, {"j3": 30}];

for(let ele of array) {
    console.log(ele);
}
for(let ele of array2) {
    console.log(ele);
}


// result
j1
j2
j3
{
    j1:10
}
{
    j2:20
}
{
    j3:30
}

3. 배열(array) 내 원소들을 (비동기) 함수를 적용해서 반복하는 forEach 문법

forEach 문법은 아래와 같은 특징들을 가지고 있으며, forEach 문법의 이해를 돋우기 위해 아래처럼 4가지 상황으로 예시를 들어봤다.

forEach 문법은 비동기 함수인 callback 함수 하나를 받는다.
callback 함수로 입력되는 파라미터값은 순서대로 요소값(element), 요소의 인덱스(index), 배열전체(array)이다.
callback 함수로 입력되는 파라미터 중 원하는 파라미터들만 받아서 사용가능하기 때문에, 모두 받거나 하나만 받아서 사용할 수도 있다.
callback 함수는 ES6문법인 화살표(arrow, =>)를 사용해서 축양된 형태로 사용이 가능하다.

array.forEach() sample 1

// ...array_foreach1.js
// "function" 키워드를 사용하는 방식
let array = [ "j1", "j2" ];

// ele(배열 요소), index(배열 인덱스), array(배열 전체)
array.forEach(function(ele, index, array) {
    array[index] = ele.concat('-check');
});

// ele(배열 요소)
array.forEach(function(ele) {
    console.log(`${ele} / function으로 여러줄을 명령(블록 사용)`);
});


// result
j1-check / function으로 여러줄을 명령(블록 사용)
j2-check / function으로 여러줄을 명령(블록 사용)

array.forEach() sample 2

// ...array_foreach2.js
// 화살표(arrow)를 사용하는 방식 (+한줄만 명령)
let array = [ "j1", "j2" ];

// ele(배열 요소), index(배열 인덱스), array(배열 전체)
array.forEach((ele, index, array) => array[index] = ele.concat('-check') );

// ele(배열 요소)
array.forEach(ele => console.log(`${ele} / arrow로 한줄만 명령`));


// result
j1-check / arrow로 한줄만 명령
j2-check / arrow로 한줄만 명령

array.forEach() sample 3

// ...array_foreach3.js
// 화살표(arrow)를 사용하는 방식 (+블록으로 여러줄 명령)
let array = [ "j1", "j2" ];

// ele(배열 요소), index(배열 인덱스), array(배열 전체)
array.forEach((ele, index, array) => {
    array[index] = ele.concat('-check');
});

// ele(배열 요소)
array.forEach(ele => {
    console.log(`${ele} / arrow로 여러줄을 명령(블록 사용)`);
});


// result
j1-check / arrow로 여러줄을 명령(블록 사용)
j2-check / arrow로 여러줄을 명령(블록 사용)

4. 배열(array) 내 원소들을 (비동기) 함수를 적용해서 반복한 후, 반환하는 map 문법

map 문법도 forEach 와 아래처럼 동일한 특징들을 가진다. 앞에서 언급한 forEach의 모든 코드는 map으로 변경해도 모두 동일하게 동작을 하므로, map에 대한 예제 코드는 전부 작성하지 않았다. 차이점만 보기 위해 화살표(arrow) 문법을 사용한 예만 작성해보았다. map의 특징은 앞에서 언급한 forEach의 모든 특징을 포함하며 몇가지가 더 추가된다.

map 문법은 비동기 함수인 callback 함수 하나를 받는다.
callback 함수로 입력되는 파라미터값은 순서대로 요소값(element), 요소의 인덱스(index), 배열전체(array)이다.
callback 함수로 입력되는 파라미터 중 원하는 파라미터들만 받아서 사용가능하기 때문에, 모두 받거나 하나만 받아서 사용할 수도 있다.
callback 함수는 ES6문법인 화살표(arrow, =>)를 사용해서 축양된 형태로 사용이 가능하다.
앞에서 작성된 예시코드의 forEach 키워드를 모두 map 키워드로 변경해도 그대로 동작한다.
callback 함수의 형태는 forEach 키워드를 사용할 경우 반환(return)을 하지 못하고, map 키워드를 사용할 경우 반환(return)을 한다.

array.map() sample code

// ...array_map.js
let array = [ "j1", "j2" ];

// 값을 반환하지만 아무도 받지 않으므로 요소값을 그대로 출력
array.map(ele => {
    return ele.concat('-check');
});
array.map(ele => console.log(`${ele} 출력`));

// 값을 반환하고 자신에게 대입했으므로 요소값이 변경되서 출력
array = array.map(ele => {
    return ele.concat('-check');
});
array.map(ele => console.log(`${ele} 출력`));

// result
j1 출력
j2 출력
j1-check 출력
j2-check 출력

react - react.js 프로젝트 만들기

Joker2 — Sun, 15 Mar 2020 23:28:15 +0900

react.js 프로젝트 만들기

react.js를 개발을 처음부터 공부하는 입장에서 시작을 한다면, 처음에는 헷갈리지만 나중에 별 것 아닌 부분이 개발환경 세팅하는 부분이다. 본 포스팅에서는 react.js 환경을 세팅하는 방법 중 하나를 설명한다. 아래처럼 react.js를 위한 기본 프로젝트를 만든 후, component, action, redux, redux-saga 등을 사용해서 구조를 하나씩 잡아가면서 개발을 하면 된다. 거의 모든 세팅과정이 터미널 위에서 명령(command)들을 사용해서 설명했기 때문에, 아래에서 설명할 때 사용하고 있는 IDE인 IntelliJ가 아니라 Visual Studio Code 등의 다른 것을 사용하는 것도 어렵지 않을 것이라고 생각한다.

개발환경

OS : macOS

IDE : IntelliJ

개발순서

nvm 설치
NodeJS 설치
yarn 설치 (option)
ReactJS 설치
ReactJS 프로젝트 생성
ReactJS 프로젝트 실행

개발순서 따라하기

1. nvm 설치 (참고, 링크)

// 1. 설치
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

// 2. 환경변수 NVM_DIR 추가
$ vi ~/.bash_profile

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

// 3. 환경변수 적용
$ source ~/.bash_profile

// 4. 설치 확인
$ nvm ls

2. NodeJS 설치

// 1. 최신 버전 NodeJS 설치
$ nvm install node

// 2. 설치 확인
$ nvm ls

// advanced
// 1. 원하는 버전 NodeJS 설치
$ nvm install 10.16.3

// 2. 설치 확인
$ nvm ls

// 3. 원하는 버전 NodeJS로 설정
$ nvm use 10.16.3

// 4. 설정된 NodeJS 버전 확인
$ node --version

3. yarn 설치 (option)

// 1. yarn 설치 
$ brew install yarn

// 2. 설치 확인
$ yarn --version

참고, npm install 로 설치하면 직접 터미널을 열어서 yarn이 잘 작동되지만, Intellij에서 터미널을 열어서 yarn을 실행하면 "zsh: command not found: yarn" 에러가 발생하면서 작동이 안되는 상황에 마주하면서 추가적인 환경설정이 필요하게 되는데, 이러한 과정이 번거로우니 작성자는 yarn 설치는 npm이 아닌 brew로 설치했다.

참고, 현재 포스팅에서 설명할 때는 yarn을 사용했지만, (yarn 이전에 설치되는) npm을 사용해도 상관없다. 다만, 사람들이 yarn을 많이 사용하고, 보통 프로그램을 혼자 개발하는 것이 아니기에 이를 따라줘야 하기도 하고, npm보다 yarn이 장점들이 많기 때문에 이를 사용하기 위해 yarn을 사용한 것 뿐이다. 만약, 현재 ReactJS를 공부하는 입장에서 yarn때문에 더 혼란스럽다면, yarn을 설치하지 않고 npm만을 사용해도 상관이 없다.

4. ReactJS 설치

// 1. (CLI 형태) ReactJS 설치
$ npm install -g create-react-app

// 2. 설치 확인
$ npm ls -g | grep create-react-app

5. ReactJS 프로젝트 생성

// 1. ReactJS 프로젝트 생성
$ npx create-react-app joker

// 2. 설치 확인
$ ls

6. ReactJS 프로젝트 실행

[실행 방법 1] 인텔리제이(Intellij) 사용

ReactJS 프로젝트 열기
1. IntelliJ 실행 > "Open" 버튼 > "joker" 프로젝트 클릭 > "Open"
ReactJS 프로젝트 yarn 설정
1. IntelliJ 상단 메뉴 > Preferences > Languages & Frameworks > Node.js and NPM
2. Node interpreter : "node" => "~/.nvm/versions/node/v10.16.3/bin/node" 으로 변경 (그림1 yarn 설정 전, 그림2 yarn 설정 후 참고)
3. "OK" 버튼
ReactJS 프로젝트 run 설정
1. IntelliJ 상단 메뉴 > Run > Edit Configuration > 왼쪽 상단의 "+" 클릭 > npm 선택
2. Scripts : "" => "start" 으로 변경 (그림3 script 설정 전, 그림4 script 설정 후 참고)
3. "OK" 버튼
ReactJS 프로젝트 run 실행
1. [ 방법1 ] IntelliJ 상단의 녹색 "▶" 버튼 (그림5 최종 출력화면 참고)
2. [ 방법2 ] IntelliJ 하단의 터미널(Terminal) 에서 "yarn start" or "npm start" 명령문 실행

[실행 방법 2] 터미널(terminal) 사용

터미널 실행
"yarn start" or "npm start" 명령문 실행

[그림1 yarn 설정 전]

[그림2 yarn 설정 후]

[그림3 script 설정 전]

[그림4 script 설정 후]

[그림5 최종 출력화면]

Rustup not available

Joker2 — Thu, 12 Mar 2020 02:47:51 +0900

에러 (error)

Couldn't start client Rust Language Server

Source: Rust (rls) (Extension)

Rustup not available. Install from https://www.rustup.rs/

Source: Rust (rls) (Extension)

[ Error Popup ]

환경 (environment)

OS : macOS Catalina 10.15.3

IDE : vsCode (Visual Studio Code) 1.42.1 / extension : CodeLLDB, Rust (rls)

Build : cargo

Language : rust / ructc : 1.41.1, rustup : 1.21.1

참고, Rustc, Rustup 버전 확인

$ rustc --version
$ rustup --verison

상황 (situation)

개발된 Rust 프로젝트를 디버깅하기 위해 F5를 눌러서 디버깅을 시도하는데 에러가 발생했다. 두 팝업을 그대로 해석하면 extension 중에 Rust (rls)에 의해 실행되는 Rust Language Server라는 프로그램을 실행할 수 없다는 에러와 Rustup을 사용할 수 없다는 내용이다. 참고로, 현재 rust를 설치하면서 rust 관련된 환경변수들은 자동으로 세팅되어 있고, rust를 설치할 때 함께 설치된 rustc나 rustup 등의 rust 관련 프로그램들은 /Users/joker/.cargo/bin 디렉토리에 모두 위치되어 있다.

참고, $PATH 확인

$ echo $PATH
/Users/joker/.cargo/bin:/User/joker/...(생략)

원인 (cause)

vsCode에 rust를 (디버깅으로) 실행할 때 Rustup을 사용하게 되는데, 이 Rustup 프로그램을 찾지 못하는 상황이므로 vsCode가 찾을 수 있도록 관련된 세팅값을 변경하면 된다.

해결 (solution)

> visual studio code 상단 메뉴 Code 클릭

> Preferences > Settings

> User 탭

> Extensions > Rust configuration

> Rust-client: Rustup Path 내용 변경 > "rustup" ==> "$HOME/.cargo/bin/rustup"

[ (before) 변경 전 ]

[ (after) 변경 후 ]

> F5 (디버깅 재시도)

참고, 위 내용을 변경하면 자동으로 vsCode 프로젝트 내의 settings.json 파일 내용이 자동으로 같이 수정된다.

{
    "rust-client.channel": "stable",
    "rust-client.rustupPath": "$HOME/.cargo/bin/rustup"
}

참고 (reference)

stackoverflow 해결방법

https://github.com/rust-lang/rls-vscode/issues/622#issuecomment-561596264

IntelliJ - 테마 바꾸는 방법

Joker2 — Thu, 5 Mar 2020 02:04:54 +0900

테마 바꾸는 방법

how to change theme of IntellJ

현재 사용 중인 Eclipse, STS4(Spring Tools 4), Xcode, Android Studio 등의 다양한 IDE들을 어두운 다크 모드로 사용 중이라면, IntelliJ 또한 동일하게 다크 모드로 사용하고 싶을 것입니다. IntelliJ도 다른 IDE 처럼 다크 모드를 지원하고 있으므로 아래처럼 설정이 가능합니다.

환경

macOS

순서

1. IntelliJ 열기

2. 화면 상단 탭에서 ..

> IntelliJ IDEA 메뉴 클릭

> Preferences 메뉴 클릭

> Appearance & Behavior 좌측 메뉴 클릭

> Appearance 좌측 메뉴 클릭

> Theme : "Light" -> "Darcula" 변경

> OK 버튼 클릭

[ IntelliJ 테마 설정 화면 ]

Json 데이터 전송하기 (application/json)

Joker2 — Mon, 20 Jan 2020 01:26:36 +0900

Json 데이터 전송하기

(application/x-www-form-urlencoded, application/json)

[ Http Request Header > Content-Type ]

클라이언트에서 서버로 데이터를 전송하려할 때, 데이터를 Json 포멧으로 만들어서 보내는 것이 일반적인 형태 중 하나입니다. 이 글에서는 Json 포멧으로 데이터를 송수신하는 부분을 개발할 때 헷갈릴 수 있는 부분에 대해서 설명하려고 합니다.

헷갈릴 수 있는 부분은 현재 개발 중인 서버에서 Json 포멧으로 데이터를 받도록 잘 개발한 것 같 같은데, 클라이언트에서 아무리 Json 포멧으로 데이터를 만들어서 보내도 안되는 경우가 있습니다. 그런데 어떻게 보내면 가끔은 다시 잘 되는 경우도 있습니다. 만약, 현재 그런 상황에 마주했다면, 그리고 그 이유가 Content-Type 설정값 때문이라면 이 글이 도움이 될 것입니다.

서버에서 Json 포멧으로 데이터를 받도록 개발된 상태에서 개발 중인 클라이언트에서 Http Request Message 안의 Content-Type으로 설정될 수 있을만한 값으로는 application/x-www-form-urlencoded와 application/json가 있습니다. 이 글에서는 두 경우를 나눠서 살펴보려고 합니다.

Content-Type을 application/x-www-form-urlencoded로 설정해서 보내는 경우
Content-Type을 application/json로 설정해서 보내는 경우

현재, Spring Framework를 사용해서 서버측 Rest API를 개발하고, 이 Rest API를 Web Page에서 Ajax를 통해 호출되거나 때로는 Android App에서 호출되어야하는 상황이라고 생각해보죠. 그리고 이 Rest API는 json포멧의 데이터만 받을 수 있도록 하려고 합니다. 이 때, 해당 Rest API가 클라이언트 요청에 대해 정상적으로 응답하는지 테스트하기 위해서, 클라이언트에서 Json 포멧의 데이터를 하나 만들어서 요청해보려고 합니다.

요청에 대해 서버가 정상적으로 응답을 주는지 두가지 방법으로 테스트하려고 합니다. 하나는 개발 중인 Web Page의 javascript(=JQuery)를 사용해서 json 포멧으로 데이터를 만들어서 요청하는 것입니다. 다른 하나는 Android App을 대신해서 클라이언트 툴 중 하나인 PostMan을 사용해서 json 포멧으로 데이터를 만들어서 요청하는 것입니다. 물론, Web Page나 Android App을 대신해서 둘다 PostMan으로 Json 데이터를 만들어서 테스트가 가능하지만, 이해를 돕기 위해 둘로 나누어서 생각해보려는 것입니다.

Content-Type을 application/x-www-form-urlencoded로 설정해서 보내는 경우

이 경우는, 보통 Web Page를 개발할 때, javascript(=JQuery)를 사용해서 Ajax로 서버에 데이터를 요청하는 경우(혹은 HTML Form을 사용해서 요청하는 경우)입니다. 만약에, Content-Type을 따로 기입하지 않으면, 클라이언트에서는 Http Request Header의 Content-Type을 Default값인 application/x-www-form-urlencoded으로 세팅되서 서버로 데이터가 전송됩니다. 이렇게 개발중이라면 현재 서버와 클라이언트 코드는 아래형태로 구성되어 있을 것입니다.

※ (참고) application/x-www-form-urlencoded로 보내는 경우, HTTP Request Message의 Body를 사용해서 데이터를 보내는 것으로, 이 경우 전송되는 데이터의 페이로드 값은 “key=value&key2=value2” 형태를 가질 것입니다. 그리고 서버로 들어온 데이터는 request.getParameterMap()으로 확인 가능합니다.

[Client-Side] PostMan

[ HTTP Request Body : x-www-form-urlencoded ]

(Method) POST
(Url) http://localhost/reg
(Header) Content-Type : application/x-www-form-urlencoded
(Body) x-www-form-urlencoded :
"id":1,
"title":"Harry Potter",
"description":"J. K. Rowling"

[Client-Side] javascript (using JQuery)

$.ajax({
	url: 'http://localhost/reg',
	// contentType을 명시하지 않으면 application/x-www-form-urlencoded; charset=UTF-8으로 세팅된다.
	method: 'POST',
	data: {
		id: 1,
		title: "Harry Potter",
		description: "J. K. Rowling"
	})
});

[Server-Side] Java (using Spring Framework)

@RestController
@RequestMapping("/info")
public class JokerController {
	@RequestMapping(value = {"/reg1"}, method = {RequestMethod.GET, RequestMethod.POST})
	public ResponseMsg reg1(JokerData data) {
		…
	}
}

Content-Type을 application/json로 설정해서 보내는 경우

이 경우는, 보통 Android나 iOS앱을 위한 Rest API를 개발하는 경우입니다. 해당 클라이언트 앱에서 서버에 데이터를 요청할 때, 보통 Http Request Header의 Content-Type을 application/json으로 세팅되서 서버로 데이터가 전송시킵니다. 만약 이렇게 개발중이라면 현재 서버와 클라이언트 코드는 아래형태로 구성되어 있을 것입니다.

※ (참고) application/json으로 보내는 경우, HTTP Request Message의 Payload를 보내는 것으로, 이 경우 전송되는 데이터의 페이로드 값은 예를 들어, {“key”:”value”, “key2”:”value2”} 형태로 대체로 복잡한 오브젝트 형태를 가지는 JSON 객체가 될 수 있습니다. 그리고, 서버로 들어온 데이터는 request.getReader().lines().collect(Collectors.joining())으로 확인 가능합니다.

[Client-Side] PostMan

[ HTTP Request Body : json/application ]

(Method) POST
(Url) http://localhost/reg
(Header) Content-Type : application/json
(Body) raw :
{
	"id":1,
	"title":"Harry Potter",
	"description":"J. K. Rowling"
}

[Client-Side] javascript (using JQuery)

주의 : contentType을 application/json으로 세팅

주의 : JSON.stringify() 메소드를 사용해서 Json 데이터 세팅

$.ajax({
	url: 'http://localhost/reg',
	contentType: 'application/json',
	method: 'POST',
	data: JSON.stringify({
		id: 1,
		title: "Harry Potter",
		description: "J. K. Rowling"
	})
});

[Server-Side] Java (using Spring Framework)

주의 : @RequestBody 어노테이션을 사용 (=HTTP Request Body 부분을 그대로 읽어서 객채로 변환)

@RestController
@RequestMapping("/info")
public class JokerController {
	@RequestMapping(value = {"/reg2"}, method = {RequestMethod.GET, RequestMethod.POST})
	public ResponseMsg reg2(@RequestBody JokerData data) {
		…
	}
}

정리하면, 클라이언트에서 Content-Type을 application/json로 세팅해서 데이터를 송신하고, 서버에서는 @RequestBody를 사용해서 데이터를 받도록 코드를 작성하면 Json 데이터를 송수신할 수 있는 상태가 된다.

eos - 정글넷(Junglenet) 계정 생성하기

Joker2 — Mon, 16 Dec 2019 01:27:00 +0900

EOS 정글넷 계정 생성하기

(how to create an account in Jungle TestNet)

[ EOS Jungle Test Network ]

EOS 정글넷 계정 생성 방법

※ 참고, EOS Jungle Network는 EOS Main Network가 아닌 Test Network 중 하나이다.

요약

1. 정글넷 모니터 사이트#1 접속

2. Create Account (계정 생성) 클릭

3. 정글넷 모니터 사이트#2 접속

4. Search Box에 (생성된 계정) Account 입력

생성 순서

1. 정글넷 모니터 사이트#1 접속

https://monitor.jungletestnet.io/

2. Create Account (계정 생성) 클릭

> Account : 생성할 계정입력

> Owner Public Key : 키 입력

> Active Public Key : 키 입력

> Create 클릭

※ Account에 계정을 입력할 때, 1~5 숫자와 a~z 문자로만 구성된 단어이어야 한다는 제약이 있다. 키는 Owner와 Active 두가지를 입력할 수 있는데, 동일하게 입력해도 다르게 입력해도 상관없다. 참고로, 나중에 Owner나 Active키를 변경시키기 원한다면 그때는 반드시 Owner키가 있어야 한다는 점을 알아두자.

※ 키는 EOS 네트워크에서만 사용가능한 포멧으로 만들어진 것을 사용해야 한다. EOS Public Key 포멧을 제공하는 프로그램이 있거나 이미 사용하고 있는 EOS 키가 있다면 그대로 입력하면 된다. 만약에 작성자처럼 EOS 정글넷을 처음사용하고 키를 만드는 프로그램이 없다면, 온라인으로 EOS 포멧의 키를 만들어주는 사이트 중 하나를 이용해도 된다. (ex, EOSAuthority 에서 제공하는 EOS 키 생성 서비스 : https://eosauthority.com/generate_eos_private_key)

※ Create을 클릭하면, 아래와 같은 메시지가 나오는데, 방금 계정 생성을 요청한 트랜잭션이 실행되긴했지만, EOS (정글넷) 네트워크에서 확인이 되지 않았다는 것을 말해주는 메시지이다. 참고로, 네트워크 전체에 퍼져서 완전한 확인이 되어야만 계정이 네트워크에서 확실히 사용할 수 있다는 것을 알아두자. 그리고 메시지에서 한가지 더 알 수 있는 점은 “junglefaucet”이라는 단어가 반복되는데, 이 단어는 현재 사용자가 만들려는 계정을 생성시키기 위해 사용된 EOS (정글넷) 네트워크 내의 기존 계정 중 하나라는 것을 알 수 있다.

executed transaction: e54c5b1a657d4f8a1681b41a7f78d5f78215ba39e4aca6c5602ab756fe200b5c 336 bytes 1330 us warn 2019-12-15T14:04:52.778 thread-0 main.cpp:482 print_result ] warning: transaction executed locally, but may not be confirmed by the network yet

# eosio <= eosio::newaccount {"creator":"junglefaucet","name":"leeseungwook","owner":{"threshold":1,"keys":[{"key":"EOS7yTteXCUgr... 
# eosio <= eosio::buyrambytes {"payer":"junglefaucet","receiver":"leeseungwook","bytes":4096} 
# eosio.token <= eosio.token::transfer {"from":"junglefaucet","to":"eosio.ram","quantity":"0.4487 EOS","memo":"buy ram"} 
# junglefaucet <= eosio.token::transfer {"from":"junglefaucet","to":"eosio.ram","quantity":"0.4487 EOS","memo":"buy ram"} 
# eosio.ram <= eosio.token::transfer {"from":"junglefaucet","to":"eosio.ram","quantity":"0.4487 EOS","memo":"buy ram"} 
# eosio.token <= eosio.token::transfer {"from":"junglefaucet","to":"eosio.ramfee","quantity":"0.0023 EOS","memo":"ram fee"} 
# junglefaucet <= eosio.token::transfer {"from":"junglefaucet","to":"eosio.ramfee","quantity":"0.0023 EOS","memo":"ram fee"} 
# eosio.ramfee <= eosio.token::transfer {"from":"junglefaucet","to":"eosio.ramfee","quantity":"0.0023 EOS","memo":"ram fee"} 
# eosio.token <= eosio.token::transfer {"from":"eosio.ramfee","to":"eosio.rex","quantity":"0.0023 EOS","memo":"transfer from eosio.ramfee t... 
# eosio.ramfee <= eosio.token::transfer {"from":"eosio.ramfee","to":"eosio.rex","quantity":"0.0023 EOS","memo":"transfer from eosio.ramfee t... 
# eosio.rex <= eosio.token::transfer {"from":"eosio.ramfee","to":"eosio.rex","quantity":"0.0023 EOS","memo":"transfer from eosio.ramfee t... 
# eosio <= eosio::delegatebw {"from":"junglefaucet","receiver":"leeseungwook","stake_net_quantity":"1.0000 EOS","stake_cpu_quanti... 
# eosio.token <= eosio.token::transfer {"from":"junglefaucet","to":"eosio.stake","quantity":"2.0000 EOS","memo":"stake bandwidth"} 
# junglefaucet <= eosio.token::transfer {"from":"junglefaucet","to":"eosio.stake","quantity":"2.0000 EOS","memo":"stake bandwidth"} 
# eosio.stake <= eosio.token::transfer {"from":"junglefaucet","to":"eosio.stake","quantity":"2.0000 EOS","memo":"stake bandwidth"}

3. 정글넷 모니터 사이트#2 접속

https://jungle.bloks.io/

4. Search Box에 (생성된 계정) Account 입력

> Search 클릭

> 생성된 Account 계정 정보 확인

Array와 List 비교

Joker2 — Mon, 9 Dec 2019 22:35:09 +0900

Array와 List 비교

[ Array, List 비교 ]

Array, List 비교

Array : 정적으로 연결된 연속된 공간으로 이루어진 자료구조

"공간 크기를 지정해야 한다."

Array는 여러개의 연속된 공간을 그룹으로 만들어서 관리하는 자료구조이기 때문에 얼마나 사용할지를 미리 선언해두고 사용해야 한다. 이 특징 때문에, 미리 잡아놓은 공간을 쓰지 않을 경우 공간(메모리)가 낭비되는 경우가 발생하기도 한다.

int[] a = new int[3];

List : 동적으로 연결가능한 연속된 공간으로 이루어진 자료구조

"공간 크기를 동적으로 사용한다."

List는 Array와는 다르게 사용할 공간을 미리 선언해줄 필요가 없다. Array와는 다르게 사용하지 않는 공간이 필요없는 구조이다. 이 특징 때문에, 필요할 때마다 공간을 추가하거나 제거하면서 필요하지 않은 공간(메모리)을 낭비하지 않는다.

List<Integer> a = new ArrayList<Integer>();
List<Integer> a = new LinkedList<Integer>();

Array, ArrayList, LinkedList 비교

Array와 ArrayList : 배열 구조이며, 인덱스(index)를 사용하는 자료구조

"인덱스를 사용한다."

Array와 ArrayList는 배열 내의 각 요소의 공간들은 배열을 선언할 때 사용했던 자료형으로 동일한 사이즈의 연속된 공간으로 할당된다. 다시 말해서, 동일한 사이즈의 공간들이 연속되어 있다는 것이다. 배열구조의 이 특징이 인덱스를 사용할 수 있도록 만들어준다. 참고로, Java에서는 ArrayList와 LinkedList가 있는데, 이 중 ArrayList는 Array + List이기 때문에 내부에서는 배열을 사용하고 있어서 인덱스로 접근이 가능한 구조이고, LinkedList는 Linked + List이기 때문에 내부에서 배열을 사용하지 않기 때문에 인덱스로 접근이 불가능한 구조이다.

// Array
int[] a = new int[3];
a[0] = 10;
a[1] = 20;
a[2] = 30;
system.out.println(a[0]);

// ArrayList
List<Integer> a = new ArrayList<Integer>();
a.add(10);
a.add(20);
a.add(30);
system.out.println(a.get(0));

ArrayList와 LinkedList : 데이터 추가, 삭제처리가 다른 자료구조

"데이터 추가, 삭제가 많다면 ArrayList보다는 LinkedList를 사용한다."

ArrayList구조의 변수와 LinkedList구조의 변수에 각각 특정 데이터를 중간에 추가하려고 한다. 이때, ArrayList는 중간에 새로운 데이터를 추가하기 위해, 추가될 위치 뒷부분의 데이터 전체를 한칸씩 뒤로 옮겨야 한다. 반면에, LinkedList는 중간에 새로운 데이터를 추가한다면, 추가될 위치의 바로 앞 데이터의 링크값만 변경시키고 나머지는 그대로 냅두게 된다. 중간의 데이터를 삭제시키는 경우에도 비슷한 상황이 벌어지게 된다. 따라서, 프로그램을 개발할 때, 데이터의 추가와 삭제가 빈번하게 발생하는 처리를 한다면 ArrayList보다는 LinkedList를 사용하는 것이 효율적이다.

참고

ArrayList java code

http://hg.openjdk.java.net/jdk8/jdk8/jdk/file/tip/src/share/classes/java/util/ArrayList.java

LinkedList java code

http://hg.openjdk.java.net/jdk8/jdk8/jdk/file/tip/src/share/classes/java/util/LinkedList.java

Array와 LinkedList 비교

Joker2 — Sun, 1 Dec 2019 14:41:39 +0900

Array와 LinkedList의 비교

c++ 코드 포함

메모리 구조의 차이

Array

Array는 리스트에 포함되는 데이터의 메모리 위치들이 차례로 나열시킨 구조이다. 프로그래밍을 할 때 메모리(=주기억장치, 램, RAM)에 int 자료형을 담을 수 있는 공간 10개를 담은 배열(array)을 선언했다면, 아래 왼쪽 그림처럼 OS는 메모리에 10개의 int 자료형이 연속된 공간을 할당시키게 된다.

만약에, int와 같은 primitive 타입이 아닌, struct를 사용해서 새로운 타입 만들었다면, 이또한 연속된 공간으로 할당된다. 아래 오른쪽 코드처럼 struct 배열로 만들어서 프로그래밍을 하면 메모리에는 Element 구조단위로 10개가 연속된 공간으로 할당된다.

※ primitive type ? 프로그래밍을 할 때 언어에서 지원하는 가장 기본타입을 말하는 것으로 int, float, double, boolean 등이 될 수 있다. 참고로, java 언어에서는 int, double 말고도 이를 대신할 수 있는 Integer, Double 타입이 존재하긴 하지만, 이런 타입은 int와 같은 primitive 타입을 가지고 class화 시켜서 사용되는 타입이라고 해서 Wrapper Type이라고 따로 구분된다.

[ array 메모리 구조 ]

example) int array initialization

#include <iostream>
using namespace std;

int main() {
	int a[10] = {0,};
	return 0;
}

example) struct array initialization

#include <iostream>
using namespace std;

struct Element {
	int data = 0;
	int data2 = 0;
};
int main() {
	Element a[10];
	return 0;
}

LinkedList

LinkedList는 리스트에 포함되는 데이터의 메모리 위치들이 모두 떨어진 구조이다. 프로그래밍을 할 때, Array와 다르게 각 요소의 단위가 int, float 같은 primitive type는 될 수가 없다. 이러한 이유로 LinkedList에서는 int와 같은 primitive type을 사용한 다른 구조(struct or class)를 만들어서 사용하게 된다. 각 구조의 이름은 개발자 마음대로 부르지만 재구성한 구조를 보통 노드(Node)라고 부른다. 이 노드에는 반드시 들어가야하는 값이 있는데, 자기 자신과 동일한 구조의 변수 하나를 가지고 있어야 한다. 이 변수(=첫번째 노드)를 통해서만 다른 노드로 접근이 가능하기 때문이다.

LinkedList는 Array와는 다르게 보통 고정 크기를 가지도록 프로그래밍하지 않는다. 일반적으로 프로그램이 동작하면서 필요할 때마다 필요한 공간을 동적으로 추가시키거나 삭제시킬 수 있도록 프로그래밍 한다. 하지만, 이번 포스팅에서는 Array와의 차이를 이해하는 것이 목적이므로 고정된 크기를 가지는 것처럼 아래코드를 프로그래밍해봤다. 아래 그림처럼 코딩이 되었다면 OS는 메모리에 10개의 Node 자료형의 공간을 할당시키지만, 이 자료형은 메모리에 연속되지 않는다. 이것이 바로 메모리입장에서 Array와의 가장 큰 차이이다.

[ linkedlist 메모리 구조 ]

example) linked list initialization

#include <iostream>
using namespace std;

struct Node {
	Node* next;
	int data;
};
int main()
{
    	/* 10 크기의 링크드리스트 선언 & 초기화 */
	Node* head;
	for(int i=0; i<10; i++) {
		if(i==0)
			head = new Node({NULL, 0});
		else {
			Node* next = new Node({head, 0});
			head = next;
		}
	}
   	return 0;
}

특정 데이터 접근의 차이

Array

Array의 요소로 접근할 때는 인덱스(index)를 사용해서 바로 접근할 수 있다. 아래 코드처럼 10 크기를 가진는 배열의 4번째 요소의 값을 변경시키기 위해 4번째 인덱스로 바로 접근해서 해당 데이터를 수정할 수 있다.

example) int array modification

#include <iostream>
using namespace std;

int main() {
	int a[10] = {0,};
	a[4] = 7;
	return 0;
}

struct 자료형을 가지는 배열의 경우에도, struct 단위로 인덱스가 접근이 가능하다. 아래 코드는 재정의한 struct 구조 안에 있는 요소에 접근하는 코드이다.

example) struct array modification

#include <iostream>
using namespace std;

struct Element {
	int data = 0;
	int data2 = 0;
};
int main() {
	Element a[10];
	a[4].data = 7;
	a[4].data2 = 8;
	return 0;
}

LinkedList

LinkedList는 인덱스를 사용하지 않고, 반복문을 사용해서 각 노드로 접근해야 한다. 앞에서 말했듯이 LinkedList는 리스트의 첫번째 노드값을 통해서만 다른 노드로 접근이 가능하기 때문이다. 참고로, LinkedList에서는 첫번째 노드를 보통 head라고 부른다. 반복문을 사용해야 하기 때문에 Array와는 다르게 아래처럼 for문이나 while문이 등장하게 된다.

example) linked list modification

struct Node {
	Node* next;
	int data;
};
int main()
{
    	/* 10 크기의 링크드리스트 선언 & 초기화 */
	Node* head;
	for(int i=0; i<10; i++) {
		if(i==0)
			head = new Node({NULL, 0});
		else {
			Node* next = new Node({head, 0});
			head = next;
		}
	}

	/* 특정 위치의 노드 데이터를 접근 */
	int i=0;
	for(Node* current=head; current!=NULL; current=current->next) {
		if(i==4) 
			current->data = 7;
		i++;
	}
   	return 0;
}

eos - [config.ini] http-server-address

Joker2 — Thu, 28 Nov 2019 21:33:45 +0900

(config.ini) http-server-address

nodeos에 대한 http 연결허용 범위 설정하기

(config.ini 파일) http-server-address 속성

EOS config.ini 파일에 http-server-address 의 기본값은 127.0.0.1로 설정되어 있다. http-server-address는 EOS Node에 http로 접근할 때 어디까지 허용할지에 대한 주소를 설정하는 속성값이다. 기본값이 127.0.0.1이므로, 이대로 동작된다면 로컬(Local)로부터의 http요청만을 허용하겠다는 의미이다.

기본값으로 설정되어 있는 상태에서 예를 들어, 로컬에 EOS Node를 실행시키고 있다고 가정하자. 그리고 로컬 PC가 현재 속해 있는 네트워크 범위가 10.x.x.x 이고, 로컬 PC에게 할당된 IP가 10.0.0.7이라고 가정하자. 이런 상황이라면 로컬 PC에서는 자신의 PC에 실행시켜놓은 EOS Node에 접근이 가능하지만, 다른 PC에서는 해당 PC로 접근이 불가능하다. 이유는 앞에서 말했듯이 로컬 IP(=127.0.0.1)만을 허용하도록 설정해두었기 때문이다.

만약에, EOS Node 정보를 가져오는 cleos API 중에 get did 명령을 실행하려한다면, 요청 url을 127.0.0.1로 할 때는 응답을 제대로 받을 수 있지만, 로컬 PC에서 요청 url을 자신의 IP인 10.0.0.7로 할 때는 응답을 받을 수 없는 것이다.

로컬 PC에서 cleos 명령 실행

실행 됨
$ cleos --url http://127.0.0.1:8888 get info

실행 안됨
$ cleos --url http://10.0.0.7:8888 get info

다른 PC에서 cleos 명령 실행

실행 안됨
$ cleos --url http://10.0.0.7:8888 get info

앞에서 설명한 상황에서는 다른 PC에서 접속이 안되고 있다. 하지만, 혼자 개발 중이 아니라면 내 로컬에서 실행 중인 EOS Node를 다른 PC에서 접속이 가능하도록 변경해 줄 필요가 있다. 이때 config.ini 파일에 있는 http-server-address값을 0.0.0.0:8888로 변경해주면 로컬 뿐만 아니라 다른 IP까지 모두 활성화시킨다는 의미로 다른 PC의 요청도 받을 수 있게 된다. 따로 변경을 하지 않고 처음 다운받은 그대로의 상태라면 127.0.0.1로 되어 있을 것인데, 이 값을 변경해 주고 다시 EOS Node를 실행시킨다면 외부에서 로컬의 EOS Node로 접근이 가능해지는 상태가 된다.

config.ini 파일 변경 전

# The local IP and port to listen for incoming http connections; set blank to disable. (eosio::http_plugin)
http-server-address = 127.0.0.1:8888

config.ini 파일 변경 후

# The local IP and port to listen for incoming http connections; set blank to disable. (eosio::http_plugin)
http-server-address = 0.0.0.0:8888

로컬에서 EOS Node를 새로 실행시켰다면 앞에서 시도해던 cleos 명령어들을 하나씩 쳐서 요청을 하면, 올바르게 응답이 오는 것을 확인할 수 있을 것이다.

로컬 PC에서 cleos 명령 실행

실행 됨
$ cleos --url http://127.0.0.1:8888 get info

실행 됨
$ cleos --url http://10.0.0.7:8888 get info

다른 PC에서 cleos 명령 실행

실행 됨
$ cleos --url http://10.0.0.7:8888 get info

참고 사이트

https://developers.eos.io/eosio-nodeos/v1.0/docs/configuration-file

윈도우에서 Sourcetree – GitHub 연동 (checkout, clone)

Joker2 — Fri, 22 Nov 2019 01:31:03 +0900

윈도우에서 Sourcetree - GitHub 연동

(checkout, clone)

소스트리(Sourcetree)는 깃허브(GitHub)의 클라이언트 프로그램으로 많이 사용되고 있습니다. 참고로, 소스트리는 윈도우(Windows)버전과 맥OS(macOS)버전 모두 제공하고 있습니다. 소스트리는 일반적으로 깃허브 로그인할 때 사용하는 ID/Password 방식을 사용하지 않고, 이를 대신해서 PublicKey/PrivateKey 방식을 사용하고 있습니다. 따라서, 사용자가 소스트리를 사용할 때는 PublicKey/PrivateKey 방식인 ssh키를 가지고 있어야 합니다. 만약에, ssh키가 없다면 직접 만든 후 그걸 가지고 있어도 됩니다. ssh키는 PublicKey와 PrivateKey가 한쌍으로 이루어져 있는데, 둘 중 PrivateKey는 Sourcetree에 세팅하고, PublicKey는 GitHub에 세팅하면, 그 후부터는 Sourcetree와 GitHub는 서로 가지고 있는 키를 사용해서 안전하게 암호화 통신을 하게 되는 것이죠. 본 포스팅에서는 윈도우 환경에서 Sourcetree를 사용하기 위해 설정을 어떻게 해야하는지를 설명할 것입니다.

환경

OS : Windows 10

GitHub 인증 방법 : ssh 키 사용

GitHub 클라이언트 Tool : Sourcetree

세팅 순서 요약

Sourcetree에 ssh 키 추가하기
GitHub에 ssh 키 추가하기
Sourcetree를 사용해서 GitHub 코드 내려받기

세팅 순서

1. Sourcetree에 ssh 키 추가하기

1) Sourcetree 다운

https://www.sourcetreeapp.com/

2) Sourcetree 사용해서 ssh 키 생성 (참고, 이미 보유 중인 ssh가 있다면 그걸 사용해도 된다)

> C:\Users\joker\AppData\Local\SourceTree\app-3.2.6\tools\putty\puttygen.exe 실행

> "Generate"클릭

> ssh 키 생성이 완료될 때까지 마우스 이동

> "Save public key" 클릭 (추후 잘 보관 필요)

> "Save private key" 클릭 (추후 잘 보관 필요)

3) 생성된 ssh 키를 Sourcetree에 추가

> Sourcetree > 도구 > 옵션

> [일반] 탭

> [SSH 클라이언트 설정] 영역

SSH 키 : private key 선택 (참고, 2번 단계에서 저장시킨 private key 파일을 선택한다)

SSH 클라이언트 : PuTTY/Plink 선택

2. GitHub에 ssh 키 추가하기

[방법1] 계정 메뉴를 통해서 GitHub 에 ssh 키를 추가

> GitHub > 계정 > Settings > SSH and GPG keys

> "New SSH key" 클릭

Title : [사용할 key 닉네임 입력]

Key : ssh-rsa [사용할 public key 입력]

[방법2] 프로젝트 메뉴를 통해서 GitHub 에 ssh 키를 추가

> GitHub > 프로젝트 > Settings > Deploy keys

> "Add deploy key" 클릭

Title : [사용할 key 닉네임 입력]

Key : ssh-rsa [사용할 public key 입력]

> "Add key" 클릭

3. Sourcetree를 사용해서 GitHub 코드 내려받기 (=checkout, clone)

1) Sourcetree 클론

> Sourcetree > Clone

첫번째 칸 : [from - 원격 저장소 경로 입력] (참고, GitHub 프로젝트의 “Clone or download” 버튼 > “Use HTTPS” 버튼을 눌러서 출력된 URL 경로를 복사한다.)

두번째 칸 : [to - 로컬 저장소 경로 입력]

세번째 칸 : [to - 로컬 저장소 폴더 이름 입력]

> "Clone" 클릭

2) 두번째 칸에 입력했던 로컬 저장소에 내려받아졌는지 확인

웹 소켓 통신 (Web Socket)

Joker2 — Sun, 17 Nov 2019 23:53:56 +0900

웹 소켓 통신

(Web Socket)

웹 소켓(Web Socket)은 두 프로그램간의 메시지를 교환하기 위한 통신방법 중 하나입니다. 웹 소켓은 W3C와 IETF에 의해 자리잡은 표준 프로토콜 중 하나이기 때문에, 현재 인터넷을 사용하는 환경에서 특히 많이 사용되고 있습니다. 예를 들면, 크롬(Chrome)이나 엣지(Edge) 등의 웹 브라우저 같은 경우에 웹 소켓 프로토콜을 지원하고 있기 때문에, 웹 브라우저를 통해서 웹 소켓을 사용하려고 한다면, javascript를 사용해서 어렵지 않게 개발할 수 있습니다.

웹 소켓 특징 2가지

1. 양방향 통신(Full-Duplex)

양방향 통신이란 데이터 송수신을 동시에 처리할 수 있는 통신방법을 말하는 것입니다. 웹 소켓은 클라이언트(client)와 서버(server)가 서로에게 원할 때 데이터를 주고 받을 수 있으니 양방향이라고 말할 수 있는 것이죠.

※ 참고로, 양방향 통신이 아닌 단방향 통신은 한쪽으로만 송신이 가능한 방법을 말하는 것입니다.

2. 실시간 네트워킹(Real Time-Networking)

웹 환경(ex, 웹 브라우저)에서 채팅(chatting), 주식(stock), 비디오(video) 데이터 등의 데이터들은 연속된 데이터를 화면에 빠르게 보여주어야 하거나, 여러 단말기(ex, PC, 스마트폰)에 빠르게 데이터를 교환하는 실시간처리가 필요한 부분들이 있습니다. 예를 들어, 요즘 가상화폐들의 변하는 가격들을 웹 사이트에서 실시간으로 볼 수 있는데 이런 서비스를 구현할 때 사용될 수 있는 것이죠.

※ 웹 소켓 특징 중 하나가 실시간 네트워킹인 이유는 웹 소켓이 아닌 다른 비슷한 기술들로는 웹 브라우저 위에서 실시간으로 통신하기가 웹 소켓에 비해 상대적으로 어렵기 때문입니다.

웹 소켓 이전의 비슷한 기술

Polling
Long Polling
Streaming
XML Http Request
Ajax (Asynchronous Javascript + XML)

사실, 웹 소켓이 등장하기 이전에, 웹 소켓의 기능과 동일하게 만들 수 있는 기술들이 있었습니다. 만약에, 웹 소켓의 이해가 부족하거나 웹 소켓을 이용해서 개발하기가 부담스러운 환경이라면, 기존의 기술들인 위 목록에 나와있는 것들 중에서 하나를 골라서 개발을 해도 웹 소켓의 기능을 비슷하게 구현가능 할 것입니다. 본 포스팅에서는 웹 소켓이 가지는 "양방향 통신"과 "실시간 통신"이라는 두가지 특징을 가지고 이전의 다른 기술들보다 조금 더 쉽게 구현할 수 있다는 것만 알아두겠습니다.

※ XML Http Request이나 Ajax의 경우,클라이언트가 서버에게 원할 때 데이터를 보내서 요청하는 것이 목적이기 때문에, 그 반대가 어렵습니다. 서버가 클라이언트에게 원할 때 데이터를 보내는 것은 어렵다는 것이죠.

웹 소켓 동작방법

웹 소켓 Handshaking 메시지 교환

Web Client는 handshake 요청 메시지를 Web Server에게 보낸다.
Web Server는 handshake 응답 메시지를 Web Client에게 보낸다.
Web Client는 data payload frames를 Web Server에게 보낸다.
Web Server는 data payload frames를 Web Client에게 보낸다.
Web Client는 close frame을 Web Server에게 보낸다.
Web Server는 close frame을 Web Client에게 보낸다.

웹 소켓 프로토콜 특징

최초 접속에서만 http 프로토콜 위에서 handshaking을 하기 때문에 http header를 사용한다.
websocket을 위한 별도의 포트는 없으며, 기존 포트(http-80, https-443)를 사용한다.
websocket 프로토콜의 ws는 http기반으로 운영되고, wss는 https기반으로 운영된다.
메시지 (Upgrade:Websocket, Connection:Upgrade)
메시지에 포함될 수있는 교환 가능한 메시지는 텍스트(text)와 바이너리(binary)이다.

웹 소켓 개발

웹 소켓 동작에 대한 이해를 돕기 위해, 실제로 웹 소켓을 사용해서 개발해야하는 경우, 개발환경에 따라 어떻게 사용될 수 있는지를 코드 일부를 추가해봤습니다. 우선 위 그림을 보면, 3개의 클라이언트와 한 개의 서버가 그려져 있습니다. 클라이언트 중 둘(=A와 B)은 javascript 코드를 사용해서 구현된 웹 애플리케이션(Web Application) 형태로 웹브라우저 위에서 동작되고, 다른 하나(=C)는 java 코드를 사용해서 구현된 안드로이드 애플리케이션(Android Appliacation) 형태로 동작되고 있다고 생각해보겠습니다. 이 3개의 클라이언트 애플리케이션는 웹 서버인 D와 웹 소켓을 사용해서 통신이 가능합니다.

웹 클라이언트인 A, B, C는 모두 서버 D와 통신하기 위해 "ws://joker.com/say"로 접속요청을 하고 있는 것을 볼 수 있습니다. 클라이언트는 서버에서 웹소켓을 위해 열어둔 해당 주소로 메시지를 보낼 수 있습니다. 반대로,서버가 접속된 클라이언트의 웹 소켓을 통해 메시지를 보낼 수 있죠. 이렇게 서로 웹 소켓이 연결되어 있다면 이를 통해 서로에게 원할 때 메시지를 보낼 수 있는 양방향 통신을 할 수 있게 되는 것입니다.

1. 클라이언트 코드

클라이언트로 사용할 수 있는 코드 몇 가지를 소개하겠습니다. 웹 소켓은 웹 기반의 기술이다보니 크롬(chrome), 엣지(edge) 등의 유명한 브라우저들은 개발자들이 쉽게 사용할 수 있도록 이미 javascript로 제공해주고 있습니다. 먼저, WebSocket API는 거의 대부분 브라우저들이 제공해주고 있습니다. 하지만,가끔 WebSocket API를 제공하지 않는 브라우저들이 있습니다. 그렇다고 사용자들한테 WebSocket이 있는 브라우저로 가서 사용하라고 할 수는 없겠죠. 그래서 웹 브라우저가 WebSocket을 제공해주지 않는다고 하더라도 앞에서 말한 HTTP Streaming이나 HTTP Long Polling 등의 기술들을 통해 WebSocket과 동일하게 동작하도록 시켜주는 SockJS라는 라이브러리가 있습니다. WebSocket API나 SockJS 모두 인터페이스는 거의 동일하기 때문에 큰 차이없이 사용할 수 있을 것입니다.

웹 브라우저가 아닌 다른 플랫폼인 안드로이드에서도 웹 소켓을 사용할 수 있습니다. WebSocketClient라는 라이브러리를 사용하면 웹 소켓 기능을 어렵지 않게 구현할 수 있습니다. 현재(2019년 10월), java나 android에서 웹 소켓을 위해 기본으로 제공해준는 API가 없기 때문에 직접 구현하거나 어느정도 안정되어 사용할 수 있는 WebSocketClient 라이브러리를 사용하면 됩니다.

코드 : javascript

// 거의 모든 브라우저에서 지원
{
	var uri = "ws://joker.com/say";
	var ws = new WebSocket(uri);
	ws.onopen = function() {
		..
	}
}

코드 : javascript (SockJS)

// SockJS Client 사용
{
	var uri = " ws://joker.com/say";
	var sock = new SockJS(uri);
	sock.onopen = function() {
		..
	};
}

코드 : Java (in Android)

import org.java_websocket.client.WebSocketClient;
{
	Uri uri = new URI("ws://joker.com/say”);
	WebSocketClient ws = new WebSocketClient(uri) {
		public void onOpen(..) {
			..
		}
	}
}

2. 서버 코드

서버는 스프링(springframework)을 사용하는 경우를 예로 들었습니다. 스프링에서는 웹 소켓에 대한 API를 제공해주고 있기 때문에, 스프링 개발 가이드 등의 많은 곳들에서 관련된 예제들을 살펴볼 수 있을 것입니다. 참고로,아래 registerWebSocketHandlers() 내용 중 “(2)”번 라인의 경우 웹 브라우저에서 WebSocket API를 제공하지 않을 경우, SockJS 라이브러리에 정의된 대로 동작하도록 추가시킨 것입니다. 따라서, "(2)"번 라인의 경우 현재 사용되고 있지만 만약에 모든 브라우저가 기본으로 제공된다면 제거를 해도 상관없을 것입니다.

코드 : Java (using Spring Framework)

// import org.springframework.web.socket.WebSocketHandler;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
	private final WebSocketHandlerwsHandler;
	@Override
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		registry.addHandler(new wsHandler(), "/say").setAllowedOrigins("*"); // (1)
		registry.addHandler(new wsHandler(), "/say").setAllowedOrigins("*").withSockJS(); // (2)
	}
}

웹 소켓 보안 고려사항

1. Non browser clients

웹 소켓은 클라이언트를 웹 브라우저를 사용해서 운영될 경우, header의 origin정보를 확인함으로써, 악성 javascript를 걸러낼 수 있습니다. 이 말은 웹 브라우저에서 기존에 사용하고 있던 동일 근원 정책(Same-Origin Policy)을 통해 악성 리소스(resource)로부터 보호할 수 있다는 것입니다.

※ Same-Origin Policy는 웹 브라우저의 페이지에 보여지기 위해 필요한 이미지(ex, jpg, png)나 javascript나 css등을 포함하는 모든 리소스(resource)들은 동일한 사이트로부터 가지고 와야한다는 정책으로 웹 브라우저에서 보안을 위해 만들어둔 기술을 말하는 것입니다.

웹 소켓은 클라이언트를 웹 브라우저가 아닌 다른 곳에서(ex, android, ios, windows) 운영될 경우, 악성 resource(ex, 악성 javascript)로부터 보호를 할 수 없으므로, 클라이언트와 서버는 이를 고려해서 사용해야 합니다. 웹 소켓은 웹 브라우저 위의 웹 페이지를 통해 사용되는 환경에서 운영되는 프로토콜로 만들어진 것이기 때문에, 웹 브라우저가 아닌 다른 클라이언트에서는 Same-Origin Policy와 같은 정책들을 전혀 사용할 수 없는 것이죠.

2. Origin considerations

앞에 1번 고려사항에서 언급했듯이, 웹 소켓은 origin 모델을 사용해서 악성 javascript로부터 보호하고 있습니다. 웹 브라우저에서 Same-Origin Policy을 통해 보호을 하고 있듯이, 웹 서버에서도 origin을 확인해야 하는 로직이 추가되어야 합니다.따라서, 서버에서 모르는 origin으로부터 요청이 들어온다면 "HTTP 403 Forbidden" 에러 상태 코드로 응답을 해서 통신을 못하도록 막아야 합니다.

3. WebSocket Client Authentication

웹 소켓 프로토콜은 핸드셰이킹(handshaking) 단계에서 서버가 클라이언트를 인증하는 특별한 방법을 제시하지 않고 있습니다. 따라서, 클라이언트 인증이 필요한 경우 HTTP 인증이나 TLS 인증 등을 사용해야 합니다.

※ 참고로, TLS 인증의 경우 핸드셰이킹 과정에서 클라이언트와 서버는 서로에게 자신의 인증서(Ceritificate)를 전달하고 이를 검증함으로써, 인증을 할 수 있습니다.

참고

Javascript WebSocket API 설명

https://developer.mozilla.org/ko/docs/Web/API/WebSocket

SockJS API 라이브러리

https://mvnrepository.com/artifact/org.webjars/sockjs-client/0.3.4

WebSocket 프로토콜 RFC 6455

https://tools.ietf.org/html/rfc6455

Error 3080006: Transaction took too long

Joker2 — Thu, 14 Nov 2019 01:26:10 +0900

에러

Error 3080006: Transaction took too long

Error Details :

deadline exceeded

[ 에러 화면 ]

환경

OS : macOS Mojave

IDE : EOS Studio v0.11.0 (CDT v1.6.1 / Node : Local-Single Node)

Blockchain : EOS

상황

아래 cleos 명령을 사용해서 EOS 시스템 컨트랙트인 eosio.system 컨트랙트를 노드에 배포하려고 한다. 참고로, 아래 경로에는 컨트랙트를 빌드해서 .wasm 파일과 .abi 파일이 위치해있다. 이때 "Transaction took too long"이라는 에러 메시지가 출력되면서 트랜잭션 명령이 처리가 되지 않았다.

$ cleos set contract eosio /Users/joker/.eosio/contracts_build/eosio.system/

원인

EOS 노드는 트랜잭션을 처리하는데 필요한 최대(max) 시간을 설정해두고, 이 시간 내에 처리하도록 하고 있다. 그런데, 앞에서 실행시키려는 명령은 해당 시간 내에 처리할 수 없기 때문에 에러가 발생된 것이다. 현재, 위 에러는 "eosio.system" 컨트랙트를 배포할 때 발생했지만, 다른 어떤 특정 트랜잭션(transaction)을 실행할 때도 발생할 수 있는 에러라는 것을 알아두자.

해결

EOS 노드가 트랜잭션을 처리할 수 있는 시간을 충분히 가질 수 있도록 하면 된다. 아래 처럼 몇가지 방법이 있으며, 작성자의 경우 [solved 1] 방법을 사용해서 해결하였다.

[solved 1] config.ini 파일의 "--max-transaction-time" 내용을 수정해서 노드의 트랜잭션 처리시간을 늘린다. 참고로, 특별히 설정값을 변경하지 않았다면 가장 초기값은 30으로 되어 있다. 이 값을 조금 더 여유 있게 1000으로 수정한다.

--max-transaction-time=1000

[solved 2] 노드를 수정하지 않고, 트랜잭션을 실행시킬 때 -x 옵션을 사용해서 만료까지 걸리는 시간을 늘린다.

$ cleos set contract eosio /Users/joker/.eosio/contracts_build/eosio.system/ -x 1000

[solved 3] 시스템 계정인 eosio 계정으로 직접 실행시킨다.

$ cleos set contract eosio /Users/joker/.eosio/contracts_build/eosio.system/ -p eosio

참고

Stack Overflow

https://github.com/EOSIO/eos/issues/3150

EOS Developer

https://developers.eos.io/eosio-cleos/reference#cleos-set-contract

GitLab - 소스 이동 (SourceTree 사용)

Joker2 — Sat, 2 Nov 2019 13:57:03 +0900

GitLab - 소스 이동 (SourceTree 사용)

기존에 사용 중인 GitLab 서버에서 새롭게 구축된 GitLab으로 소스를 이동시키려고 합니다. 이때 소스를 이동시키는 것뿐만 아니라 GitLab에서 Commit, Push, Branch 등의 작업들을 하면서 기존의 GitLab 서버에 기록되어 있는 히스토리(History)까지 전부 이동 시킬 수 있습니다. 이동시키는 방법은 많지만, 만약에 작성자처럼 소스트리(SourceTree)를 사용하고 있는 중이라면 아래 방법처럼 클릭 몇번으로 간단하게 이동시킬 수 있습니다.

아래처럼 기존 사용중이던 GitLab 경로와 새롭게 만들어져서 옮겨야 하는 GitLab 경로가 있다고 생각해보겠습니다.

(곧 없어질) 기존 GitLab 경로 : http://10.0.0.5:8099/joker/rank/rank-sdk
(이동시킬) 새로운 GitLab 경로 : http://10.0.0.100:8099/joker/rank/rank-sdk

포스팅에서 설명하는 방법을 적용하기 전에, 현재 상황은 기존에 직접 GitLab 서버를 구축하고 사용하던 도중에, 다른 GitLab 서버로 기존 코드과 기존 작업 히스토리들을 함께 이동시켜주어야 하는 상황입니다. 만약에, 작성자와는 다르게 소스트리를 사용하지 않고 있는 상황이라면 현재 포스팅에서 소개하는 방법이 아닌 다른 방법으로 옮겨야 합니다.

(GitLab 페이지를 사용해서) 새로운 GitLab에 빈 프로젝트 생성
(SourceTree를 사용해서) 기존 GitLab에서 새로운 GitLab으로 이동

1. (GitLab 페이지를 사용해서) 새로운 GitLab에 빈 프로젝트 생성

1. 프로젝트 생성

> "New Proejct" 클릭

2. 프로젝트 이름

> "rank-sdk" 작성 (=새로운 프로젝트 이름)

> "Create Project" 클릭

3. 프로젝트 주소 복사

> "Clone" 클릭

> "Clone with SSH" 클릭

2. (SourceTree를 사용해서) 기존 GitLab에서 새로운 GitLab으로 이동

1. SourceTree에서 기존 사용 중인 프로젝트 열기

2. SourceTree에 새로운 GitLib 프로젝트 주소 추가

> [Settings] 버튼

> [Remotes] 탭

> (기존 GitLab 이름 변경) origin -> old_origin

> (새로운 GitLab 이름 추가) origin (이때, Path에는 앞의 "Clone with SSH"를 클릭해서 복사해둔 새로운 GitLab 주소를 붙여넣기한다.)

> [OK] 버튼

> [Push] 탭

※ 기존 GitLab 이름을 origin에서 old_origin으로 변경하는 이유는 나중에 기존의 GitLab에 다시 접속할 수는 상황이 발생할 수도 있기 때문에 백업용으로 적어두는 것입니다. 만약에, 새로운 GitLab으로 연결이 잘 된 후 기존 GitLab에 접속할 일이 없다면 삭제(Remove)해도 상관없습니다.

3. 새로운 GitLab에 소스 임포트

> "Push to repository" : origin

> develop, master 체크

> OK

※ delveop과 master 모두 체크하는 이유는 기존 gitlab에서 두 브런치의 코드 모두 이동시킴으로써, 새로운 GitLab 서버에는 최신코드를 유지시켜줄 수 있기 때문입니다.

4. 새로운 GitLab에 추가된 것 확인

Xcode - 입력 arguments 넣는 방법

Joker2 — Thu, 24 Oct 2019 23:16:43 +0900

입력 arguments 넣는방법

how to give command line arguments in Xcode

프로그램을 실행할 때 특정 값들을 함께 넣어주고 싶은 경우가 있습니다. 예를 들면, 특정 옵션값(ex, -g, -i, -e 등) 처럼 말이죠. 특히 IDE를 사용해서 디버깅을 할 때 필요할 때가 종종 있을 것입니다. IDE를 Xcode로 사용하는 경우 이 입력값들을 설정할 수 있는 곳이 있습니다.

방법

[Product] > Edit Scheme… 클릭
> Run
> Arguments
> Arguments Passed On Launch 체크
- [+] 를 눌러서 원하는 입력 파라미터들을 하나씩 추가시킵니다.
> 타이틀 바(Title Bar) > [▶] 버튼 혹은 Product > Run으로 프로그램을 실행

※ 위 사진은 프로그램을 실행할 때 총 7개의 arguements를 넣은 것입니다. "-e", "-i", "hello", "--join", "joker", "--join", "batman"으로 넣은 것입니다. 위 사진 처럼, 한칸에 값을 하나씩 적을 수도 있고 옵션값과 함께 특정 값을 띄어쓰기(space)를 사용해도 상관없습니다. 위처럼 arguements를 설정한 후 실행한다면 명령어(command line)으로 프로그램을 아래처럼 실행한 것과 동일한 것입니다.

$ odo -e -i hello --join joker --join batman

참고

개발 중에 "Arguments Passed On Launch" 에 입력된 데이터들은 프로그램이 실행될 때 가장 먼저 호출되는 main 함수를 통해 입력되는 값이기 때문에, 직접 확인할 수도 있습니다.

main(int argc, char** argv) {
	…
}

argc : 입력 파라미터의 개수 (=argument count)
argv : 입력 파라미터의 값 (=argument value)

실행 프로그램 이름이 첫번째 인자로 항상 들어가기 때문에, 입력 파라미터(Arguments)를 아무것도 추가하지 않아도 argc는 항상 1이고, argv[0]은 항상 프로그램이름 값입니다. 만약에 앞의 그림처럼 입력 파리미터가 총 7개라면 프로그램 이름 1개를 포함해서, argc는 총 8이 될 것이고, 입력 파라미터의 가장 첫번째 값은 argv[1]부터 조회가 가능합니다.

Transaction exceeded the current CPU usage limit

Joker2 — Thu, 24 Oct 2019 22:46:24 +0900

에러

Transaction exceeded the current CPU usage limit imposed on the transaction billed CPU time (1045 us) is greater than the maximum billable CPU time for the transaction (608 us)

error 2019-10-24T04:33:15.566 thread-0  http_plugin.cpp:649 handle_exception] 
FC Exception encountered while processing chain.push_transaction 
debug 2019-10-24T04:33:15.566 thread-0  http_plugin.cpp:650 handle_exception]  
Exception Details: 3080004 tx_cpu_usage_exceeded: Transaction exceeded the current CPU usage limit imposed on the transaction billed CPU time (1045 us) is greater than the maximum billable CPU time for the transaction (608 us) 
{"billed":1045,"billable":608} 
thread-0  transaction_context.cpp:519 validate_cpu_usage_to_bill

[ 에러 화면 ]

환경

OS : macOS Mojave
IDE : EOS Studio v0.11.0 (CDT v1.6.1 / Node : Local-Single Node)

Blockchain : EOS

상황

현재, EOS 블록체인 내에 사용자A 계정이 사용가능한 cpu 시간은 (available) 136 us이고, network 대역폭은 (available) 23.36 MiB이다. (아래 사진을 참고) 이때, 사용자A가 어떤 컨트랙트(contracT)의 특정 액션(action)을 수행하려고할 때 위와 같은 에러가 발생했다. 참고로 수행하려는 액션은 토큰 컨트랙트를 사용해서 사용자A 계정의 토큰 일부를 사용자B 계정에게 옮기려고 시도한 것이며, 이때, 에러가 발생했으며 옮기려고 시도한 토큰은 전달되지 않았다.

※ 참고, 아래 사진에서 사용자 A 계정의 리소스(cpu, net)는 직접 스테이킹(stacking)한 것이 아닌 작성자가 보유하고 있는 타 계정으로부터 위임(delegate)받아서 만들어진 것이기 때문에, 리소스가 staked가 아닌 delegated에 출력되고 있는 것이다. 만약 직접 리소스를 위해 스테이킹을 했다면 delegate 외에 stake라는 필드가 하나 더 출력될 것이다.

[ 사용자 A 계정의 리소스 상태 ]

원인

사용자 A 계정이 현재 시도하려고 하는 액션이 필요한 cpu는 1045 us이다. 그런데, 사용자 A 계정이 사용가능한 cpu는 136 us이다. 사용자 A 계정이 사용할 수 있는 크기 이상의 액션을 실행하려고 시도했기 때문에 발생한 것이다.

해결

해결하기 위한 방법은 여러가지가 있을 수 있다. 아래 3가지 방법을 제시했지만, 상황에 따라 소개하지 않은 다른 방법으로 해결할 수도 있다. 현재 테스트 중인 환경이기 때문에 아래의 [방법2]처럼 스테이킹을 추가해서 위 에러가 나오지 않도록 하였다.

방법1.

cpu 시간은 다시 되돌아오기 때문에 일정시간이 지난 후, 사용할 수 있는 cpu가 줄어들면 트랜잭션을 재시도한다.

방법2.

cpu를 추가로 스테이킹(stacking)해서, 사용할 수 있는 cpu양을 늘린다.

방법3.

사용할 수 있는 cpu 보다 낮은 트랜잭션을 만들어서 재시도한다.

참고

(Stack Overflow) 원인
https://github.com/EOSIO/eos/issues/6347
(Stack Overflow) 해결방법
https://eosio.stackexchange.com/questions/1609/how-to-increase-billable-cpu-time

이더리움 토큰 컨트랙트 이벤트 로그 추적하기

Joker2 — Sun, 20 Oct 2019 12:32:14 +0900

이더리움 토큰 컨트랙트 이벤트 로그 추적하기

Contract & Event

본 포스팅은 이더리움(ethereum) 블록체인의 컨트랙트(contract)에서 발생하는 이벤트(event)를 보고, 해당 컨트랙트를 통해 발생된 이벤트 로그들을 보고 특정 행동을 했는지를 확인해보려고 합니다.

참고로, 컨트랙트(contract)란, 개발자들이 블록체인에 계약서의 내용을 프로그래밍으로 작성해서 올려둔 것을 말합니다. 이 프로그래밍된 계약서의 함수가 실행되면 반드시 지켜지게 됩니다. 함수(function or method)란, 컨트랙트에서 호출되는 함수를 말합니다. 컨트랙트마다 함수는 다를 수 있습니다. 토큰 컨트랙트라면 transfer나 lock 같은 토큰을 전송하거나 잠그는 함수들이 있을 것이고, 게임 컨트랙트라면 attack이나 defence 등의 캐릭터를 제어하는 함수들이 있을 것입니다. 물론, 함수 이름은 개발자 마음이기 때문에 이름도 제각각 일 것입니다. 이벤트(event)란, 개발자들이 컨트랙트를 개발할 때 함수들이 호출될 때 블록에 해당 기록을 남김으로써, 나중에 보기 편하게 기록을 찾아볼 수 있도록 삽입하는 것을 말합니다.

목적

이더리움 블록체인 플랫폼에 이미 배포(deploy)된 APIS 토큰 컨트랙트를 통해 이미 처리된 행동(=함수)들 중에서 지갑(wallet)을 잠그는 행위를 했을 때 발생되는 특정 이벤트(=여기서는 "Locked"라는 이름을 가진 이벤트)의 기록을 살펴볼 것입니다. 그리고 이 기록에 어떤 내용들이 기록되어 있는지 확인해보겠습니다.

APIS 토큰 컨트랙트의 내용을 살펴본 결과, 지갑을 잠그는 함수인 walletLock이 호출될 때, 정상적으로 처리되는 경우 Locked라는 이벤트가 발생되도록 프로그래밍되어 있었습니다. 따라서, Locked라는 이벤트 기록을 보면 잠겨진 지갑이나 잠긴 기간 등의 몇가지 정보를 볼 수 있겠죠.

추적 대상

이더리움 (아피스) APIS 토큰 컨트랙트

추적 하기

컨트랙트에서 발생된 내용을 추적하는 방법을 단계별로 나누었습니다. [Step1] 가장 먼저 추적할 컨트랙트 주소를 가지고 있어야 합니다. 자신이 살펴볼 컨트랙트 주소를 가지고 있다면, [Step2] 해당 컨트랙트가 어떤 내용으로 이루어졌는지 내용을 확인할 필요가 있습니다. 참고로, 이때 컨트랙트 내용이 solidity라는 프로그래밍 언어로 작성되어 있기 때문에 개발자가 아닌 일반 사용자는 보기 불편할 수도 있습니다. 이땐 컴퓨터 전공자에게 도움을 요청하면 어느정도 해석이 가능할 것이라고 생각됩니다. [Step3] 컨트랙트의 행동을 볼 때는, 추적하고 싶은 이벤트에 대한 주소가 필요합니다. 이 주소를 검색하면 해당 이벤트가 발생됬던 모든 기록(history)를 볼 수 있기 때문이죠. 마지막으로, [Step4] 검색된 이벤트 기록들 중에 원하는 이벤트를 찾아서 해당 기록을 살펴보면 됩니다.

[Step1] 토큰 컨트랙트 주소 획득
[Step2] 토큰 컨트랙트 내용 확인
[Step3] 토큰 컨트랙트 내의 이벤트 주소 획득
[Step4] 토큰 컨트랙트 내의 이벤트 정보 확인

Step1. APIS 컨트랙트 주소 획득

0x4C0fBE1BB46612915E7967d2C3213cd4d87257AD

※ 작성자는 포스팅 설명을 위해 찾아본 토큰 중 하나입니다. 위 주소가 아닌 현재 실습에 사용하고 싶은 다른 컨트랙트 주소를 가지고 있다면 해당 주소를 사용하면 됩니다. 단, 본 포스팅은 APIS 토큰 컨트랙트를 기준으로 작성되었기 때문에, 다른 컨트랙트를 대상으로 할 경우 폰 포스팅에서 설명하는 방법과 조금 다를 수 있습니다. 컨트랙트마다 내용이 모두 다르기 때문이죠. 따라서, 찾아보려는 컨트랙트에서 발생한 특정 이벤트들을 보기 위해, 현재 포스팅처럼 접근하는 방식만 참고하길 바랍니다.

Step2. APIS 컨트랙트 내용 확인

1. Etherscan 사이트 접속 (=이더리움 블록체인 내의 발생 정보 제공)

https://etherscan.io/

2. APIS 컨트랙트 조회

Search : 0x4C0fBE1BB46612915E7967d2C3213cd4d87257AD

3. APIS 컨트랙트 내용 확인

[Contract] 탭

Contract Source Code : 개발자가 작성한 컨트랙트 코드 내용 (solidity언어로 출력)
Contract ABI : 컨트랙트 interface 내용
Contract Creation Code : 컨트랙트 코드 내용 (Bytecode로 출력)
Contract Creation Code : 컨트랙트 코드 내용 (Opcode로 출력)

4. APIS 컨트랙트 내용 중 Locked 이벤트 내용 확인

4-1. “Locked” 이벤트 확인

Contract Source Code 에서 “event Locked” 검색

/**
* @dev 토큰 지갑의 송금/입금 기능이 제한되었을 때 발생하는 이벤트
* @param target 제한 대상 지갑 주소
* @param timeLockUpEnd 제한이 종료되는 시간(UnixTimestamp)
* @param sendLock 지갑에서의 송금을 제한하는지 여부(true : 제한, false : 해제)
* @param receiveLock 지갑으로의 입금을 제한하는지 여부 (true : 제한, false : 해제)
*/
event Locked (address indexed target, uint timeLockUpEnd, bool sendLock, bool receiveLock);

4-2. “Locked” 이벤트 호출지점 확인

Contract Source Code 에서 “Locked” 검색

/**
* @dev 지갑을 지정된 시간까지 제한시키거나 해제시킨다. 제한 시간이 경과하면 모든 제한이 해제된다.
* @param _targetWallet 제한을 적용할 지갑 주소
* @param _timeLockEnd 제한이 종료되는 시간(UnixTimestamp)
* @param _sendLock (true : 지갑에서 토큰을 출금하는 기능을 제한한다.) (false : 제한을 해제한다)
* @param _receiveLock (true : 지갑으로 토큰을 입금받는 기능을 제한한다.) (false : 제한을 해제한다)
*/
function walletLock(address _targetWallet, uint _timeLockEnd, bool _sendLock, bool _receiveLock) onlyOwner public {
	require(_targetWallet != 0x0);
        
	// If all locks are unlocked, set the _timeLockEnd to zero.
	if(_sendLock == false && _receiveLock == false) {
		_timeLockEnd = 0;
	}
        
	lockedWalletInfo[_targetWallet].timeLockUpEnd = _timeLockEnd;
	lockedWalletInfo[_targetWallet].sendLock = _sendLock;
	lockedWalletInfo[_targetWallet].receiveLock = _receiveLock;
        
	if(_timeLockEnd > 0) {
		Locked(_targetWallet, _timeLockEnd, _sendLock, _receiveLock);
	} else {
		Unlocked(_targetWallet);
	}
}

등록된 APIS 컨트랙트에는 한글로 설명이 아주 잘 되있었기 때문에 컨트랙트 내용을 살펴보는데 어렵지 않았던 것 같습니다. 하지만, 컨트랙트마다 작성된 개발자가 다르기 때문에 설명이 불충분할 수도 있습니다. 만약에, APIS 컨트랙트가 아닌 다른 컨트랙트를 대상으로 살펴볼 때, 개발자가 작성해 놓은 설명으로 내용을 파악하기 힘들다면, 직접 코드를 보고 해석할 필요가 있을 수도 있습니다.

이제, 위 [4-1]을 통해 APIS 컨트랙트에서 “Locked” 이벤트가 발생할 때 어떤 정보들이 로그에 나오는지 찾았고, [4-2]를 통해 “Locked” 이벤트가 컨트랙트에서 어떤 처리할 때 발생되는지 찾아냈고 이 정보들을 바탕으로 발생된 이벤트 로그들을 살펴보겠습니다.

[4-1] 에서 알 수 있는 내용 (="Locked" 이벤트에 출력되는 내용)

target : 잠근(Locked) 지갑에 대한 주소
timeLockUpEnd : 잠금 해제가 종료되는 시간
sendLock : 잠글 때, 해당 지갑에서 돈 인출 기능을 제한할지에 대한 설정여부
receiveLock : 잠글 때, 해당 지갑에 돈 송금 기능을 제한할지에 대한 설정여부

[4-2] 에서 알 수 있는 내용 (="Locked" 이벤트가 발생되는 시점)

walletLock : 지갑을 잠글 때, 잠금 해제 시간이 유효하다면 Locked 이벤트 호출

※ Contract Source Code는 컨트랙트 코드가 출력되는데, 이더리움 블록체인 내의 컨트랙트는 이곳에 작성된 내용대로 동작하게 됩니다. 따라서, 원하는 이벤트를 확인하고 싶다면 이곳에서 발생가능한 이벤트들을 코드에서 찾아야 합니다. Contract Source Code 안에서 찾기 단축키인 “Ctrl+F” 눌러서 “event”를 찾아보면 모두 볼 수 있습니다.

참고로, Contract Source Code에 출력되는 코드가 블록체인 내에 그대로 저장되는 것이 아닙니다. 사람(=프로그램 개발자)가 읽기 쉬운 형태(=solidity)가 아닌, 읽기 어려운 형태(=opcode)로 변경되서 저장됩니다. 따라서, Contract Creation Code(Opcode)를 통해 원하는 이벤트를 찾아낼 수 있지만 쉽지 않습니다. 그래서 본 포스팅에서는 이벤트 주소를 이 코드 안에서 찾아내지 않고, 컨트랙트 내에서 포함된 이벤트 주소들까지 알려주는 사이트인 Bloxy를 사용해서 알아낼 것입니다.

Step3. APIS 컨트랙트 내의 이벤트 주소 획득

1. Bloxy 사이트 접속 (이더리움 블록체인 내의 발생 정보 제공)

https://bloxy.info/

2. APIS 컨트랙트 조회

Search : 0x4C0fBE1BB46612915E7967d2C3213cd4d87257AD

3. APIS 컨트랙트 이벤트 주소 획득

[Smart Contract Events] 탭

※ [Smart Contract Event] 탭에 표시된 이벤트 목록들은 APIS 컨트랙트에서 발생시킨 이벤트 이름과 발생 횟수에 대한 정보입니다. 여기서 원하는 이벤트를 클릭하서 이벤트 주소(=Event Hash)를 가져옵니다. 아래는 Bloxy에서 제공된 APIS 컨트랙트 이벤트들에 대한 주소 정보입니다.

Event name	Event Hash
Transfer	0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef
Locked	0x9a26d7aa8d0b0885c3a5cce1b95072a26bc415306c652f20e7b507c07a3914d5
RejectedPay..	0x77c483e4ff749a73be4f6404c2ecea502a159772ef1cd46e475516a4cdf0eb0d
Approval	0x8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925
Unlock	0x7e6adfec7e3f286831a0200a754127c171a2da564078722cb97704741bbdb0ea
Burn	0xcc16f5dbb4873280815c1ee09dbd06736cffcc184412cf7a71a0fdb75d397ca5

Step4. APIS 컨트랙트 내의 이벤트 로그 확인

1. Etherscan 사이트 접속

https://etherscan.io/

2. APIS 컨트랙트 조회

Search : 0x4C0fBE1BB46612915E7967d2C3213cd4d87257AD

3. APIS 컨트랙트 이벤트(=토픽) 로그 검색

[Events] 탭

Find : 0x9a26d7aa8d0b0885c3a5cce1b95072a26bc415306c652f20e7b507c07a3914d5

이벤트 로그들 중에 확인이 필요한 “Locked” 이벤트(=위 처럼 Locked 이벤트에 해당하는 16진수 주소값)를 검색하면, 해당 이벤트가 발생했을 때의 로그들이 모두 출력됩니다. 출력되는 내용들이 어떤 의미를 가지는지 살펴보겠습니다.

Txn Hash	Method	Event Logs
트랜잭션 해시 트랜잭션이 담긴 블록 번호	함수 주소 함수 이름 (정의된 내용)	이벤트 이름 (정의된 내용) 이벤트 입력값 내용

해당 컨트랙트를 통해서 어떤 일들이 발생했는지는 위 3가지 정보들을 기반으로 살펴볼 수 있습니다. “Locked” 이벤트에 대해서 검색했기 때문에, 해당 이벤트에 대한 목록들이 모두 출력되는 것을 볼 수 있습니다. 참고로, Etherscan에서는 일어난 모든 이벤트는 볼 수 없고, 발생했던 이벤트들 중에 최근것들에 대해서만 볼 수 있도록 제공하고 있습니다.

4. APIS 컨트랙트 이벤트(=토픽) 로그 분석

아래 사진은 Etherscan에서 “Locked” 이벤트의 로그 중 가장 마지막으로 제공된 내용을 캡쳐한 것입니다. (참고, Etherscan에서 제공된 데이터 중 가장 마지막 로그일 뿐 APIS를 통해 처리된 로그 중 가장 마지막은 아닙니다.)

Locked 이벤트 로그 중 하나

아래 표는 위 캡쳐된 정보를 살펴보면 알 수 있는 내용들을 정리한 것입니다. 앞에서 언급했던 것처럼 아래 표에서 Event Log 기록을 보면, APIS 컨트랙트의 지갑을 잠글 때 사용되는 “walletLock” 함수가 처리될 때 발생된 “Locked” 이벤트 정보를 통해 어떤 값들이 사용되었는지 볼 수 있습니다.

잠겨진 지갑의 주소(=target)는 0x8c133a2144b66ac06a12fe5c1a88c460f4dce4aa이고, 잠김 해제시간(timeLockUpEnd)은 1534921200이고, 잠긴 지갑의 돈 인출 제한여부(=sendLock)는 1(=true)이기 때문에 인출 불가능하다는 것이고, 돈을 더 넣을 수 있는지 송금 여부(=receiveLock)는 0(=false)이기 때문에 잠근 지갑에 추가 송금이 가능하다는 것을 알 수 있습니다.

구분	설명
Trx Hash	이더리움 블록체인에서 처리된 트랜잭션 정보 트랜잭션 해시 : 0x8abde45fabab69d5a2431d58f4c9d8d97befdec61f6e603fd15b023bee99fb16 트랜잭션이 담긴 블록 번호 : 6191216
Method	APIS 컨트랙트에서 처리된 함수(=Event를 발생시킨 함수) 함수 주소 : 0x74ccd7cc 함수 정의 : walletLock(address,uint256,bool,bool)
Event Logs	APIS 컨트랙트에서 처리된 함수에서 발생된 이벤트(=메모 로그) 이벤트 정의 : Locked (index_topic_1 address target, uint256 timeLockUpEnd, bool sendLock, bool receiveLock) 입력 값 내용 (address) target : 0x8c133a2144b66ac06a12fe5c1a88c460f4dce4aa (uint256) timeLockUpEnd : 1534921200 (bool) sendLock : 0000000000000000000000000000000000000000000000…1 (bool) receiveLock : 0000000000000000000000000000000000000000000000…0

지갑 잠금 시간인 timeLockUpEnd의 값이 1534921200으로 출력되었지만, 실제로 이 값은 컴퓨터에서 사용되는 UnixTimestamp 포멧의 시간정보입니다. 따라서 사람이 읽을 수 있는 시간 정보로 변환해서 봐야합니다. 변환된 시간값은 “2018년 8월 22일 수요일 오후 4:00:00”이므로, 이 때까지 해당 지갑은 잠겨있었다는 것을 알 수 있습니다. (시간 변환 사이트는 아래 첨부했습니다.)

참고로, 발생된 Locked 이벤트 로그 중에 timeLockUpEnd 시간이 9999999999인 것들이 많이 있는데, 이 시간을 변환하면 “2286년 11월 21일 일요일 오전 2:46:39”이므로, 영원히 잠궈버리겠다는 의미입니다.

APIS라는 처음 들어보는 코인이었는데, 올해(2019년) 초에 상장된 코인이었네요. 아마도 이번 포스팅에 설명하는 컨트랙트는 APIS가 상장하기 전에 사용했던 이더리움 블록체인 플랫폼에 올려둔 토큰 컨트랙트인 것 같습니다.

참고 사이트

Etherscan (이더리움 블록 정보 제공)

https://etherscan.io/

Bloxy (이더리움 블록 정보 제공)

https://bloxy.info/

시간 정보 변환 (UnixTimestamp Converter)

https://www.epochconverter.com/

Gson 사용 방법

Joker2 — Wed, 16 Oct 2019 02:37:16 +0900

Gson 사용방법

com.google.gson.Gson

Gson은 java 에서 json 데이터를 다루기 위해 사용될 수 있는 라이브러리 중 하나입니다. 구글(Google)에서 만들었고, 주로 파싱(Parsing)을 할 때 사용되는 라이브러리입니다. 이 라이브러리를 사용해서 json 문자열을 object로 변경시키거나 반대로, object를 json 문자열로 변경시킬 수 있습니다.

사용시 주의할 점은

object를 String으로 변환할 때, null 값에 대해서 변환 여부를 조절할 수 있다. (=GsonBuilder().serializeNulls() 사용)
object를 String으로 변환할 때, 순서는 보장받지 못한다. (=순서까지 고려해야한다면 다른 방법을 추가로 사용)

Class와 String간의 변환

Class 준비 (변환에 사용될 대상인 샘플 Class)

class Joker {
	public int item1;
	public String item2;
	public String item3;
}

1. Class -> json String

public void toJsonTest() {
	Joker joker = new Joker();
	joker.item1 = 100;
	joker.item2 = null;
	joker.item3 = "hello";
		
	// not include null
	{
		Gson gson = new Gson();
		String json = gson.toJson(joker);
		System.out.println(json);
	}		
		
	// include null
	{
		Gson gson = new GsonBuilder().serializeNulls().create();
		String json = gson.toJson(joker);
		System.out.println(json);
	}
}

출력 결과 :

{"item1":100,"item3":"hello"}

{"item2":null,"item1":100,"item3":"hello"}

2. json String -> Class

public void fromJsonTest() {
	String json = "{\"item1\":100,\"item3\":\"hello\"}";
		
	Gson gson = new Gson();
	Joker joker = gson.fromJson(json, Joker.class);
	System.out.println(joker.item1);
	System.out.println(joker.item2);
	System.out.println(joker.item3);
}

출력 결과 :

100

null

hello

Map과 String간의 변환

1. Map -> json String

public void toJsonTest() {
	Map<String, Object> map = new HashMap<String, Object>(); 
	map.put("item1", 100);
	map.put("item2", null);
	map.put("item3", "hello");
		
	// not include null
	{
		Gson gson = new Gson();
		String json = gson.toJson(map);
		System.out.println(json);
	}		
		
	// include null
	{
		Gson gson = new GsonBuilder().serializeNulls().create();
		String json = gson.toJson(map);
		System.out.println(json);
	}
}

출력 결과 :

{"item1":100,"item3":"hello"}

{"item1":100,"item2":null,"item3":"hello"}

2. json String -> Map

public void fromJsonTest() {
	String json = "{\"item1\":100,\"item3\":\"hello\"}";
		
	Gson gson = new Gson();
	Type listType = new TypeToken<HashMap<String, Object>>(){}.getType();
	Map<String, Object> joker = gson.fromJson(json, listType);
	System.out.println(joker.get("item1"));
	System.out.println(joker.get("item2"));
	System.out.println(joker.get("item3"));
}

출력 결과 :

100.0

null

hello

참고 사이트

Google Gson 깃 허브

https://github.com/google/gson

Gson 사용 가이드

https://sites.google.com/site/gson/gson-user-guide

android - Fragment

Joker2 — Mon, 14 Oct 2019 00:56:37 +0900

Fragment

concept, life cycle

[ Fragment Concept ]

Fragment는 스마트폰(Smart Phone)이 아닌, 스마트폰 보다는 조금 더 큰 탭이나 태블릿의 화면을 좀 더 효율적으로 사용하기 위해 등장한 안드로이드 API 중 하나입니다. 태블릿이 활성화되기 전에 스마트폰만 사용할 때는 Activity만으로 화면제어가 충분했지만, 갤럭시 노트(Galaxy Note)나 갤럭시 탭(Galaxy Tab)처럼 화면이 큰 디바이스들이 등장하면서 Activity 하나로는 화면의 UI를 제어하기가 불편해진 것이죠. 그래서 Android는 하나의 화면 단위인 Activity를 조금씩 쪼개서 부분별로 제어를 가능하게 할 수 있는 Fragment를 제공하기 시작했습니다.

처음에는 Fragment가 태블릿같은 큰 화면 내에서 부분별로 나뉘어서 UI를 제어하기 위해 제공된 것이지만, 스마트폰에서는 작은 화면을 더 작게 나뉘기에는 효율적이기 않았기 때문에 조금 다른 방식으로 사용됬습니다. 화면을 여러 개로 만들고 이들을 겹쳐서 사용하는 식이었습니다. 그래서 현재, 스마트폰에서 Fragment를 사용하는 경우 탭(Tab)으로 사용되는 경우가 많습니다. 예를 들면, 카카오톡(Kakao Talk)의 UI가 탭으로 생긴 것처럼 말이죠.

앞 설명처럼 Fragment는 Activity를 부분적으로 나뉘어서 만들어진 것이기 때문에, Fragment는 Activity에 의존적일 수 밖에 없습니다. 그래서 Fragment는 Activity가 존재해야만 존재할 수 있고, Fragment의 생명주기(Life Cycle) 또한 Activity의 생명주기에 의존적이게 되는 것입니다.

만약, 웹(Web)을 개발해본 경험이 있다면, 웹의 화면을 부분적으로 나누기 위해 <frame>이나 <div> 태그를 사용해본 경험이 있을 것입니다. 예를 들어, 웹 사이트를 만들 때 화면의 일부분은 광고, 일부분은 뉴스, 일부분은 쇼핑목록 등으로 출력시켜야하는 경우 사용할 수 있을 것입니다. 웹에서 이렇게 사용되는 HTML의 <frame>이나 <div> 태그가 태블릿에서의 Fragment 역할을 하는 것이고, HTML 태그 속성 중 화면에서 사라지게 만드는 “display” 속성이 스마트폰에서의 Fragment 역할을 하는 것이라고 말할 수 있습니다.

Fragment Life Cycle (생명주기)

[ Fragment Life Cycle]

Fragment가 보여지기까지 호출되는 함수 순서

onAttach() : Fragment가 Activity에 붙을 때 호출
onCreate() : Fragment가 생성될 때 호출 (=UI 작업 불가능)
onCreateView() : Fragment의 UI를 그리기 위한 View가 생성될 때 호출
onActivityCreated() : 보통 잘 사용하지 않는다. (ListFragment를 활용할 때 주로 사용)
onStart() : Fragment가 화면에 표시될 때 호출 (=사용자 상호작용 불가능)
onResume() : Fragment의 포커스가 잡힐 때 호출 (=사용자 상호작용 가능)

Fragment가 가려지기까지 호출되는 함수 순서

onPause() : Fragment의 포커스가 없어질 때 호출
onStop() : Fragment가 화면에서 사라질 때 호출
onDestroyView() : Fragment의 View가 제거될 때 호출
onDestroy() : Fragment가 제거될 때 호출
onDetach() : Fragment가 Activity에서 떼어질 때 호출

Fragment Sample Code (기본 구성)

[ Fragment 구성 ]

아래는 스마트폰위에서 Fragment를 사용해서 개발하는 경우 사용될 수 있는 기본 구성 중 하나입니다. 설명하는 코드는 총 4개의 파일로 구성되어 있습니다. 우선, 하나의 Activity 만든 후, 그 안에 하나의 Fragment 를 만드는 코드입니다.

MainActivity.java (=Activity)
activity_main.xml (=Activity 레이아웃)
MainFragment.java (=Fragment)
fragment_main.xml (=Fragment 레이아웃)

MainActivity.java

package com.joker;

public class MainActivity extends AppCompatActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

activity_main.xml

<RelativeLayout ...>
	<fragment
	class="com.joker.MainFragment"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:layout="@layout/fragment_main"
	... />
</RelativeLayout>

MainFragment.java

package com.joker;

public class MainFragment extends Fragment {
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		View v = inflater.inflate(R.layout.fragment_main.xml, container, false);
		return v;
	}

	@Override
	public void onViewCreated(View view, Bundle savedInstanceState) {
		super.onViewCreated(view, savedInstanceState);
	}

	@Override
	public void onAttach(Activity activity) {
		super.onAttach(activity);
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
	}

	@Override
	public void onDestroy() {
		super.onDestroy();
	}

	@Override
	public void onDestroyView() {
		super.onDestroyView();
	}

	@Override
	public void onDetach() {
		super.onDetach();
	}

	@Override
	public void onPause() {
		super.onPause();
	}

	@Override
	public void onResume() {
		super.onResume();
	}

	@Override
	public void onStart() {
		super.onStart();
	}

	@Override
	public void onStop() {
		super.onStop();
	}
}

fragment_main.xml

<LinearLayout ...>
</LinearLayout>

참고

(Android Developer) Fragment 설명

https://developer.android.com/guide/components/fragments

STD Exception encountered while processing chain.get_code

Joker2 — Mon, 30 Sep 2019 21:55:22 +0900

에러

STD Exception encountered while processing chain.get_code

[ 에러 로그 ]

에러 상세

STD Exception encountered while processing chain.get_code
Exception Details: unknown key (eosio::chain::name: joker)

환경

OS : Mac OS

Blockchain : EOS

IDE : EOS Studio / EOSIO v1.7.3

상황

터미널(Terminal)을 사용해서 EOS 노드에서 제공하는 RPC API(Chain API)의 get_code를 curl로 실행했더니 위와 같은 에러로그가 출력되었다. 현재 작성자는 EOS Studio를 통해 노드 하나를 띄워놓고, get_code API를 통해 "joker"라는 컨트랙트(Contract)의 내용을 조회하려고 시도한 것이다.

curl --request POST   
--url http://localhost:8888/v1/chain/get_code   
--header 'accept: application/json'   
--header 'content-type: application/json'   
--data '{"account_name":"joker","code_as_wasm":1}'

원인

컨트랙트(Contract)를 배포하지 않았는데, get_code API로 조회를 시도했기 때문에 발생한 에러이다. 현재 작성자는 EOS Studio를 통해 로컬에 설치(install)된 노드로 몇가지 테스트를 위해 수시로 지웠다가 다시 설치하는 과정을 반복하고 있었다. 현재 작성자가 시도하고 있는 get_code 라는 API는 EOS 노드에 배포된 컨트랙트를 조회하고 해당 내용을 반환해준다. 그런데, 실수로 노드를 재설치한 후에 컨트랙트를 배포하지 않고 계속시도를 한 것이다.

다시 말해서, 위 curl 명령을 보면 "joker"라는 컨트랙트를 조회하고 있지만, 실제 로컬에서 운영중인 EOS 노드에는 "joker"라는 컨트랙트를 아직 배포하지 않았던 것이다.

해결

컨트랙트를 배포한 후, get_code API를 다시 시도하면 정상적으로 조회된다. 작성자는 get_code를 실행할 때 STD Exception encountered while processing 에러가 발생했지만, 다른 RPC API를 사용하는 경우에 만약에 해당 컨트랙트가 배포되지 않은 상태라면, 위와 같은 에러가 발생할 수 있으니 알아두자.

참고

EOS Developer > get_code

https://developers.eos.io/eosio-nodeos/reference#get_code-1

repackage failed: Unable to find main class

Joker2 — Sat, 28 Sep 2019 02:16:07 +0900

에러

repackage failed: Unable to find main class

에러 상세

[ERROR] Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:2.1.8.RELEASE:repackage (repackage) on project OmniOneData: Execution repackage of goal org.springframework.boot:spring-boot-maven-plugin:2.1.8.RELEASE:repackage failed: Unable to find main class -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/PluginExecutionException

환경

OS : macOS Mojave
IDE : Eclipse
Build : Maven

JDK : 1.8

상황

java 프로젝트를 jar로 빌드하려는데, 위와 같은 에러가 발생했다. 참고로, 위 에러는 환경에 따라 발생할 수도 않할 수도 있다. 현재 프로젝트는 처음부터 개발하던 것이 아닌, 외부에서 미리 개발된 프로젝트를 가져와서 작성자의 PC에서 빌드하려고 시도한 것이다. 기존 외부에서 개발되던 PC 환경에서는 빌드가 정상적으로 됬지만, 글쓴이의 PC로 가져와서는 위 에러와 함께 빌드를 실패한 것이다.

pom.xml

<project>
…
<properties>
	<java.version>1.8</java.version>
</properties>
<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
		</plugin>
	</plugins>
</build>
</project>

원인

Spring Boot의 “spring-boot-maven-plugin” 플러그인(Plug-In)을 잘못사용해서 발생한 에러이다. 이 플러그인은 실행가능한 jar (executable or runnable jar)파일을 만들려고 시도하는 경우에 해당 jar를 생성하기 위한 java 소스(source)파일들 중에 메인(main)함수가 존재하지 않는 경우에 발생하는 것이다.

해결

위 에러를 해결하기 위해 찾은 몇가지 방법들을 소개한다. 아래 소개된 방법들 중에 개발중인 프로젝트 환경의 상황에 맞는 방법을 사용하면 된다. 참고로, 글쓴이는 위 에러를 없애기 위한 아래 방법들을 하나씩 적용해서 모두 확인을 해봤고, 아래 방법 중 [방법4]를 사용해서 에러를 해결하였다.

[방법1] main 이 존재하는 파일을 생성한다. (main() 함수 추가)
[방법2] jar를 실행하기 위한 클래스를 별도로 지정한다. (<start-class> 사용)
[방법3] jar를 실행하기 위한 클래스를 별도로 지정한다. (<configuration> 사용)
[방법4] main 클래스가 없더라도 무시하고 빌드시킨다. (<configuration> 사용)
[방법5] 부모, 자식관계를 사용해서 빌드시킨다. (<pluginManagement> 사용)

[방법1] main 이 존재하는 파일을 생성한다. (main() 함수 추가)

jar에 포함시키는 java 파일 중 하나를 생성한다. (새로 생성하지 않고 기존 java 파일을 사용해도 상관없다.)
main() 함수를 작성한다.
다시 빌드한다. (=Maven Install)

Joker.java (예시)

public class Joker {
	public static void main(String[] args) {
		…		
	}
}

[방법2] jar를 실행하기 위한 클래스를 별도로 지정한다. (<start-class> 사용)

pom.xml 파일의 <properties>안에 <start-class>를 추가한다.
<start-class> 안에 main() 함수가 포함된 클래스를 작성한다. (이때, 반드시 jar 내에 포함되어 있을 필요는 없기 때문에, 아래 예시처럼 패키지 이름만 적어도 된다.)
다시 빌드한다. (=Maven Install)

pom.xml

<project>
…
<properties>
	<java.version>1.8</java.version>
	<start-class>joker.package.main</start-class>
</properties>
<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
		</plugin>
	</plugins>
</build>
</project>

[방법3] jar를 실행하기 위한 클래스를 별도로 지정한다. (<configuration> 사용)

pom.xml 파일의 <plugin>안에 <configuration>을 추가한다.
<configuration> 안에 <mainClass>를 추가한다.
<mainClass> 안에 main() 함수가 포함된 클래스를 작성한다.
다시 빌드한다. (=Maven Install)

pom.xml

<project>
…
<properties>
	<java.version>1.8</java.version>
</properties>
<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
			<configuration>
		            <mainClass>joker.package</mainClass> 
		        </configuration>
		</plugin>
	</plugins>
</build>
</project>

[방법4] main 클래스가 없더라도 무시하고 빌드시킨다. (<configuration> 사용)

pom.xml 파일의 <plugin>안에 <configuration>을 추가한다.
<configuration> 안에 <skip>을 추가한다.
<skip> 안에 true를 작성한다.
다시 빌드한다. (=Maven Install)

pom.xml

<project>
…
<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
			<configuration>
				<skip>true</skip>
			</configuration>
		</plugin>
	</plugins>
</build>
</project>

[방법5] 부모, 자식 관계를 사용해서 빌드시킨다. (<pluginManagement> 사용)

pom.xml 파일의 <build>안에 <pluginManagement>를 추가한다.
다시 빌드한다. (=Maven Install)

pom.xml

<project>
…
<build>
	<pluginManagement>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</pluginManagement>
</build>
</project>

참고

stack overflow 해결방법

https://stackoverflow.com/questions/42937577/unable-to-find-main-class-with-maven-on-spring-boot-project-in-eclipse

Failed to bind properties under 'spring.datasource.type' to java.lang.Class<javax.sql.DataSource>

Joker2 — Wed, 25 Sep 2019 02:15:44 +0900

에러

Failed to bind properties under 'spring.datasource.type' to java.lang.Class<javax.sql.DataSource>

[ 에러 화면 ]

에러 상세

Description:

Failed to bind properties under 'spring.datasource.type' to java.lang.Class<javax.sql.DataSource>:

    Property: spring.datasource.type
    Value: org.apache.tomcat.jdbc.pool.DataSource
    Origin: class path resource [application.properties]:1:24
    Reason: No converter found capable of converting from type [java.lang.String] to type [java.lang.Class<javax.sql.DataSource>]

Action:

Update your application's configuration

개발 환경

OS : Windows 10

IDE : Eclipse

Framework : Spring Boot 2.1.6

Java : JDK 1.8

상황

Spring Boot 를 사용해서 DB를 설정한 후 실행을 하자마자 바로 Failed to bind properties under 'spring.datasource.type' to java.lang.Class<javax.sql.DataSource> 에러라는 발생했고, 서버를 구동하는 것을 실패했습니다. 현재 에러가 발생하는 상황에서 pom.xml과 applicaiton.properties의 내용은 아래와 같습니다.

pom.xml

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

application.properties

spring.datasource.type=org.apache.tomcat.jdbc.pool.DataSource

원인

데이터베이스 커넥션 풀(Database Connection Pool)의 설정이 잘못되서 발생한 에러입니다. 이 에러의 원인을 파악하기 전에 커넥션 풀에 대한 개념을 알아두는 것이 좋습니다. 커넥션 풀이란, 애플리케이션(Application)과 데이터베이스(Database)를 효과적으로 연동되도록 제공하는 것입니다.

애플리케이션이 데이터베이스를 읽고(Read), 쓰는(Write) 작업을 할 때마다, 매번 DB에 "연결-작업-연결해제"를 반복할 것입니다. 만약에, 애플리케이션이 데이터베이스에서 정말로 해야하는 작업(ex, Insert, Upate 등)들만 수행하고, 연결과 연결 해제 등의 불필요한 반복작업들을 줄인다면 둘 사이에서 처리되어야 하는 작업의 속도는 빨라질 것입니다. 이러한 이유로, 대부분은 아래 그림처럼 애플리케이션과 DB 사이에 하나의 풀(Pool)을 두고, 둘을 연결(Connection)짓는 객체들을 여러개 미리 만들어 놓는 구조를 사용하고 있습니다.

[ App과 DB간의 커넥션 풀 ]

위 그림의 중간에 그려진 커넥션 풀(Connection Pool)을 제공하고 있는 라이브러리로는 (Apache) Commons DBCP, Tomcat-JDBC, BoneCP, HikariCP 등이 있습니다. 그리고, Spring Framework로 개발하 때는, 이 라이브러리들 중에 무엇을 사용할지 설정을 해야합니다. 이번 포스팅에서 발생한 에러는 바로 이 라이브러리의 설정이 제대로 되지않았던 것이기 때문에, 이 설정을 바로 잡으면 됩니다.

위 에러가 발생한 원인은, 커넥션 풀을 제공하는 라이브러로 Spring에서 기본제공하는 HikariCP가 아닌 Commons CBCP를 사용하기 위해 application.properties에 spring.datasource.type을 "org.apache.tomcat.jdbc.pool.DataSource"로 설정했지만 실행할 때 해당 패키지를 찾을 수 없기 때문에 발생한 에러이다.

해결

위 에러를 해결하기 위해 글쓴이가 이번에 찾아낸 방법은 두가지를 설명하겠습니다. 하나는 Apahce의 Commons DBCP를 사용하는 방법과 다른 하나는 HikariCP를 사용하는 방법입니다. 만약에 다른 라이브러리를 사용한다면, 이 포스팅에서 설명하는 해결방법처럼 해당 라이브러리를 사용하는 설정부분과 관련된 부분을 다시한번 확인해보면 해결될 것이라고 생각됩니다.

[방법 1] HikariCP를 사용

만약에, "spring-boot-starter-data-jpa" 혹은 "spring-boot-starter-jdbc"를 사용하는 경우, 자동으로 HikariCP가 설정됩니다. 따라서, 이 방법을 사용하는 경우에는 pom.xml에 위 라이브러리를 dependency로 추가하기만 자동으로 HikariCP가 제공하는 커넥션 풀을 사용하게 됩니다. 참고로, 이때는 application.properties에 spring.datasource.type을 추가할 필요가 없습니다.

pom.xml

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

application.properties

#spring.datasource.type 사용하지 않으므로 주석 or 제거

[방법 2] (Apache) Commons DBCP를 사용

만약에, [방법 1]처럼 Spring에서 기본으로 제공하는 커넥션 풀인 HikariCP를 사용하지 않고, (Apach) Commons DBCP를 사용하고 싶을 때는 아래처럼 추가 설정을 해주면 된다. pom.xml에는 Commons DBCP를 제공하는 라이브러리인 "org.apache.tomcat"을 추가해서 프로젝트에서 사용할 수있도록 하고, application.properties에는 spring.datasource.type을 추가해서, Commons DBCP 내에 포함된 커넥션 풀인 "org.apache.tomcat.jdbc.pool.DataSource"로 설정하면 됩니다.

pom.xml

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
	<groupId>org.apache.tomcat</groupId>
	<artifactId>tomcat-jdbc</artifactId>
	<version>9.0.10</version>
</dependency>

application.properties

spring.datasource.type=org.apache.tomcat.jdbc.pool.DataSource

참고

Spring Boot 2.1.6.RELEASE 데이터 커넥션 부분

https://docs.spring.io/spring-boot/docs/2.1.6.RELEASE/reference/htmlsingle/#boot-features-connect-to-production-database

org.h2.jdbc.JdbcSQLNonTransientConnectionException

Joker2 — Mon, 23 Sep 2019 03:27:45 +0900

에러

org.h2.jdbc.JdbcSQLNonTransientConnectionException

[ 에러 화면 ]

에러 상세

org.h2.jdbc.JdbcSQLNonTransientConnectionException: Database is already closed (to disable automatic closing at VM shutdown, add ";DB_CLOSE_ON_EXIT=FALSE" to the db URL) [90121-199]
	at org.h2.message.DbException.getJdbcSQLException(DbException.java:617) ~[h2-1.4.199.jar:1.4.199]
	at org.h2.message.DbException.getJdbcSQLException(DbException.java:427) ~[h2-1.4.199.jar:1.4.199]
	at org.h2.message.DbException.get(DbException.java:205) ~[h2-1.4.199.jar:1.4.199]
	at org.h2.message.DbException.get(DbException.java:181) ~[h2-1.4.199.jar:1.4.199]
	at org.h2.message.DbException.get(DbException.java:170) ~[h2-1.4.199.jar:1.4.199]
	at org.h2.jdbc.JdbcConnection.checkClosed(JdbcConnection.java:1571) ~[h2-1.4.199.jar:1.4.199]
	at org.h2.jdbc.JdbcConnection.checkClosed(JdbcConnection.java:1547) ~[h2-1.4.199.jar:1.4.199]
	at org.h2.jdbc.JdbcConnection.clearWarnings(JdbcConnection.java:708) ~[h2-1.4.199.jar:1.4.199]
	at org.apache.tomcat.jdbc.pool.PooledConnection.clearWarnings(PooledConnection.java:813) ~[tomcat-jdbc-9.0.10.jar:na]
	at org.apache.tomcat.jdbc.pool.ConnectionPool.returnConnection(ConnectionPool.java:937) [tomcat-jdbc-9.0.10.jar:na]
	at org.apache.tomcat.jdbc.pool.ProxyConnection.invoke(ProxyConnection.java:100) [tomcat-jdbc-9.0.10.jar:na]
	at org.apache.tomcat.jdbc.pool.JdbcInterceptor.invoke(JdbcInterceptor.java:108) [tomcat-jdbc-9.0.10.jar:na]
	at org.apache.tomcat.jdbc.pool.interceptor.AbstractCreateStatementInterceptor.invoke(AbstractCreateStatementInterceptor.java:69) [tomcat-jdbc-9.0.10.jar:na]
	at org.apache.tomcat.jdbc.pool.JdbcInterceptor.invoke(JdbcInterceptor.java:108) [tomcat-jdbc-9.0.10.jar:na]
	at org.apache.tomcat.jdbc.pool.DisposableConnectionFacade.invoke(DisposableConnectionFacade.java:81) [tomcat-jdbc-9.0.10.jar:na]
	at com.sun.proxy.$Proxy73.close(Unknown Source) [na:na]
	at org.springframework.boot.devtools.autoconfigure.DevToolsDataSourceAutoConfiguration$NonEmbeddedInMemoryDatabaseShutdownExecutor$InMemoryDatabase.lambda$new$1(DevToolsDataSourceAutoConfiguration.java:140) [spring-boot-devtools-2.1.6.RELEASE.jar:2.1.6.RELEASE]
	at org.springframework.boot.devtools.autoconfigure.DevToolsDataSourceAutoConfiguration$NonEmbeddedInMemoryDatabaseShutdownExecutor$InMemoryDatabase.shutdown(DevToolsDataSourceAutoConfiguration.java:157) [spring-boot-devtools-2.1.6.RELEASE.jar:2.1.6.RELEASE]
	at org.springframework.boot.devtools.autoconfigure.DevToolsDataSourceAutoConfiguration$NonEmbeddedInMemoryDatabaseShutdownExecutor.destroy(DevToolsDataSourceAutoConfiguration.java:103) ~[spring-boot-devtools-2.1.6.RELEASE.jar:2.1.6.RELEASE]
	at org.springframework.beans.factory.support.DisposableBeanAdapter.destroy(DisposableBeanAdapter.java:258) ~[spring-beans-5.1.8.RELEASE.jar:5.1.8.RELEASE]
	at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.destroyBean(DefaultSingletonBeanRegistry.java:571) ~[spring-beans-5.1.8.RELEASE.jar:5.1.8.RELEASE]
	at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.destroySingleton(DefaultSingletonBeanRegistry.java:543) ~[spring-beans-5.1.8.RELEASE.jar:5.1.8.RELEASE]
	at org.springframework.beans.factory.support.DefaultListableBeanFactory.destroySingleton(DefaultListableBeanFactory.java:1036) ~[spring-beans-5.1.8.RELEASE.jar:5.1.8.RELEASE]
	at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.destroySingletons(DefaultSingletonBeanRegistry.java:504) ~[spring-beans-5.1.8.RELEASE.jar:5.1.8.RELEASE]
	at org.springframework.beans.factory.support.DefaultListableBeanFactory.destroySingletons(DefaultListableBeanFactory.java:1029) ~[spring-beans-5.1.8.RELEASE.jar:5.1.8.RELEASE]
	at org.springframework.context.support.AbstractApplicationContext.destroyBeans(AbstractApplicationContext.java:1057) ~[spring-context-5.1.8.RELEASE.jar:5.1.8.RELEASE]
	at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:562) ~[spring-context-5.1.8.RELEASE.jar:5.1.8.RELEASE]
	at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:140) ~[spring-boot-2.1.6.RELEASE.jar:2.1.6.RELEASE]
	at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:742) ~[spring-boot-2.1.6.RELEASE.jar:2.1.6.RELEASE]
	at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:389) ~[spring-boot-2.1.6.RELEASE.jar:2.1.6.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:311) ~[spring-boot-2.1.6.RELEASE.jar:2.1.6.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1213) ~[spring-boot-2.1.6.RELEASE.jar:2.1.6.RELEASE]
	at org.springframework.boot.SpringApplication.run(SpringApplication.java:1202) ~[spring-boot-2.1.6.RELEASE.jar:2.1.6.RELEASE]
	at pt.server.chat.PtServerApplication.main(PtServerApplication.java:12) ~[classes/:na]
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_111]
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_111]
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_111]
	at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_111]
	at org.springframework.boot.devtools.restart.RestartLauncher.run(RestartLauncher.java:49) ~[spring-boot-devtools-2.1.6.RELEASE.jar:2.1.6.RELEASE]

개발환경

IDE : Eclipse Java EE Oxygen.2 Release (4.7.2) Build id : 20171218-0600

OS : Windows10

Server Framework : Spring Boot 2.1.6 release

상황

작성자는 Spring Boot 를 사용해서 개발 중이다. 서버 프로젝트 2개를 병합하는 작업을 하던 중에 위 처럼 JdbcSQLNonTransientConnectionException 라는 에러가 발생했다. 에러가 발생한 정확한 시점은 (Run As > Java Run Application을 클릭해서) Java 서버 프로그램을 실행시키던 도중 런타임(Runtime)으로 발생한 것이다.

이 에러가 발생할 수 있는 상황들이 많이 있었기에, 다양한 해결방법들이 있었다. 하지만 현재 작성자가 처한 상황을 해결할 수있는 방법은 찾을 수 없었기에 포스팅을 한다.

작성자의 pom.xml은 아래와 같다. pom.xml의 정보가 위 에러를 발생시킨 원인과는 전혀 상관이 없지만 참고를 위해 기록한다.

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.6.RELEASE</version>
		<relativePath/>
	</parent>
    
	...
    
	<properties>
		<java.version>1.8</java.version>
		<maven-jar-plugin.version>3.1.1</maven-jar-plugin.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
    		<groupId>com.h2database</groupId>
		    <artifactId>h2</artifactId>
		    <scope>runtime</scope>
		</dependency>
        
		...        
        
	</dependencies>

	...

</project>

원인

작성자의 경우, @Service(=org.springframework.stereotype.Service)를 작성하지 않았기 때문에 발생한 것이다. 현재 작성자는 Spring을 사용해서 프로젝트를 아래처럼 Controller와 Service, Repository를 패키지로 나눈 형태로 구조화시켜서 개발 중이다.

(개발중인) 프로젝트 패키지 일부

- com.sample.controller

> AController.java

- com.sample.service

> AService.java

- com.sample.repository

> ARepository.java

AController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import com.sample.service.AService;

@Controller
public class AController {
	@Autowired
	AService aService;
	..
}

AService.java

import org.springframework.beans.factory.annotation.Autowired;
import com.sample.repository.ARepository;

public class ASerivce {
	@Autowired
	ARepository aRepo;
	..
}

ARepository.java

import org.springframework.data.repository.CrudRepository;
import com.sample.data.AItem;

public interface ARepository extends CrudRepository<AItem, Integer> {

}

위 3가지 java 파일을 보면 조금 잘못된 부분이 있다. AService 클래스 위에 @Service가 없고, AController에서는 AService를 @Autowired해서 사용하고 있다. 다시 말해서, 에러를 발생시킨 코드는 AService 를 Service로 등록시키지 않고 Controller에서 사용하려고 시도했기 때문이었다.

해결

앞에서 설명했다시피, @Service 어노테이션을 사용해서 ASerivce를 서비스로 등록시키면 된다. 코드를 수정하면 아래와 같다. 작성자의 경우 작은 실수로 인해 발생한 에러의 원인을 찾아내는데 시간이 한참 걸렸지만, 작성자처럼 이런 실수를 해서 시간을 허비하지 않기를 바란다.

AService.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.sample.repository.ARepository;

@Service
public class ASerivce {
	@Autowired
	ARepository aRepo;
	..
}

android.os.NetworkOnMainThreadException

Joker2 — Fri, 13 Sep 2019 00:03:51 +0900

에러(error)

android.osNetworkOnMainThreadException

[ 에러발생 Logcat 화면 ]

에러 상세(detail)

2019-09-12 22:21:09.669 31487-31487/com.example.joker E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.example.joker, PID: 31487
android.os.NetworkOnMainThreadException
at android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode.java:1448)
at java.net.SocketOutputStream.socketWrite(SocketOutputStream.java:108)
at java.net.SocketOutputStream.write(SocketOutputStream.java:153)
at sun.nio.cs.StreamEncoder.writeBytes(StreamEncoder.java:221)
at sun.nio.cs.StreamEncoder.implFlushBuffer(StreamEncoder.java:291)
at sun.nio.cs.StreamEncoder.implFlush(StreamEncoder.java:295)
at sun.nio.cs.StreamEncoder.flush(StreamEncoder.java:141)
at java.io.OutputStreamWriter.flush(OutputStreamWriter.java:229)
at java.io.BufferedWriter.flush(BufferedWriter.java:254)
at com.example.joker.SubThread.send(SubThread.java:48)
at com.example.joker.MainActivity.onClick(MainActivity.java:93)
at android.view.View.performClick(View.java:6897)
at android.widget.TextView.performClick(TextView.java:12693)
at android.view.View$PerformClick.run(View.java:26104)
at android.os.Handler.handleCallback(Handler.java:789)
at android.os.Handler.dispatchMessage(Handler.java:98)
at android.os.Looper.loop(Looper.java:164)
at android.app.ActivityThread.main(ActivityThread.java:6944)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)

개발환경(environment)

OS : windows 10

IDE : android studio 3.5

Device : samsung SM-G930S (갤럭시 S7)

상황(situation)

소켓(Socket) 통신을 사용하는 안드로이드 앱을 개발 중에, 앱을 종료시켜버리는 Fatal Exception이 발생했다. 에러가 발생한 시점은 소켓에 연결된 곳으로 데이터를 쓰려고(writing) 시도할 때 발생한 것이다.

원인(cause)

소켓(Socket) 통신을 사용해서 데이터를 쓰기(write)와 읽기(read)를 할 때 작업을 안드로이드 메인 스레드(main thread)와 분리시켜서 실행하지 않아서 발생한 것이다.

안드로이드 앱을 개발할 때 주의할 점 중 하나는 모든 작업을 메인 스레드(main thread)에서 처리하면 안된다는 것이다. 시간이 걸리는 작업들은 메인 스레드에서 분리시켜서 실행시켜야 한다. 만약, 메인 스레드를 오랫동안 잡고 놓지 않을 만한 어떤 작업(ex, socket, http 통신의 reading, writing)이 있다면, 안드로이드는 위 처럼 에러가 발생시킨다. 참고로 위 에러는 컴파일(compile) 중에 발생하는 에러가 아닌, 런타임(runtime) 에러이기 때문에, 앱을 실행하는 도중 발생할 수 있는 에러이다.
※ 안드로이드에서 메인 스레드(Main thread)에서만 UI작업을 할 수 있도록 제한했기 때문에, 메인 스레드를 UI 스레드(UI thread)라고 부르기도 한다.

안드로이드에서 말하는 메인 스레드를 이해하기 위해 아래 그림을 추가했다. 그림과 함께 두 가지만 이해한다면, 메인스레드를 고려해서 코딩하는 것이 어렵지 않을 것이라고 생각된다.

[ 안드로이드 메인 스레드 이해 ]

첫째, 메인 스레드(Main thread)에서 통신을 하지 않는다.
안드로이드에서 말하는 메인 스레드는 개발자가 따로 추가하지 않아도 안드로이드에 의해 앱에게 알아서 할당시켜주는 스레드를 말한다. 쉽게 말해서, 우리가 onCreate()이나 onResume() 안에 작성하고 있던 코드들은 모두 메인 스레드에서 동작하는 것이다. 이런 영역에서는 오래걸리는 작업을 하면 안되기 때문에, 통신을 해야하는 코드가 있다면 반드시 별도의 스레드로 작업을 분리시켜주어야 한다. 예를 들어, 데이터를 읽고 쓰기 위해 소켓(Socket)통신이나 HTTP 통신을 한다면 분리시켜주어야 한다. 그렇지 않으면 위 에러를 보게 될 것이다.

둘째, 메인이 아닌 다른 스레드(Sub threads)에서 UI 작업을 하지 않는다.
안드로이드 개발 중에 화면의 정보를 변경해야하는 작업이 있다면, 반드시 메인 스레드를 통해서 작업을 해야한다. 안드로이드에서 동작하는 모든 UI는 하나의 스레드에서 관리되도록 만들어져 있다. 따라서, 앱을 개발하다보면 코드가 많아질텐데, 아무리 코드가 많아진다고 하더라도 화면 정보인 UI를 변경하는 코드들을 보면, 모두 메인 스레드에서 처리하도록 코딩되어 있는 것을 볼 수 있다. 만약에, UI 작업을 메인 스레드가 아닌 곳에서 수행하려한다면 역시 (위 에러와는 다른) 에러가 발생할 것이다.

해결(solution)

개발 중인 안드로이드 코드의 소켓(Socket) 통신 내용 중에 데이터를 전달하는 부분을 별도의 스레드로 처리하도록 변경하면, 에러는 발생하지 않는다. 안드로이드에서는 별도의 스레드로 작업을 수행할 때 보통 Handler, AsynkTask, Thread 이렇게 3가지를 사용하게 된다.

java.lang.Thread
android.os.Handler
android.os.AsyncTask

아래 코드는 현재 개발 중인 코드에서 이번 에러(NetworkOnMainThreadException)를 발생시킨 부분이다. 메인 스레드에서 실행시킨 코드를 별도의 스레드를 만들어서 처리하도록 수정했다. 참고로, 작성자는 Thread를 사용했지만, 상황에 따라 Handler나 AsynTask를 사용해도 상관없다.

기존 코드

public class MainActivity extends Activity implements OnClickListener {

	SubThread subThread;
	...
    
	@Override
	public void onClick(View v) {
		if(v.getId()==R.id.btn_send){
			subThread.send(editText.getText().toString());
		}
	}
}

public class SubThread extends Thread {

	BufferedWriter bw;
	...

	public void send(String data){
		...
   		bw.write(data);
		bw.flush();
		...
    }
}

수정 코드

public class MainActivity extends Activity implements OnClickListener {

	SubThread subThread;
	...
    
	@Override
	public void onClick(View v) {
		if(v.getId()==R.id.btn_send){
			new Thread() {
				public void run() {
					subThread.send(editText.getText().toString());
				}
			}.start();
		}
	}
}

public class SubThread extends Thread {

	BufferedWriter bw;
	...

	public void send(String data){
		...
		bw.write(data);
		bw.flush();
		...
	}
}

락업(Lockup), 언락(Unlock)

Joker2 — Mon, 2 Sep 2019 02:45:56 +0900

락업(Lockup), 언락(Unlock)

락업(Lockup)은 코인을 발행할 때 가상화폐시장에 유통되지 않도록 묶어놓은 것으로, 가상화폐의 기술인 블록체인 용어 중 하나입니다. 블록체인에서의 락업은 주식을 일정기간 팔지 못하도록 하는 "보호예수"와 비슷한 개념입니다. 락업을 통해 코인이 사용되지 못하도록 묶여 있을 때의 코인을 동결된 코인(Frozen Coin)이라고 부르기도 하며, 동결된 코인이 들어있는 계좌를 동결된 계좌(Freeze Account) 혹은 에크스로 계좌(Escrow Account)라고 부르기도 합니다.

코인을 락업하려는 사람들은 해당 블록체인에 투자한 투자자(Investor)와 해당 블록체인을 개발하는 개발자(Developer)입니다. 따라서, 락업을 하는 주 이유는 투자자와 개발자 사이의 신뢰를 위한 것입니다. 이번 포스팅에서는 락업(Lockup)과 언락(Unlock, 락업 해제)의 의미를 알기 위해, 코인을 동결시키는 행동이 가상화폐시장에 어떤 영향을 주는지 살펴보겠습니다.

※ 에스크로 계좌(Escrow Account)란? "조건부 날인증서"라는 에스크로와 계좌를 합친 단어로, 블록체인에서는 계좌에 특정 조건을 걸어놓고 입출금의 제한을 걸어둔 계좌를 말합니다. 보통 에스크로 계좌에 토큰을 입금을 한 후, 특정 조건을 두어서 출금에 대한 제한을 합니다. 이 개념은 블록체인 이전에 있던 이미 사용되던 개념이며, 두 사람 사이에 제 3자가 개입해서 안전한 거래를 하는 의미였습니다. 기존에서는 제 3자의 역할이 사람이나 기관이었지만, 여기서는 블록체인이라는 것만 다릅니다.

락업을 하는 이유

1. Protection from speculators (투기꾼들로부터 보호)

"투기꾼이 아닌 투자자를 모으기 위해, 코인의 매각에 제한을 둔다."

가상화폐 투기꾼들은 주로 할인된 코인의 초기가격으로 대량 매입한 후, 크라우드 세일(Crowd Sale)이후에 모두 팔아버리면서 수익을 챙깁니다. 그렇게 되면 시장에서 해당 코인의 공급이 갑자기 많아지면서 가격은 내려갈 것입니다. 이 상황이 (현재 투자자는 아니지만 앞으로 투자자가 될 수 있는)잠재적 투자자들에게는 관심을 가지지 못하도록 만들 것입니다. 만약에, 누군가 가상화폐 시장에 투자하려고 한다면 비트코인(BitCoin), 이더리움(Ethereum), 리플(Ripple), 이오스(EOS) 처럼 가상화폐 시장에서 유명한 코인들에 투자하거나 혹은 등장한지 얼마 안됬더라도 가치가 어느정도 유지되는 코인에 투자하려고 할 것입니다. 가상화폐 시장에 등장하자마자 가치가 떨어져서 사라질수도 있는 코인에 투자하려고는 하지 않을 것이기 때문입니다. 따라서 이를 방지하기 위해 수요에 맞게 유통시키고 일부는 동결시킬 필요가 있고, 투자자들에게 전달된 코인들을 일정기간동안 동결시킬 필요가 있는 것입니다. 이렇게 되면 스타트업(Startup) 회사들에게는 투기꾼들 같은 단기 투자자(short-term)들보다 장기 투자자(long-term investor)들을 끌어들일 수 있고, 프로젝트의 가치를 제대로 인정받을 수 있도록 보호장치를 마련해주는 역할도 할 수 있게 되는 것입니다.

2. Motivation for the team (개발팀의 동기부여)

"자신들이 가져갈 동결된 코인의 가치를 올리기 위해, 개발팀은 계속 노력을 할 것이다."

블록체인 프로젝트의 숨겨진 목적은 개발팀들이 돈을 벌기 위함이 목적입니다. 처음부터 그들은 돈을 벌 생각으로 만든 것이고, 돈을 벌지 못한다면 애초에 프로젝트를 시작하지 않았을 것입니다. ICO를 통해 투자받은 돈을 개발팀에게 바로 전달하는 것이 아닌, 돈의 일부는 전달하고 나머지 일부는 동결시킨 후 1년뒤에 자동으로 전달되도록 장치를 마련해 둔다면, 개발팀이 돈을 받자마자 프로젝트를 중단하고 도망가버리는 상황을 방지할 수 있을 것입니다. 또한, 개발팀은 자신들이 가지고 있는 동결된 코인의 가치를 떨어뜨리는 행위를 하진 않을 것입니다. 1년뒤 동결상태가 해제됬을 때 가치가 떨어져 있다면 그들이 받았을 때의 돈은 적어지므로 결과적으로 많이 벌수 없기 때문입니다. 따라서 그들은 동결된 코인의 가치가 오르기 위해 백서(White Paper)에 언급한대로 개발을 진행할 것이고, 여력이 된다면 그 보다 더 좋게 만들려고 시도할 것입니다. 그렇게 되면 1년뒤 개발팀이 받아야하는 코인의 가치가 늘어나서 높은 수익을 받을 수 있을 것입니다.

3. Sifting out the scammers (스캠 선별)

"스캠이 아니라면, 락업 계획이 잘 세워졌을 것이고, 잘 지켜지고 있을 것이다."

블록체인 프로젝트를 진행할 때는 ICO를 통해 투자를 받습니다. 이 때 많이 일어나는 상황으로는 투자받은 돈을 가지고 도망가거나 잠적해버리는 일입니다. 이런 사기 프로젝트로 만들어진 코인을 스캠(Scam)이라고 합니다. 락업을 장기간으로 설정함으로써, 프로젝트를 만드는 개발자(developer), 설립자(founder) 그리고 고문(advisor)들이 잠적해버리는 상황을 방지할 수 있습니다. 그 이유는 통해 투자받은 사람들(=사기치려는 사람들)이 아무리 스캠 코인을 가지고 있더라도 시장에서 유통되지 못하도록 막혀있다면, 그들은 자신이 가지고 있는 코인을 현금화시킬 수 없기 때문입니다. 따라서, 락업이 해당 프로젝트가 스캠인지 선별하기 위해 도움을 줄 수 있습니다.

4. Uniform distribution of currency (균일한 통화분배, 코인가격 안정화)

"수요와 공급의 규칙에 맞게 분배하면, 코인가격은 안정화될 것이다."

만약에, ICO가 종료된 후 대량의 코인을 한번에 풀려버리면 코인시장을 망가뜨릴 수 있습니다. 해당 블록체인을 사용하려는 사람들이나 투자하려는 사람들은 별로 없는데, 코인 물량이 한번에 대량으로 시장에 풀려버린다면 코인 가치는 급격하게 떨어질 수 있습니다. 참고로, 코인들 중에 가격이 낮은 코인들을 동전코인이라고도 부르는데 이러한 동전코인이 된 후 작전세력들의 대상이 된다면 해당 프로젝트로 만들어진 코인의 가치는 그들에 의해 움직이게 될 수 있습니다. 이는 주식시장에서 동전주에 작전세력이 많은 것과 비슷한 상황입니다. 만약에 락업을 통해 일정간격으로 혹은 상황에 맞게 단계적으로 균일하게 코인을 풀어서 시장의 수용에 맞게 공급한다면, 코인 유통량에 대한 유동성을 확보할 수 있고, 코인가격은 안정되게 운영될 것입니다.

c++ (class template) variant

Joker2 — Fri, 23 Aug 2019 02:41:39 +0900

(class template) variant

std::variant

variant는 공용체의 진화된 버전으로, 타입 세이프한 공용체라고 말할 수 있다. union(공용체)는 들어있는 타입이 무엇인지 알 수 없지만, variant(변형)은 들어있는 타입을 유지해주기 때문에 타입에 안전한 공용체라는 의미로 type-safe union 혹은 safer union라고 불리기도 한다.

variant 특징

1) union처럼 행동하지만, 타입에 안전하다.

: 가장 큰 특징으로, 타입을 유지하는 것 외에는 union과 모두 동일하다. union은 타입을 정의할 때 사용할 여러개의 타입을 함께 작성해서 사용하지만, variant는 타입에 대한 선언과 정의를 동시에 하며 이때 여러 개의 타입을 함께 작성한다.

2) 템플릿 인수 타입 중 하나이어야 한다.

: variant 변수를 선언했다고 모든 타입으로 변형이 가능한 것은 아니다. variant 변수를 선언할 때 개발자는 해당 variant 변수 내에서 변형 가능한 타입들을 함께 작성해야 한다.

3) 방문자 패턴(visitor pattern)에 자주 사용된다.

: variant 타입은 방문자 패턴인 visit 함수과 함께 사용되는 경우가 정말 많다. variant가 방문자 패턴에서도 사용할 수 있도록 잘 설계되었기 때문에 쿵짝이 잘 맞는다. 참고로, 최신 스타일의 코딩방법이라 불리는 모던 C++에서도 소개된 방법이다.

※ C++17 부터 지원한다.

코드로 variant 이해하기

특징 1) union처럼 행동하지만, 타입에 안전하다.

아래 예제는 variant타입의 변수 v에 int타입의 값인 10을 넣은 후, double타입의 값은 3.14를 넣었다. 두 타입은 다르지만 기존 union타입처럼 variant타입의 변수에서도 저장이 가능하다. 그리고 여기서 한가지 추가 설명을 하자면, variant변수에 두번째 값인 3.14를 넣을 때, 기존에 넣었던 첫번째 값인 10을 파기해서 초기화 한 후 두번째 값을 넣는다는 것이다. 참고로, variant 에서 제공하는 함수 중 index()는 variant 내에 정의되어 있는 type의 위치 index를 반환한다. 따라서 실행 결과는 int는 0, double은 1의 위치가 출력된다.

#include <iostream>
#include <utility>
#include <variant>

int main() {
  std::variant<int, double> v = 10;
  std::cout << v.index() << std::endl;
  
  v = 3.14;
  std::cout << v.index() << std::endl;
}

실행 결과 :

0
1

특징 2) 템플릿 인수 타입 중 하나이어야 한다.

variant변수를 선언할 때 템플릿 안에 변형가능한 타입을 함께 작성해야 한다. 그리고 사용할 때는 작성한 타입들에 한해서만 값을 저장할 수 있다. 아래 예제에서는 variant변수가 int와 double타입의 값만 가질 수 있도록 했기 때문에, string처럼 다른 타입을 저장하려고 시도한다면 에러가 발생할 것이다.

#include <iostream>
#include <utility>
#include <variant>

int main() {
    std::variant<int, double> v;
    v = 123;
    v = "hello"; // error
}

실행 결과 :

에러 발생

특징 3) 방문자 패턴(visitor pattern)에 자주 사용된다.

variant(=std::variant) 타입은 visit(=std::visit)과 함께 자주 사용되기 때문에 알아두면 도움이 될 것이다. 아래는 방문자 패턴을 위해 type-matching visitor를 구현하는 몇가지 방법을 소개한 것이다. 세가지 방법을 예로 들었지만, 아래 그림처럼 모두 동일한 처리를 하는 것을 뿐 코딩 형태만 다른 것이다. variant변수에 들어갈 수 있는 타입이 여러 개가 가능한 구조이기 때문에, 각 타입에서 맞게 직접 처리할 수 있도록 구조를 분리시킨 방문자 패턴과 찰떡궁합인 것이다.

variant & visitor pattern

아래 소개된 예들을 참고해서 개발할 때 상황에 맞게 알맞은 스타일로 코딩을 하면된다. 참고로,아래 예시코드들에서 visitor들은 리턴을 하지 않고, 입력 인자를 1개로 사용한 것이다. 필요하다면 예시를 약간 수정해서 리턴을 하도록 변경하거나 입력 인자를 2개, 3개 등으로 변경하는데 어렵지 않을 것이라 생각된다.

첫번째 방법 : 람다(lambda)식 표현을 사용해서 각 타입을 다르게 처리

#include <iostream>
#include <utility>
#include <variant>

struct Ironman {};
struct Batman {};
struct Spiderman {};

int main() {
    std::variant<Ironman, Batman, Spiderman> jk{Batman()};
    std::visit([](auto&& args) {
        using T = std::decay_t<decltype(args)>;
        if constexpr (std::is_same_v<T, Ironman>)
          std::cout << "Ironman visitor" << std::endl;
        else if constexpr (std::is_same_v<T, Batman>)
          std::cout << "Batman visitor" << std::endl;
        else if constexpr (std::is_same_v<T, Spiderman>)
          std::cout << "Spiderman visitor" << std::endl;
    }, jk);
}

두번째 방법 : operator를 overload하는 object를 사용

#include <iostream>
#include <utility>
#include <variant>

struct Ironman {};
struct Batman {};
struct Spiderman {};

struct Joker {
    void operator()(Ironman &obj) { std::cout << "Ironman's visitor" << std::endl; }
    void operator()(Batman &computer) { std::cout << "Batman's visitor" << std::endl; }
    void operator()(Spiderman &computer) { std::cout << "Spiderman's visitor" << std::endl; }
};

int main() {
    std::variant<Ironman, Batman, Spiderman> jk{Batman()};
    std::visit(Joker(), jk);
}

세번째 방법 : operator를 overload하는 templete을 사용

#include <iostream>
#include <utility>
#include <variant>

template <class ...Ts> struct overload : Ts...{using Ts::operator()...; };
template <class ...Ts> overload(Ts...)->overload<Ts...>;

struct Ironman {};
struct Batman {};
struct Spiderman {};

int main() {
    std::variant<Ironman, Batman, Spiderman> jk{Batman()};
    std::visit(overload{
      [](Ironman&) { std::cout << "Ironman's visitor" << std::endl; },
      [](Batman&) { std::cout << "Batman's visitor" << std::endl; },
      [](Spiderman&) { std::cout << "Spiderman's visitor" << std::endl; }
    }, jk);
}

실행결과 (첫번째, 두번째, 세번째 모두 동일)

Batman's visitor

c++ / 분수(Fraction) 사칙연산하기 (struct& 사용)

Joker2 — Mon, 12 Aug 2019 22:22:22 +0900

분수(Fraction) 사칙연산하기 (struct& 사용)

c++ 언어 사용

문제 :

구조체(struct)를 이용해서 분수 값들간의 사칙연산(Operations with Fractions)을 수행하는 함수를 구현한다.

조건 :

1. 구조체(struct)를 사용한다.
2. 두 값의 사칙연산(덧셈, 뺄셈, 곱셈, 나눗셈)에 대한 각 함수를 구현한다.
3. 두 값의 비교연산을 하는 함수를 구현한다.

4. 주소에 의한 참조(call by reference)를 사용한다.

풀이 코드 :

fraction.hpp

typedef struct Fraction{
	int bunja;
	int bunmo;
} Fraction;

void addFraction(Fraction &x, Fraction &y, Fraction &z);
void subFraction(Fraction &x, Fraction &y, Fraction &z);
void multFraction(Fraction &x, Fraction &y, Fraction &z);
void divFraction(Fraction &x, Fraction &y, Fraction &z);
bool compare(Fraction x, Fraction y);
void trimFraction(Fraction &x);

faction.cpp

#include "fraction.hpp"

void addFraction(Fraction &x, Fraction &y, Fraction &z){
	z.bunmo = x.bunmo * y.bunmo;
	z.bunja = y.bunmo * x.bunja + x.bunmo * y.bunja;
}
void subFraction(Fraction &x, Fraction &y, Fraction &z){
	z.bunmo = x.bunmo * y.bunmo;
	z.bunja = y.bunmo * x.bunja - x.bunmo * y.bunja;
}
void multFraction(Fraction &x, Fraction &y, Fraction &z){
	z.bunmo = x.bunmo * y.bunmo;
	z.bunja = y.bunja * x.bunja;
}
void divFraction(Fraction &x, Fraction &y, Fraction &z){
	z.bunmo = x.bunmo * y.bunja;
	z.bunja = y.bunmo * x.bunja;
}
bool compare(Fraction x, Fraction y){
	if(y.bunmo * x.bunja - x.bunmo * y.bunja > 0)
		return 1;
	else
		return 0;
}
void trimFraction(Fraction &x){
	int down = x.bunja, up = x.bunmo, com;
	if(x.bunja > x.bunmo){
		down = x.bunmo;
		up = x.bunja;
	}

	for(int i=1; i<=down; i++)
		if((down%i)==0 && (up%i)==0)
			com=i;

	x.bunja/=com;
	x.bunmo/=com;
}

main.cpp

#include<iostream>
#include "fraction.hpp"

using namespace std;

int main(){
	Fraction a, b, c;
	bool bi;

	a.bunja=5, a.bunmo=6;
	b.bunja=1, b.bunmo=3;

	printf("a = %d / %d\n", a.bunja, a.bunmo);
	printf("b = %d / %d\n\n", b.bunja, b.bunmo);

	addFraction(a,b,c);
	trimFraction(c);
	printf("더하기\t%d / %d\n", c.bunja, c.bunmo);
	
	subFraction(a,b,c);
	trimFraction(c);
	printf("빼기\t%d / %d\n", c.bunja, c.bunmo);
	
	multFraction(a,b,c);
	trimFraction(c);
	printf("곱하기\t%d / %d\n", c.bunja, c.bunmo);
	
	divFraction(a,b,c);
	trimFraction(c);
	printf("나누기\t%d / %d\n", c.bunja, c.bunmo);

	bi = compare(a,b);
	if(bi==1)
		printf("비교(큰 수) = %d / %d\n", a.bunja, a.bunmo);
	else	
		printf("비교(큰 수) = %d / %d\n", b.bunja, b.bunmo);

	return 0;
}

실행 결과 :

a = 5 / 6
b = 1 / 3

더하기  7 / 6
빼기    1 / 2
곱하기  5 / 18
나누기  5 / 2
비교(큰 수) = 5 / 6

풀이 설명 :

이 예제의 목적은 값 의한 호출(call by value)와 참조에 의한 호출(call by reference)의 차이를 알기 위함이다.

[ call by value (값에 의한 호출) ]

[ call by reference (참조에 의한 호출) ]

값에 의한 호출

call by value
함수를 호출할 때, 입력 파라미터 값이 복사된다.
(값이 복사 되므로) 복사를 위한 메모리가 추가로 필요하다.
(값이 복사 되므로) 복사를 위한 시간이 추가로 필요하다.

참조에 의한 호출

call by reference
함수를 호출할 때, 입력 파라미터 값이 보관되어 있는 주소값이 복사된다.

두 호출방식의 차이는 함수를 호출할 때 사용되는 입력 파라미터의 값이 무엇이냐에 대한 차이이다. 그리고 이 두 차이가 프로그램의 속도와 메모리 관리에 영향을 미친다. 두 방식 중 어떤 방식으로 프로그래밍을 했느냐에 따라 프로그램은 다르게 동작하는데, 위 예제는 call by reference 형태로 구현했기 때문에 Fraction에 포함되어 있는 두개의 값인 bunja와 bunbo값이 복사되지 않고, 주소값만 복사되어 사용되므로 복사를 위한 메모리나 시간이 추가로 필요하지 않는다. 이해를 위해 두 방식을 비교하는 그림을 추가했다.