기본 키 맵 해제

 VS Code로 사실 충분히 사용을 하고 있지만, PyCharm의 명성을 듣고 있던 터라 개인적으로 한번 사용을 해보게 되었다. 그런데, 키 맵이 범상치 않았다. 일반적인 편집 키인 Ctrl + a 라던가 Ctrl + c 같은 윈도우에서 사용하는 일반적인 단축키가 먹히지 않았다.

 검색을 하던중 알게 된 것은 PyCharm의 기본 플러그인으로 Vim 으로 인해서 기존의 원도우 단축키가 먹히지 않았었다. 따라서 플러그인 설정을 해제하면, 사용할 수 있다.

 근데, vim 플러그인이 기본으로 활성화 되어 있다는 것은 Vim 단축키가 개발에 편리하니 한 것 아닐까 하는 생각이 든다.

참조 자료

• OKKY - Pycharm 에디터 환경설정에 관한 글

jinja2와 vuejs 혼용하여 사용하기

배경

내용이 그리 많지는 않다. vuejs 와 jinja2에서 '{{', '}}'해당 기호 용도가 중복이 된다. 때문에 같이 혼용하기 위해서는 해당 기호를 바꿔야 한다.

다행스럽게도 vuejs의 경우 JavaScript 기반이다 보니 문법을 parsing 하는 delimiters 를 변경할 수 있다.

vuejs 기호 변경

<!-- jinja2 -->
<div id="app">
    {% set val = hello -%}
    <span>[[ {{ val }} ]]</span>
</div>

// javascript
let app = new Vue({
    el: "#app",
    data: {
        hello: "world"
    },
    delimiters: ['[[', ']]']
});

참조

• 추후 다시 찾게 되면 추가 예정

jinja2 에서 javascript로 값 넘기기

배경

주로 웹 개발보다 기능을 개발해서 API 형식으로 구현을 하다보니 Django 보다는 Flask가 적합하다고 생각하고 사용중에 또 다시 인력 부족으로 웹페이지를 만들던 중 jinja2 에서 javascript로 데이터를 넘겨야 하는 경우가 발생해서 기록으로 남긴다.

유용한 경우

해당 기능은 ajax 통신 이전 초기에 웹 페이지가 새로로드 할때마다 초기화 해야하는 데이터가 바뀌어야 하는 경우에 사용하면 유용하다.

예를 들어 로그인된 사람마다 대시보드에 처음 표시되는 데이터를 전달하는 경우.

Flask(python3) -> Jinja2 -> javascript

원리는 Flask에서 Jinja2 템플릿을 html 문서로 만든다음에 Client에 전성한 다음에 javascript가 로드되는 순서로 동작된다는 것을 이용한 것이다. 더군다나 json은 문자기반 데이터이기 때문에 이것이 가능하다.
즉 Flask에서 데이터를 Jinja2를 통해서 문자형태로 전달 가능하다. 그럼 json을 Jinja2를 통해 작성하면 충분히 전달이 가능하다.

#Flask
import json

@app.route("/")
def index():
    data = { "a" : "b" }
    return render_templete("index.html", data=json.dumps(data, ensure_ascii=False))

<!-- jinja -->
<script>
    let initdata = JSON.parse( {{ data | safe }} );
</script>

이제 jinja2로 삽입된 위의 script 태그 이후에 받아서 사용하거나 모두 페이지로드 뒤에 해당 데이터를 사용하도록 작성하면 된다.

참조

https://stackoverflow.com/questions/15321431/how-to-pass-a-list-from-python-by-jinja2-to-javascript/22157700

bootstrap 4 datetimepicker(Tempus Dominus)

배경

어쩌다 보니 4년만에 웹 개발관련된 업무를 하게 되었다. 요즘 트렌드는 어떤지 모르겠지만, 라이브러리는 과거 보다 확실이 다양해졌다. 일단 리서치 했을 때 국내에서는 Bootstrap 이 인기 있는 것 같아서 간단히 적용을 하던 중 bootstrap에서는 datetimepicker에 대한 지원이 없어서 이를 보강해주는 보조(?) 라이브러리가 있었다.

설치 방법

웹 분야가 늘 그렇듯이 html 문서에 script 항목에 추가를 시켜주면 된다. 다만, 설명에는 CDN 주소만 있고, 정작 다운로드 주소 없이 경로를 넣어주면 된다고 설명되어 있다.

AngularJS나 Django의 경우 설치를 하면 간단하나, 필자는 Flask를 사용하고 있기 때문에 따로 다운로드를 받아야 한다.

공식 페이지 주소를 보면 알 수 있듯이 github 에 있다. 즉, 레포지토리에 가서 dist 혹은 build 또는 min 으로 된 폴더에 있는 것을 다운로드 받으면 해결된다. 의존 라이브러리인 moment 라이브러리 링크도 아래에 추가한다.

• github moment
• github tempus domainus bootstrap 4

참조

• Tempus Domainus 공식 페이지
• Tempus Domainus 라이브러리를 소개한 한글 블로그

URI, URL 의미

작성 배경

한동안 생각을 안하면, 개념을 잊어버려서 작성을 해 놓는다.

이해한 의미

자연스럽게 URI와 URL을 혼용하여 사용하고 있는데, 이 둘은 정확히는 약자도 다른 용어이다.

URI는 Uniform Resource Identifier 로 웹 페이지 주소와 같은 개념인데 반해 URL은 Uniform Resource Locator 의 약어로 웹 페이지의 주소에서 자원의 위치까지를 지칭한다.

참조

• URI영문위키
• URL영문위키
• 국내 한글 개인 블로그

무선 디버그(wireless debug)

무선 디버그가 필요한 경우

일반적으로 안드로이드 개발을 할 경우 유선으로 연결된 상태에서 디버그를 진행을 한다. 하지만, OTG와 같이 다른 장비에 연결 상태에서 디버그를 진행해야 하는 경우에는 무선으로 디버그를 해야 한다.

ADB 디버그 툴

Android Studio에서는 무선 디버그 용도로 ADB를 활용할 수 있다. adb는 안드로이드 스튜디오를 설치할대 sdk가 설치된 폴더안의 platform-tools라는 폴더 안에 있다.

안드로이드 스튜디오에서 터미널 창을 연다음에 해당 경로로 이동한다.

만약 sdk 경로를 바꾼적이 없다면,윈도우즈 기준으로 아래의 경로로 접근하면 된다.

c:\user\[사용자 계정명]\AppData\Local\Android\sdk\platform-tools

형식의 경로에 있다.

필자의 경우

c:\user\hp\AppData\Local\Android\sdk\platform-tools

만약 경로를 바꾼적이 있는데 기억이 잘 나지 않는다면, tools -> sdk manager 로 창을 연다음에 android sdk 항목으로 보면 android sdk가 설치된 경로를 확인할 수 있다.

무선 환경 설정

다음 명령어로 유선에 연결된 안드로이드 장치를 확인할 수 있다.

adb devices

만약 아무것도 보이지 않는다면, 선을 다시 연결하고, 장치 접근이 허용이 되었는지 확인하자.

다음 명령어로 안드로이드 장치에서 디버그에 사용할 포트를 열어주자

adb tcpip [port]

필자의 경우는 다음과 같이 하였다.

adb tcpip 11000

다음 안드로이드 장치의 무선 ip 주소를 파악을 해야한다. 안드로이드 장치에서 직접 알아내는 방법이 있다. 하지만, adb에서는 안드로이드 장치가 연결된 상태에서는 shell로 접근이 가능하다.

adb shell

해당 shell 리눅스의 shell과 비슷한 방식이기 때문에 ifconfig 명령어로 무선 ip 주소(wlan0)를 파악 하면 된다.

$ifconfig
wlan0     Link encap:UNSPEC    Driver wcnss_wlan
          inet addr:192.xxx.xxx.xxx  Bcast:192.168.0.255  Mask:255.255.255.0
          inet6 addr: xxxx::xxxx:xxxx:xxxx:xxxx/64 Scope: Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:1896200 errors:0 dropped:0 overruns:0 frame:0
          TX packets:1695900 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:889329097 TX bytes:459419469
~중략~
$exit

유닉스 계열 터미널과 같은 환경이다. 위의 wlan0(무선)의 inet addr이 있는 주소를 확인했으면, exit로 shell을 빠져나온다.

여기까지 마쳤다면, 이제 안드로이드 장치에 연결된 유선을 제거한 다음에 adb를 연결을 하면 된다.

adb connect [ip]:[port]

필자의 경우

adb connect 192.168.1.136:11000

연결이 되면, connected to 이하 메시지를 보여준다. 이제 이 상태에서 안드로이드 스튜디오에서 디버그를 실행하면, 마치 유선으로 연결된 것과 같이 똑같이 반응을 한다.

참조

회사 대표님의 조언

Basic class 문법

Java와 관계

Java는 처음 등장시 하나의 언어로 모든 플랫폼에서 동작한다는 철학으로 처음 큰 관심을 받았고, 현재는 가장 많은 개발자들이 현업에서 사용하고 있는 언어이다. 이러한 특징때문에 구글의 안드로이드는 Java를 개발지원 언어로 채택하여서 단기간에 ios 개발 생태계를 따라잡게 된다(인해전술로).

문제는 Java는 본래 임베디드(세탁기, 전자렌지 같은 것들)를 위해 설계된 언어였고, 썬마이크로즈를 오라클에서 인수하면서 오라클사의 소유이다. 때문에 Java 오라클과 구글간 분쟁이 있었고 오라클이 재판에서 승소를 하게 되었다. 하지만, 젯브레인즈(JetBrains)사에서 구글과 협력하여 kotlin(러시아 샹트페테부르크의 앞의 섬 이름)이 등장하게 된다.

안드로이드에서 Java를 대체하고자 하는 영향도 컸으며, 안드로이드에 특화된 언어라서 Java 코드를 kotlin으로 변환하는 것도 가능하다. 즉, 안드로이드 한정으로 Java로 된 것은 kotlin으로도 가능하다(아직 필자가 low수준까지 해보지 않아 확신 못하나 그렇게들 설명하고 있다).

class

코틀린(kotlin)은 안드로이드 한정으로 자바(Java) 대체 가능한 언어기 때문에 같은 개념인 클래스가 존재한다.

클래스의 상속

자바와 반대로 코틀린은 기본적으로 상속이 금지이다. 상속을 가능하게 하기 위해서는 open 키워드를 사용한다. 프로그래밍 언어에서 특정 키워드를 추가하여 허용을 한다는 것은 해당 동작에 대해서 보수적인 것을 뜻하기도 한다.

open class Animal {
    // contents
}

class Dog : Animal {
    // contents
}

인자를 받는 생성자가 있는 클래스를 상속하는 경우 초기화 상속도 가능하다.

open class Animal(val name : String) {
}

class Dog(name: String) : Animal(name) {
}

내부 클래스

클래스 내에서 클래스를 사용하는 경우 inner 라는 키워드를 앞에 붙여 줘야 한다. 이는 기존의 가독성 문제를 보완하기 위한 것으로 생각된다.

class OuterClass {
    var a = 10

    inner class OuterClass2 {
        fun someThing() {
            a = 20
        }
    }
}

추상 클래스

자바와 비슷하게. abstract 키워드를 사용한다.

abstract class A {
    abstract fun func()

    fun func2() {

    }
}

class B : A() {
    overide fun func() {
        println("hello")
    }
}

val b = B()

참고 자료

서적: 오준석의 안드로이드 생존코딩(코틀린편)