공부정리

본격적으로 애플리케이션을 제작하기에 앞서 프로젝트의 구조를 변경하였다.

1. widgets 디렉토리

기존에 main.py에 선언했던 MainWindow 나 TimeLabel 등 화면 구성을 위해 만든 위젯 클래스들을 widgets 디렉토리로

이동하였다.  앞으로 추가되는 위젯들은 연관성있는 위젯들이 정의된 파일이 있다면 그 안에, 새로운 카테고리로 분리할

필요가 있다면 새로운 파일을 만들어 그 안에 정의하는 방식으로 진행하려한다. 

2. src 디렉토리

src 디렉토리에는 프로그램에서 사용할 이미지 파일이나 추후에 사용하게된다면 QT Designer 로 작성하는 ui 파일 등을

위치시킬 예정이다.  현재로써는 내부의 img 디렉토리에 아이콘 이미지 등을 저장해두고 있다.

3. controller 디렉토리

controller 디렉토리에는 설정파일의 읽고쓰기나 데이터베이스와의 통신 등 시각적인 부분에 직접적으로 관여하지

않는 기능들을 구현할 예정이다. 현재는 설정파일의 읽고쓰기 기능만이 구현되어있다.

4. main.py

QApplication 과 MainWindow 의 객체만을 생성하고 QApplication 객체를 실행시키는 최소한의 역할만을 한다.

1. 절대적 배치

 가장 단순한 레이아웃이다. 위젯의 위치, 크기를 픽셀단위로 하드코딩하는 방식으로 구성된다. 

창의 크기가 바뀌더라도 위젯의 크기와 위치는 변하지않으며 폰트가 변경되거나 플랫폼이 달라지는 등의 

변수에 따라 개발시에 의도한대로 보이지 않을 가능성이 높다. 또한 레이아웃을 변경할 때마다 모든 위젯의

위치를 직접 옮겨줘야하는 불편함이 따른다.  매우 비효율적인 방식이기 때문에 당연하게도 이러한 방식으로

레이아웃을 구성하는 경우는 거의 없다.

2. 박스 레이아웃(Box Layout)

 위젯을 수직/수평 방향으로 정렬하여 나란히 보여주는 레이아웃이다.  레이아웃 안에 레이아웃을

추가할 수 있으며 addStretch 메소드를 호출하여 레이아웃 내의 항목들의 위치관계를 원하는대로 정의할 수도 있다.

QVBoxLayout(수직 박스 레이아웃) 과 QHBoxLayout(수평 박스 레이아웃)을 import 해준다.

수평 박스 레이아웃 hbox를 생성한다.

세 개의 레이아웃을 hbox에 추가해준 뒤 vbox에 hbox 를 추가해준다. 이 때, addStretch 메소드를 호출하여

hbox 위아래로 각각 3, 1의 stretch 값을 설정해준다.

앱을 실행시켜서 창의 크기를 변경해보면 박스 레이아웃이 어떤식으로 동작하는지와 stretch 가 어떤

역할을 하는 값인지 알 수 있을 것이다.  이렇게 설계하면 창의 크기가 변하여도 레이블 세 개는 창의

너비만큼의 공간을 차지하며 위아래 공백 비율을 3:1로 유지한다.

3. 그리드 레이아웃(Grid Layout)

 그리드 레이아웃은 화면 전체를 하나의 테이블로 보고 몇번째 행의 몇번째 열에 widget을 위치시킬지

지정하는 방식이다.

QGridLayout 을 import 해준다.

그리드 레이아웃을 생성해준다.

그리드 레이아웃에 레이블 3개를 추가해준다. 그리드 레이아웃의 addWidget 의 인자가 의미하는 것은 다음과 같다.

첫 번째 인자 : 추가할 위젯

두 번째, 세 번째 인자 : 위젯의 시작위치(행, 열 순)

네 번째, 다섯 번째 인자 : 위젯의 가로, 세로 길이

즉, 위의 코드에서 레이블 3개는 아래와 같은 형태로 추가된 것이다.

실제로 애플리케이션을 실행해보면 의도한 형태로 표시되는 것을 볼 수 있다.

이번에는 위젯들에 스타일시트를 적용해보자.

먼저 QVBoxLayout, QWidget 을 import 해주자.

central_widget 은 QMainWindow 를 상속하는 앱에 Central Widget 으로 설정할 QWidget 인스턴스이다.

vbox 는 수직방향 박스형 레이아웃인 QVBoxLayout 레이아웃의 인스턴스이다. 

addWidget 메소드를 호출하여 vbox 에 레이블 3개를 추가해준 뒤 central_widget에 vbox 레이아웃을 적용한다.

setCentralWidget 메소드를 호출하여 앱의 Central Widget으로 central_widget 을 설정해준다.

앱을 실행시키면 Central Widget 영역에 세 개의 레이블이 수직방향으로 나란히 보여진다. 

이제 이 세 개의 레이블을 대상으로 스타일시트를 적용시켜보자.

위와 같이 setStyleSheet 메소드를 사용하여 스타일시트를 적용시킬 수 있다.  문법은 HTML에서

스타일을 지정하는 방식과 동일하다. 

스타일이 잘 적용된 것을 볼 수 있다.

이전에 설명했던 자가균형 이진트리인 AVL 트리나 레드블랙 트리는 메모리상에서 데이터를 빠르게 삽입, 삭제하고

탐색하는데에는 충분한 성능을 보인다.  하지만 읽고 쓰는 대상이 메모리상의 데이터가 아닌 외부 저장장치가 되면

이야기는 달라진다.  기본적으로 외부 저장장치에 대한 입출력은 입출력의 단위인 버퍼의 크기 내에서는 데이터가

많든 적든 똑같은 속도를 보이며 이 속도는 기본적으로 굉장히 느리기때문에 메모리 내에서의 처리속도가 느려지더라도

입출력 횟수를 줄이는 쪽이 성능 개선으로 이어진다.  즉, 하나의 노드당 하나의 데이터와 2개의 자식노드만을 가질 수

있는 이진트리는 외부 저장장치에의 입출력을 고려하면 효율적이지 못한것이다.

1. 다원 탐색 트리(Multi-way Search Tree)

 이를 해결하기 위해 이진탐색트리와 동일하게 좌측 자식노드는 부모노드보다 키 값이 작고 우측 자식노드는

부모노드보다 키 값이 크지만 하나의 노드가 다수의 데이터와 2개보다 많은 자식노드를 가질 수 있도록 하는

다원 탐색 트리(Multi-way Search Tree, 이하 MST)를 사용할 수 있다. 

위 그림처럼 하나의 노드에 n개의 데이터가 들어간다면 자식노드는 n+1개까지 가질 수 있는 것이다.

2. B-Tree

 그런데 이진탐색트리의 문제점이 MST에서도 마찬가지로 발생한다.  균형이 어긋날 경우 탐색속도를 보장할 수

없다는 것이다. 필연적으로 MST에도 균형을 유지하도록 삽입, 삭제가 이루어지는 트리가 생겼다. 이것이 B-Tree 이다. 

B가 무엇을 의미하는지는 창시자가 따로 밝힌바가 없기에 알 수없지만 균형잡힌 MST이니 Balanced의 B라고 생각해도

좋을 것이다. 

 ① B-Tree 의 용어

• 하나의 노드가 가질 수 있는 자식노드의 최대 갯수를 트리의 차수(degree)라고 한다.
• 차수가 M 인 B-Tree 를 M차 B트리라고 한다.

 ② B-Tree 의 규칙 (M차 B트리)

• 루트 노드는 최소 2개의 자식노드를 가져야한다.
• 루트 노드를 제외한 모든 노드는 최소 floor(M/2) 개의 데이터를 가져야한다.
• 모든 내부 노드는 데이터갯수+1 개의 자식노드를 가져야한다
• 모든 노드는 최대 M 개의 자식노드만 가질 수 있다.
• 모든 리프 노드는 같은 레벨이어야한다.
• 노드 내의 데이터는 정렬된 상태여야한다.
• 입력되는 자료는 중복될 수 없다.

 ③ B-Tree 의 특징

• 자료의 삽입이 항상 리프 노드에서 이루어지며 트리가 아래로 뻗어나가는 것이 아닌 위로 자라는
  Bottom-up 방식이다.
• 일반적으로 하나의 노드가 가질 수 있는 데이터의 갯수는 저장장치의 블록 크기와 유사하게 설정된다.
• 항상 노드내에 데이터가 최소 반 이상은 채워져있기 때문에 블록(노드)단위의 입출력이 효율적이다.
• 순차탐색을 위해서는 inorder 순회를 해야하기 때문에 순차탐색이 비효율적이다.

3.  B-Tree 의 삽입 연산

① 공통 부분

• 트리가 비어있다면 루트노드를 할당.
• 이진 탐색 트리와 같은 요령으로 삽입할 노드를 탐색

② Case 1. 분할이 발생하지 않는 경우

• 단순히 삽입할 노드에 오름차순 정렬상태를 유지하도록 키 값 삽입

③ Case 2. 분할이 발생하는 경우

• 삽입할 노드에 오름차순 정렬상태를 유지하도록 키 값 삽입
• 노드에 들어있는 데이터 갯수가 한도를 넘어섰을 경우 노드의 중간값을 기준으로 노드를 반으로 분할
• 분할의 기준이 된 중간값은 부모노드로 올려보낸다.  부모노드가 없을 경우 중간값을 새로운 루트 노드로 설정
• 부모노드에 올라간 중간값으로 인해 부모노드가 데이터 갯수 한도를 넘겼을 경우 같은 방식으로 분할

4. B-Tree 의 삭제 연산

① 공통 부분

• 트리가 비어있다면 종료
• 이진 탐색 트리와 같은 요령으로 삭제할 노드를 검색
• 삭제할 노드를 찾지못했다면 종료

② Case 1. 삭제할 키 값이 리프노드에 있고 해당 노드의 키 갯수가 최소 키 갯수보다 많을 경우

• 단순히 노드에서 해당 데이터를 찾아서 삭제

③ Case 2. 삭제할 키 값이 리프노드에 있고 해당 노드의 키 갯수가 최소 키 갯수와 같으며
               인접한 형제노드 중 키 값을 빌려올 노드가 있을 경우

• 노드에서 해당 데이터를 찾아서 삭제
• 삭제로 인해 노드의 최소 키 갯수를 만족하지 못하게 됨
• 왼쪽 형제노드중 최댓값 혹은 오른쪽 형제노드중 최솟값을 부모 key 값으로 올리고
  기존 부모 key 값을 가져와서 최소 키 갯수를 맞춤

④ Case 3. 삭제할 키 값이 리프노드에 있으며 해당 노드의 키 갯수가 최소 키 갯수와 같으며
               인접한 형제노드의 키 갯수가 모두 최소 키 갯수와 같을 경우 

• 노드에서 해당 데이터를 찾아서 삭제
• 삭제로 인해 노드의 최소 키 갯수를 만족하지 못하게 됨
• 형제노드로부터 값을 빌려올 수 없기 때문에 한쪽 형제 노드와 부모key값, 해당노드를 하나의 노드로 병합
• 병합을 위해 부모노드의 key 값 하나가 삭제되기 때문에 부모노드를 리프노드로 간주하고 Case1~3 의 작업을
  부모노드에 대해 수행해준다. 

⑤ Case 4. 삭제할 키 값이 내부노드에 있을 경우

• 이진 탐색 트리때와 마찬가지로 좌측 서브트리중 최댓값 또는 우측 서브트리중 최솟값을 후임자로
  가져와 삭제할 데이터를 대체
• 후임자 데이터는 리프노드의 값이기 때문에 리프노드에서의 삭제과정으로 이행한다.

5. B+Tree

 B+Tree 는 B-Tree의 개량버전으로 기본적으론 B트리와 거의 유사하지만 다음과 같은 차이점이 있다.

① 내부 노드에는 key 값만이 존재한다.

   B+Tree 는 B-Tree 와는 달리 내부 노드에는 데이터가 존재하지 않는다. 즉, 내부 노드는 데이터를 찾아가기

   위한 key값을 가질 뿐 실제 데이터는 모두 리프노드에 존재한다.  데이터를 저장하지 않는 덕분에 하나의

   Disk Block에 더 많은 노드를 저장할 수 있으며 결과적으로 key 탐색시에 읽어야할 Disk Block의 갯수가 

   줄어들어 B-Tree 보다 효율적인 탐색이 가능하다.

② 리프 노드끼리는 Linked List 형태로 연결되어있다.

   B+Tree의 리프 노드들은 서로 연결리스트 형태로 이어져있기 때문에 순차탐색의 효율이 B-Tree보다 뛰어나다.

 많은 파일시스템들이 블록 인덱싱을 위해 B+트리를 사용하며 데이터베이스에서도 테이블 인덱싱을 위해

 B+트리가 종종 사용된다.

이번에는 앱에 날짜를 표시하는 기능을 넣어보자.

1. QDate

QDate 클래스는 날짜관련 기능들을 제공하는 클래스이다.  위와 같이 QLabel 위젯 클래스도 함께 import 해준다.

QDate.currentDate 를 호출하면 현재 날짜(년월일)를 구할 수 있다. toString(<format>) 을 호출하여 원하는 형태로 

문자열화 할 수도 있다. 포맷을 'yyyy년 MM월 dd일 ddd' 로 하여 QLabel을 생성, 상태표시줄에 영구위젯으로 붙여보자.

오늘의 날짜가 상태표시줄의 우측 하단에 표시되는 것을 볼 수 있다.  addPermanentWidget은 추가로 호출하면

먼저 추가된 영구위젯의 오른쪽에 다른 영구위젯을 추가로 계속 붙여나갈 수 있다.

2. QTime

이번엔 시간을 표시할 차례이다. QTime 클래스를 import 해주자.

QTime.currentTime을 호출하여 현재시간을 구한 뒤 'hh:mm:ss' 의 포맷으로 QLabel을 만들어 상태표시줄에 붙여주자.

이제 상태표시줄에 시간도 표시된다.

3. QDateTime

 QDateTime 클래스는 날짜와 시간 모두를 다룰 수 있는 클래스이다.  QDate와 QTime 클래스 대신 QDateTime을 import 해준 뒤 currentDateTime 을 호출하여 현재 날짜와 시간을 동시에 구하여 QLabel을 만들고 상태표시줄에 

영구위젯으로 추가해주자.

이제 날짜와 시간이 한번에 표시된다.

4. QTimer

그런데 현재 시간표시에는 한가지 문제가있다.  처음 프로그램을 켰을때만 현재시간을 상태표시줄에 띄워주기 때문에

시간이 지나도 프로그램을 켰던 순간의 날짜와 시간만이 표시된다는 것이다.  이를 해결하려면 주기적으로 시간을 다시

체크하여 띄워줄 필요가 있다.

QTimer 클래스는 지정된 인터벌마다 timeout 시그널을 발생시켜 일정 시간단위로 발생해야하는 이벤트를

시그널-슬롯 방식으로 처리할 수 있게 해주는 클래스이다.  import 해주자.

QLabel 위젯을 상속하는 TimeLabel 위젯을 만들어준다.  초기값이 날짜/시간으로 지정된 평범한 레이블 위젯이지만

timer를 추가하여 timer가 timeout 시그널을 발생시킬 때 마다 timeout 이라는 메소드를 호출하도록 설정되어있다.

timer 는 0.1초에 한번씩 timeout을 발생시키며 timeout 메소드는 레이블에 표시되는 날짜와 시간을 갱신한다.

interval을 1초에 한번씩이 아니라 0.1초에 한번씩으로 설정한것은 1초단위로 할 경우 실제 시간과 초단위의 싱크가

잘 맞지 않았기 때문이다.  초단위의 정확도가 필요한게 아니라면 인터벌을 조금 늘려도 괜찮을 것 같다.

이제 시간을 표시하는 TimeLabel의 인스턴스를 생성하여 상태표시줄에 영구위젯으로 추가해준다.

이제 상태표시줄에 표시되는 시간이 초단위로 갱신되는 것을 확인할 수 있다.

이번에는 프로그램을 실행하면 윈도우가 모니터 화면의 중앙에 위치하도록 해보자.

먼저 setGeometry 대신 resize 를 호출하여 윈도우의 크기만을 재지정해준 뒤 center 메소드를 호출하도록 한다.

center 메소드 내에서는 현재 창의 위치정보 cur_pos 를 frameGeometry 를 호출하여 구하고

모니터 화면의 가운데 위치정보 center_pos 를 screen().availableGeometry().center 를 호출하여 구한다.

그리고 cur_pos 에서 moveCenter 를 호출하여 창의 가운데 좌표를 모니터 화면의 가운데 좌표로 이동시킨다.

이제 프로그램이 모니터 화면의 정중앙에서 실행되는 것을 확인할 수 있다.

지금까진 윈도우를 띄우고 최상위 위젯에 다른 위젯들을 붙이는 등 간단한 PySide의 사용법을 알아봤다.

이번에는 좀더 일반적인 애플리케이션다운 형태로 처음부터 다시 화면을 구성해보자.

1. 메인 윈도우(Main Window)

 QMainWindow 위젯은 우리가 일반적으로 보게되는 윈도우 애플리케이션의 기본프레임을 갖춘 위젯이다.

메인 윈도우는 위와 같이 Menu Bar, Tool Bars, Dock Widgets, Central Widgets, Status Bar 의 영역들을 가지고있다.

Central Widgets 영역에는 우리가 원하는 어떤 위젯이든 위치시킬 수 있다.

2. 상태표시줄(Status Bar) 만들기

QMainWindow 위젯을 import 하고 MyApp 이 QWidget 대신 QMainWindow 를 상속하도록 변경한다.

self.statusBar().showMessage 메소드를 호출하여 Ready 라는 메시지를 상태표시줄에 출력하도록 해보자.

하단 상태표시줄에 Ready 가 출력된 것을 볼 수 있다. 

showMessage 에서 timeout 인자에 정수값을 주면 지정된 시간만큼만(1000 = 1초) 메시지가 표시되고 사라진다.

clearMessage 를 호출해도 메시지를 사라지게할 수 있다.

QStatusBar 는 표시된 메시지가 변경될 때 마다 messageChanged 시그널을 발생시킨다.

3. 메뉴바(Menu Bar) 만들기

 다음으로 메뉴바를 추가해보자. 저장, 설정, 인쇄, 편집 등 윈도우 애플리케이션의 거의 모든 기능들은 메뉴바에서

접근 가능하도록 되어있는 경우가 많기때문에 매우 중요한 부분이다.

MyApp 위젯에 menuBar 메소드를 호출하여 메뉴바를 만들고 addMenu 메소드를 호출하여 File 이라는 메뉴를

생성하였다. &File 과 같이 특정 문자앞에& 기호를 붙이면 Alt+<해당문자> 단축키로 그 메뉴에 접근할 수 있다.

이제 File 메뉴에 액션을 추가해보자.  QAction 클래스를 import 하여 프로그램을 종료하는 액션을 생성한다.

종료액션을 나타낼 아이콘이미지를 구해서 exit_icon.png 로 src/img/ 디렉토리에 저장하고 QIcon 클래스로

아이콘 인스턴스를 생성하여 넘겨주면 해당 액션의 아이콘이 등록된다.  그 다음인 text 인자에는 액션에 표시될

텍스트로 Exit를, 그 뒤에는 상위 위젯으로 self, 즉 MyApp 위젯을 넘겨준다.

setShortCut 으로 단축키를 지정하고 setStatusTip 으로 커서를 가져다대면 해당 지정된 텍스트가 스테이터스창에

나타나도록 한다. 액션은 실행될 경우 triggered 시그널을 발생시키기 때문에 해당 시그널에 self.close 를 연결하여

액션 실행시 MyApp이 종료되도록 해준다.  마지막으로 addAction 을 호출하여 파일메뉴에 액션을 등록해준다.

File 메뉴에 들어가면 지정한 아이콘과 텍스트, 단축키 설명이 들어간 액션이 생성된 것을 확인할 수 있으며

커서를 가져다대면 상태표시줄에 우리가 지정한 액션에 대한 설명이 텍스트로 표시된다.  클릭해서 실행하거나

지정한 단축키대로 Ctrl+Q 를 입력해주면 프로그램이 종료되는 것을 확인할 수 있다.

4. 툴바(Tool Bar) 만들기

self.addToolBar 를 호출하여 툴바를 생성해준 뒤 메뉴에 추가하기 위해 만들었던 exit_action을 툴바에 추가해준다.

툴바에 Exit 액션이 정상적으로 추가된 것을 확인할 수 있다.

이번에는 QToolTip 위젯을 사용하여 위젯에 툴팁을 추가해본다.

QToolTip과 QFont 를 import 한 뒤 QToolTip.setFont 메소드를 호출하여 폰트를 설정하고 btn 위젯에 툴팁메시지를 

추가한다.

버튼 위에 커서를 대고있으면 툴팁 메시지가 나타나는 것을 볼 수 있다.

1. 버튼 만들기

 이번에는 빈 화면에 버튼을 하나 만들어서 달아보자. 

main.py 를 위와 같이 수정해준다. QPushButton 위젯을 import 하고 btn 이라는 이름의 QPushButton 의 객체를

생성하였다.  생성자 호출시에 들어간 인자는 첫 번째의 '버튼' 은 버튼에 표시될 텍스트, 뒤의 self 는 버튼 위젯이

위치할 상위 위젯, 즉 여기서는 MyApp 이 된다. 

setGeometry() 는 위젯이 표시될 좌표와 크기를 설정하는 함수이다. 윈도우 화면 전체를 기준으로한 좌표를 사용하기에

보통 최상위 위젯에서만 사용되는 경우가 많다. 

첫 번째와 두 번째 인자는 윈도우상의 x, y 좌표를 의미한다. 화면 좌측 최상단의 좌표가 x=0, y=0 이다.

세 번째와 네 번째 인자는 위젯의 너비와 높이를 의미한다.

이제 프로그램을 실행해보면 현재 최상위 위젯인 MyApp에 버튼이 나타난 것을 볼 수 있다.

2. 시그널 처리

 추가한 버튼은 아직 눌러도 아무기능도 하지않는다. 이제 버튼을 누르면 뭔가의 동작을 하도록 기능을 추가해보자.

'hello' 를 출력하는 btn_handler 라는 스태틱 메소드를 선언한 뒤 btn.clicked.connect 함수에 인자로 넘겨주었다.

btn.clicked.connect() 함수는 인자로 넘겨진 함수를 btn 이 클릭됐을 경우에 호출되도록 등록해준다.

프로그램을 실행하여 버튼을 눌러보면 버튼을 누를 때마다 콘솔창에 hello 가 출력되는 것을 볼 수 있다. 

지금 프로그램을 실행하면 뜨는 윈도우의 타이틀에는 실행파일의 디폴트 아이콘이 보여진다.

원하는 이미지 파일을 구하여 아이콘을 변경해보자.

인터넷 검색을 통해 png 포맷의 오픈소스 이미지중 아이콘으로 사용하기에 적당한 것을 찾아보자.  직접 이미지를

제작할 수 있다면 그것도 좋다.  이 프로젝트의 경우 간단하긴 해도 회계관련이니 구글에서 오픈소스 이미지 중

회계관련 아이콘 이미지를 가져왔다.

프로젝트 디렉토리 하위에 src 디렉토리를, 그 하위에 img 디렉토리를 생성하여 그안에 icon이라는 이름으로 파일을

추가해준다. 앞으로 이미지 리소스들은 이 디렉토리에 위치시키기로 한다.

PySide6.QtGui 의 QIcon 클래스를 import 해준 뒤 MyApp 의 init_ui 메소드를 위와같이 수정해준다.

다시 프로그램을 실행해보면 타이틀 부분의 아이콘이 지정한 이미지로 변경된 것을 확인할 수 있다.