EC2서버에 docker-compose를 사용하여 워드프레스 설치

이번은 docker-compose를 사용하여 EC2서버에 워드프레스를 설치해 볼거다.

1. 도커 설치 및 서비스 시작

   $ sudo yum install -y docker
   $ sudo service docker start
   or
   $ sudo systemctl start docker.service

2. docker-compose 설치 및 권한, 심볼릭 링크 설정

   $ sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose"
   $ sudo chmod +x /usr/local/bin/docker-compose
   $ sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
   # docker 설치 후 /var/run/docker.sock의 permission denied 발생하는 경우
   파일에 권한 변경
   $ sudo chmod 666 /var/run/docker.sock
   # 이제 유저도 docker 명령어 사용가능

3. ec2서버 사용자 홈디렉토리에 docker-compose.yml 작성

   $ nano ./docker-compose.yml

• docker-compose.yml 내용

  version: '3.1'
  services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
  
  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'

4. 작성한 파일을 통해 도커에 설치

   $ sudo docker-compose up -d

5. ec2 서버에 보안그룹에 인바운드 규칙에 8080포트 추가
6. 다시 ec2서버의 주소로 들어가면 워드프레스 설치페이지로 들어가게 된다.

Mac OS에서 Putty 설치 및 ec2 접속

OS: Monteray

1. homebrew에 Mac PuTTY 설치

homebrew가 설치 되었다면 터미널에서

~% brew install putty

2. macport설치 macport 다운로드 접속 후 자신의 OS버전에 맞는 macport를 다운로드 및 설치.

3. 설치 완료 후 터미널에

   ~% sudo port -v selfupdate

   명령어를 입력.

4. macport에 putty 설치

   ~% sudo port install putty
   ~% continue? (Y)
   ...
   ...
   python39 has the following notes:
    To make this the default Python or Python 3 (i.e., the version run by the
    'python' or 'python3' commands), run one or both of:
   
        sudo port select --set python python312    <-
        sudo port select --set python3 python312 <-
   ~% sudo port select --set python python312
   ~% sudo port select --set python3 python312
   ...

5. XQuartz.

• XQuartz(다운로드)
• 설치 후 터미널에 'putty' 입력

6. AWS EC2 접속

• 접속 전 aws ec2서버 만들 때 받은 pem파일을 ppk파일로 puttygen 명령어를 통해 변환

  ~% puttygen 파일명.pem -o 파일명.ppk

  
• 호스트 네임란에 ec2서버에 퍼블릭 ip주소 입력
• Connection > SSG > Auth > Credentials에서 'Private key file for authentication'의 'Browse...'버튼 클릭
• 해당하는 암호키 파일 선택
• 'Open' 버튼 클릭
• 'Accept' 버튼 클릭
• 'ec2-user'로 로그인

f = open("새파일.txt", 'w', encoding='UTF8')
f.close()

• 파일 접근 모드

def read_lines(): f = open("새파일.txt", 'r') lines = f.readlines() print(lines) for line in lines: print(line, end="") f.close()

def read_all(): f = open("새파일.txt", 'r') line = f.read() print(line) f.close()

2. QFileDialog 기본 코드 설명
- 단일 파일선택
```py
from PySide6.QtWidgets import QFileDialog

dialog = QFileDialog(self)
# 단일 파일 선택모드
dialog.setFileMode(QFileDialog.ExistingFile)
dialog.setNameFilter(self.tr("Data Files(*.csv *.xls *.xlsx);; Images(*.png *.jpg);; All Files(*.*)"))
dialog.setViewMode(QFileDialog.Detail)
if dialog.exec():
    fileNames = dialog.selectedFiles()

• 다중 파일 선택

  from PySide6.QtWidgets import QFileDialog
  

dialog = QFileDialog(self)

다중 파일 선택모드

dialog.setFileMode(QFileDialog.ExistingFiles) dialog.setNameFilter(self.tr("Data Files(.csv *.xls *.xlsx);; Images(.png .jpg);; All Files(.*)")) dialog.setViewMode(QFileDialog.Detail) if dialog.exec(): fileNames = dialog.selectedFiles()

- 디렉토리 선택
```py
from PySide6.QtWidgets import QFileDialog

dialog = QFileDialog(self)
# 디렉토리 선택모드
dialog.setFileMode(QFileDialog.Directory)
dialog.setViewMode(QFileDialog.Detail)
if dialog.exec():
    dirName = dialog.selectedFiles()

3. 전체 코드

   import sys
   import os
   from PySide6 import QtGui, QtUiTools
   from PySide6.QtWidgets import QApplication, QMainWindow, QFileDialog
   

loader = QtUiTools.QUiLoader()

class MainView(QMainWindow): def init(self): super().init() self.setupUI()

def setupUI(self):
    global UI_MAIN
    UI_MAIN = loader.load(resource_path("file_dialog.ui"))

    # 각 버튼에 이벤트 연결    
    UI_MAIN.btn_file.clicked.connect(self.openfile)
    UI_MAIN.btn_files.clicked.connect(self.openfiles)
    UI_MAIN.btn_dir.clicked.connect(self.opendir)
    UI_MAIN.btn_read.clicked.connect(readfile)
    UI_MAIN.btn_write.clicked.connect(writefile)

    self.setCentralWidget(UI_MAIN)
    self.setWindowTitle("파일 읽고 쓰기")
    self.setWindowIcon(QtGui.QPixmap(resource_path("python_logo.png")))
    self.resize(600, 500)
    self.show()

def openfile(self):
    UI_MAIN.te_path.clear()
    dialog = QFileDialog(self)
    # 단일 파일 선택모드
    dialog.setFileMode(QFileDialog.FileMode.ExistingFile)
    dialog.setNameFilter(self.tr("Data Files(*.csv *.xls *.xlsx);; Images(*.png *.jpg);; All Files(*.*)"))
    dialog.setViewMode(QFileDialog.ViewMode.Detail)
    if dialog.exec():
        fileName = dialog.selectedFiles()
        # line editor의 경우 setText()메서드를 썼으나, text editor의 경우 insertPlainText()메서를 사용함.
        UI_MAIN.te_path.insertPlainText(str(fileName))

def openfiles(self):
    UI_MAIN.te_path.clear()
    dialog = QFileDialog(self)
    # 다중 파일 선택모드
    dialog.setFileMode(QFileDialog.FileMode.ExistingFiles)
    dialog.setNameFilter(self.tr("Data Files(*.csv *.xls *.xlsx);; Images(*.png *.jpg);; All Files(*.*)"))
    dialog.setViewMode(QFileDialog.ViewMode.Detail)
    if dialog.exec():
        fileNames = dialog.selectedFiles()
        # line editor의 경우 setText()메서드를 썼으나, 
        # text editor의 경우 insertPlainText()메서를 사용함.
        UI_MAIN.te_path.insertPlainText(str(fileNames))

def opendir(self):
    UI_MAIN.te_path.clear()
    dialog = QFileDialog(self)
    # 디렉토리 선택모드
    dialog.setFileMode(QFileDialog.Directory)
    dialog.setViewMode(QFileDialog.Detail)
    if dialog.exec():
        dirName = dialog.selectedFiles()
        UI_MAIN.te_path.insertPlainText(str(dirName))

def readfile(): path = eval(UI_MAIN.te_path.toPlainText()) f = open(path[0], 'r', encoding='UTF8') lines = f.readlines() for line in lines: UI_MAIN.te_contents.insertPlainText(line) f.close()

def writefile(): # toPlainText()는 읽어오는 path = eval(UI_MAIN.te_path.toPlainText()) f = open(path[0], 'w', encoding='UTF8') data = UI_MAIN.te_contents.toPlainText() f.write(data) f.close() # 파일 안에 작업이 끝난후 te_contents 내용을 지운다. UI_MAIN.te_contents.clear()

def resource_path(rel_path): if hasattr(sys, "_MEIPASS"): return os.path.join(sys._MEIPASS, rel_path) return os.path.join(os.path.abspath("."), rel_path)

if name == 'main': app = QApplication(sys.argv) main = MainView() sys.exit(app.exec())

3. 실행화면
- 기본화면
![](https://velog.velcdn.com/images/dev_shu/post/5a6e2e06-58f8-4d0a-a310-aa1cad6ded75/image.png)
- 단일 파일 선택 버튼 클릭시 화면
![](https://velog.velcdn.com/images/dev_shu/post/bbd892ca-e7fe-41c6-8e60-f5a608970b56/image.png)
- 파일 선택 후 화면
![](https://velog.velcdn.com/images/dev_shu/post/c7d09d24-5725-4df1-9629-b53713d9f712/image.png)
- 읽어오기 버튼 클릭 후 화면
![](https://velog.velcdn.com/images/dev_shu/post/13866a6e-4e9b-4180-a43c-9463dd9e34f8/image.png)
- 내용 작성후 쓰기 버튼 클릭
![](https://velog.velcdn.com/images/dev_shu/post/f7280933-e27e-46c6-be6d-850f90c4dfec/image.png)
![](https://velog.velcdn.com/images/dev_shu/post/5c24f8a4-48a1-4ff2-a6fe-f43d5fcbabc0/image.png)

1. UI 만들기

• 맥으로 만든 UI

2. 프로그램이 실행되면 파이썬 프로그램이 있는 위치에 note 폴더를 만든다.

   # 디렉토리 생성하는 함수
   def make_dir():
    os.makedirs(resource_path("note"), exist_ok = True)

3. 프로그램이 실행되면 오늘 날짜에 해당하는 노트를 note폴더에서 불러온다.

   # 해당하는 파일을 읽어서 리턴
   def read_memo(filename):
    is_file = os.path.isfile(resource_path("note/" + filename))
    if not is_file: return []
    f = open(resource_path("note/" + filename), 'r')
    lines = f.readlines()
    f.close()
    return lines
   
   

def date_change_str(calendar_date): return calendar_date.toString("yyyy-MM-dd")

해당하는 메모 보여주는 함수

def show_memo(input_date): # text edit에 기존 내용에 있다면 삭제 if UI_MAIN.te_memo: UI_MAIN.te_memo.clear()

filename = date_change_str(input_date) + ".txt"
memos = read_memo(filename)

for memo in memos:
    UI_MAIN.te_memo.insertPlainText(memo)

![](https://velog.velcdn.com/images/dev_shu/post/80d56292-c1c8-4993-b637-4c9758e38e9b/image.png)
4. 달력위젯을 클릭하면 해당하는 날짜의 노트를 불러온다.
- 위의 코드로 동시에 해결
![](https://velog.velcdn.com/images/dev_shu/post/d273463d-4cd1-40dc-bc35-638730a94dc3/image.png)
5. 노트에 내용을 입력하고 저장하면 그 날짜에 해당하는 파일 이름의 txt파일이 note폴더에 저장된다.
```py
# 파일 저장하는 함수
def save_file(memos, filename):
    f = open("note/" + filename, 'w', encoding="UTF8")
    f.write(memos)
    f.close()


# 메모 저장하는 함수
def save_memo():
    # 메모에 저장된 내용 가져오기
    memos = UI_MAIN.te_memo.toPlainText()
    # 캘린더위젯에 선택된 날짜를 가져와서 파일명 만들기
    str_date = UI_MAIN.calendar.selectedDate().toString("yyyy-MM-dd")
    filename = str_date + ".txt"
    # 파일 저장
    save_file(memos, filename)

6. 전체 소스 코드

import sys
import os
from PySide6 import QtUiTools, QtGui
from PySide6.QtWidgets import QApplication, QMainWindow, QCalendarWidget
from datetime import datetime as dt

loader = QtUiTools.QUiLoader()


class MainView(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setupUI()

    def setupUI(self):
        global UI_MAIN
        UI_MAIN = loader.load(resource_path("calendar.ui"))
        # 프로그램 실행시 note 폴더 생성
        make_dir()
        # 오늘 메모 불러오기
        today = UI_MAIN.calendar.selectedDate()
        show_memo(today)
        # 날짜를 선택했을때 이벤트
        UI_MAIN.calendar.clicked.connect(show_memo)
        # 해당 날짜에 메모 저장하는 이벤트
        UI_MAIN.btn_save.clicked.connect(save_memo)

        self.setCentralWidget(UI_MAIN)
        self.setWindowTitle("날짜별 메모 프로그램")
        # self.setWindowIcon(QtGui.QPixmap(resource_path("ani.jpg")))
        self.resize(600, 500)
        self.show()


# 디렉토리 생성
def make_dir():
    os.makedirs(resource_path("note"), exist_ok=True)


# 해당하는 파일을 읽어서 리턴
def read_memo(filename):
    is_file = os.path.isfile(resource_path("note/" + filename))
    if not is_file: return []
    f = open(resource_path("note/" + filename), 'r')
    lines = f.readlines()
    f.close()
    return lines


def date_change_str(calendar_date):
    return calendar_date.toString("yyyy-MM-dd")


# 해당하는 메모 보여주는 함수
def show_memo(input_date):
    # text edit에 기존 내용에 있다면 삭제
    if UI_MAIN.te_memo: UI_MAIN.te_memo.clear()

    filename = date_change_str(input_date) + ".txt"
    memos = read_memo(filename)

    for memo in memos:
        UI_MAIN.te_memo.insertPlainText(memo)


# 파일 저장하는 함수
def save_file(memos, filename):
    f = open("note/" + filename, 'w', encoding="UTF8")
    f.write(memos)
    f.close()


# 메모 저장하는 함수
def save_memo():
    # 메모에 저장된 내용 가져오기
    memos = UI_MAIN.te_memo.toPlainText()
    # 캘린더위젯에 선택된 날짜를 가져와서 파일명 만들기
    str_date = UI_MAIN.calendar.selectedDate().toString("yyyy-MM-dd")
    filename = str_date + ".txt"
    # 파일 저장
    save_file(memos, filename)


# 파일경로
# pyinstaller로 원파일로 압축할때 경로 필요함
def resource_path(rel_path):
    if hasattr(sys, '_MEIPASS'):
        return os.path.join(sys._MEIPASS, rel_path)
    return os.path.join(os.path.abspath("."), rel_path)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = MainView()
    # main.show()
    sys.exit(app.exec())

QComboBox UI

• 아이템 입력하기
  addItem(icon, text, userData=None) icon, userData는 생략 가능 ex) cbox = QComboBox() cbox.addItem("서울특별시")
• 아이템 추가하기

  insertItem(index, icon, text, userData=None)

• 콤보박스에 현재 선택된 아이템 값 받기

  currentIndex(): 현재 선택된 아이템의 인덱스 반환 currentText(): 현재 선택된 아이템의 텍스트 반환 currentData(): 현재 선택된 아이템의 데이터 반환

• 콤보박스의 현재 선택된 값 변경

  setCurrentIndex(숫자): 해당 숫자의 인덱스로 변경 setCurrentText("경기도")

• 삭제하기

  전체 삭제: clear() 한개 삭제: removeItem(해당 인덱스)

• 전체 개수 추출

  count(): 해당 콤보박스의 아이템 전체 갯수 반환.

• 이벤트 연결

  currentIndexChanged.connect(func): 콤보박스의 변경 있을 시 해당 함수 실행

3. 전체 소스 코드

   import sys
   import os
   from PySide6 import QtUiTools, QtGui
   from PySide6.QtWidgets import QApplication, QMainWindow
   

combobox는 따로 임포트 할 필요없다.

loader = QtUiTools.QUiLoader()

class MainView(QMainWindow): def init(self): super().init() self.setupUI()

def setupUI(self):
    global UI_MAIN
    UI_MAIN = loader.load(resource_path("combobox.ui"))

    getCnt()
    UI_MAIN.cb_area.currentIndexChanged.connect(getComboBox)
    UI_MAIN.btn_input.clicked.connect(inputComboBox)
    UI_MAIN.btn_del.clicked.connect(deleteComboBox)
    UI_MAIN.btn_clear.clicked.connect(clearComboBox)
    UI_MAIN.btn_all.clicked.connect(getAll)

    self.setCentralWidget(UI_MAIN)
    self.setWindowTitle("QComboBox")
    self.setWindowIcon(QtGui.QPixmap(resource_path("ani.jpg")))
    self.resize(600, 500)
    self.show()

콤보박스 이벤트 발생시

def getComboBox(): # if UI_MAIN.te_result.toPlainText(): # UI_MAIN.te_result.clear() idx = UI_MAIN.cb_area.currentIndex() text = UI_MAIN.cb_area.currentText() data = UI_MAIN.cb_area.currentData()

UI_MAIN.te_result.append(str(idx) + " " + text + " " + str(data))

입력하기

def inputComboBox(): text = UI_MAIN.le_txt.text() data = UI_MAIN.le_data.text()

UI_MAIN.cb_area.addItem(text, data)
getCnt()

선택삭제

def deleteComboBox(): idx = UI_MAIN.cb_area.currentIndex()

UI_MAIN.cb_area.removeItem(idx)
getCnt()
getAll()

전체 삭제

def clearComboBox(): UI_MAIN.cb_area.clear() getCnt() getAll()

전체보기

def getAll(): UI_MAIN.te_result.clear() cnt = UI_MAIN.cb_area.count() # 현재 선택된 콤보박스의 인덱스가 첫번째인 경우 if UI_MAIN.cb_area.currentIndex() == 0: idx = UI_MAIN.cb_area.currentIndex() text = UI_MAIN.cb_area.currentText() data = UI_MAIN.cb_area.currentData() UI_MAIN.te_result.append(str(idx) + " " + text + " " + str(data))

for i in range(cnt):
    UI_MAIN.cb_area.setCurrentIndex(i)
    # getComboBox()

콤보박스 아이템 전체 갯수

def getCnt(): cnt = UI_MAIN.cb_area.count()

UI_MAIN.le_cnt.setText(str(cnt))

파일경로

pyinstaller로 원파일로 압축할때 경로 필요함

def resource_path(rel_path): if hasattr(sys, '_MEIPASS'): return os.path.join(sys._MEIPASS, rel_path) return os.path.join(os.path.abspath("."), rel_path)

if name == 'main': app = QApplication(sys.argv) main = MainView() # main.show() sys.exit(app.exec())

4. 실행화면
- 전체보기 버튼 클릭시
![](https://velog.velcdn.com/images/dev_shu/post/0014327e-5953-43e7-840c-53260bacb5de/image.png)
- 선택삭제 버튼 클릭시
![](https://velog.velcdn.com/images/dev_shu/post/a87d3aa3-9301-4bbf-b4a9-b1b61f130f54/image.png)
- 전체삭제 버튼 클릭시
![](https://velog.velcdn.com/images/dev_shu/post/e76fcf37-6d9b-4f11-b2e9-93ab3756a337/image.png)
- 입력버튼 클릭시
![](https://velog.velcdn.com/images/dev_shu/post/9be58994-a3f4-4e7b-8132-0b923e218a02/image.png)

QMessageBox 기본 화면과 기본 코드 1-1) 기본 화면 1-2) 기본 코드

from PySide6.QtWidgets import QMessageBox

QMessageBoxfmf msg_box로 저장, 필요한 내용들 세팅

msg_box = QMessageBox() msg_box.setWinddowTitle("알림창") # 메시지창의 상단 제목 msg_box.setWindowIcon(QtGui.QPixmap("info.png")) # 메시지창 상단 제목의 아이콘 msg_box.setIcon(QMessageBox.Icon.Information) # 메시지창 내부에 표시될 아이콘 msg_box.setText("This is title") msg_box.setInformativeText("This is content") msg_box.setStandardButtons(QMessageBox.StandardButton.Yes | QMessageBox.StandardButton.No | QMessageBox.StandardButton.Cancel) # 메시지창의 버튼 msg_box.setDefaultButton(QMessageBox.StandardButton.Yes) # Yes버튼 포커스

msg_box.exec() # 클릭한 버튼 결과 리턴

- 맥의 경우, 가이드라인에 따라 메시지 박스의 윈도우 타이틀과 아이콘은 보이지 않는다.
![](https://velog.velcdn.com/images/dev_shu/post/83fa954f-cb53-466a-9c2a-d896fa7e3a5f/image.png)

• 이번에 만들어 볼 UI 1-1) 레이아웃과 위젯 배치
• 이름, 나이, 클릭버튼 부분 horizontal layout으로 배치
• 이름, 나이 레이아웃 부분에 Text Label, Line Edit 배치
• 클릭 버튼 레이아웃엔 Push Button 배치
• 클릭 버튼 레이아웃 아래 부분에 Text Label 배치 1-2) 속성 편집
• 해당 Text Label에 '이름', '나이', '결과'로 변경하고 Push Button도 'Click'으로 변경
• 해당 부분을 더블 클릭해서 변경하거나 속성편집기에서 변경가능
• 각 속성에 나온 대로 변경
• 변경 후 UI
• 크기 조정시 자동으로 조정되기 위해 central widget을 Vertical Layout으로 변경 후 최종 UI 1-3) 소스

  import sys
  import os
  import re
  from PySide6 import QtUiTools, QtGui
  from PySide6.QtWidgets import QApplication, QMainWindow
  

loader = QtUiTools.QUiLoader()

class MainView(QMainWindow): def init(self): super().init() self.setupUI()

def setupUI(self):
    global UI_MAIN
    UI_MAIN = loader.load(resource_path("btnTest.ui"))
    # 이름 라인에디트를 입력했을때 이벤트
    UI_MAIN.lineEdit_name.textChanged.connect(checkName)
    # 나이 라인에디트를 입력했을 이벤트
    UI_MAIN.lineEdit_age.textChanged.connect(checkAge)
    # Click 버튼을 클릭했을때
    UI_MAIN.pushButton_click.clicked.connect(getResult)

    self.setCentralWidget(UI_MAIN)
    self.setWindowTitle("BUTTON_TEST")
    self.setWindowIcon(QtGui.QPixmap(resource_path("ani.jpg")))
    self.resize(500, 300)
    self.show()

라인 에디터의 내용을 가져와서 결과라벨에 출력

def getResult(): user_name = UI_MAIN.lineEdit_name.text() user_age = UI_MAIN.lineEdit_age.text()

result = user_name + "님의 나이는 " + user_age + "살입니다."
UI_MAIN.label_result.setText(result)

이름 라인에디트의 글자만 입력하게 체크하는 함수

def checkName(data): name = data if data.isalpha() else data[:-1] UI_MAIN.lineEdit_name.setText(name)

나이 라인 에디트의 숫자만 입력하게 체크하는 함수

def checkAge(data): # 매개변수 input_age가 숫자인 경우 age 변수에 대입, 숫자가 아닌 경우 입력된 문자를 제거 try: int(data) age = data except: # 변경시마다 발생하는 이벤트이기에, 숫자 외에 다른 문자가나 기호가 입력될시 실행되는 부분 age = data[:-1]

UI_MAIN.lineEdit_age.setText(age)

파일경로

pyinstaller로 원파일로 압축할때 경로 필요함

def resource_path(rel_path): if hasattr(sys, '_MEIPASS'): return os.path.join(sys._MEIPASS, rel_path) return os.path.join(os.path.abspath("."), rel_path)

if name == 'main': app = QApplication(sys.argv) main = MainView() # main.show() sys.exit(app.exec())

- checkName 함수의 경우 isalpha()가 특수 문자도 문자로 포함하기에 정규식을 통해서 더 간단하게 수정, checkAge 함수도 같이 변경
```py
def checkName(data):    
    # 정규 표현식을 사용해서 한글과 영어만 들어오게
    # \uAC00-\uD7A3 : 한글, a-zA-Z: 영어 대소문자
    name = re.sub(r"[^\uAC00-\uD7A3a-zA-Z\s]", "", data)
    UI_MAIN.lineEdit_name.setText(name)


def checkAge(data):
    age = re.sub(r"[^0-9]", "", data)
    UI_MAIN.lineEdit_age.setText(age)

• 여기서 좀 더 간단하게 공통적인 부분을 빼서 코드를 작성

  def checkName(data):
    check(data, "name")
  
  

def checkAge(data): check(data, "age")

def check(data, types): if types == "name": name = re.sub(r"[^\uAC00-\uD7A3a-zA-Z\s]", "", data) UI_MAIN.lineEdit_name.setText(name) else: age = re.sub(r"[^0-9]", "", data) UI_MAIN.lineEdit_age.setText(age)

- 여기서 클로저 함수를 쓰면 함수 3개를 함수 1개로 줄일 수 있다.
```py
# 위의 코드부분도 변경
# 이름 라인에디트를 입력했을때 이벤트
UI_MAIN.lineEdit_name.textChanged.connect(check("name"))
# 나이 라인에디트를 입력했을 이벤트   
UI_MAIN.lineEdit_age.textChanged.connect(check("age"))


def check(send_type):
    def check_type(data):
        if send_type == "name":
            chk_name = re.sub(r"[^\uAC00-\uD7A3a-zA-Z\s]", "", data)
            UI_MAIN.lineEdit_name.setText(chk_name)
        else:
            chk_age = re.sub(r"[^0-9]", "", data)
            UI_MAIN.lineEdit_age.setText(chk_age)
    return check_type

• main.py 실행 화면

Widget 클래스 1-1. Widget 상자의 구성

• Layouts: 프로그램의 전체 배치에 대한 위젯
• Spacers: 위젯 간의 간격을 위한 위젯

• Horizontal Spacer: 수평 간격 위젯

• Vertical Spacer: 수직 간격 위젯

• Buttons: 여러 가지 종류의 Button 위젯
• Item Views(Model-Based): DB와 연계해 보여주는 View 집합
• Item Widgets(Item-Based): 데이터의 각 값을 object로 생성해서 보여주는 위젯의 집합
• Containers: 위젯들을 그룹화 시켜주는 위젯들
• Input Widgets: 데이터 입력을 위한 위젯들
• Display Widgets: 텍스트 설명 및 데이터의 상태를 보여주는 위젯들 1-2. QWidget 클래스의 상속관계 1-3. Qwidget을 상속받는 Widget들

레이아웃 구조

• Main Window: root

• Central Widget: html태그 중에 body에 해당하는 부분

• Horizontal Layout: 레이아웃 내의 위젯들을 자동적으로 가로로 나열시킴

• Vertical Layout: 레이아웃 내의 위젯들을 자동적으로 세로로 나열시킴.

• Grid Layout: 레이아웃 내의 위젯들을 자동적으로 바둑판형식으로 나열시킴.

• Form Layout: 레이아웃 내의 위젯들을 폼 형태로 나열함. 폼이란 가로가 2줄로 된 배열을 말함.

• 레이아웃 안에 레이아웃 삽입 가능

• 앱의 크기 조정시 레이아웃이 안 보일 수도 있어서 마지막엔 Central Widget에서 레이아웃을 지정해서 최종 정렬하면 문제 해결 가능.

-> PySide에 있는 gui프로그램 -> 레이아웃과 버튼 등을 드래그해서 gui구성을 쉽게 할 수 있음 1-1. 실행 -> 맥의 경우, 터미널에서 'Designer'를 입력하면 실행 -> 윈도우의 경우, 설치된 경로에서 'designer.exe' 실행

• 맥에서 실행화면

• 윈도우에서 실행화면 1-2. 새 폼 생성

• 초기화면(맥)

• 생성 버튼 클릭시 화면(MainWindow)

• 이 GUI에서 최상단이 되는 게 MainWindow

• MainWindow의 구성

• 속성편집기

2. Python과 UI파일 연동 2-1. 소스코드

   import sys
   import os
   from PySide6 import QtUiTools, QtGui
   from PySide6.QtWidgets import QApplication, QMainWindow
   

loader = QtUiTools.QUiLoader()

gui화면 설정 관련된 클래스

class MainView(QMainWindow):

프로그래밍언어들에선 클래스를 만들 때 초기화 메서드가 들어감.

def __init__(self):
    super().__init__()
    self.setupUI()

Designer 앱으로 만들어진 ui파일 읽어오고,

gui의 타이틀, 아이콘, 크기 등의 설정

def setupUI(self):
    global UI_MAIN
    UI_MAIN = loader.load(resource_path("layout.ui"))

    self.setCentralWidget(UI_MAIN)
    self.setWindowTitle("UI_TEST")
    self.setWindowIcon(QtGui.QPixmap(resource_path("ani.jpg")))
    self.resize(600, 500)
    self.show()

MainView 클래스 끝

파일경로 함수

pyinstaller로 원파일로 압축할때 경로 필요함

다른 컴퓨터로 실행시 경로가 다를 수 있기에 경로 설정이 필요함.

def resource_path(rel_path): if hasattr(sys, '_MEIPASS'): return os.path.join(sys._MEIPASS, rel_path) return os.path.join(os.path.abspath("."), rel_path)

메인(앱 실행코드)

if name == 'main': app = QApplication(sys.argv) main = MainView() # main.show() sys.exit(app.exec())

1. 파이썬 설치 1-1. 파이썬 버전 확인

   #파이썬 버전확인
   python3 --version

• 파이썬 버전확인 시 버전이 나오지 않으면 설치가 안 되어있는 경우.

• 기본적으로 맥북은 파이썬2 버전이 설치되어 있음.

• 이번에 내가 공부해볼 건 파이썬gui이기 때문에 영상에 맞춰서 파이썬 12.2.0버전을 설치할 예정

  1-2. 파이썬 설치(brew)

  #brew list로 설치된 파이썬 버전 확인해보기
  brew list python
  #brew search로 파이썬 버전 찾기
  brew search python3.12
  #설치
  brew install python@3.12
  #버전확인
  python3 -v

2. PySide6 설치 2-1. PySide란?

• Qt for Python 프로젝트의 일부로 Qt 컴퍼니에서 개발한 크로스 플랫폼 GUI 툴킷 Qt (소프트웨어)의 파이썬 바인딩. 2-2. 설치

  #brew search로 pyside 버전 찾기
  #pyside와 pyside@2가 있는데, pyside가 최신버전.
  #동영상 강의에서 버전6 설치를 원해서 pyside 혹은 pyside@6로 설치하면 됨
  brew install pyside@6

  2-3. 버전 확인

  vi pyside.py

# pyside.py 소스
import PySide6.QtCore

print(PySide6.__version__)
print(PySide6.QtCore.__version__)

python3 pyside6.py
6.6.2
6.6.2

3. PyCharm설치(CE) 3-1. 설치

   # brew cask로 설치
   brew install --cask pycharm-ce
   # 터미널에서 실행
   pycharm-ce

• 유투브에서 여러 개발 영상을 보다가 JSDoc를 이용한 타입을 체크하는 방식이 있어서 블로깅을 합니다. 맨 처음에 타입스크립트처럼 타입지정을 해서 오류를 체크하는 방식인가 했더니, JSDoc에서 파라미터의 타입을 지정해주어 @ts-check를 통해 타입 오류에 대한 체크만 해주는 것이었다. 그래서 컴파일했을 시, 기능은 돌아가긴 한다.
• 예제코드

  // @ts-check
  // 위의 주석을 해줘야 타입에 대한 체크를 해줌
  

// 아래와 같이 주석을 달아주면, /**

• @param a {number}
• @param b {number}
• @returns {number}
• /

const add = (a, b) => a + b; const a = "4"; const b = 5; console.log(add(a, b)); // 인자 a의 타입이 잘못 됐다고 에러표시를 해줌 /**

• 두 수의 차를 구한다.
• @type {(a: number, b:number) => number}
• /

const minus = (a, b) => a - b; console.log(minus("3", 2)); // 위의 것도 마찬가지로 에러 표시

```

• 이것 이외에도 JSDoc에 대한 알고 싶으면, 여기

proposal-types-as-comments

• 위의 처럼 자바스크립트도 타입스크립트처럼 타입을 지정해서 사용할수 있게 ECMA TC39에 제안이 들어왔다고 해야 되나? 고려해야 한다는 오피셜이 떴다.
• 그에 해당하는 내용은 여기

• 유투브의 영상을 보며 영상 안에 코드를 보았는데, 코드 안에서 보지 못했던 문법이 있어 검색하다보니 ES2019에 접근제한자 관련된 문법이 추가되었더라.

• 코드

  class Cell {
  #cellElement; // 이렇게 해시를 붙여서 이 변수는 private다라고 선언
  #x;
  #y;
  #tile;
  constructor(cellElement, x, y) {
    this.#cellElement * cellElement;
    this.#x = x;
    this.#y = y;
  }
  get tile() {
    return this.#tile;
  }
  }

  접근제한자

• 다른 클래스에서 현재 클래스의 변수나 메서드의 접근 가능 여부를 선언하는 기법을 말함.

• 자바의 경우 변수나 메서드 앞에 public, protected, private을 키워드를 선언해서 쓰지만, 이전까지의 자바스크립트에선 따로 정의되어 있지 않았으나 '#'를 통해 선언 가능해짐

  • '#(해시)'는 키워드라고 안하고 프리픽스라고 하는 듯.

• 변수를 private으로 선언한 경우, 인스턴스를 생성했을 시 직접적으로 변수에 접근하지 못하고, 클래스의 getter(),setter()를 통해 접근 가능하다.(자바의 경우)

• 자바에서의 접근제한자 사용법

  public class Data {
  private String name = null;
  private String season = null;
  private int year = 0;
  
  public void setName(String name) {
    this.name = name;
  }
  
  public void setSeason(String season) {
      this.season = season;
  }
  
  public void setYear(int year) {
      if(year >= 20 && year <= 30) {
      this.year = year;
    } else {
      System.out.println("입력될 수 있는 나이는 20-30세 사이입니다.");    
    }
  }
  
  public String getName() {
      return name;
  }
  
  public String getSeason() {
      return season;
  }
  
  public int getYear() {
      return year;
  }
  }

자바스크립트의 접근제한자 사용법

• 예전의 경우: 모듈 패턴을 이용하거나 Symbol을 사용해서 private처럼 구현함.

  // 모듈 패턴 
    function someModule() {
      const privateProp = 'dont touch this';
      const publicProp = 'you can touch this';
  
      _doSomethingWithPrivateProp = () => {...}
  
      const publicMethod = () => {
        _doSomethingWithPrivateProp();
        //...
      }
  
      return {
        publicProp,
        publicMethod
      }
    }
  
      // Symbol
      const privateMethodName = Symbol();
      const pivatePropName = Symbol();
  
      class SomeClass {
        [privatePropName] = 'dont touch this';
          publicProp = 'you can touch this';
  
          [privateMethodName]() {
          console.log('priavte method');  
        }
        publicMethod() {
          this[privateMathodName](this[privateMethodName]);  
        }
      }

• ECMA2019에서 나온 '#'

  • 맨 처음 자바 코드를 '#' 프리픽스를 사용하여 자바스크립트 코드로 바꿔보기.

    class Data {
    #name;
    #season;
    #year;
    constructor(name, season, year) {
    this.#name = name;
    this.#season = season;
    this.#year = year;
    }
    set setName(name) {
    this.#name = name;
    }
    

  set setSeason(season) {

  this.#season = season;

  }

  set setYear(year) {

  if(year >= 20 && year <= 30) {
  this.#year = year;

  } else {

  console.log("입력될 수 있는 나이는 20-30세 사이입니다.");    

  } }

  get getName() {

  return this.#name;

  }

  get getSeason() {

  return this.#season;

  }

  get getYear() {

  return this.#year;

  }

  getData() { return name: ${this.#name}, year: ${this.#year}, season: ${this.#season} } } const data = new Data('siwoo','spring', 23); data.#name // Data 클래스의 name 변수는 # 프리픽스를 이용하여 은닉상태이기에 직접 접근은 불가능. data.getData(); // 'name: siwoo, year: 22, season: spring' data.setName = 'shu'; data.getName; // 'shu'

참고

• Private class fields[mdn]
• 은닉을 향한 자바스크립트의 여정(ToastUI)

• 반복문이나 함수 앞에 레이블을 추가하면 break나 continue구문과 함께 사용 가능.
• 문법

  label:
    statement

• break는 모든 레이블 구문에서 사용될 수 있으며, continue는 반복 레이블 구문에서만 사용 가능
• 예시 ```js loop1: for (let i = 0; i < 3; i++) { //첫번째 for문은 "loop1" 레이블을 붙였다. loop2: for (let j = 0; j < 3; j++) { //두번째 for문은 "loop2" 레이블을 붙였다.

  if (i === 1) { // i가 1일 경우 2로 건너띔
     continue loop2;
  }
  console.log('i = ' + i + ', j = ' + j);

  } } /* 출력결과 i=0, j=0 i=0, j=1 i=0, j=2 i=2, j=0 i=2, j=1 i=2, j=2
• /

loop1: for (let i = 0; i < 3; i++) { //첫번째 for문은 "loop1" 레이블을 붙였다. loop2: for (let j = 0; j < 3; j++) { //두번째 for문은 "loop2" 레이블을 붙였다. console.log('i = ' + i + ', j = ' + j); if(i===1) continue; // continue loop2와 동일한 결과 출력 } } // i,j를 다 출력 // 외부 루프문에서 숫자는 증가시지만 내부루프문은 변화가 없음

- 간단한 블록에도 레이블을 사용할수 있음
```js
foo: {
    console.log('face');
      break foo;
    console.log('hehehe')
}
console.log('body');
/* 출력결과
"face"
"body"
*/

• 함수에도 레이블을 붙일 수 있지만, 엄격모드나 제너레이터 함수에는 붙일 수 없다.

2. Object.freeze()

• 객체를 동결하는 메서드. 동결된 객체는 더 이상 값을 변경할수 없음
• 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지
• 객체 안의 하나의 속성만 동결 가능
• 예시

  const person = {
    name: "siwoo",
      age:  25,
      favoriteFood: "milk"
  }
  console.log(person);
  person.name = "John";
  console.log(person);
  

Object.freeze(person); /* const person = Object.freeze({ name: "siwoo", age: 25, favoriteFood: "milk" }); 이런 식으로도 가능 */ person.name = 'siwoo'; console.log(person.name); // 'John' 출력 // 에러는 발생하지 않으나, 값이 변경되지 않고 그대로 출력됨 // 엄격모드에선 에러발생 // 에러내용: Error: Cannot assign to read only property 'name' of object '#