2017. 11. 30.

오렌지 Planck 키보드

오렌지 Planck 키보드 + 엠스톤 치즈 DSA 키캡 + KDB Fans DSA 키캡

엠스톤 블루치즈 DSA와 가지고 있던 KDB Fans의 알록달록 DSA를 조합하면서 오렌지 Planck 키보드와 잘 어울린 것 같다는 생각을 했습니다. 키캡의 전체적인 톤과 키보드 케이스의 색상이 무난하게 잘 어울릴 것 같았습니다. 전에는 치즈색 키캡과 녹색 케이스 조합이라서 어울린다기보다는 대비되는 느낌이 강해서 아쉬웠습니다.

먼저, 오렌지 Planck 키보드 케이스입니다. 사진에는 잘 드러나지 않지만 표면이 거슬거슬합니다. olkb.com에서 직접 구매한 제품은 마감을 일부러 매끈하고 광택이 나게 하지 않는것 같습니다. 그래도 색상은 그윽해서 나름의 매력이 있습니다.


엠스톤 치즈 DSA 키캡 + KDB Fans DSA 키캡입니다.


오렌지색 케이스와 얼마나 잘 어울리는지 살펴보겠습니다.


이런 느낌입니다. 크게 어색하지 않고 무난하게 잘 어울립니다.



부담스럽지 않은 가격에 케이스와 잘 어울리는 키캡을 사용할 수 있어서 즐겁네요. 이렇게 케이스에 독특한 색상이 들어가 있는 경우 한번 시도해보면 산뜻한 느낌을 받을 수 있어서 좋습니다.


다음에는 녹색 Planck에 어울리는 DSA 조합으로 다시 돌아오겠습니다.

Planck 키보드 + 엠스톤 블루치즈 DSA 키캡

엠스톤 블루치즈 DSA

지금은 판매하지 않는 엠스톤 블루치즈 DSA 키캡을 키보드랩에서 중고 거래로 구했습니다. 전에 KDB Fans에서 구입한 알록달록 DSA와 함께 사용할 생각으로 구매하였습니다. 무엇보다 KDB Fans나 알리익스프레스에서는 2U 크기 DSA 키캡을 따로 판매하지 않았기 때문이기도 합니다. Planck 키보드의 스페이스바 때문에라도 구매하고 싶었습니다.




키캡 살펴보기

엠스톤 블루치즈 DSA 전에는 스페이스바 자리에 XDA 키캡이 있어서 많이 어색했습니다. DSA 키캡으로 교체하니 전체적으로 정갈한 느낌이 들어서 마음에 듭니다. 하지만 생각지도 못한 점을 발견하였습니다. 엠스톤 DSA와 KDB Fans에서 구입한 DSA가 키캡의 윗면 크기가 약간 달랐습니다.




위 사진에서 볼 수 있듯이 같은 DSA 키캡이지만 약간의 차이가 있습니다. 사진을 자세히 봐야하지만, 엠스톤 블루치즈 DSA의 윗면이 조금 커서 XDA 키캡과 살짝 비슷한 느낌이었습니다. KDB Fans에서 구입한 DSA의 윗면은 손가락 끝이 꽉 차는 느낌인 반면에, 엠스톤 블루치즈 DSA는 손가락 끝이 넉넉하게 닿는 느낌입니다. 엠스톤 블루치즈 DSA가 키캡을 누르기 편리하였습니다. 하지만 KDB Fans DSA는 조막조막(?) 자갈자갈(?)한 느낌이 있어서 나름 즐거웠습니다.


그리고 엠스톤 블루치즈 DSA는 다른 블로그 글에서도 언급한 것처럼 거친 느낌이 강합니다. 부드럽게 만져지는 것과는 확실히 거리가 있습니다. 반면에 KDB Fans의 DSA는 일반 PBT 재질 키캡 정도의 느낌을 줍니다.




또 다른 차이점은 키캡의 높이입니다. 엠스톤 블루치즈가 KDB Fans의 키캡에 비해서 미세하게 높습니다. DSA라고 완전히 동일하다고 생각하기는 힘듭니다.




키캡의 뒷면은 엠스톤에서 밝혔듯이 1.3mm 정도됩니다. 얇지고 두껍지도 않는 느낌이었습니다. 키캡이 수축되어 우그러진 것도 심하지 않았습니다.
색상은 적당히 부드러운 치즈 색감을 잘 살렸습니다. 단일 키캡을 보는 것보다 키캡을 모두 장착한 키보드에서 느껴지는 색감이 훨씬 좋다는 느낌입니다. 개인적으로 마음에 듭니다. 블루 색상 키캡은 색상이 치즈 색상에 비해 많이 짙습니다.

마무리하며

키캡을 모두 장착하고 나니 가지고 있는 오렌지 색상 케이스와 더 잘 어울릴 것 같습니다.



2017. 11. 27.

Planck 키보드 + DSA 키캡

Planck 키보드 + DSA 키캡

Planck 키보드를 사용한 이후로 낮은 키캡에 대한 관심이 많이 생겼습니다. 작은 키보드와 잘 어울리기도 하고, 키보드가 작기 때문에 체리, OEM, SA 프로파일처럼 키캡마다 경사도가 있지 않아도 크게 불편함을 못 느꼈기 때문입니다.


https://geekhack.org/index.php?topic=69133.0


위 사진에서 볼 수 있듯이 체리와 OEM 프로파일은 타자를 좀더 편하게 칠 수 있도록 키캡이 비스듬하게 기울어져 있는 것을 확인할 수 있습니다. 실제로 키캡의 경사가 손가락으로 키캡을 좀더 편하게 누르는데 도움을 줍니다.


하지만 이런 편함을 잘 느끼지 못하거나, 다른 심미적인 이유로 이런 편함을 포기할 수 있는 사람도 있습니다. 바로 저 같은 사람입니다. 나의 아이템이 예쁘면 불편함은 느껴지지 않는다는 마음이죠. DSA 혹은 XDA 키캡은 체리나 OEM의 경사도를 완전하게 배제하였습니다. 모든 키캡이 평평하게 나열됩니다.


키보드 하우징 자체가 경사도가 전혀 없고, DSA 키캡을 사용한다면 정말 완전히 평평하게 배치된 키캡을 확인할 수 있을 것입니다.


아래 사진에 나오는 키캡은 타오바오와 알리익스프레스에서 쉽게 구매할 수 있는 DSA 키캡입니다. 저렴한 가격에 DSA를 맛보기에 좋습니다.


키캡이 저렴하지만 생각보다 적당한 두께로 만들어져 있어서 조금 놀랐습니다. 키를 누르는 느낌이 제법 괜찮아서 가성비 측면에서 아주 만족하고 있습니다. 색상도 싸구려스럽지 않게 잘 나온 점도 마음에 듭니다.


저렴하고 사용성도 좋은만큼 당분간 회사에서 재밌게 사용하고 있습니다.



2017. 11. 24.

Visual Studio Code + Java - VS Code에서 Java 사용하기

VS Code + Java

VS Code는 사용자의 필요에 맞게 편집 도구의 기능을 다양한 방식으로 확장시킬 수 있는 장점을 가진 편집기입니다. Visual Studio와 비교하면 매우 가볍게 사용할 수 있으며, 편집기 자체의 디자인과 사용성도 우수하다고 생각합니다. 최근에 간단한 Java 코드를 연습해볼 필요가 생겨서 VS Code의 확장 도구를 이용해보고자 하였습니다. 설정은 어렵지 않게 완료할 수 있습니다. Java를 처음 공부하시는 분들도 VS Code로 시작하는 새로운 도전을 해볼 것을 추천드립니다. VS Code에서 HTML, Java Script 등도 편집할 수 있기 때문에 익숙해지면 여러모로 편리할 것입니다. 그리고 이 튜토리얼은 Windows 10 환경을 바탕으로 작성되었습니다. 참고 자료는 Java in VS Code입니다.

VS Code 설치

가장 먼저 VS Code를 설치해야 합니다. 이곳에서 VS Code를 다운받아서 설치할 수 있습니다. 설치 과정에서 주의할 점은 특별히 없습니다. 다만 자신의 필요에 따라 확장 도구를 추가로 설정하거나 편집기 설정을 수정하는 것이 편리하지는 않으므로 약간의 수고로움이 따릅니다. 세부 설정은 나중으로 미뤄두고 Java 확장 도구를 설치해야 합니다. 먼저 VS Code를 켭니다.

Java Extension Pack 설치

VS Code가 설치되었으므로 이제 Java를 위한 확장 도구를 설치하겠습니다.




  1. VS Code 켜지면, Extension View를 엽니다. Ctrl + Shift + X를 눌러서 열 수 있습니다.
  2. Extension View의 검색창에 ‘java extension pack’을 입력하면 결과를 나타납니다.




  1. enable로 설정하면 Java Extension Pack이 설치되고, VS Code를 재시작합니다. 참고로 Java Extension Pack은 Language Support for Java™ by Red Hat과 Debugging for Java로 구성되어 있습니다.


Java를 위한 확장 도구 설치는 완료되었습니다.

JDK 설치

이제 JDK(Java Development Kit)을 설치하여야 합니다. JDK는 여기에서 다운받으면 됩니다. 참고로 저는 지금 jdk 1.8.0 버전을 사용하고 있고, VS Code에서 문제없이 사용하고 있습니다. 최신 버전도 문제없을 것으로 예상됩니다. 혹시 문제가 있다면 낮은 버전을 사용하길 바랍니다.

환경변수 설정

JDK의 환경변수만 설정하면 이제 끝입니다.


  1. JDK가 설치된 경로를 확인한 후, 경로를 복사해둡니다. JDK는 보통 ‘C:\Program Files\Java\jdk1.8.0_144’와 같은 경로에 설치됩니다.




  1. 제어판의 시스템에서 환경 변수 편집 창을 엽니다.
  2. 시스템 변수에 JAVA_HOME, JDK_HOME 변수를 추가하고, 값은 복사해두었던 JDK 경로로 설정합니다. 두 변수 모두 같은 JDK 경로를 입력하면 됩니다.


  1. 추가로 VS Code의 workspace settings에서 java.home에도 JDK 경로를 입력하면 됩니다.(이 과정은 건너뛰어도 문제는 없습니다. 만약 이 과정은 건너뛰어서 에러가 발생하였다면 추가로 설정합니다. 주의할 점은 JDK 경로의 escape 문자를 ‘/’로 바꾸어야 합니다.)




환경변수 설정도 모두 끝났습니다. 이제 hello world를 위한 시간이 찾아왔습니다.

Hello World

VS Code에서 폴더를 하나 생성한 후, HelloWorld.java 파일을 생성합니다. 그리고 Hello World를 출력하는 코드를 작성합니다.




Debug 메뉴에서 Start Without Debugging을 누르거나, Ctrl + F5를 누릅니다.


결과는 Debug Console에서 확인할 수 있습니다. Debug Console이 보이지 않는다면 View 메뉴에서 Debug Console을 누르거나 Ctrl + Shift + Y를 입력합니다.

여기까지 오셨다면 VS Code로 기본적인 코드를 사용할 수 있는 기본적인 설정은 마무리되었습니다. 깔끔하고 가벼운 편집기인 VS Code에서 즐겁게 코딩하세요.

2017. 11. 13.

[Python] Flask - Form 데이터를 템플릿(template)으로 전달하기

Request Object

클라이언트 웹 페이지의 데이터는 global request object를 통해서 서버로 전달됩니다. request 데이터를 처리하기 위해서는 Flask 모듈로부터 import되어야 합니다.

request 객체의 중요한 속성은 다음과 같습니다.
  • Form - form 매개변수를 key로, 그 값을 value로 하는 쌍을 보관하는 dictionary입니다.
  • args - URL 부분 중 물음표(?) 다음에 있는 query 문자열의 내용을 parse합니다.
  • Cookies - Cookies 이름과 그 값을 가지는 dictionary 객체입니다.
  • files - 업로드 파일과 관련된 데이터
  • method - 현재 request method

form 데이터를 template으로 전달하기

URL 규칙에서 명시한 http method에 대해서 이미 살펴본 적이 있습니다. 발동된 함수에 의해서 전달받은 Form 데이터는 dictionary 객체의 form에 수집할 수 있고, 그 데이터를 대응하는 웹 페이지를 보여줄 template으로 보낼 수 있습니다.

다음 예에서 ‘/’ URL은 form을 가지고 있는 웹 페이지 student.html을 보여줍니다. form에 채워져있는 데이터는 result() 함수를 발동시키는 ‘/result’ URL로 전달됩니다.

result() 함수는 dictionary 객체에 있는 현재 request.form 내의 form 데이터를 수집합니다. 그리고 result.html을 보여주기 위해서 그 데이터를 보냅니다.

템플릿은 동적으로 form 데이터 테이블을 보여줍니다.

Python 애플리케이션 코드는 다음과 같습니다.

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def student():
  return render_template('student.html')

@app.route('/result',methods = ['POST', 'GET'])
def result():
  if request.method == 'POST':
     result = request.form
     return render_template("result.html",result = result)

if __name__ == '__main__':
  app.run(debug = True)

위 코드는 먼저 살펴보겠습니다. ‘/’ URL로 접속하면 웹 애플리케이션은 student.html을 브라우저에 보여줍니다. ‘/result’ URL로 접속하면 HTTP 메소드에 따라서 다르게 처리됩니다. 이번에는 POST 메소드만 사용할 것입니다. POST 메소드로 요청이 들어온다면 result.html을 브라우저로 보여줍니다. ‘result’ dictionary도 함께 인자로 전달합니다. 이 dictionary는 어떻게 구성되었는지는 student.html을 보면 알 수 있습니다.

<html>
  <body>
  
     <form action = "http://localhost:5000/result" method = "POST">
        <p>Name <input type = "text" name = "Name" /></p>
        <p>Physics <input type = "text" name = "Physics" /></p>
        <p>Chemistry <input type = "text" name = "chemistry" /></p>
        <p>Maths <input type ="text" name = "Mathematics" /></p>
        <p><input type = "submit" value = "submit" /></p>
     </form>
     
  </body>
</html>

이 스크립트는 form을 다루고 있습니다. HTTP POST 메소드를 사용하고 있고, 이 폼을 전달하면 http://localhost:5000/result로 이동할 것입니다. form 데이터는 Name, Physics, Chemistry, Maths를 전달합니다. form 데이터를 제출할 ‘submit’도 있습니다.

그러면 http://localhost:5000/result로 이동하면 어떤 일이 생길까요? 다시 웹 에플리케이션 코드를 살펴보면 됩니다. ‘/result’ URL을 HTTP POST 메소드로 접근하면 result.html을 보여주도록 되어 있습니다. 그리고 form 데이터를 result 인자로 전달합니다.

이제 result.html 스크립트를 살펴볼 차례입니다. 이 스크립트는 웹 애플리케이션에 의해서 ‘result’ form 데이터를 전달받습니다. 그리고 이 dictionary 데이터를 순회하면서 key, value를 테이블로 보여줍니다.

<!doctype html>
<html>
  <body>
  
     <table border = 1>
        {% for key, value in result.iteritems() %}
        
           <tr>
              <th> {{ key }} </th>
              <td> {{ value }} </td>
           </tr>
           
        {% endfor %}
     </table>
     
  </body>
</html>

이제 웹 애플리케이션을 실행해봅시다. 먼저 http://localhost:5000/로 접속합니다. 그러면 student.html 스크립트를 브라우저에서 보여줄 것입니다. 결과는 다음과 같습니다.


form 데이터 항목을 보여주고, 제출할 수 있는 input도 생성되어 있습니다. 원하는 텍스트로 각 항목을 채우고 submit을 누릅니다. 그러면 form action으로 지정되어 있는
http://localhost:5000/result로 이동합니다. Flask 웹 애플리케이션 코드에서 ‘/result’는 라우팅되어 result.html 스크립트를 브라우저에 보여줍니다. form 데이터는 ‘result’ dictionary로 result.html에게 전달되고, 우리가 채운 항목들이 테이블 형태로 보여지게 됩니다.


이렇게 우리는 form 데이터를 HTTP POST 메소드로 전달하여 우리가 만든 result.html 템플릿에 적용하여 브라우저에서 확인하였습니다.

다음에 다룰 내용은 무엇인가요?


클라이언트에 정보를 저장할 수 있는 쿠키(cookie)에 대해서 알아보겠습니다.