snowdeer's Code Holic

Spring Boot 특징

21 Nov 2019 | SpringBoot

Spring Boot 특징

2004년 Spring Framework 1.0이 나왔습니다. 정말 강력하고 많은 기능들 덕분에 많은 프로젝트에서 스프링 프레임워크를 사용해왔습니다. 스프링 부트는 기존의 스프링 개발 방식의 불편했던 설정이나 버전 충돌 등의 단점을 줄이고, 빠르고 쉽게 서버를 구축하고 테스트 할 수 있는 것을 목표로 만들어졌습니다.

스프링 부트는 다음과 같은 특징이 있습니다.

자동화된 라이브러리 관리

기존에도 Maven이나 Gradle을 이용하여 의존성 관리를 쉽게 할 수 있었지만, 스프링 부트는 더욱 더 간편하게 할 수 있습니다.

자동 설정

특정 라이브러리를 사용하기로 결정하면, 그에 필요한 설정은 자동으로 구성해주기 때문에 더욱 쉽게 사용할 수 있습니다. 또한 현재 버전에 맞는 라이브러리들을 자동으로 가져오기 때문에 버전 문제로 발생하는 문제도 줄어들었습니다.

XML 없는 환경 구축

XML을 이용해서 라이브러리를 설정하거나 환경을 설정하지 않아도 동작할 수 있습니다.

테스트 환경과 Tomcat 내장

스프링 부트 프로젝트는 기본적으로 Tomcat을 내장하고 있습니다. 실행할 때도 별도의 설정 없이 main 메소드를 호출하는 것만으로 실행이 되어 서버를 훨씬 빠르게 구동시킬 수 있습니다.

HTML5 Canvas를 이용해서 주사위 게임 만들기

15 Nov 2019 | javascript html5

dicegame.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dice Game</title>

    <script src="/js/dice.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="200">
        이 브라우저는 HTML5 Canvas를 지원하지 않습니다.
    </canvas>

    <br>

    <button onClick="throwDices();">주사위 던지기</button>

    <script>
        window.onload = function() {
            init();
        }
    </script>
</body>
</html>


dice.js

var cwidth = 400;
var cheight = 300;
var dicex = 50;
var dicey = 50;
var diceWidth = 100;
var diceHeight = 100;
var dotrad = 6;
var ctx;

function init() {
    var ch = 1 + Math.floor(Math.random() * 6);
    drawFace(ch);
}

function drawFace(n) {
    ctx = document.getElementById("canvas").getContext("2d");
    ctx.lineWidth = 5;
    ctx.clearRect(dicex, dicey, diceWidth, diceHeight);
    ctx.strokeRect(dicex, dicey, diceWidth, diceHeight);
    ctx.fillStyle = "#009966";

    switch(n) {
        case 1:
            draw1();
            break;

        case 2:
            draw2();
            break;

        case 3:
            draw2();
            draw1();
            break;

        case 4:
            draw4();
            break;

        case 5:
            draw4();
            draw1();
            break;

        case 6:
            draw4();
            draw2mid();
            break;
    }
}

function draw1() {
    var dotx;
    var doty;

    ctx.beginPath();

    dotx = dicex + 0.5 * diceWidth;
    doty = dicey + 0.5 * diceHeight;
    ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

    ctx.closePath();
    ctx.fill();
}

function draw2() {
    var dotx;
    var doty;

    ctx.beginPath();

    dotx = dicex + 3 * dotrad;
    doty = dicey + 3 * dotrad;
    ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

    dotx = dicex + diceWidth - 3 * dotrad;
    doty = dicey + diceHeight - 3 * dotrad;
    ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

    ctx.closePath();
    ctx.fill();
}

function draw4() {
    var dotx;
    var doty;

    ctx.beginPath();

    dotx = dicex + 3 * dotrad;
    doty = dicey + 3 * dotrad;
    ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

    dotx = dicex + diceWidth - 3 * dotrad;
    doty = dicey + diceHeight - 3 * dotrad;
    ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

    ctx.closePath();
    ctx.fill();
    ctx.beginPath();

    dotx = dicex + 3 * dotrad;
    doty = dicey + diceHeight - 3 * dotrad;
    ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

    dotx = dicex + diceWidth - 3 * dotrad;
    doty = dicey + 3 * dotrad;
    ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

    ctx.closePath();
    ctx.fill();
}

function draw2mid() {
    var dotx;
    var doty;

    ctx.beginPath();

    dotx = dicex + 3 * dotrad;
    doty = dicey + 0.5 * diceHeight;
    ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

    dotx = dicex + diceWidth - 3 * dotrad;
    doty = dicey + 0.5 * diceHeight;
    ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);

    ctx.closePath();
    ctx.fill();
}

function throwDices() {
    var ch = 1 + Math.floor(Math.random() * 6);
    drawFace(ch);
}

Sublime Text 3에 Kotlin Plugin 설치하기

01 Nov 2019 | IDE sublime

Sublime Text 3에 Kotlin Plugin 설치하는 방법

메뉴에서 Tools > Install Package Control을 실행합니다. 이미 설치되어 있다면 메뉴에서 이 항목이 보이지 않을 수도 있습니다.

그런 다음 Ctrl + Shift + P를 눌러서 커맨드 팔레트를 실행합니다. (MacOS에서는 Command + Shift + P를 누릅니다.)

install이라고 타이핑 하면 Package Control: Install Package 항목이 표시됩니다.

선택한 다음 kotlin을 타이핑해서 해당 플러그인을 설치합니다.

SublimeText를 종료 후 재 실행하면 코틀린 플러그인이 설치된 것을 확인할 수 있습니다.

Git LFS(Large File Storage) 사용법

17 Oct 2019 | git

LFS(Large File Storage)

일반적으로 Git은 파일 한 개 용량이 100MB 까지만 업로드 가능합니다. 그 이상의 파일을 올리고 싶을 때는 LFS(Large File Storage)를 이용해야 합니다.

LFS 설치 방법은 다음과 같습니다.


LFS 설치 방법

Ubuntun에서는 다음 명령어를 이용해서 설치합니다. 여기를 참고하세요.

curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash

sudo apt install git-lfs


MAC에서는 brew를 이용해서 설치합니다. 또는 여기에서 다운로드해서 설치하세요.

brew install git-lfs


LFS 사용 방법

LFS를 사용하려는 프로젝트 루트에 가서 다음 명령어를 입력합니다. 여기서는 안드로이드 빌드 결과물인 apk 확장자로 끝나는 파일에 대해 적용을 해봅니다.

git lfs install
git lfs track "*.apk"
git add .gitattributes

그 이후 평소와 같이 파일을 commit 하고 push 하면 됩니다.

터미널에서 git lfs 명령어를 내려도 사용법을 간편하게 조회할 수 있습니다.

Visual Studio Code 에서 UML 사용하기

04 Oct 2019 | IDE vscode

PlantUML 설치

VSCode의 EXTENSIONS: MARKETPLACE에서 PlantUML 플러그인을 설치합니다.

image


Sequence Diagram

빈 텍스트를 만들어서 아래와 같은 내용을 입력합니다.

@startuml

scale 2
title My first Diagram

A -> B : Hello
B -> C : Good Morning
C --> A : Bye Bye

@enduml

그 이후 Shift + Command + P 키를 눌러서 PlantUML: Preview Current Diagram을 선택하면 아래 이미지와 같이 UML 미리보기를 할 수 있습니다.

image -fullwidth


GraphViz 설치

PlantUML은 기본적으로 Sequence Diagram을 지원합니다. Class Diagram을 그리기 위해서는 GraphViz를 설치해줘야 합니다.

MacOS 기준으로

brew install libtool
brew link libtool
brew install graphviz
brew link --overwrite graphviz

그 이후 다음과 같은 코드를 작성해서 제대로 렌더링 되는지 확인해봅니다.

@startuml

scale 2
class Event {
    +startTime: DateTime
    +venue: string
    +registrationClosed: boolean
    -notifyAttendes()
}

class ApplicationUser {
    -userName: string
    -password: string
    +isLocked: boolean
    -suggestRandomPasswod()
    +changeProfilePic()
}

class Speaker {
    +openForSpeaking: boolean
    -callForAction()
    +applyAsSpokePerson()
}

class Topic {
    +title: string
    +sourceCodeUrl: string
    +downloadMaterials()
}

class Attendee {
    -eventAttended: number
    -suggestEventBasedOnPreference()
    +registerForTicket()
}

ApplicationUser <|-- Speaker
ApplicationUser <|-- Attendee
Speaker "1" *-- "*" Topic
Event "1" o-- "*" Speaker
Event "1" o-- "*" Attendee

@enduml

image -fullwidth


PlatUML 장점

PlantUML은 텍스트 스크립트 기반 UML이라서 진입 장벽이 조금 있습니다. 물론, 그 문법이 어렵지는 않아서 금방 사용할 수 있습니다.

텍스트 기반이라 가장 큰 장점은 협업이 쉽다는 점입니다. git을 이용해서 서로 공유 및 편집이 쉽습니다.

물론 무료라서 라이센스 걱정 없는 것도 큰 장점입니다.