아이스베어의 개발 일기

이전 포스팅에서는 .ui를 .py로 바꾸는 방법을 소개했다.

이번에는 다른 방법으로 파이참 내에서 .ui를 실행하는 코드를 소개할 것이다.

파이참 파일에서 실행할 아무파일 .py를 생성하고 

필수적으로 띄울 .ui를 프로젝트파일에 옮겨놔야 한다!

import sys
from PyQt5.QtWidgets import *
from PyQt5 import uic

from_class = uic.loadUiType("qt0602.ui")[0]
#QMainWindo, from_class를 상속받아 내 클래스 MyWindow
class MyWindow(QMainWindow, from_class):
    def __init__(self):
        super().__init__()
        self.setupUi(self) #this가 상속받은곳에 없으면 부모를 찾아감

if __name__ == "__main__":
    app = QApplication(sys.argv)
    mywindow = MyWindow()
    mywindow.show()
    app.exec_()

PyQt5 설치

pip install pyqt5

Pyside2 설치

pip install pyside2

Pyside2를 설치하셨으면 Qt Designer가 자동으로 설치되어있다.

designer.exe를 바로가기로 만들어두면 사용하기 편해진다.

UI 파일을 PY 파일로 변환

저장을 할 경우에는 파일이 .ui 파일로 저장된다.

이 파일을 .py 파일로 변환 하는 방법은 두가지가 있다.

1. cmd에서 파일변환하기

pyuic5 -x 변환할 파일(.ui) -o 변환되었을때 파일명(.py)

ui가 있는 파일에 위의 코드를 입력하면 된다.

열어보면 파이썬 코드로 변환된 것을 확인할 수 있다.

2. 저장할때부터 확장자 .py로 바꿔주기

--> 음... 이 방법은 파이참으로 열어보니 xml 형식이였다. 모두들 첫번째 방법을 사용하길 바랍니다.

ui를 py로 변환한 후 내가 만든 디자인이 파이썬 코드로 변환됬는지 바로 확인하기 위해

python (실행할 파일)

해주면 바로 GUI가 나오는 것도 확인할 수 있다.

파이참에서 실행하였다.

Settings -> Project Interpreter 에서 PyQT5에 관한 Package를 다운받았다.

hello.py를 생성해

import sys
from PyQt5.QtWidgets import *

app = QApplication(sys.argv)
label = QLabel("안녕 큐티?")
label.show()
app.exec_()

Ctrl + Shift +F10을 눌러 실행해주면

창이 띄어졌다!

1탄에 이어서 하는 것이다!

Say.js  파일을 만들어 준다.

Say.js

import React, {useState} from 'react'

const Say = () => {
    //hook
    const[message, setMessage] = useState('')
    const [color, setColor] = useState('black')
    const onClickEnter = () => setMessage('안녕하세요')
    const onClickLeave = () => setMessage('안녕히가세요')
    return (
    <div>
        <button onClick={onClickEnter}> 입장 </button>
        <button onClick={onClickLeave}> 퇴장 </button>
        <h1 style={{color}}>{message}</h1>
        <button style={{color:'green'}} onClick={() => setColor('green')}>초록색</button>
        <button style={{color:'blue'}} onClick={() => setColor('blue')}>파란색</button>
    </div>
    )
}

export default  Say

App.js 파일에 아래의 내용을 추가한다.

App.js

import './App.css';
import Say from './Say';

function App() {
  let a = '홍길동'
  let arr = [1, 2, 3, 4, 5]
  let str = ''
  let result ='홍말자'
  {
    result = str && '홍길동'
    str ='5'
    result = str && '홍길동'
    console.log("여기값은 "+result) //홍길동
  }
  return (
  <>
    안녕하세요? {a} 님 {arr.map(i=> i*5+' ')}
    <Say />

  </>
  //jsx에서 반복문과 if문 사용불가
  //short circuit 또는 3항 연산자
  )
}

export default App

localhost:3000 화면에 위 사진처럼 뜬다.

아래의 버튼을 누르면 글씨 색도 변환다는 것을 확인할 수 있다!

1. Visual Studio Code에 내가 실행할 파일을 만들어 띄운다.

나는 로컬디스크 C에 nodeEx 라는 파일을 생성했다.

2. Visual Studio Code에 터미널을 열어 아래의 사진처럼 코드를 입력한다.

파일이 생성된다!

여기에

cd first
npm run start

cd first를 입력한 후 npm run start 하면 리액트 앱이 생성된다.

terminal에 서버가 돌아간다고 뜨고 

완료가 되면 이 글씨와 함께 크롬창에 http://localhost:3000/ 로 뜬다!