생짜

비 개발자를 위한 웹 개발 기초

slide share의 기초 정리로 흝어보기 좋을 것 같다.

slide share에 올라와 있는  수원대학교 자바스크립트 강의 자료.

한번 후루룩 훑어 보기에는 좋을 것 같다.

1.프로그래밍 언어, 변수, 식별자, 데이터형

2.연산자

3.조건문, 반복문, 예외 처리

4.객체

5.객체 (Date, RegExp, Object, Global)

6.함수, 스코프, 클로저

7.NodeJS 기초

8.NPM, ExpressJS

9.Socket.IO 

10.OpenAPI & RSS

인프런에서 하는 강좌로 무료이다.

GIT에서 작업 중, 

GIT을 사용할 때 .gitignore 파일을 수정해도 ignore가 적용이 안될 경우가 발생한다. 이미 저장소에 푸시된 경우 ignore가 적용이 안되기 때문이다. 아래와 같이 하면 ignore가 제대로 작동한다.

git rm -r --cached : 

<< Previous

QML이 객체들은 Parent - Child 관계를 가질 수 있다. 

이 깊이는 무제한으로 할 수 있다.

각 Parent와 Child가 서로의 control에 접근을 할 수 있는데 Parent와 Child간에는 접근할 수 있는 권한이 있다.

child 에서 parent에 접근할 때는 깊이에 상관없이 무제한으로 접근할 수 있지만 반대로 parent에서 child에 접근할 때는 1 depth이상으로는 접근 할 수가 없다.

1 depth만 접근할 수 있음

그럼 parent의 입장에서 child의 child에 접근하려면 어떻게 해야 할까?

이때 필요한 propert가 ailas 이다. ails는 말 그대로 child 또는 객체의 레퍼런스 별명이다. ailas property 이외에 child 객체에 함수를 만들고 함수를 통해 접근할 수 있고 parent 객체에 선언한 변수를 child 객체에서 사용할 수도 있다.

Next >>

<< Previous

QML도 마우스와 키보드 입력 및 event를 처리할 수 있는 여러 객체( 인터페이스 )를 제공한다.

QML에서 이벤트는 객체 단위로 정의 사용할 수 있다. 

각각의 객체 안에 사용할 이벤트를 자식 객체로 선언하여 사용하는 방법이다.

Mouse와 Key, TextInput 의 예제를 살펴보자.

하나의 프로그램 중 여려개의 객체가 있다면 각 객체마다 마우스 / 키 이벤트를 가질 수 있다.

마우스 / 키 이벤트는 꼭 parent 객체를 가지고 있어야 하고 키 이벤트의 경우 parent 객체의 속성인 'focus'의 값이 'true'로 되어 있어야 한다.

MouseEvent Object Type

MouseArea Object에 대해서는 간략하게 알아봤으니 이번에는 MouseEvent Object를 살펴보자.

MouseArea 객체가 마우스를 핸들링하는 객체라면 MouseEvent 객체는 마우스 이벤트에 대한 정보를 제공하는 객체로서 마우스의 위치는 x 및 y 속성을 통해 찾을 수 있고 이벤트를 발생시키는 버튼은 button 속성을 통해 사용할 수 있다.

그렇다 MouseArea 객체는 onPress, onRelease, onClick 등의 특정 아이템 내의 마우스 이벤트에 대한 핸들링 객체이고 MouseEvent 객체는 마우스에 대한 정보를 제공한다. 마우스 휠에 대한 이벤트를 핸들링 하는 WheelEvent 객체는 또 따로 있다.

Keys Object Type

Item 의 Key 핸들링을 제공하는 객체다.

가장 기본적인 Item 객체를 포함하여 모든 시각적 Object Type은 Keys 객체를 사용하여 키 처리를 지원한다. 

Keys 객체는 onPressed 및 onReleased signal 속성을 통해 처리 할 수 있다.

signal 속성에는 이벤트의 세부 정보가 들어있는 event라는 이름의 KeyEvent 매개 변수가 있다. 

키가 처리되는 경우 event.accepted를 true로 설정하여 이벤트가 항목 계층을 따라 전파되지 않도록해야합니다.

TextInput Object Type

편집 가능한 텍스트 줄을 표시하는 객체로 한행을 표시한다. 멀티라인은 표시하지 않는다.

echoMode를 적절한 값으로 설정하면 TextInput을 암호 입력 필드로 사용할 수 있다.

생성 초기 기본적인 모슴,                                       키 입력을 받은 모습

Next >>

<< Previous

아래 링크는 QML의 모든 Object Type들이 정의되어 있다.

All QML Types

가장 많이 사용하고 기본적인 Object들은 아래 링크에 나와 있다.

Basic QML Visual Elements

 QML Basic Elements

Basic Elements 중에서 몇 개의 Example Code이다.

Rectangle Object

Rectangle Object는 사각형을 나타내는 Object Type이다. 기본적인 Property로는 위치를 나타내는 x, y, width, height와 색깔을 표시하는 color, 모서리의 라운드를 나타내는 radious, 외곽선을 나타내는 border 속성이 있다.

border 속성은 객체로서 자식 속성을 가지고 있다.

import 키워드는 java의 import 키워드와 같은 역활을 한다.

이외에 더 많은 속성은 링크를 따라 확인하면 된다.

Image Object

Image Object는 이미지 파일을 나타내는 객체이다. 로드할 수 있는 이미지 파일은 png, jpg, bmp등 종류는 다양하다. Image Object의 기본적인 property는 다른 객체들과 유사하다. 이미지 객체의 고유 property로 이미지 source의 path를 지정할 수 있는 'source' property가 있다. source property의 이미지 파일 경로명은 두 가지 방법으로 기술 할 수가 있다.

첫 째, 이미지를 리소스에 등록하는 방법이다.

이미지를 리소스에 등록하게 되면 "qrc:/폴더 경로 명" 으로 기술한다. ex) source: "qrc:/home/user/test.png"

둘 째, 이미지를 리소스에 등록하지 않고 경로명을 기술해주는 방법으로 경로명은 "file:///폴더 경로 명"로 기술한다.

ex) source: "file://home/user/test.png" 이 경우 file: 뒤에 슬래쉬가 3개가 들어가는게 포인트다.

두 가지 방법의 차이점은 딱히 없다. 리소스에 등록할 때는 컴파일된 실행 파일에 이미지까지 같이 묶여질 뿐이다.

Text Object

Text Object는 텍스트를 나타내는 객체다. Text Object의 property인 text에 기본적인 string으로 텍스트값을 줄 수도 있지만 HTML 형식으로도 텍스트 값을 줄 수 있다. 그 외에 폰트의 종류와 사이즈 등을 설정할 수 있는 font property 객체도 property 로 가지고 있다.

MouseArea Object

MouseArea Object는 Mouse event 객체이다. 이 객체는 단독으로 생성될 수는 없고 꼭 parent 객체가 필요하다. 예제 소스에서는 Rectangle 객체의 child 객체로 생성했다. MouseArea 객체는 이벤트( 여기서는 마우스 클릭 )를 받을 영역을 꼭 지정해야 동작한다. 즉 x, y, width, height 를 꼭 설정해줘야 한다.

anchors.fill: parent 라는 구문은 MouseArea 객체의 x, y, width, height 영역을을 부모 객체와 동일하게 지정한다는 뜻이다. 이벤트 받을 영역을 부모 객체인 Rectangle 객체의 크기로 지정한 후 클릭 이벤트가 왔을 경우 부모의 색깔을 red로 바꾼 다는 뜻이다.

onClicked: { parent.color = 'red' }

anchors property 는 이해하고 나면 UI를 그리는데 여러가지로 편한 키워드이다. 하지만 이해못하고 쓰면 UI가 이상한데 그려지기 일쑤이다.

객체를 생성하면서 property 초기값을 줄 때에는 color:'red'로 하지만 property 초기 값을 지정 후 호출하여 사용할 때는 color = 'red 라고 사용해야 한다.

QML은 스크립트 언어이기 때문에 컴파일 언어 처럼 정확한 신텍스 체크를 해주지는 않는다. property를 사용할 때 '=' 대신 ':' 를 사용해도 문법적 오류가 발생했다고 알려주지 않는다. 실제 동작할 때 이 부분에서 동작이 안 될 뿐이다

 << Previous

QML은 계층적 구조를 갖고 있다.

QML 구조는 크게 객체선언, 변수선언, 함수선언, 세 부분으로 나눌 수 있다.

선언된 객체 안에는 자식 객체와 이벤트를 선언 할 수 있다.

QML Object Type은 마치 클래스명 처럼 객체명으로 사용, 선언된다.

객체를 선언한 후 객체 안에 멤버 변수 처럼 property를 선언 사용할 수 있다.

QML Object 는 고유한 아이덴트 값인 id, 좌표값과 크기를 나타내는 x, y, width, height 처럼 공통적으로 갖는 property도 있고

Object 고유의 값을 갖는 property도 있다.

또 선언된 Object 안에서 property라는 키워드를 사용하여 User가 직접 정의하여 사용할 수도 있다.

Object내에 있는 property들을 선언 정의할 때는 properyt 키워드를 사용하지 않는다.

계층적 구조라는 말은 부모와 자식 관계를 갖고 상속할 수 있다는 뜻이다. 그러나 QML에서의 상속은 우리가 알고 있는 상속과는 약간 차이가 있다. 더 정확히 말하자면 상속보다는 모듈화에 가깝다.

Next >>

 << Previous

 QML에 대한 기본적인 소개를 끝내고 이제부터 가장 기본적인  QML Code에 대해 알아보자

이제 QML로 세상에서 가장 많이 만들어진 Application을 만들 것이다. 바로 'Hello World'다.

QT Creator을 실행 시킨다.( 개발환경은 VM Player에 설치한 우분투다. )

1. QT Creator에서 Project 만들기

QT Creator를 실행 시킨 후 순서대로 프로젝트를 만든다.

① 'Welcome'을 선택한다. 

② 'Project'를 선택한다. Project에서는 새로운 프로젝트( + New Project )를 생성 할 수도 있고 기존 프로젝트를 열 수도 있다.( Open Project )  

③ 'New Project'를 클릭하여 Project 생성창을 연다. 

④,⑤ 'Application'/'Qt Quick Application'을 선택한다.

⑥ 'Choose' 버튼을 클릭하여 다음으로 넘어간다.

① 프로젝트 이름을 쓴다. 

② 'Browse'버튼을 클릭하여 프로젝트가 생성될 폴더를 선택한다.

③ 'Next' 버튼을 클릭하여 다음으로 넘어간다.

① 사용할 QT 버전을 선택한다.

② ui 디자인 관련된 qml 파일을 첨부할 것인지 물어보는 체크박스로 체크를 해제한다.

③ 'Next' 버튼을 클릭하여 다음으로 넘어간다.

① 프로젝트가 성공적으로 만들어 졌을 경우 나오는 화면이다.

② 'Next' 버튼을 클릭하여 다음으로 넘어간다.

프로젝트를 만들 수 없을 때 나오는 화면이다. 내가 겪어본 이 경우는 컴파일 링크가 잘못 됐을 때주로 나왔다. 

QT를 설치하면 설치된 QT\tool 폴더 안에 Qt Creator도 같이 설치된다. 이 경우 개발에 필요한 컴파일의 링크등이 자동적으로 Qt Creator의 환경에 설정이 된다. QT와 같이 설치된 Qt Creator의 버전이 낮아 최신 버전의 QT Creator 를 다운받아 따로 설치하면 Qt Creator의 환경 설정이 안되어 있기 때문에 이런 에러가 발생한다.

생성된 프로젝트에 관한 정보를 보여준다. ① 'Finish' 버튼을 클릭하면 프로젝트 생성이 끝난다.

<main.cpp>

소스를 보면

QQmlApplicationEngine engine; 객체에 engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); QML 파일을 로드하는 것을 볼 수 있다. engine 객체는 로드한 QML 파일을 실행시킨다.

<main.qml>

Qt Creator에서 기본적으로 만들어 주는 cpp / qml 파일이다.

① Run 버튼을 클릭하면 cpp 파일을 먼저 컴파일 후 qml파일을 로드한다.

Qt Creator를 이용하여 기본적인 프로젝트 만드는 방법을 연습해 봤다. Qt Creator에서 자동적으로 만들 어준 Code는 Windows를 Item을 사용하여 만들기 때문에 윈도우 캡션바가 자동으로 생성된다. 

나는 Embedded 장비에서 작업을 하기 때문에 Code를 아래와 같이 수정한다.

<main.cpp>

이 코드에서는  QQmlApplicationEngine engine; 객체가 없다. engine 객체는 QQuickView View;의 멤버변수로 View.setSource 함수로 QML 파일을 로드하면 View 객체 내부에서 engine에 로드한다.

<main.qml>

실행화면을 보면  Window 프레임이 사라진 것을 볼 수 있다.

hello_world.tar.gz

Next >>