파이썬으로 5분만에 무료 홈페이지 만들기 (Flask, 약 10줄의 코딩으로 웹서버 구동)

일전에 NodeJs로 5분만에 홈페이지 만드는 방법 보여드렸는데, 파이썬은 어떻게 진행할 수 있을까요?
파이썬은 배우기 쉽고 커버 영역이 매우 넓어 인기가 많은 언어입니다.
또한 파이썬(Python)은 웹 분야도 커버하며 대표적인 웹프레임워크로 장고와 플라스크(Flask)가 있습니다.
이번 강좌에서 플라스크(Flask)와 부트스트랩 무료 테마를 활용해 홈페이지 만들기를 진행하겠습니다.
아주 짧은 시간에 완성할 수 있으며, 이를 통해 파이썬 웹개발의 첫발을 떼 보시기 바랍니다!
홈페이지 제작 과외 신청하기
zooo.kr/fxbbs/...

[@user-ph1vb2oe7o]

와 , 하다가 감탄나와서 댓글부터 작성합니다. 짱입니다. 진짜. 모바일까지 싹다 만들어져 있네요...... 미쳐 ㄸ ㅏ....

[@sourcePlayground]

( 23:45 ) 업로드해주면.. 동일한 위치에 올려주면 이미지 교체가 이루어진다는 내용이 있습니다. 해당 이미지 경로 설명이 부족해 보이네요. 다음 내용 참조해 주세요. 만약 a.jpg를 homepage/html 폴더에 저장하였다면 이미지 태그는 다음과 같이 됩니다 다른 예로 a.jpg를 homepage/html/assets 폴더에 저장하였다면 이미지 태그는 다음과 같이 됩니다 정리하면 src의 첫글자가 슬러시("/")인 경우는, 홈페이지의 루트 경로를 가리킵니다. 루트 경로란, 도메인만 입력했을 때, 들어오는 경로를 의미하고 이 영상에서는 homepage/html 폴더가 루트 경로입니다. 그래서 /a.jpg는 homepage/html/a.jpg를 의미하고 /assets/a.jpg는 homepage/html/assets/a.jpg를 의미하게 됩니다.

[@user-zo1zm8ye3t]

영상 감사합니다...! 제가 찾던 영상이네요..! ^^ 그런데 욥 1. 환경 변수 설정은 안해줘도 괜찮은가여? 2. 실행 할때마다 명령 프롬프트 창에서 실행 해야 하나여? 파이썬 프로그램 안에 터미널 창에서 안되는데요 ㅠㅠ

[@sourcePlayground]

파이썬 설치 및 venv 설정, 필요 모듈 설치만 하시면 됩니다 (환경 변수는 위 과정에서 자동 세팅될 겁니다) 그리고 실행 명령어는 vs code의 경우 Ctrl + Back 키 누르면 나오는 터미널에서도 가능합니다. 사용하시는 에디터가 무엇이든 터미널 기능이 있을 가능성이 높습니다

[@potacart]

6:25에서 vs코드로 복붙했는데 start파일이 안열려요 vs코드로 실행해보니까 ModuleNotFoundError: No module named 'flask' 라는 오류가 떠요

[@sourcePlayground]

flask가 설치가 제대로 안되었거나.. vs코드로 실행 시, flask 모듈을 찾지 못한 경우입니다. (flask를 찾지 못했다는 에러) pip install flask가 제대로 실행되었는지 확인해 보세요 (혹시 설치중 에러 메시지 있는지 등 확인)

[@Chad152]

Press CTRL+C to quit 127.0.0.1 - - [17/Feb/2023 03:45:33] "GET / HTTP/1.1" 200 - 이 뒤에 flask --app Start run 를 써도 안되네요.... 머가 잘못된건가요? 웹사이트가 계속 hello world에 머물러 있네요. 중간 중간이 비어서 쌩초보자가 따라하기는 힘든 부분 있네요. 5분이 아니라 2시간째 헤매는중ㅋ

[@sourcePlayground]

혹시 실행중 상태인지 확인해 보세요. 실행중 상태라면 CTRL + C를 눌러 중단시킨 후.. flask --app start run 하시면 됩니다 (대소문자 구분하므로 유의해서 적으시면 됩니다)

[@trumptv1527]

4 15에 cd c 이후 뭐라고 적는건가요 설명을 하시는데 기호가 잘 안보이네요 스페이스누르기나 기호등도 설명에 넣어주세요 초짜라 못알아듣

[@studioallcar]

\ 이거 누르셔도 돼요!ㅎㅎ

[@wo0fw00f]

코딩 왕 초보입니다. 화면이 다 깨지는데 왜 그런지 모르겠습니다 ㅜㅜ css와 파일 경로도 정확히 잘 들어가 있고, 캐시 삭제도 여러번 해 보았는데 변화가 없습니다. html 문서에서 바꾼 내용은 깨진 화면 내 텍스들에 잘 적용되어 나타난다만, css파일이 왜 제대로 적용이 되지 않는 것일까요? js 파일은 적용되는 것 같습니다.

[@wo0fw00f]

선생님의 최근 영상을 보고 해결했습니다. 좋은 영상들 너무 감사합니다.

[@sourcePlayground]

다행입니다. 격려 감사합니다 ㅎㅎ

[@azure473]

20:25 이쯤 나오는 파일 경로에서 인덱스가 html로 있지 않고 엣지 브라우저로 존재해서 사용이 불가능한데 없는데 어떻게 해결하나요?

[@azure473]

연결프로그램에서 비주얼 코드로 실행하니까 해결 됬어요 다른영상도 따라해볼게요!

[@user-wq4je9wc3w]

18:33 에 homepage1 가상 환경? 바로 갈 수 있는 단축키 같은 게 있을까요???

[@sourcePlayground]

단축키는 없지만... 다음처럼 해보세요. "가상환경바로가기.bat" 파일을 텍스트 에디터로 생성합니다. 그리고 해당 bat 파일의 내용을 다음과 같이 합니다 (영상 기준으로 작성한 내용임) @echo off cd /d C:\python_my_projects\homepage1 cmd /k call Scripts\activate 이제 "가상환경바로가기.bat" 파일을 더블 클릭하면, 가상환경이 활성화된 채로, 명령 프롬프트 창이 떠있게 됩니다. 여기서 추가 명령어를 수행할 수도 있겠죠.

[@codinglife821]

4:33 에서 에러떴어요:Error: Command '['C:\\My-Python-Projects\\homepage1\\Scripts\\python.exe', '-m', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 속상하네요 ㅠ

[@sourcePlayground]

말씀하신 오류는 파이썬에서 pip 명령어가 작동되게끔 설치되는 과정에서 실패하여 발생한 오류 같습니다. (또는 버전 충돌로 pip 설치 실패) (아니면 인터넷 안되는 환경 및 보안으로 막혀 pip 작동 실패) 해당 코드 실행하는 컴퓨터에서 인터넷이 잘 되는지 확인해 보세요. 아울러 파이썬 재설치해 보세요

[@user-kp4cj7ci8k]

안녕하세요~ 혹시 html 파일에 html파일 로된 index,components 두개가있는데 index만 경로 로 넣으니 404에러가뜹니다 혹시 두개를 동시에 실행시켜야할까요?

[@sourcePlayground]

components 파일은 생성한 적이 없습니다. 다른 경로로 유입되었거나.. 홈페이지 템플릿등을 가지고 오셨다면.. 그곳에 포함되어 있었을까요? components는 영상과는 무관합니다. 404에러가 떴다고 하셨는데... Not Found 에러, 즉 찾지 못하였다는 에러입니다. 영상에서 루트 경로로 입력했을 때(도메인만 입력) html 폴더 안에 index.html을 가지고 오도록 했습니다. index.html의 경로가 맞는지 확인해 보세요(html 폴더 아래에 위치) 아울러 html 폴더는 루트 디렉토리에 존재해야 합니다 (참고로 start.py 파일이 위치하는 곳이 루트 디렉토리입니다)

[@sourcePlayground]

잘 안되시면 소스 전체를 [e-mail]으로 보내보세요.

[@alphago410]

파이썬으로의 전환이 종전의 php 코딩에 비해 어떤 장점이 있을까요?

[@sourcePlayground]

PHP는 아파치에 탑재되어서 자체 웹서버 기능은 더 좋아보입니다. 하지만, 파이썬의 경우, 다양한 형태의 서비스 탑재가 편합니다. 예를 들어, 가상 브라우저 형태의 크롤링 작업이 가능하고 이미지 처리, 파일 처리 및 챗GPT 처리 등 다방면의 기능 탑재에 유리합니다. 참조 소스도 더 많고 짧은 코드로 고성능 구현에 편합니다. 하지만 앞서 말씀드렸듯이 자체 웹서버 기능은 아파치가 더 좋구요. 이런 이유로 PHP와 파이썬을 섞어 쓰는 것도 괜찮아 보입니다. (PHP(아파치)는 80번 포트, 파이썬은 다른 포트)

[@pentacleking1216]

저 미니콘다를 설치해서 미니콘다 가상환경만들고 거기서 미니콘다 프로젝트 activate 해서 거따하는데 왜 flsk --app start run 이 안될까요 ㅠ?

[@sourcePlayground]

개발환경 및 어떻게 세부 설정되었는지.. 몰라 답변이 힘듭니다. 드릴 수 있는 조언은... 안될때... 에러 메시지 등이 떴을 겁니다. 해당 메시지를 복사하여 구글에 넣어 검색해 보세요. 비슷한 문제를 겪은 글을 읽으시면 해결에 도움이 되십니다.

[@user-xo4ok5xu2n]

왜 목소리에서 올리버쌤이...?

[@sourcePlayground]

ㅎㅎㅎ 그죠. 고민이 많습니다

[@user-gc4fe3xt6e]

6:25초 부분 파일을 만드시는 방법을 알려주실수있는지요..

[@sourcePlayground]

다음 내용은 이 영상에서 작성한 start.py 파일의 내용입니다. 이 내용을 복사한 다음, 에디터에서 새파일만들기 후, 복사 내용을 붙여넣고 저장하시면 됩니다 (저장 시, 파일명: start.py) (에디터는 무엇이든 좋습니다) from flask import Flask, send_from_directory app = Flask(__name__) @app.route("/hello") #127.0.0.1 def hello_world(): return "Hello, World!" @app.route("/") #127.0.0.1 def index(): return send_from_directory('html', "index.html") #127.0.0.1/html/css/b.css @app.route('/') #127.0.0.1/css/b.css def start(name): return send_from_directory('html', name) #127.0.0.1/html/css/b.css

[@malcomk]

컴부터가 아니라 컴퓨터

[@user-oj7gu6et7n]

맥으로는 어떻게 해야되나요 ㅠ

[@sourcePlayground]

맥 OS도 가능한데 파이썬 설치법과 실행법이 조금 다릅니다. 제 환경이 윈도우라 세세히 확인이 불가능하네요. 부정확하더라도 관련 정보 파악되면 남겨드리겠습니다.

[@sourcePlayground]

맥OS에서 실행하려면 아래 내용 참조하세요. 1. www.python.org/downloads/ 에서 맥 버전 다운로드 및 설치하기 2. 가상환경 설치하기 영상(윈도우): py -3 -m venv homepage1 맥OS: python3 -m venv homepage1 3. 가상환경 적용하기 영상: homepage1/Scripts 폴더의 activate 실행 맥OS: homepage1/bin 폴더로 들어간후 source activate 실행 4. flask 모듈 설치 영상, 맥OS 모두 동일: pip install flask 5. 최종 프로그램 실행 영상, 맥OS 모두 동일: flask --app start run

[@Buildinglord]

Streamlit 으로는 저렇게 꾸밀 수 없는건가요?

[@sourcePlayground]

웹을 지원하기에 Streamlit으로 구현 가능합니다. 다만, flask에서는 간단한 코드로 가능했었는데... Streamlit은 아직 써보지 못해... 어떨지 모르겠네요. 어쩌면 코드가 더 많아질 가능성도 있습니다. (최근에 더 살펴봤는데 데이터 관련하여 특화된 서비스 형태네요. 제공되는 API와 다른 파이썬 기능을 조합하여 꾸역꾸역 동일하게 만들 수 있지만.. 굳이 번거로워지겠네요. 사용 목적이 다른 듯 합니다)

[@Buildinglord]

@@sourcePlayground 답변 감사합니다 ㅎㅎ

[@Plus-dd2ov]

화면이 보이기는 하는데 다 깨져 보이네요 ㅠㅠ

[@sourcePlayground]

파일 인코딩을 utf8로 바꿔보세요. 어떤 에디터 쓰시는지 모르지만.. 모든 에디터에는 파일 저장시의 인코딩 설정이 있습니다. 이게 맞지 않으면 한글이 깨어져 보일수 있습니다

[@teahyeonkim2960]

6:31초에 복사해서 어디에 붙여넣기 하는건가여?

[@sourcePlayground]

homepage1 폴더에 파일 이름 "start.py"의 새 파일을 만들고... 복사한 내용을 붙여 넣기 한 다음, 저장한 것입니다. (txt 파일에 내용을 적듯.. start.py 파일에 내용을 붙여 넣은 것입니다.)

[@sourcePlayground]

지금 쓰고 있는 에디터는 에디트플러스인데, 메모장과 똑같은 것입니다. 메모장에 편의 기능을 조금 추가한 에디터이죠. Visual Studio Code 역시 마찬가지인데.. 대신 기능이 훨씬 많은 에디터입니다.

[@user-vm1vg6gc7m]

@@sourcePlayground 혹시 그냥 메모장에다가 입력해도 문제없이 작동되나요?

[@sourcePlayground]

@@user-vm1vg6gc7m (오늘 올린 영상에도 관련 멘트한 적 있는데) 이해를 돕기 위한 멘트이고 메모장 쓰면 매우 불편할 겁니다 ^^ 하지만 작동상의 문제는 없습니다. (단 flask 구동은 명령프롬프트에서 진행해야 합니다)

[@rollingstones54312]

이 이후에는 포트를 어떻게 바꾸나요? 사람들이 다 접속할 수 있도록요.

[@sourcePlayground]

flask --app start run --host=0.0.0.0 --port=80 이렇게 실행하시면 80번 포트로 실행되어 도메인만 넣어도 접속됩니다. 물론 flask 서버가 작동하는 컴퓨터의 80번 포트가 외부로 개방되어 있어야 하구요.

[@sourcePlayground]

그리고 실제 서비스 시에는 production mode로 변경해야 합니다. 개발 시에는 development mode인데 이대로 오픈하면 보안이 약합니다. production mode로 변경하려면 ... 1. DEBUG 모드를 비활성화하고 2. SECRET KEY를 설정하고 3. ALLOWED_HOST를 설정하고 4. STATIC_ROOT를 설정하고 5. DATABASE_URL을 설정한후 flask run --host=0.0.0.0 --port=80 을 실행해야 합니다. production mode는 아직 다루지 않아... 따로 구글링으로 알아보세요. 물론, development mode도 작동에는 문제 없습니다.

[@rollingstones54312]

@@sourcePlayground 너무 감사드립니다