Python Flask 혹은 Django를 사용하게 되면 HTML에 Jinja2 문법을 사용하여 추가적인 작업을 수행할 수 있습니다.

여기서 Jinja2의 For문을 사용하는 방법을 알아보도록 하겠습니다.


Jinja2를 사용할 때 Python Flask로 다음과 같이 작성했다고 합시다.


예제 소스

@app.route('/', method=['GET'])
def hello_kkamikoon():
    myList = []
    for i in range(0, 10):
        myList.append('count : %d' % i)
    
    return render_template('/app/templates/hello_kkamikoon.html', myList=myList)


위의 파이썬 소스를 실행시켰다는 가정하에 이제 HTML 소스를 보시겠습니다.


<!--source name : hello_kkamikoon.html -->
<!--source dir : /app/templates/hello_kkamikoon.html -->

<html lang="ko">
  <head>
    <title>kkamikoon Jinja2 for</title>
    >
  </head>
  <body>
    <ul>
	  {% for ml in myList %}
	  <li> {{ml}} </li>
	  {% endfor %}
    </ul>
  </body>
</html>



결과

<!--source name : hello_kkamikoon.html -->
<!--source dir : /app/templates/hello_kkamikoon.html -->

<html lang="ko">
  <head>
    <title>kkamikoon Jinja2 for</title>
    >
  </head>
  <body>
    <ul>
	  <li> count : 0 </li>
	  <li> count : 1 </li>
	  <li> count : 2 </li>
	  <li> count : 3 </li>
	  <li> count : 4 </li>
	  <li> count : 5 </li>
	  <li> count : 6 </li>
	  <li> count : 7 </li>
	  <li> count : 8 </li>
	  <li> count : 9 </li>
    </ul>
  </body>
</html>


myList에 있는 값이 그대로 html로 옮겨져서 반복되는 것을 볼 수 있습니다.







01. onchange 함수

문법 

<element onchange="myScript">


onchange 함수는 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지해줍니다.


예제 소스

<input type="text" value="hello" onchange="bgcolor_yellow(this)" />
<input type="text" value="world" onchange="bgcolor_yellow(this)" />

<script>
function bgcolor_yellow(obj) {
  obj.style.backgroundColor = 'yellow';
}
</script>


결과




02. onchange 함수 응용

예제 소스

<select id="TestSelect" name="SelectValue" onchange="chageLangSelect()">
<option value="" selected disabled>Choose your value</option>              
<option value="val01">YourValue01</option>
<option value="val02">YourValue02</option>
</select>

<script>
function chageSelectedValue(){
    var yourTestSelect = document.getElementById("TestSelect");
     
    // select element에서 선택된 option의 value가 저장됩니다.
    var selectedValue = yourTestSelect.options[yourTestSelect.selectedIndex].value;
 
    // select element에서 선택된 option의 text가 저장된다.
    var selectedText = yourTestSelect.options[yourTestSelect.selectedIndex].text;
}
</script>


9번 라인에서 'TestSelect'라는 아이디를 가진 element를 yourTestSelect에 저장합니다.

그리고 변경할 때 해당 element의 option 번째를 고른다면, 선택한 value와 text로 값이 변경되도록 하는 예제입니다.

여기서 var selectedValue와 selectedText는 크게 역할이 없습니다.


결과




Sublime Text 3에 SFTP 하는 방법이 있다고 합니다.

Notepad++에도 있다고하는데, 여기서는 Sublime Text 3의 SFTP 설정 방법을 작성해보려고 합니다.


01. 패키지 설치

먼저 Sublime Text 3를 켜고 패키지를 설치해야 합니다.

설치하는 명령어는 다음과 같습니다.

 Windows : Ctrl + Shift + p

 MAC      : Command + Shift + p 


이후 [install]을 입력해주고 Enter를 클릭합니다.




Install을 선택하면 다음과 같은 화면이 나타납니다.




여기서 [SFTP]를 입력하면 다음과 같이 SFTP를 설치할 수 있는 것을 확인할 수 있습니다.




설치가 완료되면 다음과 같은 화면이 나타납니다.




02. SFTP와 연동

이제 SFTP와 연동할 폴더를 선택하여 서버와 연결해보도록 합시다.

먼저 [Add Folder to Project]를 클릭합니다.




그리고 우리가 연동할 폴더를 선택합니다.




연동하면 다음과 같이 옆에 [FOLDERS]가 생성되는데, 여기서 가장 위에 있는 폴더를 오른쪽 클릭합니다.

[우클릭] -> [SFTP/FTP] -> [Map to Remote...]를 클릭함



여기서 우리가 수정해줄 항목들입니다.



나름 다음과 같이 수정해보았습니다.

Sublime Text 3 특성상 영어로 쓰는 것이 부드러워서 설명도 영어로 작성했습니다...

설명을 덧붙이자면 다음과 같습니다.


sync_down_on_open : 파일을 열 때 싱크를 맞춥니다.

host : 연결할 아이피입니다.(저는 VMware로 했습니다.)

user : 호스트의 계정입니다.

password : 호스트의 계정의 비밀번호입니다.

port : SFTP 포트번호입니다. 일반적으로 SSH 서비스의 포트번호를 작성합니다.(물론 sshd_config 내에서 22번 포트로 열어둬야 합니다.)

remote_path : 연결한 뒤에 연동할 디렉토리 입니다.(여러분의 파일은 모두 해당 디렉토리에 올라갈 것입니다.)

file_permissions : 파일의 권한 설정입니다.

dir_permissions : 디렉토리의 권한 설정입니다.




이후 여러분이 파일을 수정하고 서버에 추가하고 싶다면 다음과 같은 방법으로 업로드하면 됩니다.

[오른쪽 클릭] -> [SFTP/FTP] -> [Sync Local -> Remote]


만약 단일 파일을 업로드하고자 한다면 다음과 같은 단축키를 사용하시면 됩니다.


[Ctrl] + [Alt] + [U] + [Y] 순서대로 클릭하시면 됩니다.

[Ctrl + Alt]는 동시에 눌러도 되지만, U와 Y는 반드시 순서대로 하십숑~~





HTML 에서 테이블을 쓰다가, 테이블의 제목은 가운데 정렬을 해주고 번호나 날짜는 가운데정렬을 하지만 제목이나 내용은 왼쪽 정렬로 출력하고 싶고.... 원하는 데로 테이블을 꾸미고 싶을 때가 있습니다.

이때 여러가지 방법으로 꾸며줄 수 있습니다.

이번 포스트에서는 표를 가운데 정렬하는 방법을 알아보려 합니다.


01. 표(table) 예제

표 예제를 살펴보면 다음과 같습니다.

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Table 정렬</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 1000px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>번호1</td>
          <td>제목1</td>
          <td>날짜1</td>
        </tr>
        <tr>
          <td>번호2</td>
          <td>제목2</td>
          <td>날짜2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>


위의 코드를 실행하면 크게 꾸며준 것이 없는 테이블을 볼 수 있습니다.


Table 정렬
번호 제목 날짜
번호1 제목1 날짜1
번호2 제목2 날짜2

이제 이 기본 소스에서 추가적인 작업을 수행하면서 어떻게 정렬을 바꾸고 수정할지 방법을 알아보겠습니다.





02. 표 가운데 정렬

CSS 수정하는 방법

아래의 소스는 표 예제 소스에서 CSS 부분을 수정한 것입니다.

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Table 정렬</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 1000px;
        height: 200px;
      }
      td {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>번호1</td>
          <td>제목1</td>
          <td>날짜1</td>
        </tr>
        <tr>
          <td>번호2</td>
          <td>제목2</td>
          <td>날짜2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>


td 태그에 text-align: center;를 추가해줌으로써 모든 td를 가운데정렬을 해주었습니다.

Table 정렬
번호 제목 날짜
번호1 제목1 날짜1
번호2 제목2 날짜2



<center>태그를 이용하는 방법

CSS 속성을 변경해주는 것보다 번거로운 점이 있지만 특정 td 태그만 가운데정렬을 간편하게 할 수 있습니다.

물론 CSS 속성을 보다 견고하게 세분화하여 적용해준다면 center를 사용하는 번거로움도 없어지겠지만, 저는 아래와 같은 방법을 사용하였습니다.

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Table 정렬</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 1000px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>번호1</td>
          <td><center>제목1</center></td>
          <td>날짜1</td>
        </tr>
        <tr>
          <td>번호2</td>
          <td><center>제목2</center></td>
          <td>날짜2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html



Table 정렬
번호 제목 날짜
번호1
제목1
날짜1
번호2
제목2
날짜2




Jinja2를 사용할 때 원래는 break문을 기본적으로 사용할 수 있을 것 같지만, 전혀 그렇지 않습니다... 허허...

보통은 break는 기본으로 제공하지만 jinja2는 예외더랍니다.


따라서 추가적인 작업이 필요합니다.


01. jinja2.ext.loopcontrols 적용

Jinja2에서 'jinja2.ext.loopcontrols'를 적용해주면 추가적인 작업 없이 {% break %}를 사용할 수 있습니다.

# ==============================
# flask_folder/run.py (실행파일)
# ==============================
import sys
from app import app

app.run(host='0.0.0.0', port=80, threaded=True)


위와 같이 run.py가 작성되어 있다고 가정합니다.

그러면 이제 jinja2.ext.loopcontrols를 적용해주어야 하는데, 이는 다음과 같이 적용해줄 수 있습니다.


# ==============================
# flask_folder/app/__init__.py
# ==============================
from flask import Flask, request, session, g, redirect, url_for, abort, render_template

# Configurations
app.config.from_object('config')

# Jinja2 environment add extension
app.jinja_env.add_extension('jinja2.ext.loopcontrols')


반드시 위와 같은 방법으로 추가해주지 않아도 되지만, 저는 이 방법으로 작업을 수행했습니다.




02. {% break %} 사용 예제

아래는 {% break %}문을 사용하는 예제 입니다.


{% for m in menu %}
    {% if m.case in cases %}
       <li class="on">
            {{ m.data }}
       </li>
    {% else %}
       {% break %}
    {% endif %}
{% endfor %}




라즈베리파이를 처음 설치하고 이제 SSH로 접속을 하려는데, 들어가지질 않을 경우가 있습니다.

이 경우에는 모니터를 직접 연결해서 라즈베리파이 내부의 raspi-config를 건들여주어야 하는데... 

HDMI로 연결하여 모니터가 되는지 확인해보았으나, 모니터와 연결이 원활하지 않았습니다.


따라서 다른 방법을 찾아보았습니다.

SD 카드 리더기를 통해 라즈비안을 설치하고 이후, 추가적인 간단한 작업만 해주면 SSH에 들어갈 수 있는 방법입니다!!!


01. SD 카드리더기로 연결

먼저 SD 카드리더기를 통해 연결합니다.

그러면 위와 같이 boot라는 드라이브를 확인할 수 있습니다.

위의 boot라는 드라이브에서 추가적인 작업을 수행할 것입니다.


만약 아래와 같이 [디스크 포맷]이라고 뜰 경우 반드시! [취소]를 눌러주시기 바랍니다.

포맷할 필요가 전혀 없습니다.




02. boot 드라이브에 SSH 파일 생성

먼저 boot 드라이브로 들어가줍니다.

이후 파일을 하나 생성해서 이름을 SSH 혹은 SSH.txt로 만들어줍니다.


놀랍게도 안에는 아무것도 작성하지 않아도 됩니다.


이제 SD 카드 내부에 위의 SSH 파일을 생성하였다면, 라즈베리파이에 연결해서 SSH를 접속해보도록 합니다.

ID : pi

PW : raspberry


아이피는 공유기에 연결된 아이피를 확인해보시기 바랍니다.


P.S 가능하면 유선으로 연결하는 것을 권장합니다. Raspberry Pi에 WiFi 기능이 추가된 기종이 있으나, 이 역시 추가적인 작업이 더 필요합니다. 따라서 원활한 인터넷 연결이 되지 않을 것입니다. (직접 모니터 연결 후 로컬에서 WiFi 설정을 만져줘야 합니다. ㄷㄷ)






라즈베리파이는 따로 카메라 모듈을 제공합니다.

카메라 모듈은 다음과 같이 생겼습니다.



아기자기하니 귀엽게 생겼습니다.


01.카메라 연결하기

위의 그림을 보면 카메라를 어떻게 설치하면 좋을지 나타나 있습니다.

은색선을 HDMI쪽으로, 랜선 쪽으로 파란색선 방향을 유지하고 꽂아주시기 바랍니다.



02. 카메라 사용하기 위한 세팅

이후 다음 명령어를 입력합니다.(혹시 모를 상황을 대비해서 ㅎㅎ)


만약 SSH 연결이 되어있지 않거나 라즈베리파이와 연결할 모니터가 없다면 다음 링크에서 해결해보시기 바랍니다.

[Raspberry Pi] 라즈베리파이 SSH 초기 설정(SD 카드) (링크 클릭)

[Raspberry Pi] 라즈베리파이 GUI 원격 제어하는 방법(VNC) (링크 클릭)


$ sudo apt-get update

$ sudo apt-get upgrade 


그리고 다음 명령어를 입력합니다.

$ sudo raspi-config 

그러면 다음과 같은 창이 나타나게 됩니다.


Raspberry Pi Model B+ 일 경우

아래에서 [Enable Camera]를 선택합니다.


그리고 [Enable]을 선택합니다.

[Finish]를 해주고 재부팅을 해줍니다.


Raspberry Pi 3 일 경우

여기서 [Interfacing Options]를 선택해줍니다.


그리고 가장 위에 [Camera]를 선택해줍니다.


[Yes] ㅎㅎ


[ok] ㅎㅎ


03. 라즈베리파이 카메라 테스트

재부팅을 마친 후에 다음과 같은 명령어를 사용해봅니다.


raspistill 명령어

$ raspistill -o testImage.jpg 

앙 내 손띠~



raspivid 명령어

$ raspivid -o testVideo.avi


동영상이 업로드가 안 된다....






라즈베리파이를 사용하기 위해서 모니터를 연결하려고 하니 연결이 되지 않았습니다. 허허..

SSH 프로그램을 사용하여 SSH 접속을 하더라도 카메라 작업 같은 경우는 완전히 불가능합니다.


때문에 데스크톱 환경(GUI)로 Raspberry Pi 3에 원격 접속하는 방법을 작성해보려고 합니다.


이 방법을 이용하면, 라즈베리파이를 모니터 없이 사용이 가능합니다.


VNC 서버 프로그램 설치와 접속하는 방법

VNC Server 프로그램을 먼저 라즈베리파이에 설치해야 합니다.


만약 SSH 연결이 되어있지 않다면 다음 링크에서 해결해보시기 바랍니다.

[Raspberry Pi] 라즈베리파이 SSH 초기 설정(SD 카드) (링크 클릭)


사용자는 Client, 접속하고자 하는 곳은 Server입니다.


$ vncserver -geometry 1280x1024 


위의 명령어는 vnc 서버를 설치하는 명령어입니다. 또한 1280*1024와 같이 작성하면 안 됩니다. 반드시 엑스(x)로 입력해야 합니다.

설치가 완료되면 다음과 같은 메시지를 출력합니다.


 VNC(R) Server 6.3.2 (r39069) ARMv6 (Oct 17 2018 11:16:05)

Copyright (C) 2002-2018 RealVNC Ltd.

RealVNC and VNC are trademarks of RealVNC Ltd and are protected by trademark

registrations and/or pending trademark applications in the European Union,

United States of America and other jurisdictions.

Protected by UK patent 2481870; US patent 8760366; EU patent 2652951.

See https://www.realvnc.com for information on VNC.

For third party acknowledgements see:

https://www.realvnc.com/docs/6/foss.html

OS: Linux 4.14.79 armv7l


Generating private key... done

On some distributions (in particular Red Hat), you may get a better experience

by running vncserver-virtual in conjunction with the system Xorg server, rather

than the old version built-in to Xvnc. More desktop environments and

applications will likely be compatible. For more information on this alternative

implementation, please see: https://www.realvnc.com/doclink/kb-546

Running applications in /etc/vnc/xstartup

VNC Server catchphrase: "Oscar sector London. Justice prize artist."

             signature: a2-11-de-40-73-14-58-07


Log file is /home/pi/.vnc/raspberrypi:1.log

New desktop is raspberrypi:1 (192.168.43.142:1)


이제 라즈베리파이에 접속하기 위해서는 VNC 클라이언트 프로그램이 필요합니다.

그중 VNC Viewer라는 프로그램을 설치해보려고 합니다.


VNC Viewer 설치 링크


VNC 프로그램 간에는 호환되기 때문에 어떤 VNC 클라이언트 프로그램을 써도 괜찮습니다.

사용중인 64비트 윈도우가 자동감지되어 64비트 설치프로그램을 보여줍니다.


영어로 설치합니당


설치가 완료되면 접속할 아이피를 입력해줍니다.

현재 아이피는 공유기에 연결한 아이피이기 때문에 가상 아이피입니다.


아이디 : pi

비밀번호 : raspberry

위와 같이 입력해줍니다. 만약 root로 접속하더라고 pi로 로그인이 됩니다. 그냥 pi로 고고 합시당.



아이피가 바뀌었더라도 문제없이 다시 접속해줍니다 허허



위와 같이 접속된 화면이 보이실 것입니다.


화면을 적절히 조절해주고 싶다면 [라즈베리 모양 or Win키] -> [Preferences] -> [Appearance Settings]를 클릭합니다.

다음과 같은 화면이 나오는데, 저는 medium screens로 해주었습니다.









Python에서 날짜와 시간을 다루는 모듈을 사용해야 해서 찾아보는데 꽤 종류가 많아서 정리해보려고 합니다.


datetime.now() 함수(현재 시간 표현하기)

import datetime
 
now = datetime.datetime.now()
print(now)
# 현재 시간을 나타냄
# 2019-02-06 18:29:36.768516
 
Date = now.strftime('%Y-%m-%d')
print(Date)
# 현재 시간의 년/월/일만 표시
# 2019-02-06
 
Time = now.strftime('%H:%M:%S')
print(nowTime)
# 현재 시간의 시/분/초만 표시
# 18:29:36
 
DateAndTime = now.strftime('%Y-%m-%d %H:%M:%S')
print(DateAndTime)
# 현재 시간을 '년'-'월'-'일' '시':'분':'초'의 형태의 문자열로 표현
# DateAndTime에는 string 값이 들어가 있음


String 형태로 된 날짜와 시간을 datetime 값으로 바꾸려면 특정 함수를 사용해야 합니다.


datetime.strptime() 함수(str to datetime)

import datetime

StrDateTime = '2019-02-06 18:29:36'
DateTime = datetime.datetime.strptime(StrDateTime, '%Y-%m-%d %H:%M:%S')
print(type(DateTime))
# datetime 형태의 <class 'datetime.datetime'>가 출력됨 --> 문자열 형태가 아님
print(DateTime)
# datetime 형태의 값으로 2019-02-06 18:29:36이 출력됨 --> 문자열 형태가 아님


만약 datetime 형태로 된 날짜와 시간을 string 값으로 바꾸려면 다음과 같은 함수를 사용해야 합니다.


datetime.strftime() 함수(datetime to str)

import datetime

nowDateTime = datetime.datetime.now()
strDateTime = datetime.strftime('%Y-%m-%d %H:%M:%S')
print(type(DateTime))
# str 형태라고 출력됨
print(DateTime)
# 2019-02-06 18:29:36 -- 현재 시간이 출력됨



datetime.replace() 함수(시간 및 날짜 변경)

import datetime
 
DateTime = datetime.datetime.strptime('2019-02-06 18:29:36', '%Y-%m-%d %H:%M:%S')
print(DateTime) 
# 2019-02-06 18:29:36
 
AnotherDateTime = DateTime.replace(day=7)

print(DateTime) 
# 2019-02-06 18:29:36
print(AnotherDateTime)
# 2019-02-07 18:29:36


만약 datetime 값의 특정 날짜 혹은 시간을 바꿔주기 위해서는 replace 함수를 사용해야 합니다.

또한 변경하고자 하는 날짜 혹은 시간을 인자값으로 넣어주어야 합니다.


사용할 수 있는 인자값의 종류는 다음과 같습니다.


1. year (년도)

2. month (월)

3. day (날짜)

4. hour (시간)

5. minute (분)

6. second (초)

7. microsecond(마이크로 초)


이밖에도 응용할 수 있는 방법은 여러가지가 있습니다.


'PYTHON > Python 3.x' 카테고리의 다른 글

[Python] 딕셔너리 정렬하기  (1) 2019.02.05

+ Recent posts