Android Size Unit

안드로이드 위젯의 크기를 지정할 때 사용되는 단위에 대한 정리 안드로이드 크기 단위에는 총 6가지(dp, in, mm, pt, px, sp)가 있다. 위젯의 크기를 설정할 때는 wrap_content, match_parent 또는 dp를 사용. 텍스트 사이즈는 sp 단위를 사용하는 것을 권고.

1. px (pixel) 실제 픽셀 수를 뜻합니다. px을 이용하면 해상도가 다른 디바이스마다 실제 크기가 다르게 보이며 심지어 이미지가 깨질 수도 있습니다. 2. dp / dip (Density Independent Pixel) 화면의 크기를 기준으로 하며, 어떠한 화면의 해상도에도 같은 비율로 출력해줍니다. px만으로 다양한 디바이스의 해상도를 지원할 수 없기 때문에 자주 쓰입니다. 3. dpi (Dots per Inch) 1인치에 들어있는 픽셀 수를 뜻하며, 안드로이드에서는 160을 기본으로 합니다. 4. sp / sip (Scale Independent Pixel) 글꼴의 단위로 자주 쓰입니다. dp와 비슷하지만 사용자가 선택한 글꼴에 따라 달라집니다. 5. in (Inch) 실제 물리적인 길이(2.54cm)입니다. 6. mm (milli meter) 네. 생각하시는 그 mm 맞습니다. 실제 물리적인 길이입니다. 7. em 글꼴과 상관 없이 동일한 텍스트의 크기를 출력합니다.
[참조] [Android Studio] 길이 단위 - dp, dpi, px, sp 의 차이점 [참조] 안드로이드 크기 단위(dp, sp, pt, px, mm, in)

LinearLayout

Orientation(Horizontal)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="horizontal">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView1"
        android:layout_weight="1"
        android:background="#ff9966"
        android:layout_margin="5dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView2"
        android:layout_weight="1"
        android:background="#66ffcc"
        android:layout_margin="5dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView3"
        android:layout_weight="1"
        android:background="#99ff00"
        android:layout_margin="5dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView4"
        android:layout_weight="1"
        android:background="#cc00ff"
        android:layout_margin="5dp"
        />
</LinearLayout>

Result

Orientation(Vertical)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView1"
        android:layout_weight="1"
        android:background="#ff9966"
        android:layout_margin="5dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView2"
        android:layout_weight="1"
        android:background="#66ffcc"
        android:layout_margin="5dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView3"
        android:layout_weight="1"
        android:background="#99ff00"
        android:layout_margin="5dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView4"
        android:layout_weight="1"
        android:background="#cc00ff"
        android:layout_margin="5dp"
        />
</LinearLayout>

Result

RelativeLayout

Target base

layout_to[location]Of="[target]" : [target]의 [location] 지정 location : Right, Left, above, below, StartOf, EndOf

layout_align[location]="[target]" : [target]의 [location] 기준 정렬 location : Right, Left, Top, Bottom, Baseline

View base

TableLayout

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    >
    <TableRow
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="#FF0000">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Row1 Textview1"
        android:layout_weight="1"
        android:background="#ff9966"
        android:layout_margin="5dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Row1 Textview2"
        android:layout_weight="1"
        android:background="#6600cc"
        android:layout_margin="5dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Row1 Textview3"
        android:layout_weight="1"
        android:background="#66ffdd"
        android:layout_margin="5dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Row1 Textview4"
        android:layout_weight="1"
        android:background="#3355cc"
        android:layout_margin="5dp"
        />
</TableRow>
    <TableRow
        android:layout_height="0dp"
        android:layout_weight="1">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Row2 Textview1"
            android:layout_weight="1"
            android:background="#99ff00"
            android:layout_margin="5dp"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Row2 Textview2"
            android:layout_weight="1"
            android:background="#cc00ff"
            android:layout_margin="5dp"
            />
    </TableRow>
</TableLayout>

Result

ConstraintLayout

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/t1"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:text="TextView1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="#ff9966"
        />
    <TextView
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:text="TextView2"
        app:layout_constraintCircle="@+id/t1"
        app:layout_constraintCircleRadius="150dp"
        app:layout_constraintCircleAngle="140"
        android:background="#66ffcc"
        />
    <TextView
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:text="TextView3"
        app:layout_constraintCircle="@+id/t1"
        app:layout_constraintCircleRadius="150dp"
        app:layout_constraintCircleAngle="190"
        android:background="#99ff00"
        />
    <TextView
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:text="TextView4"
        app:layout_constraintLeft_toRightOf="@id/t1"
        app:layout_constraintTop_toTopOf="@id/t1"
        android:background="#cc00ff"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

Result

Docker 사용빈도가 예상보다 높지 않아서 그런지 자주 쓰는 커맨드를 제외하곤 항상 구글링을 한다. 매번 검색해서 찾아서 쓰는것도 나쁘진 않지만 이번 기회에 체계적으로 정리해서 내가 보고싶을때 마다 보기 위해 이 포스팅을 작성한다. Docker와 Docker Hub를 이용해서 nginx 컨테이너를 생성부터 삭제까지 중간 중간 어떤 커맨드를 사용하는지 적어본다.

intro

Docker는 기본적으로 Root 권한이 필요하다. Docker 내부에서 Root directory에 접근할 권한이 없기 때문이다. 그래서 대부분 privileged=true 옵션을 사용한다고 하는데, 해당 옵션은 보안 문제가 있을 수 있으니 참고하기 바란다. Docker가 정상적으로 설치되었는지 확인해보자.

$ sudo su
$ docker version

혹시나 Docker를 설치했음에도 불구하고 위 스크립트가 정상적으로 실행되지 않는 경우에는 아래 과정을 진행하시길 바란다. 아래 과정은 현재 사용자 계정을 Docker 그룹에 추가하는 과정이다.

Docker group 확인

$ cat /etc/group | grep docker
docker:x:998:

Docker 그룹이 생성되어있지 않다면 아래 명령어로 Docker 그룹을 생성한다.

$ sudo groupadd docker

사용자 추가

Docker 그룹에 사용자를 추가한다.

$ sudo usermod -aG docker <userName>

Docker group init

현재 그룹을 Docker 그룹으로 변경하고 다시 버전을 확인한다.

$ newgrp docker
$ docker version

Docker-hub

Docker-Hub에는 무수히 많은 컨테이너들이 존재한다. 마이크로소프트와 같은 대형 회사에서 기본적으로 제공해주는 컨테이너, 일반 사용자들이 특수한 목적을 위해 구성해놓은 컨테이너, 개인 목적으로 업로드된 컨테이너 등등..

이러한 컨테이너들을 어떻게 야무지게 사용하느냐에 따라서 의미없는 에너지 낭비를 피할 수 있다. 예시로 nginx 컨테이너 이미지를 다운로드하여 실행해보도록 하자.

$ docker search
NAME                              DESCRIPTION                                     STARS     OFFICIAL   AUTOMATED
nginx                             Official build of Nginx.                        15928     [OK]
jwilder/nginx-proxy               Automated Nginx reverse proxy for docker con…   2101                 [OK]
richarvey/nginx-php-fpm           Container running Nginx + PHP-FPM capable of…   820                  [OK]
jc21/nginx-proxy-manager          Docker container for managing Nginx proxy ho…   288
linuxserver/nginx                 An Nginx container, brought to you by LinuxS…   160
tiangolo/nginx-rtmp               Docker image with Nginx using the nginx-rtmp…   147                  [OK]
...

nginx를 검색해본 결과 공식으로 제공되는 이미지가 있고, 그 외에 일반 사용자들이 업로드해놓은 이미지들이 있다. 공식으로 제공되는 nginx 이미지를 다운로드하자.

docker images

$ docker images
REPOSITORY    TAG       IMAGE ID       CREATED        SIZE

docker images 명령어를 통해 현재는 보유한 이미지를 확인할 수 있다.

image download directory

다운로드된 이미지는 /var/lib/docker/overlay2에 저장된다.

image download

컨테이너 이미지를 다운로드 하는 커맨드는 docker pull <IMAGENAME>:<VERSION>이다. 버전을 생략할 경우 최신 버전으로 다운로드된다.

$ docker pull nginx

Using default tag: latest
latest: Pulling from library/nginx
e5ae68f74026: Pull complete
21e0df283cd6: Pull complete
ed835de16acd: Pull complete
881ff011f1c9: Pull complete
77700c52c969: Pull complete
44be98c0fab6: Pull complete
Digest: sha256:9522864dd661dcadfd9958f9e0de192a1fdda2c162a35668ab6ac42b465f0603
Status: Downloaded newer image for nginx:latest
docker.io/library/nginx:latest

따로 <VERSION>을 선택하지 않았기 때문에 latest 버전으로 설치된다.

$ docker images

REPOSITORY   TAG       IMAGE ID       CREATED       SIZE
nginx        latest    f652ca386ed1   13 days ago   141MB

$ sudo ls -alFh /var/lib/docker/overlay2/
total 36K
drwx--x---  9 root root 4.0K Dec 16 02:02 ./
drwx--x--- 13 root root 4.0K Dec 14 00:53 ../
drwx--x---  3 root root 4.0K Dec 16 02:02 11a95abfa3e2b45cab9113eb447d98abc70b6e1a84f9435cea419c811f147b1c/
drwx--x---  4 root root 4.0K Dec 16 02:02 2d471323df269aeaff19c810a186cf36e48e3034031cbab8c03ed89e6302fb8e/
drwx--x---  4 root root 4.0K Dec 16 02:02 8235dae3e16fe4df2032d1ab2fd49c3215e173109743502715bd1f61b49c2bbe/
drwx--x---  4 root root 4.0K Dec 16 02:02 8d5040887ffef2eaeae14466a20691aaa2bb220fcc1b0e368b361ee2799b79c6/
drwx--x---  4 root root 4.0K Dec 16 02:02 9ea30971c486bc54be8175e72cb8dac86e08928a4a49dace099748bdd4da7e74/
drwx--x---  4 root root 4.0K Dec 16 02:02 c7422c3c00ac2ff7487fd66d50407f796e316436e7779fede1e3244bbcf80c1b/
drwx------  2 root root 4.0K Dec 16 02:02 l/

docker images, sudo ls -alFh /var/lib/docker/overlay2로 컨테이너 이미지 정상 다운로드를 확인한다. (다운로드가 안되는 경우는 드물다. 그냥 알아두기만 하자.)

작성중...

AWS EC2 Ubuntu 서버에 ASP.NET Core 업로드 테스트를 진행중이다. 서버는 Ubuntu 18.04 LTS이며, 모든 작업은 CLI 환경에서 진행했다.

Why Docker?

도커(Docker)는 리눅스의 응용 프로그램들을 소프트웨어 컨테이너 안에 배치시키는 일을 자동화하는 오픈 소스 프로젝트이다. - 위키백과

그렇게 어려운 말로 적혀있는건 아닌데, 모르는 사람이 들으면 이게 무슨 소리인가 싶을거다. 어느정도 현실에 빗대어 이야기하자.

어떤 API 서버를 구축했고, 클라우드 서비스를 통해 배포 해야한다.

이 상황에서 모든 클라우드 플랫폼이 동일한 환경을 가지고 있지 않고, 개발 당시의 환경과도 다르기 때문에 개발된 환경과 동일한 환경이 클라우드상에도 설정되어야 한다. 서비스가 정상적으로 운영되기 위한 모든 환경을 규격화하는 것이다. 이렇게 규격화된 환경은 차후 다른 서비스를 개발하거나, 유사한 서비스를 개발할 때 시간(자원)을 아껴주는 역할을 한다.

Docker의 가장 큰 장점은 변경 불가능한 인프라(Immutable Infrastructure)이다. 소프트웨어는 자주 수정된다면 여러가지 오류가 발생한다. 특히 변경에 따른 이력관리도 매우 중요한데 Docker는 서버를 구축한 이후 변경이나 업데이트를 할 수 없다. 위와 같은 이유로 인해 Docker는 업데이트 개념이 아닌 서버를 통째로 바꾸는 개념이다. 서버를 업데이트 하기 위해 새로운 도커 이미지를 업데이트해서 컨테이너에 담는다. 불편하다고 생각이 들 수 있겠지만 자잘한 소프트웨어 업데이트로 인해 머리를 쥐어 뜯는것보다 변경하기 위한 이미지를 올리는 것으로 배포를 끝낼 수 있다.

Install Docker Engine on Ubuntu

아래 방법은 repository를 이용한 설치법이다. package를 이용하여 Docker를 설치하려면 Install from a package - Docker Engine 를 참고하길 바란다.

Uninstall old versions

혹시 이전에 설치했던 Docker가 있을 경우를 대비하여 사전에 지워주도록 하자.

$ sudo apt-get remove docker docker-engine docker.io containerd runc

Reading package lists... Done
Building dependency tree
Reading state information... Done
Package 'docker-engine' is not installed, so not removed
Package 'docker' is not installed, so not removed
Package 'containerd' is not installed, so not removed
Package 'docker.io' is not installed, so not removed
Package 'runc' is not installed, so not removed
0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.

Set up the repository

1. apt를 업데이트하고, https를 통해 리포지토리를 쉽게 사용할 수 있도록 패키지를 설치한다.

   $ sudo apt-get update
   $ sudo apt-get install ca-certificates curl gnupg lsb-release

2. Docker 공식 GPG Key를 추가한다. ```bash $ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

-----BEGIN PGP PUBLIC KEY BLOCK-----

mQINBFit2ioBEADhWpZ8/wvZ6hUTiXOwQHXMAlaFHcPH9hAtr4F1y2+OYdbtMuth lqqwp028AqyY+PRfVMtSYMbjuQuu5byyKR01BbqYhuS3jtqQmljZ/bJvXqnmiVXh 38UuLa+z077PxyxQhu5BbqntTPQMfiyqEiU+BKbq2WmANUKQf+1AmZY/IruOXbnq ... YT90qFF93M3v01BbxP+EIY2/9tiIPbrd =0YYh -----END PGP PUBLIC KEY BLOCK-----

추가된 gpg key는 `/usr/share/keyrings`에 저장된다. 열어볼 필요 없다. 어차피 읽지도 못한다.

3. `stable` 리포지토리를 설정하는 경우 아래와 같이 작성하고, `nightly` or `test` 버전을 원하는 경우 `stable` 대신에 `nightly` or `test`를 넣어주면 된다.
```bash
$ echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Install Docker Engine

1. 위에서 설정한 리포지토리를 업데이트

   $ sudo apt-get update
   

Hit:1 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic InRelease Hit:2 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates InRelease Hit:3 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-backports InRelease Get:4 https://download.docker.com/linux/ubuntu bionic InRelease [64.4 kB] Get:5 https://download.docker.com/linux/ubuntu bionic/stable amd64 Packages [22.5 kB] Get:6 https://download.docker.com/linux/ubuntu bionic/nightly amd64 Packages [59.8 kB] Get:7 http://security.ubuntu.com/ubuntu bionic-security InRelease [88.7 kB] Fetched 236 kB in 2s (153 kB/s) Reading package lists... Done

2. `docker-ce`, `docker-ce-cli`, `containerd.io`를 설치한다.
```bash
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
Reading package lists... Done
Building dependency tree
Reading state information... Done
...

설치가 완료되었고, stable repository에서 가장 최신 버전으로 설치되었다. 특정 버전을 설치해야되는 경우에는 apt-cache 명령어를 사용해서 원하는 버전을 설치한다.

$ apt-cache madison docker-ce

 docker-ce | 5:20.10.12~3-0~ubuntu-bionic | https://download.docker.com/linux/ubuntu bionic/stable amd64 Packages
 docker-ce | 5:20.10.11~3-0~ubuntu-bionic | https://download.docker.com/linux/ubuntu bionic/stable amd64 Packages
 docker-ce | 5:20.10.10~3-0~ubuntu-bionic | https://download.docker.com/linux/ubuntu bionic/stable amd64 Packages
 ...
 docker-ce | 18.06.1~ce~3-0~ubuntu | https://download.docker.com/linux/ubuntu bionic/stable amd64 Packages
 docker-ce | 18.06.0~ce~3-0~ubuntu | https://download.docker.com/linux/ubuntu bionic/stable amd64 Packages
 docker-ce | 18.03.1~ce~3-0~ubuntu | https://download.docker.com/linux/ubuntu bionic/stable amd64 Packages

 $ sudo apt-get install docker-ce=<VERSION_STRING> docker-ce-cli=<VERSION_STRING> containerd.io

만약 5:20.10.10~3-0~ubuntu-bionic 버전을 설치하고 싶은 경우

$ sudo apt-get install docker-ce=5:20.10.10~3-0~ubuntu-bionic docker-ce-cli=5:20.10.10~3-0~ubuntu-bionic containerd.io

<VERSION_STRING>에 원하는 버전을 입력해서 설치하면 된다.

Test

동작하는지 확인은 해봐야하니까 hello-world 컨테이너를 실행해보자. 로컬에 hello-world라는 컨테이너가 없으니 Docker Hub에서 자동으로 컨테이너를 다운받아 실행된다.

$ sudo docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
2db29710123e: Pull complete
Digest: sha256:cc15c5...4f685
Status: Downloaded newer image for hello-world:latest

제대로 실행된건지 확인하기 위해 docker ps -a 명령어 실행(sudo 권한으로 해야함)

$ sudo docker ps -a
CONTAINER ID   IMAGE         COMMAND    CREATED          STATUS                      PORTS     NAMES
e42a5f4182f1   hello-world   "/hello"   29 seconds ago   Exited (0) 29 seconds ago             competent_joliot

$ systemctl status docker

정상적으로 실행되고 있음을 확인할 수 있다.

Ending

일주일에 적어도 한 번은 적어보려고 노력하는데 그게 생각처럼 쉽지가 않다.

앞으로 기록할 것들

• AWS Lambda에 업로드한 코드 수정하기(json parsing)
• dotnet publish 패키지 증발 현상
• AWS Lambda 함수와 AWS API Gateway 연동하기
• AWS EC2 ubuntu에 Docker 환경 구축하기 + ASP.NET Core Docker Image

꼼꼼하게 확인해가면서 배우는 습관을 들여야겠다.

AWS Lambda에 .NET Core 프로젝트를 배포하는 과정을 적어볼 예정이다.

AWS Toolkit for Visual Studio

AWS 공식 문서를 참고하여 진행한다. AWS에서는 Visual Studio 2017/2019에 대한 공식 문서만 제공하고 있다. Visual Studio 2022(이하 VS2022)는 아직 공식 문서가 작성되진 않았지만, VS2022를 지원하는 AWS Toolkit Preview는 제공되고 있으니 일단 설치해보기로 한다.

> AWS Toolkit for Visual Studio Download

AWS Toolkit download & install

위에서 언급한 내용대로 VS2022로 설치한다. [install] 버튼 1회만 클릭하면 그리 오래걸리지 않는 시간내에 설치가 완료된다. 솔직히 카톡 PC버전 설치보다 쉬운듯.

Basic AWS Lambda Project

설치가 완료된 상태에서 VS2022를 실행하게 되면 AWS 관련 템플릿들이 추가된 것을 볼 수 있다.

징그럽게 많다..

AWS Lambda Project (.NET Core - C#)를 선택하고 프로젝트의 이름과 위치를 지정한다.

만들기를 클릭하면 위와 같이 Blueprint를 선택하는 창이 뜨는데 당황하지말고 Empty Function을 선택하면 된다.

AWS IAM 콘솔에서 발급받은 Access Key와 Secret Key를 입력하고 Save 하면 된다. 혹시나 Secret Key를 분실한 경우 새로 발급받아야함.

[참고] AWS 자격 증명 프로필 생성 문서

정상적으로 연결되었다면 좌측에 AWS Explorer에 서비스들이 출력된다. 혹시나 여기서도 AWS Explorer가 생성되지 않았다면 [보기] -> [AWS Explorer] 또는 Ctrl + K, A 숏컷을 사용하면 된다.

솔루션 탐색기에 aws-lambda-tools-defaults.json, Function.cs 파일이 있는데 해당 파일 설명은 AWS 공식 문서를 보는게 좋을 것 같다.

aws-lambda-tools-defaults.json

프로젝트의 일부로 생성된 파일을 보여줍니다. Lambda 도구가 기본적으로 읽는 이 파일의 필드를 사용하여 빌드 옵션을 설정할 수 있습니다. Visual Studio의 프로젝트 템플릿에는 기본값이 있는 이러한 필드가 많이 포함되어 있습니다. function-handler 필드는 Lambda 함수가 실행될 때 실행되는 메서드를 지정합니다. 함수 핸들러를 지정하는 경우 필드는 게시 마법사에 미리 채워져 있습니다. 함수, 클래스 또는 어셈블리의 이름을 바꾸면 aws-lambda-tools-defaults.json 파일의 필드도 업데이트해야 합니다.

{
  "Information": [
    "This file provides default values for the deployment wizard inside Visual Studio and the AWS Lambda commands added to the .NET Core CLI.",
    "To learn more about the Lambda commands with the .NET Core CLI execute the following command at the command line in the project root directory.",
    "dotnet lambda help",
    "All the command line options for the Lambda command can be specified in this file."
  ],
  "profile": "",
  "region": "",
  "configuration": "Release",
  "framework": "netcoreapp3.1",
  "function-runtime": "dotnetcore3.1",
  "function-memory-size": 256,
  "function-timeout": 30,
  "function-handler": "AWSLambda_basic::AWSLambda_basic.Function::FunctionHandler"
}

Function.cs

Lambda 함수로 노출할 C# 함수를 정의합니다. 이것은 FunctionHandlerLambda 함수가 실행될 때 실행되는 Lambda 기능입니다. 이 프로젝트에는 입력 텍스트 FunctionHandler를 호출하는 하나의 함수가 정의되어 ToUpper()있습니다.

// Function.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

using Amazon.Lambda.Core;

// Assembly attribute to enable the Lambda function's JSON input to be converted into a .NET class.
[assembly: LambdaSerializer(typeof(Amazon.Lambda.Serialization.SystemTextJson.DefaultLambdaJsonSerializer))]

namespace AWSLambda_basic
{
    public class Function
    {

        /// <summary>
        /// A simple function that takes a string and does a ToUpper
        /// </summary>
        /// <param name="input"></param>
        /// <param name="context"></param>
        /// <returns></returns>
        public string FunctionHandler(string input, ILambdaContext context)
        {
            return input?.ToUpper();
        }
    }
}

Test

가장 기본적인 테스트만 진행할 계획이였기 때문에 Function.cs에 기본적으로 작성되어있는 ToUpper() 기능으로 테스트를 진행할 예정이다.

AWS Explorer에서 AWS Lambda 우클릭 후 Publish to AWS Lambda 선택 실제로 프로젝트 진행시에는 .NET Core v3.1을 사용할 계획은 없지만 이번에는 반항하지 않고 AWS 공식 문서에서 시키는데로 따라해본다. VS2019, VS2017과는 아주 조금 다른 창이 뜨는데 엄청 많이 다른건 아니니까 요령껏 작성했다. 다음 페이지에선 크게 만질만한 옵션이 없다 Role Name만 AWSLambdaBasicExecutionRole로 변경해주고 업로드한다.

업로드가 정상적으로 완료되면 업로드 윈도우가 자동으로 종료되고, AWS Explorer를 보면 AWS Lambda에 방금 추가한 Function이 추가되어있다.

Error : Could not find the required '{Assembly}.deps.json'

{
  "errorType": "LambdaException",
  "errorMessage": "Could not find the required 'AWSLambda_basic.deps.json'.
                  This file should be present at the root of the deployment package."
}

새롭게 생성된 Function 윈도우에서 샘플 테스트를 진행하는데 보고 따라했음에도 에러가 생긴다. 참 신기한 세상이다.

내 머리가 레전드인건지..

해당 오류는 *.deps.json 파일이 없어서 생기는 오류인데, *.deps.json 파일은 프로젝트를 publish하게 되면 .\bin\Debug\\{runtime}\publish\ 디렉터리에 생성되는 파일이다. AWS Lambda에 업로드하기 전에 Visual Studio에서 dotnet publish 후 파일 생성까지 확인.

해결

dotnet publish한 프로젝트를 다시 AWS Lambda에 업로드했지만 해당 오류는 해결되지 않았다. 이래저래 테스트를 하던 중 AWS Lambda 업로드 중 Rold Name을 기존 AWSLambdaBasicExecutionRole에서 AWSLambdaRole (Default policy for AWS Lambda Service Role.)으로 변경했고, AWS Lambda에 업로드된 ToUpper() 함수는 정상적으로 동작했다.

Ending

한동안 기록없이 코드만 치다보니 감이 떨어진듯하다. 습관이 이렇게 무섭다.

앞으로 기록할 것들

• AWS Lambda에 업로드한 코드 수정하기(json parsing)
• dotnet publish 패키지 증발 현상
• AWS Lambda 함수와 AWS API Gateway 연동하기
• AWS EC2 ubuntu에 Docker 환경 구축하기 + ASP.NET Core Docker Image

기록할 일이 많다는건 좋은 상황인지, 아닌지.

[참고] AWS Lambda에 C# Handler 만들기 - devstarsj

새로운 회사에 이직하게 되었다. 자체 서비스를 C#으로 운영하고 있기에 적응해야 한다. 아마 개인적으로 스터디하는 내용을 이 게시물에 계속 추가하지 않을까 싶다. 정확하지 않은 내용이 있다면 따로 표시해놓고 수정할 계획이다.

DataGrid

Grid는 컨트롤들을 담지만 DataGrid는 사용자 정의 가능한 표 형태로 데이터를 표시하는 컨트롤로 행/열에 데이터를 표시하는 유연한 방법을 제공

DataGridColumn에 추가할 수 있는 3가지 Column이다. 많이 사용하는 Text와 CheckBox Column은 따로 지원하지만, 나머지는 DataGridTemplateColumn을 사용해야 한다.

결론 : Text, CheckBox가 아닌 원하는 컨트롤을 넣고 싶을 때 DataGridTemplateColumn을 사용한다.

[참고] WPF DataGrid 예제 - 오라클자바커뮤니티(OJC.ASIA) // C# 관련된 포스팅이 꽤 있는편이다. 따로 시간내서 하나씩 보면 좋을듯

Question mark

Python, Javascript와는 다르게 변수 타입에 ?를 붙여 사용하는 경우가 많다.

public partical class ExampleModel
{
  private int? a = null; // OK
  private int b = null; // error since b is not nullable
}

위와 같이 C#에서 int?, bool?, DateTime?와 같은 T?의 표현은 .NET의 Nullable<T>와 같은 표현이다. Nullable<T> 구조체는 값을 가지고 있는지 체크한다. Nullable 타입과 연관되어 자주 사용되는 ?? 연산자는 ?? 앞의 파라미터가 NULL인 경우 연산자 뒤의 값을 할당한다.

double _Sum = 0;
DateTime _Time;
bool? _Selected;

public void CheckInput(int? i, double? d, DateTime? time, bool? selected)
{
    if (i.HasValue && d.HasValue)
        this._Sum = (double)i.Value + (double)d.Value;

    // time valid check
    if (!time.HasValue)
        throw new ArgumentException();
    else
        this._Time = time.Value;

    // if selected is NULL > false
    this._Selected = selected ?? false;
}

Nullable 타입이 필요한 이유 : SQL 서버 테이블에서 NULL을 허용하는 컬림이 있을 때, 테이블의 NULL 속성을 표현하기 위해서

Binding

Binding은 데이터 또는 속성(프로퍼티)을 서로 연결하여 동적으로 변환 및 참조할 수 있도록 한다. 한 엘리먼트의 속성을 다른 엘리먼트의 속성, 또는 데이터와 연결하는 과정 Binding을 통해 간단하게 서로 값들을 참조하여 동적으로 변경시킬 수 있고, 긴 처리 없이 간단하게 리스트에 DataTable을 표시하는 등 장점이 많기 때문에 WPF 작업시에 Binding은 필수적으로 사용된다.

Binding은 XAML측, Code-behind(C#)측에서 하는 방법이 존재한다.

XAML Binding

<!-- XAML Binding -->
<!-- Controll TextBox to ScrollBar -->
<ScrollBar Name="scrollBar" Orientation="Horizontal" Maximum="100" LargeChange="10"
    SmallChange="1" Value="{Binding ElementName=textbox, Path=Text, Mode=OneWay}"/>
<TextBox Name="textbox" VerticalAlignment="Top"/>

Code-behind Binding

int i = 0;
private void btn0_Click(object sender, RoutedEventArgs e)
{
    i++;
    Binding binding = new Binding();
    binding.Source = slider;   // Slider
    binding.Path = new PropertyPath("Value");   // Property of Slider
    if (i % 5 == 0) binding.Mode = BindingMode.Default;
    if (i % 5 == 1) binding.Mode = BindingMode.OneTime;
    if (i % 5 == 2) binding.Mode = BindingMode.OneWay;
    if (i % 5 == 3) binding.Mode = BindingMode.OneWayToSource;
    if (i % 5 == 4) binding.Mode = BindingMode.TwoWay;
    lbl.SetBinding(ContentProperty, binding);

    lblMode.Content = binding.Mode;
}

private void btn1_Click(object sender, RoutedEventArgs e)
{
    if(lbl.Content != null) lbl.Content = (double)lbl.Content + 1;
}

Binding Mode

[참고] Binding Mode Example (XAML)

[참고] Binding Mode Example (Code-behind)

Reference Site

CHashtag Blog

Got permission denied while trying to connect to the Docker daemon socket at ...

$ docker ps
Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.40/containers/json: dial unix /var/run/docker.sock: connect: permission denied

$ docker ps 명령어를 입력했을때 마주치게 되는 권한 에러로 일반적으로 도커 소켓에 접근할 권한이 없기 때문에 발생한다. 이런 경우 docker ps 앞에 sudo를 붙여주면 해결이 되지만, 사용자 계정에서도 도커에 대한 접근이 가능하게 할 수 있도록 docker 그룹에 사용자를 추가한다.

$ sudo usermod -aG docker $USER_NAME
$ sudo su - $USER_NAME

위와 같이 적용하게 되면 sudo 명령어 없이도 정상적으로 docker 명령어를 사용할 수 있다.

    
    $ mkdir git-from-dockerfile
    $ cd git-from-dockerfile
    

작성중...

built-in function imwrite returned NULL without setting an error.

OpenCV를 이용하여 jpg to png 변환 Process 과정을 거칠 상황이 생겨 코드를 작성하던 중 마주친 에러

def jpg_to_png(path):
    filePath = '{}'.format(path)
    directory_name = basename(path)
    print('target directory :', filePath)
    fileExt = r'*.jpg'
    target_list = list(pathlib.Path(filePath).glob(fileExt))

    for target in range(0, len(target_list)):
        print('[INFO] target_list[{}] :'.format(target), target_list[target])
        target_file = target_list[target]
        img = cv2.imread(target_file)
        cv2.imwrite(r'{0}\{1}_{2}.png'.format(filePath, directory_name, target), img)
        print('[COMPLETE] {0} / {1} :'.format(target, len(target_list)))

argparse를 통해 변환 디렉토리에 대한 path를 인자로 받아 path 변수로 해당 경로를 전달하여 디렉토리 내에 jpg 파일을 png로 변환하는 코드이다.

img = cv2.imread(target_file)

해당 부분에서 OpenCV SystemError가 발생했고, 해당 오류 수정을 위해 인터프리터 환경으로 전환하여 오류 확인을 진행하였다. 일반적으로 파일의 경로는 str 타입으로 받아오는 경우가 많은데, 디렉토리 내에 jpg 파일 리스트를 가져오는 과정에서 사용한 pathlib 패키지에서 WindowsPath 타입으로 경로를 받아오는 현상이 발생했다.

의외로 타입 변환을 통해 간단하게 해결했다.

img = cv2.imread(str(target_file))

결론

쉽게 해결할 수 있는 문제는 차근차근 쉽게 생각해서 쉽게 해결해보자.

ubuntu 시스템에서 종종 사용하는 tmux인데, 자주 사용하는 유틸리티가 아니다보니 종종 사용법을 잊는 경우가 발생하여 벨로그에 남겨봐야겠다.

tmux install(ubuntu)

다른 시스템에선 사용해본적이 없어서 어떻게 설치하는지는 모르겠다. 아래는 Ubuntu 기준으로 작성됨.

$ apt-get install tmux

tmux command

tmux가 다 좋은데 커맨드가 머리에 잘 안남는다. 내가 멍청한 이유일지도 모르겠다. 아무튼 tmux의 커맨드는 ctrl+b가 기본이며, 이후 추가 입력키를 입력해서 사용하는 방식이다.

tmux Session

create session

$ tmux new -s [name]

kill session

$ tmux kill-session -t [name]

hide session

새롭게 생성한 세션에서 할 일을 마친 뒤 유지시키고 싶은 상태에서 기존 터미널로 나가고 싶은 경우

$ ctrl + b + d

visible session

hide session을 통해 벗어난 세션에 복귀하고 싶은 경우

$ tmux a -t [name]

tmux window

window는 탭 정도라고 생각하면 됨.

create window

$ ctrl + b + c

move window

$ ctrl + b + [window number]

panes

panes는 화면 분할(split)에 사용된다.

horizontal split

$ ctrl + b + %

vertical split

$ ctrl + b + "

panes move

panes간에 커서를 이동할 때 사용

$ ctrl + b + [arrow]

1. Text Gradient / Scroll list

2. pushNamedAndRemoveUntil

3. AlertDialog

4. AutomaticKeepAliveClientMixin

5. Flutter Youtube

헤비프랜 - Heavy Fran Youtube

Concurrency / Throughput

Node.js에서 JavaScript 실행이 싱글 스레드(이벤트 루프와 같은 스레드)에서 동작합니다. 따라서 Node.js의 동시성은 다른 작업이 완료된 후에 JavaScript 콜백 함수를 실행하는 이벤트 루프의 능력을 의미한다. JavaScript 실행은 하나의 이벤트 루프에서만 동작하지만 이벤트 루프의 여러 콜백 함수를 실행하여 동시에 처리되도록 보이는 것을 의미한다.

동시에 실행되어야 하는 모든 코드는 I/O 등의 JavaScript가 아닌 작업(이벤트 루프 스레드 외 다른 스레드)이 일어나는 동안 이벤트 루프가 계속 실행될 수 있도록 해야한다.

이벤트 루프는 동시 작업을 다루려고 부가적인 스레드를 만드는 다른 언어의 모델과는 다르다. (Node.js는 스레드를 따로 생성하지 않음) => (Node.js 10버전으로 들어오면서 Worker_thread라는 모듈을 통해 스레드 생성 가능하도록 변경됐다.)

Node.js System

libuv란 비동기 I/O에 집중하는 멀티 플랫폼 라이브러리이다. C언어로 개발되었으며 사실상 Node.js를 위해 개발된 것이다. 이 라이브러리는 다양한 I/O 폴링 메커니즘에 대한 단순한 추상화 이상의 기능을 제공한다. 어느 운영체제에서도 가능한 file I/O와 thread 기능 또한 제공된다.

libuv에는 thread pool이 존재하는데 이 thread pool에 있는 thread가 동기적인 입출력 작업을 이벤트 루프 대신 처리를 해준다. 또한 이 libuv를 통해 이벤트 루프를 제어한다.

Event Loop

이벤트 루프는 가능하다면 언제나 시스템 커널에 작업을 떠넘겨서 Node.js가 논블로킹 I/O 작업을 수행하도록 한다.

1. Library

기본적으로 Flutter 개발 중 아이콘 변경을 진행은 가능하지만 그 과정이 어느정도의 귀찮음을 동반하기 때문에 외부 라이브러리를 활용하여 간편하게 App Launcher Icon 변경하는 방법에 대해 작성해볼까 한다.

flutter_launcher_icons

flutter_launcher_icons : 기존에 다소 복잡했던 아이콘 변경의 과정을 커맨드 라인으로 간편하게 아이콘 변경이 가능한 라이브러리. 아이콘 롤백이 필요한 경우 이전 런처 아이콘을 유지할 수있는 옵션 존재. 작성일 기준 2020년 8월에 발표된 flutter_launcher_icons 0.8.1이 LTS 버전이다.

라이브러리 설치는 pubspec.yaml 하위에 있는 dev_dependencies에 아래와 같이 추가하면 된다.

dev_dependencies:
        ...
        ...
        ...
    flutter_launcher_icons: ^0.8.1

외부 라이브러리 설치에 대한 설명은 아래 링크 https://velog.io/@re_brother/TIL-Flutter-Study-2-December-23-2020 4. Client-Server Test using Node.js - Export Module 항목에 작성되어있다.

2. Configure

icon

아이콘은 1024px * 1024px, Alpha(투명) 값이 없어야 한다. 해당 아이콘을 ./assets/ 디렉터리에 추가하고, pubspec.yaml > assets에 path를 추가한다.

flutter_launcher_icons.yaml

pubspec.yaml과 동일한 디렉터리에 flutter_launcher_icons.yaml파일을 생성한 뒤 아래와 같이 작성한다.

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon.png"

image_path는 실제 아이콘으로 사용할 이미지의 path를 입력한다.

3. Command run

터미널에 flutter pub run flutter_launcher_icons:main 입력 후 run 위와 같은 콘솔이 출력되었다면 정상적으로 아이콘이 변경된 것을 확인할 수 있다.

Gradle threw an error while downloading artifacts from the network

Flutter App 테스트를 진행하던 중 [!] Gradle threw an error while downloading artifacts from the network 에러가 발생했다. 딱히 작업 중에 다른 파일을 수정했던건 없었는데 무슨 이유인지 앱 빌드가 되지 않아 나중을 위해 해결 방법을 작성해놓을까 한다.

gradle-wrapper.jar

> .\flutter_app\android\gradle 위치에 있는 gradle-wrapper.jar파일 삭제

gradle-wrapper.properties

1. gradle-wrapper.jar와 동일 디렉터리에 있는 gradle-wrapper.properties 파일 Open

2. #Fri Jun 23 08:50:38 CEST 2017
   distributionBase=GRADLE_USER_HOME
   distributionPath=wrapper/dists
   zipStoreBase=GRADLE_USER_HOME
   zipStorePath=wrapper/dists
   distributionUrl=https://services.gradle.org/distributions/gradle-5.6.2-all.zip```
   
   

gradle-wrapper.properties 파일 하단에 존재하는 distributionUrl=https://.../gradle-5.6.2-all.zip을 https://.../gradle-6.4.1-all.zip으로 변경한 뒤에 터미널에 flutter run 입력 후 정상적으로 컴파일이 진행되는지 확인한다.

Another Solution

위 방법이 아닌 터미널창에 flutter build 명령어를 입력하면 해결된다는 글이 있는데, 해결 가능한 방법인지 아닌지는 확인을 하지 못했다. 아무튼 그런 방법도 있다고 한다.

1. Multiple FloatingActionButton 2. Image Move 3. Button Label 4. Client-Server Test using Node.js

1. Multiple FloatingActionButton

일반적인 Flutter개발 환경에서는 FloatingActionButton을 1개만 선언이 가능하다. 하지만 Stack 등을 이용하여 다중의 FloatingActionButton을 구현 가능하며, 테스트를 진행하던 도중 Scaffold 구조로 작성된 코드의 경우 정상적으로 구동이 불가능한 현상이 발생했다. 물론 FloatingActionButton Asset 외에도 RaisedButton, FlatButton, IconButton 등이 존재하지만 막연하게 "다중 FloatingActionButton을 만들 수 있는 방법은 없을까?" 라는 생각이 들었다.

What happened?

엄청난 일이 있었던건 아니다. 앞에 말했듯이 막연한 생각으로 FloatingActionButton을 하나 더 만들어보고 싶었고, Flutter에서는 FloatingActionButton은 더이상 선언이 불가능하다.

Try 1

물론 아예 방법이 없진 않았다. 아래와 같이 FloatingActionButton을 Stack으로 묶어 Align으로 나눈 다음 선언을 한다면 한 화면 내에 여러 개의 FloatingActionButton 생성이 가능하다.

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.bottomLeft,
      child: FloatingActionButton(...),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(...),
    ),
  ],
)

Try 2

현재 코드는 Scaffold 구조로 구성되어 있어서, 아래와 같이 Stack 앞에 floatingActionButton을 선언한다.

floatingActionButton: Stack(
  children: <Widget>[
    Align(
      alignment: Alignment(Alignment.bottomRight.x, Alignment.bottomRight.y - 0.4),
      child: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.arrow_upward_sharp),
      ),
    ),
    Align(
      alignment: Alignment(Alignment.bottomRight.x, Alignment.bottomRight.y - 0.2),
      child: FloatingActionButton(
        onPressed: _decrementCounter,
        tooltip: 'Decrement',
        child: Icon(Icons.arrow_downward_sharp),
      ),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
        onPressed: _initCounter,
        tooltip: 'Initialize',
        child: Icon(Icons.album_outlined),
      )
    )
  ],
),

Result

Alignment의 y값을 받아 각 버튼의 위치를 0.2, 0.4씩 변경했다.

2. Image Move

Multiple FloatingActionButton에서 여러 개의 FloatingActionButton을 통해 counter 변수의 값을 증가/감소할 수 있는 기능을 구현했다. 해당 기능을 활용하여 import된 이미지의 위치를 조정하는 기능을 구현해보자.

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              //Image.asset('assets/images/test_img.png'),
              color: Colors.blue,
              width: 200,
              height: 200,
            ),

            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline2,
            ),
          ],
        ),
      ),

이미지를 삽입하기 전 body에 테스트용 Container를 추가하여 해당 영역 안에 이미지를 배치할 예정이다.

Import Image

현재 프로젝트 디렉터리 구조이다. 해당 프로젝트에서 사용되는 외부 이미지와 리소스들은 모두 pubspec.yaml에 path를 꼭 작성해야한다.

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - assets/images/test_img.png
    ...

물론 1개의 파일만 추가한다면 해당 파일의 상대 경로(assets/images/test_img.png)를 추가하면 된다. 하지만 하나의 파일이 아닌 디렉터리 단위로 추가하게 될 경우 해당 디렉터리의 상대 경로(assets/images/)를 추가하면 된다. 이 때 상대 경로의 기준점은 pubspec.yaml이다.

이렇게 외부 이미지 경로에 대한 정의를 한 뒤에 main.dart 파일로 돌아와서 해당 이미지를 출력한다.

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blue,
              width: 200,
              height: 200,
            ),

            Image.asset('assets/images/test_img.png'),

            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline2,
            ),
          ],
        ),
      ),

Image.asset()은 로컬에 위치한 이미지를 출력할때 사용되고 네트워크에 위치한 이미지를 Load 해야하는 경우에는 Image.network()를 사용한다.

Image Location

현재 테스트 프로젝트는 mainAxisAlignment로 각 material들의 y축이 상대적으로 고정되어있기 때문에 이미지를 Container에 배치한 상태로 이미지의 x-Alignment Value를 변경할 예정이다.

 return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Image.asset('assets/images/test_img.png', width:200, height:200, fit: BoxFit.fill),
              padding: EdgeInsets.only(left: 2, right: 2, bottom: 1),
              alignment: Alignment(0 - (100 - _counter)/100, 0),
            ),

            // Image.asset('assets/images/test_img.png'),

            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline2,
            ),
          ],
        ),
      ),

위와 같이 코드를 작성하였으며, 이미지 Container의 x좌표의 위치를 변경하기 위해 해당 컨테이너의 alignment를 Alignment(0 - (100 - _counter)/100, 0)로 선언하여 _counter의 값이 변경될 때 마다 이미지의 위치가 변경된다.

3. Button Label

Fluter Official Documents를 보다가 각 버튼에 label이 가능하다는 사실을 알게되었고 이 label 기능을 추가해볼까 한다. 위 이미지 처럼 기존에 정의해놓은 아이콘 우측으로 label을 추가하는 방식이다.

      // Origin Code
      floatingActionButton: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment(Alignment.bottomRight.x, Alignment.bottomRight.y - 0.4),
            child: FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.arrow_upward_sharp),
              backgroundColor: Colors.indigo,
            ),
          ),

기존 FloatingActionButton에 바로 label속성을 추가하게 되면 child에 종속되어있는 Icon속성과 정상적으로 매칭되지 않아 아래와 같은 오류가 발생한다. 일반적인 버튼에 Label속성을 추가하기 위해서는 FloatingActionButton의 extended 메소드를 활용해야한다.

      floatingActionButton: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment(Alignment.bottomRight.x, Alignment.bottomRight.y - 0.4),
            child: FloatingActionButton.extended(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              icon: Icon(Icons.arrow_upward_sharp),
              label: Text('Increment'),
              backgroundColor: Colors.indigo,
            ),
          ),

FloatingActionButton.extended 하위에 icon과 label을 새롭게 선언하여 조금 더 직관적인 UI를 만들 수 있다.

4. Client-Server Test using Node.js

간단하게 Flutter 앱 내에서 Node.js 서버와 통신을 진행해보려 한다. 일단 Node.js 서버는 요청에 대한 응답만 넘겨주는 정도로 간단하게 구현한다.

Server(Node.js)

const http = require("http");

let fs = require('fs');
let bodyParser = require('body-parser');
// DB Start
const sqlite3 = require('sqlite3').verbose();
let sql = `SELECT * FROM user`;

let db = new sqlite3.Database('./app/database.db', (err) => {
        if (err) {
                return console.error(err.message);
        }

        console.log('Connected to the in local SQLite database.');
        db.all(sql, [], (err, rows) => {
                if (err) {
                        throw err;
                }
                rows.forEach((row) => {
                        console.log(row);
                });
        });

});
// DB End

http.createServer((req, res) => {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('Node.js Server-Client Test');
}).listen(4004, () => {
        console.log("Server Running at localhost:4004");
});

간단하게 테스트용으로만 구현하려고 했는데, 마침 SQLite 테스트용 서버를 구축해놓은 코드가 있어서 해당 코드를 활용하여 테스트를 진행할 예정이다. 혹시나 DataBase가 필요없는 경우에는 주석 DB Start부터 DB End까지 삭제한 뒤에 진행하면 된다.

Export Module

물론 http 라이브러리가 기존에 설치되어 있다면 아무런 제약사항이 없겠지만 혹시나 http 모듈을 설치해야 한다면 pubspec.yaml -> dev_dependencies 하위에 해당 모듈의 이름과 버전을 선언하고, 커맨드창에서 flutter pub get 명령어를 입력하면 자동으로 설치된다.

Client(Flutter)

서버와 통신하기 위해서는 http 라이브러리가 필요하기 때문에 Flutter 코드 최상단에 http 라이브러리를 참조한다.

import 'package:http/http.dart';

Node.js Server - flutter Client 통신은 아래와 같이 진행하였으며, 이에 대한 내용은 주석으로 번호를 표시하여 설명하겠다.

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Section 1
  String serverResponse = '';

  // Section 2
  _makeGetRequest() async {
    Response response = await get( _nodeCall() );
    setState(() {
      serverResponse = response.body;
    });
  }

  // Section 3
  String _nodeCall()
  {
      return 'http://10.110.31.211:4004';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Section 4
            Text('Server Response\n', style: Theme.of(context).textTheme.headline5),
            Text('[ ' + serverResponse + ' ]', style: Theme.of(context).textTheme.headline6),
            Container(
              child: Image.asset('assets/images/test_img.png', width:200, height:200, fit: BoxFit.fill),
              padding: EdgeInsets.only(left: 2, right: 2, bottom: 1),
              alignment: Alignment(0 - (100 - _counter)/100, 0),
            ),

            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline2,
            ),
          ],
        ),
      ),

      floatingActionButton: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.bottomRight,
            child: FloatingActionButton.extended(
              // Section 5
              onPressed: _makeGetRequest,
              tooltip: 'Initialize',
              icon: Icon(Icons.album_outlined),
              label: Text('  Node.js   '),
              backgroundColor: Colors.blue,
            )
          )
        ],
      ),
    );

Section 1 : String 형태의 serverResponse를 선언한다. 해당 변수는 최초 init시에 공백으로 보여지게 되며, 이는 Section 2에서 클라이언트 요청에 대한 서버의 response를 표시한다. Section 2 : async 방식으로 서버에 요청한다. Section 3에서 요청된 응답을 get하여 response에 저장한다. Section 3 : 지정해놓은 서버에 요청을 전달하여, 응답 내용을 return한다. Section 4 : 응답받은 serverResponse를 출력한다. Section 5 : FloatingActionButton에 _makeGetRequest Function을 적용한다.

5. Reference Pages

구글링을 통해 여러 문제들을 해결했지만, 정리해놓고 필요할 때 마다 참고하면 좋을 블로그들

▶ Flutter Widget 정리 Tistory ▶ Flutter Image Properties 정리 Tistory ▶ Markdown 문법 정리 Velog

What is Flutter?

Flutter 는 Google 에서 만든 Cross-Platform Framework 이다. 하나의 코드 Base 로 Android / iOS 심지어 Desktop App 까지 개발 할 수 있다. Dart로 작성된 하나의 코드는 각 OS에 맞게 Convert 과정을 거쳐 Build 된다.

Flutter Development Environment

Install list

1. Android Studio [Link]
2. Android Plug-in Android Studio 실행 후 [Files] -> [Settings] 또는 Ctrl + Alt + S 단축키를 이용하여 Plugins 탭에서 Flutter를 설치한다. Flutter Plugin을 설치하게 되면 Dart Plugin도 함께 설치된다.
3. Android Virtual-Machine [Tools] -> [AVD Manager] 또는 우측 상단 아이콘을 클릭하여 AVD Manager를 실행한다.

Create Virtual Device 버튼을 클릭해서 새로운 안드로이드 가상 머신을 생성한다. Android 버전은 자유롭게 선택해도 되지만, 호환 및 테스팅 이슈가 존재할 수 있으므로 Android 10 또는 11을 사용하기를 추천한다.

4. Flutter SDK [Link] Flutter SDK를 다운받아 압축 해제 후 flutter 폴더 전체를 C드라이브 최상위 디렉터리로 이동한다.

정상적으로 폴더를 이동했다면 C:\flutter\에는 위와 같은 structure를 가진다. 이후 SystemPropertiesAdvanced를 실행하여 C:\flutter\bin\ 경로를 환경변수 PATH에 추가한다. 환경변수 추가까지 정상적으로 진행했다면 명령 프롬프트(cmd)에 flutter doctor를 실행해본다.

최초 실행 시에는 위와 같은 화면이 출력된다.

이어서 위와 유사한 커맨드가 나오게 되는데, 아마 Android toolchain 부분에 WARNING이 존재한다. 안드로이드 라이센스 관련된 내용인데 해당 부분에 대한 해결을 위해 커맨드에 flutter doctor --android-licenses를 입력하고, accepted (y/N)? 에서 전부 y를 해주면 된다.

여기까지 진행이 완료되었다면 Android Studio, VS Code, Connected device 총 3개의 warning이 존재하는데 Android Studio Warning은 실제 개발 환경에 추가 Plugin을 설치했기 때문에 패스해도 된다고 한다. VS Code는 개발 환경에 추가하지 않을 예정이기 때문에 패스할 것이고, Connected device는 현 시점에서 Virtual-Machine이 동작하지 않고 있기 때문에 발생하는 오류이다.

TIP?..

혹시나 커맨드창에 flutter doctor 명령어가 정상적으로 실행되지 않고 'flutter'는 내/외부 명령, 실행 프로그램, 배치 파일이 아니라고 뜨는 경우에는 환경 변수가 정상적으로 등록되지 않은 경우이므로, 커맨드창에 set 명령어를 입력하여 환경변수를 시스템에 적용하면 된다.

Create Android Studio Flutter Project

Android Studio 실행 시 관리자 권한으로 실행해주세요.

Android Studio를 관리자 권한으로 실행 후 [File] -> [New] -> [New Flutter Project]를 눌러서 새 플러터 프로젝트를 생성합니다.

템플릿의 경우 Flutter Application을 선택하고, 다음 페이지로 넘어갑니다.

Project Name, Description은 자유롭게 작성하고 Flutter SDK path에 아까 다운로드받은 Flutter SDK의 절대경로를 입력한다. 제대로 안적으면 다음으로 넘어갈 수 없으니 꼭 유의해서 작성하도록 한다.

Android 개발만 진행한다면 Include Kotlin support for Android code만 체크하면 되고, 반대로 iOS 개발만 진행한다면 Include Swift support for iOS code만 체크하면 된다. 굳이 하나의 플랫폼만 개발할 이유는 없으므로 양쪽 다 체크하고 프로젝트 생성을 마친다.

프로젝트 생성이 완료되면 새로운 Android Studio가 열리고, 좌측에 아래와 같은 파일 및 폴더들이 생성된 것을 확인할 수 있다.

해당 폴더와 파일이 무엇을 의미하는지 간략하게 설명하고 마무리할까 한다.

android – Android Application을 만들기 위해 자동으로 생성된 소스코드 ios – iOS Application을 만들기 위해 자동으로 생성된 소스코드 lib – Flutter Framework를 사용하여 쓰여진 다트 코드를 담고 있는 메인 폴더 lib/main.dart – Flutter Application의 엔트리 포인트 test – Flutter Application을 테스트하기 위한 Dart 코드를 담고 있는 폴더 test/widget_test.dart – Sample Code .gitignore – Git에 들어가지 않을 파일들 설정 .metadata – Flutter 툴에 의해 자동 생성됨 .packages – Flutter 패키지를 추적하기 위해 자동 생성됨 .iml – Android Studio에 의해 사용되는 프로젝트 파일 pubspec.yaml – Pub에 의해 사용되는 Flutter Package Manager

Chart.js를 이용하여 데이터 차트 생성 후에 데이터를 수정할 경우 정상적으로 출력되는 것으로 보이지만 이전 데이터가 있던 위치에 마우스 오버를 하면 이전 데이터가 출력되는 현상이 있다. 나만 겪고 있는 현상은 아니였고, 이를 해결하기 위해 삽질을 시작해봐야겠다.

Try

데이터 차트 chart0과 chart0_1이 존재할 경우 해당 차트를 Destroy()하는 방법을 적용해보자.

Code

function chart_search_total(grade1, grade2, grade3, grade4, grade5, spend1, spend2, spend3, spend4, spend5)
{
    console.log(chart0);
    console.log(chart0_1);

    if((chart0 != undefined) && (chart0_1 != undefined))
    {
        chart0.destroy();
        chart0_1.destroy();
    }

    var ctx0 = document.getElementById('totalChart').getContext('2d');
    var ctx0_1 = document.getElementById('totalChart_1').getContext('2d');

    var data0 = {
        // The type of chart we want to create
        title: "Monthly Grade Variation",
        type: 'line',
        // The data for our dataset
        data: {
            labels: ["April", "May", "June", "July", "August"],
            datasets:
            [
                {
                    label: "Search",
                    backgroundColor: 'rgb(153, 0, 153)',
                    fill:false,
                    borderColor: 'rgb(153, 0, 153)',
                    lineTension:0.25,
                    data: [grade1, grade2, grade3, grade4, grade5],
                },
            ]
        },
        // Configuration options go here
        options: {
            title: {
                display: 'ture',
                text: 'Monthly Grade Variation',
                fontSize: 20
            },
            //responsive: false,
            scales: {
                yAxes: [{
                    ticks: {
                        reverse: true,
                        min: 1,
                        max: 9
                    }
                }]
            }
        }
    }

    var data0_1 = {
        // The type of chart we want to create
        title: "Monthly Spending Variation",
        type: 'bar',
        // The data for our dataset
        data: {
            labels: ["April", "May", "June", "July", "August"],
            datasets:
            [
                {
                    label: "Spending",
                    backgroundColor: 'rgb(204, 102, 204)',
                    fill:false,
                    borderColor: 'rgb(204, 102, 204)',
                    lineTension:0.25,
                    data: [spend1, spend2, spend3, spend4, spend5],
                }
            ]
        },
        // Configuration options go here
        options: {
            title: {
                display: 'ture',
                text: 'Monthly Spending Variation',
                fontSize: 20
            },
        }
    }

    var chart0 = new Chart(ctx0, data0);
    var chart0_1 = new Chart(ctx0_1, data0_1);

}

무엇이 문제인지 정상적으로 동작하지 않는다. 왜 console.log()를 해봐도 chart0와 chart0_1의 내용이 undefined로 표현되는걸까

Solution

답은 가까이 있었다. chart_search_total 함수 내에 chart0, chart0_1 변수를 매번 새로 선언하니 당연히 다음 Chart가 생성될 때 마다 해당 변수가 새로 생성되는 것이다. 이를 해결하기 위해 chart0, chart0_1 변수를 전역 변수로 선언하고, 다음 차트를 생성할 때는 해당 전역 변수를 참조하여 차트를 생성한다.

Code

var chart0;
var chart0_1;

function chart_search_total(grade1, grade2, grade3, grade4, grade5, spend1, spend2, spend3, spend4, spend5)
{
    console.log(chart0);
    console.log(chart0_1);

    if((chart0 != undefined) && (chart0_1 != undefined))
    {
        chart0.destroy();
        chart0_1.destroy();
    }

    var ctx0 = document.getElementById('totalChart').getContext('2d');
    var ctx0_1 = document.getElementById('totalChart_1').getContext('2d');

    var data0 = {
        // The type of chart we want to create
        title: "Monthly Grade Variation",
        type: 'line',
        // The data for our dataset
        data: {
            labels: ["April", "May", "June", "July", "August"],
            datasets:
            [
                {
                    label: "Search",
                    backgroundColor: 'rgb(153, 0, 153)',
                    fill:false,
                    borderColor: 'rgb(153, 0, 153)',
                    lineTension:0.25,
                    data: [grade1, grade2, grade3, grade4, grade5],
                },
            ]
        },
        // Configuration options go here
        options: {
            title: {
                display: 'ture',
                text: 'Monthly Grade Variation',
                fontSize: 20
            },
            //responsive: false,
            scales: {
                yAxes: [{
                    ticks: {
                        reverse: true,
                        min: 1,
                        max: 9
                    }
                }]
            }
        }
    }

    var data0_1 = {
        // The type of chart we want to create
        title: "Monthly Spending Variation",
        type: 'bar',
        // The data for our dataset
        data: {
            labels: ["April", "May", "June", "July", "August"],
            datasets:
            [
                {
                    label: "Spending",
                    backgroundColor: 'rgb(204, 102, 204)',
                    fill:false,
                    borderColor: 'rgb(204, 102, 204)',
                    lineTension:0.25,
                    data: [spend1, spend2, spend3, spend4, spend5],
                }
            ]
        },
        // Configuration options go here
        options: {
            title: {
                display: 'ture',
                text: 'Monthly Spending Variation',
                fontSize: 20
            },
        }
    }

    chart0 = new Chart(ctx0, data0);
    chart0_1 = new Chart(ctx0_1, data0_1);

}

End

간단하지만 어렵고 멍청한 접근으로 일을 힘들게 하는 것 같다. 머리좀 써야겠다.

File Load

Not enough data

lastFile_Rename Function은 지난번에 작성을 완료했고, 이름이 변경된 해당 엑셀 파일을 WPF Windows 상에 Load하여 출력하는 기능을 구현해야한다. 나름 자료가 없진 않아보이는데 Simple 해보이는 패키지는 온통 유료 패키지고, 무료 패키지는 여러가지로 지저분하게 엮여있는 자료만 존재한다. 하나 하나 적용해보면서 에러를 맞아보자

Try 1 : WPF Excel Datagrid import

Visual Stduio 2015 에서 기본으로 제공되는 WPF Datagrid Tool에 엑셀 데이터를 Load/Save 하는 방식이다. EPPlus 패키지 내의 ExcelPackage를 사용한다.

<!-- Window_taxdata_01.xaml -->

<DataGrid x:Name="dataGrid_scrap_01"
            HorizontalAlignment="Left"
            Margin="70,255,350,0"
            VerticalAlignment="Top"
            Height="auto"
            Width="auto"
            CanUserAddRows="False"
            CanUserDeleteRows="False"
            AutoGenerateColumns="False"
            ItemsSource="{Binding ObserList}">
            <DataGrid.Resources>
                <Style TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="FontWeight" Value="SemiBold"/>
                    <Setter Property="BorderThickness" Value="0,0,1,2"/>
                    <Setter Property="BorderBrush" Value="Black"/>
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                </Style>
            </DataGrid.Resources>
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell">
                    <Setter Property="TextBlock.TextAlignment" Value="Center"/>
                    <Setter Property="IsEditing" Value="True"/>
                </Style>
            </DataGrid.CellStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Header="Month" Width="1*" Binding="{Binding DataMonth}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Division" Width="1.5*" Binding="{Binding DataDivision}" IsReadOnly="True"/>
                <DataGridTextColumn Header="고지금액" Width="3*" Binding="{Binding DataCharge1}" IsReadOnly="True"/>
                <DataGridTextColumn Header="수납금액" Width="3*" Binding="{Binding DataCharge2}" IsReadOnly="True"/>
                <DataGridTextColumn Header="미납금액" Width="3*" Binding="{Binding DataCharge3}" IsReadOnly="True"/>
            </DataGrid.Columns>
        </DataGrid>

Nuget Package Manager을 통해 EPPlus를 설치하고 *.cs 코드에 아래 내용을 추가한다.

using OfficeOpenXml;

// ...

public void excelFile_Load(string rename_file)
{
   var fi = new FileInfo(rename_file);
   using (var package = new ExcelPackage(fi))
   {
      // ...
   }

뭔가 중간에 어려움이 있긴 했지만 1트만에 성공할 것 같은 분위기다.

Try 2 : Microsoft.Office.Interop.Excel

생성해놓은 DataGrid는 유지하고 Microsoft.Office.Interop.Excel 패키지를 통해 엑셀 데이터를 Load해서 2차원 배열에 변수들을 담아 DataGrid에 옮겨주는 식으로 진행해볼까 한다. NuGet Package Manager에서 Microsoft.Office.Interop.Excel 패키지를 install 한다.

using Microsoft.Office.interop.Excel;

// ...

public void excelFile_Load(string rename_file)
{
   Application application = new Application();
   Workbook workbook = application.Workbooks.Open(Filename: rename_file);

File download & rename

Selenium 패키지를 업무 자동화 시스템 개발에 사용중인데, 데이터 시트를 다운받는 과정에서 데이터 시트 구분을 위해 파일명 변경이 필요하다. 다운로드 받은 파일을 자체적으로 Rename해주는 기능은 Selenium에서 지원되지 않는 것으로 보이며, 해당 이슈는 자체적으로 처리해야겠다. 데이터가 저장되는 Default directory를 Fix한 상태로 해당 directory에서 가장 마지막에 수정된 파일의 이름을 변경해볼까 한다. File Search에는 System.IO 패키지를 사용한다.

public void lastFile_search(string title)
{
    // init part
    var files = new DirectoryInfo(driver_download_path).GetFiles("*.xls");
    string latestFile = "";
    DateTime lastUpdated = DateTime.MinValue;

    // search part
    foreach (FileInfo file in files)
    {
        if (file.LastWriteTime > lastUpdated)
        {
            lastUpdated = file.LastWriteTime;
            latestFile = file.Name;
        }
        // log part
        Console.WriteLine("Last File is " + latestFile);
    }
 }

Error

마지막에 생성된 파일만 logging하는 것이 아니라 모든 파일을 logging하는 상황이 벌어졌다.

Solution

foreach문 내에 Console.WriteLine를 사용해서 벌어진 일이다.

    foreach (FileInfo file in files)
    {
        if (file.LastWriteTime > lastUpdated)
        {
            lastUpdated = file.LastWriteTime;
            latestFile = file.Name;
        }
    }
    // log part
    Console.WriteLine("Last File is " + latestFile);

위와 같이 Console.WriteLine를 foreach문 밖으로 꺼냈더니 문제없이 실행된다.

Next

마지막에 생성된 파일을 찾았으니 해당 파일을 수정하는 Function만 정의를 하면 완성이다. File Search에 사용했던 System.IO 패키지의 하위 패키지인 System.IO.File.Move 패키지를 사용하여 파일명을 직접적으로 바꾸는 것이 아닌 파일 이동을 통해 이름을 변경한다. 파일 이동을 위해서는 해당 파일의 절대 경로가 필요하다. 이미 파일의 절대 경로는 driver_download_path로 지정해놓았기에 작업에 귀찮은 점은 많이 덜었다.

C# Latest File Search & Rename Code

public void lastFile_Rename(string title)
{
    //string Folder = driver_download_path;
    var files = new DirectoryInfo(driver_download_path).GetFiles("*.xls");
    string latestFile = "";

    DateTime currentTime = DateTime.Now;

    // for rename_file
    string file_yyyymmdd = currentTime.ToString("yyyyMMdd");
    string file_hhmmss = currentTime.ToString("HHmmss");
    string rename_file = driver_download_path + title + "_" + file_yyyymmdd + "_" + file_hhmmss + ".xls";

    DateTime lastUpdated = DateTime.MinValue;

    // search latest file name
    foreach (FileInfo file in files)
    {
        if (file.LastWriteTime > lastUpdated)
        {
            lastUpdated = file.LastWriteTime;
            latestFile = file.Name;
        }
    }

    // set a target file path
    string origin_file = driver_download_path + latestFile;

    // launch rename
    System.IO.File.Move(origin_file, rename_file);

    //Console.WriteLine("Test : " + latestFile);
    //Console.WriteLine(title);
}

Values in Code

string file_yyyymmdd : 파일 이름 구분을 위해 현재 날짜를 yyyy-mm-dd 식으로 지정 string file_hhmmss : 파일 이름 구분을 위해 현재 시간을 hh-mm-ss 식으로 지정 string rename_file : 최종적으로 바꿔지는 파일 이름과 절대경로 string origin_file : 이름을 바꿀 파일의 이름과 절대경로

C# WPF

Microsoft에서 Java이겨보겠다고 부랴부랴 만들어낸 C#으로 Windows GUI 프로그램 개발을 진행하게 되었다. Python에서 pip으로 제공되어 설치해서 사용했던 selenium 패키지가 C#에서도 Nuget Package Manager를 통해 설치하여 사용이 가능하고, 이를 통하여 특수 업무 자동화 프로젝트 개발을 진행한다.

이전에도 Windows C++ MFC 개발을 진행한 경험은 있으나, MFC 개발과 WPF 개발을 경험한 입장에서 몇가지 차이점을 끄적여볼까 한다.

C++ MFC vs C# WPF

공통점

크게 언어가 다른 점과 사소한 몇가지를 제외하면 비슷한 느낌이 많이 든다. 개발하는 툴도 마찬가지로 Microsoft사의 Visual Studio를 사용하고, MFC에 있었던 레이아웃(Toolbox)이 WPF에도 그대로 전승되어 사용된다는 느낌이 많았고, 해당 Tool들의 Rule이 매우 흡사하다.

차이점

1. 생각 나는 평생 C#이라는 언어를 쓸 것이라는 생각을 해본 경험조차 없다. 상당한 거부감이 있었고 도대체 XAML은 뭔지도 모르겠고, 그냥 C++로 MFC 개발 진행할 때도 자료가 매우 없다는 점을 느꼈는데 도대체 써본적도 없는 C#으로 어떻게 개발을 진행해야할지 갈피 조차도 잡히지 않았다. 하지만 생각과는 다르게 2년 6개월전 MFC를 처음 개발했던 나와 지금 현재의 나 사이에 차이점을 느낄 수 있었다.
2. 패키지 C++ MFC 개발 진행시에는 다른 사람이 구현해놓은 패키지 적용을 위해선 해당 패키지의 *.cpp 파일과 *.h 파일을 끌어와서 프로젝트에 적용하고 해당 패키지를 사용할 파일에서 하나 하나씩 선언 후에 사용이 가능했다. C# WPF에서는 Nuget Package Manager를 통해 패키지를 바로 검색하고, 프로젝트에 import하여 기타 다른 작업 없이 사용할 수 있다. 개인적으로 Python의 pip보다 편하다고 생각된다.
3. XAML(eXtensible Application Markup Language) C++ MFC에서 Toolbox에 있는 각종 레이아웃들을 끄집어내어 다이얼로그에 배치했다면, WPF에서는 HTML과 유사한 Markup Language를 통해 레이아웃 생성이 가능하다. script를 통한 event 발생과 레이아웃 setting이 가능하며, 초반에 익숙해지기 어려울 뿐이지 익숙해진다면 충분히 매력있는 요소 중 하나라고 생각한다.

to be

아마 한동안은 회사 업무로 인해 Python, Javascript보다 C#을 쓰는 일이 더 잦아질 것 같다. 또한 Flutter 개발을 위해 Dart도 쓰게 될 것 같은데... 빠르게 마무리하고, 대학원 진학 준비도 하고... 마지막 학기도 잘 마무리해야겠다.

Javascript 개발자를 위한 VSCode Extension

VSCode Extension for Javascript Developer[1]

VSCode Extension for Javascript Developer[2]

Ubuntu OS install

혹시나 Ubuntu 설치법을 모르는 경우는 아래를 참고하시어 설치를 진행하시길 바람.

Ubuntu 18.04 LTS 운영체제 설치하는 방법 @Lael's World

Change apt source

• 다운로드 속도 향상을 위해 repository mirror를 카카오 mirror로 변경
• /etc/apt/sources.list에 기본 ubuntu mirror 주소가 있고, 이를 vi 명령어를 이용하여 변경

  ~$ sudo vi /etc/apt/sources.list

  :%s/kr.archive.ubuntu.com/mirror.kakao.com

  ~$ sudo apt-get update

  Check Network Interface

  Network Adaptor 확인을 위해 net-tools에 포함된 ifconfig를 사용한다. 기본 Ubuntu 18.04 LTS는 포함하고 있지 않으므로, net-tools를 설치한다. 정상적으로 설치가 되었다면 ifconfig -a 로 본인의 네트워크 인터페이스를 확인한다.

  ~$ sudo apt install net-tools
  ~$ ifconfig -a
  enp2s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.197.218  netmask 255.255.255.0  broadcast 192.168.197.255
        inet6 fe80::7393:4006:7019:bb66  prefixlen 64  scopeid 0x20<link>
        inet6 fd44:c6a6:922c:0:79c6:764a:444d:b95e  prefixlen 64  scopeid 0x0<global>
        inet6 fd44:c6a6:922c:0:f0dc:7b5b:e40c:23d2  prefixlen 64  scopeid 0x0<global>
        inet6 fd44:c6a6:922c::489  prefixlen 128  scopeid 0x0<global>
        ether b4:2e:99:04:10:e1  txqueuelen 1000  (Ethernet)
        RX packets 3946410  bytes 550270004 (550.2 MB)
        RX errors 0  dropped 254766  overruns 0  frame 0
        TX packets 114759  bytes 8209523 (8.2 MB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0
  

lo: flags=73<UP,LOOPBACK,RUNNING> mtu 65536 inet 127.0.0.1 netmask 255.0.0.0 inet6 ::1 prefixlen 128 scopeid 0x10 loop txqueuelen 1000 (Local Loopback) RX packets 1623 bytes 149090 (149.0 KB) RX errors 0 dropped 0 overruns 0 frame 0 TX packets 1623 bytes 149090 (149.0 KB) TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0

해당 Ubuntu의 Network Interface는 ``enp2s0``인 것을 확인하였으니, 고정 IP 설정을 진행한다.

### Setting a Static IP Address
네트워크 config 변경을 위해 ``network-manager-all.yaml`` 을 열고

~$ sudo vi /etc/netplan/*.yaml

renderer 밑에 아래와 같은 내용을 추가한다. 아래 내용은 IP를 192.168.197.218로 지정한 예
```bash
ethernets:
    enp2s0:
            dhcp6: no
                addresses: [192.168.197.218]
                gateway4: 192.168.197.1
                nameservers:
                    addresses: [8.8.8.8, 8.8.4.4]

:wq로 저장한 뒤에 네트워크 설정을 시스템에 적용한다.

~$ sudo netplan apply

정상적으로 IP가 변경되었는지 확인하려면 다시 ifconfig -a를 통해 확인이 가능하다.

Nvidia Driver 설치

뻘짓을 많이 하는 구간인데, autoinstall을 통해 편하게 할 수 있다고 한다.

~$ sudo add-apt-repository ppa:graphics-drivers/ppa
~$ sudo apt update
~$ sudo ubuntu-drivers autoinstall
~$ sudo reboot

혹시나 설치 과정에서 기존 설치된 프로그램들과 충돌 발생 시 아래 명령어 입력

~$ sudo apt --purge autoremove nvidia*

의존성 에러가 발생하는 경우는 아래 명령어 입력

~$ sudo apt --fix-broken install
~$ sudo apt-get -f install
~$ sudo apt-get upgrade

Install CUDA toolkit

NVIDIA 공식 홈페이지에서 CUDA toolkit을 GPU 버전과 맞는 버전으로 검색하여 설치하면 된다. 하지만 본인이 특수한 버전을 설치해야 하는 상황이라면 아래처럼 하면 큰일난다. 진짜 큰일난다. 작성일 기준(2020-07-08) cuda-11.0이 설치된다.

~$ wget https://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/cuda-repo-ubuntu1804_10.1.105-1_amd64.deb
~$ sudo dpkg -i cuda-repo-ubuntu1804_10.1.105-1_amd64.deb
~$ sudo apt-key adv --fetch-keys https://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/7fa2af80.pub
~$ sudo add-apt-repository "deb http://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/ /"
~$ sudo apt-get update
~$ sudo apt-get -y install cuda

혹시나 cuda-11.0이 설치되어 마음이 아프다거나, 많이 속상한 경우에는 아래와 같이 진행하면 된다.

~$ sudo apt-get install cuda-10.1

정상적으로 설치가 되었다면 진심으로 축하드립니다. cd 명령어를 통해 home 디렉토리로 이동하여 .profile을 띄우고

~$ cd
~$ vi .profile

아래 내용을 추가하고 변경사항을 저장한다.

export PATH=/usr/local/cuda-10.1/bin:$PATH
export LD_LIBRARY_PATH=/usr/local/cuda-10.1/lib64:$LD_LIBRARY_PATH

~$ source .profile

Install NVIDIA Docker

get.docker.com에 등록되어 있는 스크립트를 바로 로컬에서 실행하는데, 이 스크립트는 기본적으로 docker-ce(Community Edition) repository를 가르키고 있기 때문에 바로 실행시켜주면 됨.

curl -fsSL https://get.docker.com/ | sudo sh

Docker 설치가 완료되면 nvidia-docker 설치

# If you have nvidia-docker 1.0 installed: we need to remove it and all existing GPU containers
docker volume ls -q -f driver=nvidia-docker | xargs -r -I{} -n1 docker ps -q -a -f volume={} | xargs -r docker rm -f
sudo apt-get purge -y nvidia-docker

# Add the package repositories
curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | \
sudo apt-key add -
distribution=$(. /etc/os-release;echo $ID$VERSION_ID)
curl -s -L https://nvidia.github.io/nvidia-docker/$distribution/nvidia-docker.list | \
sudo tee /etc/apt/sources.list.d/nvidia-docker.list
sudo apt-get update

# Install nvidia-docker2 and reload the Docker daemon configuration
sudo apt-get install -y nvidia-docker2
sudo pkill -SIGHUP dockerd

# Test nvidia-smi with the latest official CUDA image
docker run --runtime=nvidia --rm nvidia/cuda:10.2-base nvidia-smi

위 코드 실행 후 nvidia-smi가 실행된다면 정상적으로 설치가 된 것이다.

Ubuntu Settings

ubuntu에서 기본적으로 사용할 세팅들을 적어보려 한다.

adduser

~$ sudo adduser <ID>

Docker permission

~$ sudo usermod -aG docker <ID>

Directory permission

~$ sudo chmod -R a+rws [directory]

SSH Server

~$ sudo apt-get update
~$ sudo apt-get install openssh-server

openssh-server 가 정상적으로 설치되었는지 확인.

~$ dpkg -l | grep openssh

정상적으로 설치되어 있다면 아래 스크립트를 통해 ssh를 실행한다.

~$ sudo service ssh start

To be continued...

딥러닝/인공지능과 관련된 강의를 듣게 되어 기초부터 처음부터 차근차근 천천히 정리하며 학습을 진행해보려 한다. 누구 한 명은 봐주겠지.

Training Logic

학습용 Data가 주어지게 되면 컴퓨터는 이를 기반으로 Model을 생성하게 된다. 이 Model을 기반으로 컴퓨터는 예측을 하고, 컴퓨터가 예측한 데이터와 Data에 Label된 데이터를 기반으로 Loss를 산출하게 되고, 이 Loss를 기반으로 Optimization을 하는 과정을 반복하여 Result를 출력한다.

Data

• Model을 만들기 위한 데이터
• 모델에 들어가기 전 데이터 전처리 필요
• Model에 데이터를 넣을 시 Batch로 만들어서 Model에 입력

Model

• LeNet, AlexNet, VGG, ResNet 등 성격에 맞게 분류해주는 다양하게 설계된 모델 존재
• Convolution Layer, Pooling 등 다양한 Layer 구성
• Model에 Training Param 존재
• 학습하려는 데이터의 종류에 따라 가장 효율적인 Model을 선택하는 것이 관건

Prediction / Logic

• 컴퓨터가 Model을 기반으로 각 Class별로 예측한 값
• 예를 들면, 컴퓨터에 각 과일에 대한 데이터를 기반으로 Model을 생성했다고 하면, 컴퓨터는 어떠한 특정 값이 입력되었을 때 이 Model을 기반으로 해당 입력 값에 대한 예측을 진행한다.
• 이 때 각 Class별로 어느 정도 값이 일치하는 지에 대해 수치 상으로 출력하게 되며, 이를 Prediction이라고 한다.
• 위 이미지를 예로 들자면 컴퓨터가 사과일 확률 0.65, 수박일 확률 0.15, 딸기 0.1, 포도 0.05, 바나나 0.05 라고 예측했으며, 이 중 가장 높은 값이 모델이 예상하는 Class 또는 정답이다.
• 위 값이 정답이라고 할 때 얼마나 맞았는지, 틀렸는지 확인이 가능

Loss / Cost

• 예측한 값이 입력 시 Label된 정답과 비교해서 정답률을 확인
• Cross Entropy와 같은 다양한 Loss Function 존재
• Loss는 오답률을 말하며, 이 값을 최소화 시키는 것이 학습의 과정

Optimization

• Loss 값을 최소화 하기 위한 과정
• 내부 Weight 변경을 통해 Model 최적화를 진행하는 과정

Result

• 위 과정을 우리가 원하는 만큼 반복한 뒤에 나오는 최종 결과물
• 평가할 때 또는 예측된 결과를 확인할 때는 예측된 값에서 argmax를 통해 가장 높은 값을 예측한 class