🐨CoalaCoding
DocsExamplesTry itBoardB반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • 01_파이썬 기본문법
  • 02_파이썬 변수
  • 03_파이썬 출력
  • 04_파이썬 기본 자료형
  • 05_파이썬 집합 자료형
  • 00-파이썬 바이브 코딩
  • 1회차: 파이썬 소개 & 변수와 자료형
  • 2회차: 연산자 & 문자열
  • 3회차: 조건문
  • 4회차: 반복문
  • 5회차: 함수(Function)
  • 6회차: 리스트 & 딕셔너리
  • 7회차: 파이썬과 UI연결
  • 01_사진수집
  • 02_네이버 영화 리뷰 크롤링
  • 03_PPT작성
  • 04_이메일전송
  • 05-파이썬 챗봇 만들기
  • 06-주식분석보고서
  • 허깅페이스 무료 Inference API - OTT 앱 활용 가이드
  1. 홈
  2. 문서
  3. Backend
  4. Python
  5. 7회차: 파이썬과 UI연결

7회차: 파이썬과 UI연결

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. 실행순서

1.1. 백엔드 실행 (Flask)

  1. 가상환경 활성화
.\venv\Scripts\Activate

  1. backend 폴더로 이동
cd backend
  1. 서버 실행
python app.py

→ 주소: http://127.0.0.1:5000 (또는 http://localhost:5000)


1.2. 프론트엔드 실행 (Vite + React)

  1. 프론트 프로젝트 루트(yt-app)로 이동
cd frontend

  1. 개발 서버 실행
npm run dev

→ 주소: http://localhost:5173 (Vite 기본 포트, 수정했으면 다른 포트)


1.3. 연동 확인

  • 프론트에서 API 요청 주소를 프록시(/api → 5000) 또는 직접 http://localhost:5000 으로 맞춰야 함.
  • 네트워크 탭에서 요청이 200 OK로 오는지 확인.

1.4. 실행 순서 요약

  1. (venv) 켜고 → backend 들어가서 → python app.py
  2. 새 터미널 열고 → yt-app 루트에서 → npm run dev
  3. 브라우저로 http://localhost:5173 접속 → 백엔드와 통신 확인

목차

  • 구문