반응형

1. 시험환경

    · python

    · PyQt5

 

2. 목적

    · PyQt를 이용한 파이썬 GUI 프로그램을 만들어보자.

    · PyQt를 이용한 로그인 화면을 구성하고, 로그인 성공 시 메인화면으로 전환하는 방법을 알아보자.

 

3. 적용

    ① 로그인 화면 윈도우

        - login_window.py

        - ID: test, PW: password 입력시, 임포트한 MainWindow가 호출되면서 화면 전환되는 부분을 확인한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
# login_window.py
import sys
from PyQt5.QtWidgets import QWidget, QLabel, QLineEdit, QPushButton, QVBoxLayout, QMessageBox, QApplication
 
class LoginWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("로그인")
        self.setGeometry(100100300150)
        self.main_window = None  # MainWindow 객체를 저장할 변수
 
        self.initUI()
 
    def initUI(self):
        self.id_label = QLabel("아이디:")
        self.id_input = QLineEdit()
 
        self.pw_label = QLabel("비밀번호:")
        self.pw_input = QLineEdit()
        self.pw_input.setEchoMode(QLineEdit.Password)
 
        self.login_button = QPushButton("로그인")
        self.login_button.clicked.connect(self.login_clicked)
 
        layout = QVBoxLayout()
        layout.addWidget(self.id_label)
        layout.addWidget(self.id_input)
        layout.addWidget(self.pw_label)
        layout.addWidget(self.pw_input)
        layout.addWidget(self.login_button)
        layout.addStretch(1)
 
        self.setLayout(layout)
 
    def login_clicked(self):
        user_id = self.id_input.text()
        password = self.pw_input.text()
 
        # 간단한 로그인 검증 (실제 환경에서는 DB 연동 필요)
        if user_id == "test" and password == "password":
            QMessageBox.information(self"로그인 성공""로그인에 성공했습니다.")
            self.open_main_window()
        else:
            QMessageBox.warning(self"로그인 실패""아이디 또는 비밀번호가 잘못되었습니다.")
 
    def open_main_window(self):
        from main_window import MainWindow  # import here to avoid circular import
        self.main_window = MainWindow(self)  # Pass LoginWindow instance to MainWindow
        self.main_window.show()
        self.close()
 
if __name__ == '__main__':
    app = QApplication(sys.argv)
    login_window = LoginWindow()
    login_window.show()
    sys.exit(app.exec_())
cs

 

    ② 메인 화면 윈도우

        - main_window.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# main_window.py
from PyQt5.QtWidgets import QWidget, QLabel, QPushButton, QVBoxLayout, QMessageBox
 
class MainWindow(QWidget):
    def __init__(self, login_window):
        super().__init__()
        self.setWindowTitle("메인 화면")
        self.setGeometry(100100400300)
        self.login_window = login_window  # Store the LoginWindow instance
 
        self.initUI()
 
    def initUI(self):
        self.welcome_label = QLabel("메인 화면에 오신 것을 환영합니다!")
        self.logout_button = QPushButton("로그아웃")
        self.logout_button.clicked.connect(self.logout_clicked)
 
        layout = QVBoxLayout()
        layout.addWidget(self.welcome_label)
        layout.addWidget(self.logout_button)
        layout.addStretch(1)
 
        self.setLayout(layout)
 
    def logout_clicked(self):
        reply = QMessageBox.question(self'로그아웃''로그아웃 하시겠습니까?',
                                     QMessageBox.Yes | QMessageBox.No, QMessageBox.No)
 
        if reply == QMessageBox.Yes:
            self.login_window.show()  # Show the LoginWindow again
            self.close()
 
if __name__ == '__main__':
    # This part will not be executed when main_window.py is imported
    pass
cs

 

4. 결과

    · 프로그램 실행

        - python ./login_window.py

 

    · 로그인 정보 입력

        - ID: test, PW: password

 

    · 프로그램 다운로드

login_window.py
0.00MB
main_window.py
0.00MB

 

반응형
반응형

1. 시험환경

    · 구글 검색엔진

    · 구글 서치콘솔

 

2. 목적

    · 배포한 사이트를 구글 검색시 노출하기 위한 절차를 알아보자.

 

3. 적용

    ① 배포/호스팅 방법에 따라 무료 또는 유료 보안인증서(SSL)를 적용한다

 

    ② 구글 서치콘솔 사이트에서 사이트를 등록한다.

        - 참고 : https://languagestory.tistory.com/185

 

구글 서치 콘솔 등록 및 소유권 확인

1. 시험환경    ˙ 구글 서치 콘솔    ˙ 소유 도메인 2. 목적    ˙ 구글 서치 콘솔에 도메인을 등록하여 소유권 확인하는 절차를 알아보자.    ˙ 구글 검색노출을 위해 가장 먼저 진행되어야

languagestory.tistory.com

 

    ③ 구글 서치콘솔 사이트에서  사이트맵(sitemap.xml) 파일을 등록한다.

        - 참고 : https://languagestory.tistory.com/184

 

사이트맵(sitemap.xml) 생성 및 검색엔진 등록

1. 시험환경    ˙ 무료 사이트맵 생성 사이트    ˙ 구글서치콘솔 2. 목적    ˙ 검색 엔진 노출을 위한 사이트맵 파일(sitemap.xml)을 생성한다.    ˙ sitemap.xml을 운영하는 사이트에 업로드하고 구

languagestory.tistory.com

 

    ④ 구글 서치콘솔 사이트에서  피드(rss.xml) 파일을  등록한다.

 

    ⑤ "site:도메인"으로 검색 여부를 확인한다.

 

    ⑥ 사이트를 지속적으로 관리한다.

        - 모바일 친화적으로 개발한다.

        - 속도 개선을 위해 지속적은 관리를 한다.

        - 무엇보다 좋은 컨텐츠를 꾸준히 업로드한다.

 

    ⑦ 수익화 필요시 에드센스 사이트에 등록하여 광고를 송출한다.

 

반응형
반응형

1. 시험환경

    ˙ 무료 사이트맵 생성 사이트

    ˙ 구글서치콘솔

 

2. 목적

    ˙ 검색 엔진 노출을 위한 사이트맵 파일(sitemap.xml)을 생성한다.

    ˙ sitemap.xml을 운영하는 사이트에 업로드하고 구글서치콘솔에 등록하는 방법을 알아보자.

 

3. 적용

    ① 무료 사이트맵 생성 사이트를 이용하여 sitemap.xml 파일을 다운로드 받는다.

        - https://www.xml-sitemaps.com

 

Create your Google Sitemap Online - XML Sitemaps Generator

Installable version We offer a server-side script written in PHP language that you can install on your server and create sitemap for your website. The script doesn't have the limit on number of pages included in sitemap, although server resources required

www.xml-sitemaps.com

 

        - https://xmlsitemapgenerator.org

 

Free Sitemap Generator • XML • HTML • RSS • Google

Try our free XML Sitemap Generator. Available online, for Wordpress and for Windows. Use our XML sitemap generator to produce HTML, RSS and Google XML Sitemaps!

XmlSitemapGenerator.org

 

        - https://xmlsitemapgenerator.org

 

Free Sitemap Generator • XML • HTML • RSS • Google

Try our free XML Sitemap Generator. Available online, for Wordpress and for Windows. Use our XML sitemap generator to produce HTML, RSS and Google XML Sitemaps!

XmlSitemapGenerator.org

 

        - http://www.check-domains.com/sitemap

 

XML Sitemap Generator - Free Unlimited Pages.

XML Sitemap Generator - Free Unlimited Pages

www.check-domains.com

 

    ② 다운받은 sitemap.xml 파일을 사이트의 root 경로에 저장하고 배포한다.

        - 예) /public/sitemap.xml에 저장하고 배포하여 인터넷에 접근 가능하도록 설정

        - 예) github pages 기능으로 웹 호스팅을 하는 경우 Repository root  경로에 업로드

 

    ③ 구글 서치 콘솔에서 검색엔진 노출을 위해 사이트맵 경로를 등록한다.

 

4. 결과

    ˙ 제출된 사이트맵 상태 정보가 "성공"인지 확인한다.

반응형
반응형

1. 시험환경

    ˙ 구글 서치 콘솔

    ˙ 소유 도메인

 

2. 목적

    ˙ 구글 서치 콘솔에 도메인을 등록하여 소유권 확인하는 절차를 알아보자.

    ˙ 구글 검색노출을 위해 가장 먼저 진행되어야 하는 단계이다.

 

3. 적용

    ① 구글 서치 콘솔 사이트에 접속한다.

        - URL : https://search.google.com/search-console/about?hl=ko 

 

Google Search Console

Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다.

search.google.com

 

    ② "시작하기" 버튼 클릭 후 로그인한다.

 

    ③ 좌측상단 "속성 검색"을 클릭하고 "+ 속성 추가"를 클릭한다.

 

    ④ 등록할 URL을 입력한다.

        - 도메인 : TXT 값을 DNS 사이트(AWS Route 53 등)에서 설정하며 example.com의 모든 서브 도메인에 적용된다.

        - URL 접두어 : 설정 파일을 사이트마다 업로드하여 www.example.com와 와 같이 각각의 서브 도메인 마다 적용한다.

 

    ⑤ 태그를 복사하여 main 페이지에 추가한다.

        - 도메인 선택 경우 : 제공된 TXT 값을 복사하여 DNS의 TXT 레코드에 설정한다. 

 

        - URL 접두어 선택 경우 : 제공 파일을 다운로드하여 Hosting 사이트의 root 경로에 업로드한다.

 


    ⑥ DNS(도메인 TXT 설정) 또는 Hosting 사이트(파일업로드)에서 설정 후 소유권이 확인되도록 한다.

 

반응형
반응형

1. 시험환경

    · 윈도우

    · node v20.15.0

    · npm 10.7.0

 

2. 목적

    · npm 프로젝트 관리 툴을 이용한 next.js 프로젝트를 신규 생성하는 방법을 알아보자.

 

3. 적용

    ① 프로젝트 폴더를 생성한다.

        - 예시) nextjs 폴더를 생성한다.

 

    ② nextjs 프로젝트를 생성한다.

        - npx  create-next-app@latest  ./nextjs

 

    ③ 설치한 의존성 라이브러리를 선택하면 설치가 진행된다.

 

    ④ 프로젝트를 실행한다.

        - npm  run  dev

 

4. 결과

 

 

반응형
반응형

1. 시험환경

    · 윈도우

    · node v20.18.1

    · yarn v1.22.22

 

2. 목적

    · yarn 패키지 생성관리 툴을 이용하여 next.js 프로젝트를 생성하는 방법을 알아보자.

 

3. 적용

    ① 프로젝트 폴더를 생성 후 생성한 폴더로 이동한다.

        - 예시) nextjs 폴더를 생성한다.

 

    ② 생성한 프로젝트 폴더 내에서 신규 프로젝트 생성 명령어를 입력한다.

        - yarn  create next-app  --typescript  .

 

    ③ 필요한 라이브러리를 선택하면 설치가 진행된다.

라이브러리 선택

 

프로젝트 초기화

 

    ④ next.js 프레임워크 기반으로 초기화된 프로젝트 구조가 생성된 것을 확인한다.

 

4. 결과

    ① 설치한 프로젝트를 개발환경에서 실행한다.

        - yarn  dev

 

    ② 프로덕션 환경에 배포하기 위해 빌드하면 빌드 결과는 .next 폴더에 저장된다.

        - yarn  dev

 

    ③ 빌드된 Next.js 애플리케이션을 프로덕션 모드로 실행한다.

        - 이 명령을 실행하기 전에 yarn build 명령어를 사용하여 애플리케이션을 빌드해야 한다.

        - yarn  start

 

반응형
반응형

1. 시험환경

    ˙ Android Studio

    ˙ AVD(Android Virtual Device)

    ˙ Physical Device(삼성 갤럭시 S)

 

2. 목적

    ˙ 안드로이드 스튜디오에서 신규 프로젝트를 생성한다.

    ˙ 프로젝트를 AVD에 Import하고 결과를 확인한다.

    ˙ 프로젝트를 핸드폰 단말기에 Import하고 결과를 확인한다.

 

3. 적용

    ① Android Studio를 실행하고 "New Project" 버튼을 클릭한다.

 

    ② 프로젝트 템플릿을 선택하고, "Next" 버튼을 클릭한다.

 

    ③ 생성할 프로젝트를 설정하고, "Finish" 버튼을 클릭한다.

        - Name : 프로젝트 이름 입력
        - Pakcage name : 앱 구분을 위한 고유값 입력
        - Save location : 프로젝트 저장 위치 입력
        - Minimum SDK : 안드로이드 SDK 버전 설정. (전세계 사용자 디바이스 장치와 호환율 확인)

        - Build configuration language : Kotlin 또는 JAVA

 

    ④ 신규 프로젝트가 생성된다.

 


 

    ⑤ 프로젝트를 가상디바이스에 Import하기 위해 가상 디바이스 장치를 선택한다.

        - Virtual Device 최초 설정 방법은 포스팅을 참고한다. (https://languagestory.tistory.com/175)

 

    ⑥ "Run" 단축 아이콘을 클릭하여 프로젝트를 선택한 장치에서 실행한다.

 


 

    ⑦ 프로젝트를 실제 디바이스에 Import하기 위해 PC와 USB로 연결된 핸드폰 장치를 선택한다.

        -  Physical Device를 생성하는 방법은 포스팅을 참고한다. (https://languagestory.tistory.com/177)

 

    ⑧ "Run" 단축 아이콘을 클릭하여 프로젝트를 선택한 장치에서 실행한다.

 

4. 결과

    ˙ Virtual Device에서 실행한 화면을 확인하고, 화면을 클릭하여 조작한다.

AVD 환경에서 실행된 App 화면

 

 

 

반응형
반응형

1. 시험환경

    ˙ Android Studio

    ˙ AVD(Android Virtual Device, 안드로이드 가상 디바이스)

 

2. 목적

    ˙ Android Studio에서 제공하는 AVD를 최초 실행 및 동작하는 방법을 학습한다.

 

3. 적용

    ① Android Studio → More Actions → Virtual Device Manager를 클릭한다.

 

    ② 신규 디바이스를 만들기 위해 +("Create Virtual Device") 버튼을 클릭한다.

 

    ③ 가상 Device를 선택 후 Next 버튼을 클릭한다.

 

    가상 Device에 설치할 Android OS 이미지를 선택 및 설치한다.

 

 

    설치가 완료되면 에뮬레이터를 실행한다.

 

4. 결과

    ˙ PC 환경에서 개발한 앱을 테스트할 수 있는 가상 디바이스 장치가 생성되었다.

 

반응형

+ Recent posts