QQuickStyle을 import 하고 테마를 임의로 변경하였고, QQuickStyle을 Import 하기 위해선 QT 공식 홈페이지 가이드를 참고하여 Cmake일 경우

find_package(Qt6 COMPONENTS QuickControls2 REQUIRED)
target_link_libraries(mytarget PRIVATE Qt6::QuickControls2)

CMakeLists.txt에서 해당 부분을 추가하여 사용할 수 있다. 여기서 "mytarget" 부분은 해당 라이브러리의 이름을 적으면 된다.

이렇게 테마 변경으로 텍스트 부분을 해결할 수 있었다.

솔직히 맥북의 테마 설정으로 이런 문제가 생길 줄은 몰랐고 이런 작은 문제로도 정보 자체가 많이 없기 때문에 시간이 생각보다 오래 걸렸지만... 우선 해결은 했으니 다행이라고 생각한다.

위 사진처럼 Rectangle Object를 간단하게 구현해 보았다. 여기서 봐야 할 것은 anchors 속성값을 활용하여 Object의 위치를 변경 시킬 수 있고 parent는 부모 객체를 기준으로 동작하겠다는 것이다. 현재 Rectangle의 부모 객체는 상위의 있는 Window로 Window를 기준으로 anchors 속성 값에 따라 위치를 변경하고 있는 것이다.

이런 식으로 Object 내에 Object를 구성하는 방식으로도 활용하여 Rectangle 내에 텍스트나 사진을 넣는 것도 가능하며

MouseArea Object를 활용하여 마우스 동작 이벤트에 따라 결과값이 다르게 동작할 수도 있다.

다음엔 이런 Object를 활용하여 간단한 동작을 하는 프로젝트를 만들겠다.

이 문제 때문에 이후에 CMakeLists.txt.user 파일은 커밋에서 제외 처리를 해야겠다.

https://doc.qt.io/archives/qt-4.8/qml-basic-visual-elements.html

QT 공식 사이트 가이드에서 기본적인 Ojbect Type의 명칭과 기능을 찾아볼 수 있었다.

하지만 웹 개발을 해본사람이라면 이상한점을 느낄수 있을텐데 HTML에서 기본적으로 제공하는 기능에 비해 부족한게 많다. (button, radio button, check box...)

이부분은 찾아보니 Qt Quick Controls을 import하면 활용할수 있는데 일종의 라이브러리로 생각이 되는데 추후에도 기본 기능에서 부족한 부분은 QT사이트 가이드에서 찾아보면 될거 같다.

우선 이건 나중에 더 알아보기로 하고 기본 Object Type에 집중 해보려고 한다.

BorderImage

Image Object와 같이 이미지를 표현 하는 Object Type이지만 Boarder 안에 이미지를 표시 하는 형식으로 Boarder 크기를 지정 하고 이미지를 Boarder크기에 맞게 조정하는 등의 동작을 할 수 있다.

Image

이미지를 표현하는 Object Type으로 source 속성으로 경로를 지정한다.

Item

여러 Object 항목을 묶어서 일괄 동작 하게끔 해주는 Object Type으로 HTML에서 영역을 따로 지정하기 위해 div로 묶는 동작과 비슷할거 같다는 추측을 하고있다.

Rectangle

사각형을 표현하는 Object Type으로 기본적으로 색상 및 크기를 조정 할수 있다 속성값은 아래와 같다

border.width : 선의 뚜께를 결정 border.color : 선의 색상을 결정 color : 사각형을 채우는 색상을 결정 gradient : 사각형을 채우는 그라데이션을 결정 radius : 사각형 테두리의 둥근 정도를 결정

Text

텍스트를 표현하는 Object Type으로 글꼴과 크기, 색상 등을 조정 할수 있다.

text : 표시 될 글자를 결정 font.family : 텍스트의 폰트를 결정 font.pointSize : 텍스트의 크기를 결정 color : 텍스트의 색상을 결정

TextEdit

입력이 가능한 텍스트 여러줄을 표현하는 Object Type 이며 Text Object Type과 동일 하게 기존에 표시될 글자를 text : 속성으로 결정 할 수 있다.

TextInput

입력이 가능한 텍스트 한줄을 표현하는 Object Type 이다

Object Type 및 속성값은 너무 많은 관계로 전부 정리 하진 못하고 자주 쓰이게 될거같은 항목만 정리 하였다. QT 공식 사이트 가이드의 본문을 번역하여 정리 하였으며 실제 동작과 다른 부분이 있을수 있으며, 다른 부분이 확인 된다면 수정 할 예정이다.

qml 기반으로 Project 생성은 사진과 같이 설정 후 생성 하면 된다.

프로젝트를 생성하면 main.cpp 와 main.qml 파일이 생성되는데 동작 구현 로직은 main.cpp UI 출력은 main.qml로 구현된다.

이런부분에 있어선 웹 프론트와 비교하면 main.cpp는 html단 Main.qml는 CSS와 흡사하다고 생각하면 이해가 편할것 같다.

Main.qml 파일을 내부를 살펴보았을때 선택자와 선언부가 존재하고 선언부 내부는 속성과 속성값으로 구성되어 있어 CSS와 구조가 매우 흡사하다. main.cpp 파일은 C++로 이루어져있고 기본 구성은 코드 실행시 메인 메서드 내부에서 UI 출력을 담당하는 Main.qml을 호출하는 내용의 코드가 자동 생성 되는거 같은데 아직 C++의 이해도가 낮기 때문에 진행하면서 더 알아봐야 할것 같다. Qt Creator 왼쪽 하단의 Run 버튼을 누를 시 윈도우 화면이 출력 되는데 상단 title이 Hello World 인걸 확인 하여 Main.qml의 Window 선택자의 title 선언부는 윈도우 창의 제목을 변경하는 항목인 걸 추측할 수 있을 거 같다.

우선 Github에서 Repository를 생성해준다. (Add a README file을 체크하면 연동에 오류가 있다고 한다)

이후에 소스트리 > 새로 만들기 > 로컬 저장소 추가하기에서 생성한 프로젝트 파일을 열기 해준다

로컬 저장소 생성이 완료되면 생성된 로컬 저장소로 들어가서 설정 > 원격 > 추가로 진입 하여 URL/경로를 아래와 같은 형식으로 작성한다.

https://{Github token}@{Github에서 생성한 Repository URL}

이후 commit, push를 하게되면 정상적으로 저장소 연동이 된걸 확인할 수 있다.

QT에서 제공하는 프레임워크인 QT Quick내의 UI를 만드는 프로그래밍 언어 이다. qml은 코드를 위에서 한줄씩 읽어들여 처리하는 인터프리터 형식이며 JavaScript와 CSS와 흡사한 구조를 가지고 있으며 qml의 예시는 아래와 같다

import QtQuick 1.0
Rectangle {

    width: 200

    height: 200

    Text {

        x: 10

        y: 10

        text: "Hello World"

    }

}

QT Quick은 디자인(qml) 과 기능(cpp) 로직을 분리 할수 있으며 qml로직에서 cpp에서 작성한 API를 사용할 수 있다.

이부분을 웹과 비교를 하자면 로직 분리 부분은 백엔드는 c++ 프론트엔드는 qml를 사용하게 개발을 한다라고 이해하면 될거같고,

qml로직에서 cpp의 API를 사용하는 부분은 axios를 통해 백엔드의 API를 React에서 호출하여 활용하는 것과 비슷하다고 생각하면 될 것같다.