7주차 이론 정리
1. Python 가상 환경 (venv) 및 개발 환경 설정
프로젝트의 효율적인 관리를 위해 독립적인 실행 환경 구축이 필수적임.
- 파이썬 가상 환경(venv): 프로젝트별로 독립적인 패키지 버전을 관리함.
- 장점: 패키지 충돌 방지, 시스템 환경과 분리된 의존성 관리 가능함.
- 명령어: python -m venv <가상환경이름>으로 생성함.
- VS Code Extensions: 개발 생산성을 높여주는 추가 기능임.
- 핵심 기능: 코드 자동 완성, 디버깅 지원, Git 통합, 테마 변경 등임.
- Azure Extension: VS Code 내에서 Azure 리소스를 직접 연결하고 관리할 수 있게 해줌.
2. MySQL 연동 Todo 앱 제작 (실습)
단순한 UI를 넘어 데이터베이스와 통신하는 동적 웹 앱을 구현함.
- 기술 스택: Python + Streamlit + MySQL (Connector 사용)임.
- 주요 기능 (CRUD):
- Create: 할 일 추가 기능임.
- Read: 저장된 Todo 목록 불러오기임.
- Update: 완료 여부 수정 및 내용 변경임.
- 특징: MySQL 테이블 설계를 통해 데이터 입출력을 실습하고, 완료된 작업은 목록에서 제외하는 로직을 구현함.
3. Azure Static Web Apps (ASWA)의 이해
정적 콘텐츠와 API를 결합하여 효율적으로 서비스하는 플랫폼임.
- 작동 원리: * 정적 콘텐츠: HTML, CSS, JS, 이미지는 전 세계 CDN을 통해 빠르게 배포됨.
- API: Azure Functions를 사용하여 백엔드 로직을 처리함.
- GitHub 통합: 리포지토리에 코드 Push/Pull Request 시 자동으로 빌드 및 배포가 트리거되는 CI/CD 환경을 제공함.
주요 기능 및 장점
- 무료 SSL: 자동으로 갱신되는 보안 인증서를 제공함.
- 글로벌 배포: 사용자에게 물리적으로 가까운 서버에서 콘텐츠를 제공함.
- 인증 통합: Azure AD, Google, GitHub 등 다양한 SNS 로그인 연동이 쉬움.
- 역방향 프록시: CORS 설정 없이도 API 호출이 가능한 보안 모델을 가짐.
4. 최종 요약
- 도구의 활용: 라이브러리와 VS Code 익스텐션을 잘 활용하면 전체 개발 및 배포 프로세스가 매우 간소화됨.
- Static Web App의 효율성: 정적 부분과 동적(API) 부분을 분리함으로써 서비스 효율을 극대화할 수 있음.
- 연계 학습 필요: Azure Static Web App을 완벽히 활용하려면 백엔드 역할을 하는 Azure Functions에 대한 이해가 병행되어야 함.
7주차 실습 정리
1) Python 가상환경 구성
프로젝트별로 독립적인 환경을 만들기 위해 가상환경을 생성했다.
python -m venv env가상환경을 사용하면 프로젝트마다 다른 라이브러리 버전을 사용할 수 있어서 충돌을 방지할 수 있었다.
2) VS Code Extension 설치 및 설정
Visual Studio Code에서 필요한 확장을 설치했다.
- Python
- Azure Account
- Azure App Service
확장을 통해 코드 자동완성, 디버깅, Azure 연결 등을 한 번에 처리할 수 있었다.
3) 웹 앱 Azure에 배포
이전에 만든 Streamlit 웹 앱을 Azure Web App에 배포했다.
VS Code에서 Azure에 로그인 후
“Deploy to Web App” 기능을 사용해서 배포를 진행했다.
- App Service 선택
- 프로젝트 선택
- 배포 실행
배포 후 URL을 통해 실제 웹에서 실행되는 것을 확인했다.
4) MySQL 연동 Todo 앱 구현
MySQL 데이터베이스를 사용해서 Todo 앱을 구현했다.
구성:
- Streamlit (프론트)
- Python
- MySQL Connector (DB 연결)
기능:
- Todo 추가
- Todo 목록 조회
- Todo 수정
- Todo 완료 처리
데이터를 DB에 저장하고 불러오는 방식으로 동작하게 구현했다.
5) CRUD 기능 구현
Todo 앱에서 기본적인 CRUD 기능을 구현했다.
- Create: 할 일 추가
- Read: 할 일 목록 조회
- Update: 할 일 수정
- 완료 처리 시 목록에서 제외되도록 구현
웹 UI는 Streamlit으로 간단하게 구성했다.
6) Azure Static Web App 구조 확인
Static Web App 구조를 확인했다.
- 정적 파일: HTML, CSS, JavaScript
- 동적 처리: Azure Functions(API)
GitHub와 연동해서 코드 변경 시 자동 배포되는 구조였다.
7) GitHub 기반 자동 배포 흐름
GitHub에 코드를 push하면 자동으로 배포되는 흐름을 확인했다.
- GitHub → Action 실행
- Azure Static Web App에 배포
- 웹에서 바로 반영
CI/CD 방식으로 자동 배포가 이루어졌다.