내일배움캠프 3일차 TIL - Flask 기초 실습

12. Flask로 로또 추천 사이트 만들기1

 

1) Flask 기초 : Flask의 기본 폴더 구조

Flask 서버를 만들 때, 항상 프로젝트 폴더 안에

ㄴtemplates 폴더(html파일을 넣어둡니다)

ㄴapp.py 파일

이렇게 두 폴더를 만들어 놓고 시작한다.

 

2) Flask 기초 : 기본 실행

- Flask 프레임워크 : 서버를 구동시켜주는 코드 모음, 웹 서버 구동시 필요한 복잡한 코드들을 쉽게 사용할 수 있다

- Flask 시작 코드 ; app.py 파일에 넣어주기

 

from flask import Flask

app = Flask(__name__)

 

@app.route('/')

def home():

    return 'This is Home!'

 

if __name__ == '__main__':  

    app.run(debug=True)

 

 

- 화면상단 terminal > new terminal 으로 터미널 열어주고 (venv)가 보이면 가상환경이 활성화 된 것

 

 

$ pip list 를 통해 Flask가 잘 설치됐는지 확인 가능

 

python app.py 치고 아래와 같이 나오면 서버가 실행되는 것이다

- [Window] python app.py / [Mac] python3 app.py 하고 엔터!

   mac에서 안되면 app.py 파일에 들어와 마지막 줄 port=5000을 5001로 바꿔보기

   (네트워크 5000번 포트가 사용중일 수 있다)

 

 

- http://localhost:5000 링크에 마우스 대고 Ctrl/Command 눌러 화면에 This is Home! 이 보이면

  Flask 서버가 잘 동작하는 것

- 종료하는 법 : ctrl + c

- 화살표 위로 하면 내가 전에 입력한 명령어가 나옴 ctrl+c 누르기 전 python app.py가 나왔으니

  지금 화살표 위로 하면 python app.py가 나옴 > 그럼 서버가 켜짐

 

 

from flask import Flask 에서

from flask import Flask, render_template

으로 render_template을 추가해주고

 

@app.route('/')

def home():

    return 'This is Home!'

 

이 코드를

 

@app.route(‘/‘)  >’/‘ 기본적으로 아무것도 입력 안한 페이지로 들어오면

def home():

    return render_template(‘index.html’)  > ‘index.html’이라는 템플릿을 그려준다(render)

 

으로 수정해주기

 

다시 pythonn app.py 실행해주면

 

 

이렇게 index.html이 잘 출력되는걸 확인할 수 있다.

 

이제 고정되어있는 문구 “안녕, 스파르타야” 를 파이썬 변수를 써서 계속 변하도록 만들어보자.

 

@app.route(‘/‘)  

def home():

    name = ‘제이미’

    return render_template(‘index.html’, data = name)

 

이러면 html에서 data라고 썼을 때 name 변수를 쓸 수가 있다.

 

*command + s 저장 까먹지 말고*

 

새로고침 해보면 

 

 

이렇게 화면이 바뀌어 있는 걸 확인할 수 있다.

 

우리는 로또 번호를 생성해야하니 변수를 하나 더 넣어야 한다.

데이터를 여러 개 넘겨줄 때는 딕셔너리를 이용해서 1개로 묶어버린다.

 

이때 사용하는 context 함수의 기본 모양

 

context = {

"HTML에서 사용할 이름": 변수명,

"HTML에서 사용할 이름": 변수명,

}

 

적용해보자.

 

    name = ‘제이미’

    lotto = [12, 42, 17, 9, 26, 33]

 

    context = {

           “name”: name,

           “lotto”: lotto,

    }

 

    return render_template(‘index.html’, data = name)

 

“name”, “lotto” 이 이름으로 html에서 불러와서 쓸 수 있다.

 

이제 data = name 을 data = context 로 바꿔준다면 context의 중괄호 안 데이터를 모두 갖다쓸 수 있게 되는 것

 

다시 index.html 로 와서 {{data}}를 {{data.name}}으로,

아래 줄에는 <h2>로또번호 : {{data.lotto}}</h2> 를 추가해준다.

 

*command + s 저장 까먹지 말고!!*

 

새로고침 해보면 

 

 

성공!

 

13. Flask로 로또 추천 사이트 만들기2

 

1) 로또 자동추천, 반복문 사용하기

 

ffor 자동완성 안되기 시작

버전 문제일 확률이 높다는 답변을 받음

다시 싹 다 날리고 파이썬부터 새로 깔기 시작

근데 아까 되던게 갑자기 안됨 이제 뭐임?

Http error 403 이라고 뜨며 들어가지던 웹페이지에 못들어가게 됨

 

app.py에서 맨 마지막 줄을 

app.run(debug=True)에서 app.run(‘0.0.0.0’, port=5500, debug=True) 으로 수정, 

port 를 5500 으로 지정해줌

 

원래 듣던 강의내용까지 전부 다시 진행해도 여전히 자동완성 안됨

튜터님 답변 다시 기다림.. 기다림.. 기다림..

 

답변이 왔다! 확장프로그램 flask-snippets을 깔아보니 자동완성 됨

너무 간단하게 풀려서 잠시 허탈함..

 

다시 강의 진행,

 

 

반복문을 활용하는 법을 간단하게 배웠다.

 

 

요렇게 출력되는 반복문이었다고 한다

 

2) 당첨 갯수 계산하기, HTML에서 조건문 사용하기

 

랜덤으로 로또 숫자를 뽑아야 하는데, 이때는 Chat GPT를 사용한다.

원래 중간에 있던 import random을 위로 옮겨준다. import는 주로 위에 작성해주기 때문.

 

요렇게 위로 올리고, 아래 코드(챗gpt에서 복사해온 코드)는 정리해준다.

 

 

이제 여기서 위 lotto = [12,42,17,9,26,33] 과 random_lotto = generate_lotto_numbers() 의 값만 비교해주면 된다. 첫번째 건 당첨번호이고 두번째 건 뽑기 번호니까. 이 둘 모두 리스트 형태이기 때문에 결국 우리가 할 건,

 

두 가지 리스트 중에서 몇 개가 똑같은지를 알아내는 것!

 

"챗GPT야. 파이썬 리스트 2개에서 같은 요소의 갯수를 확인하는 코드를 작성해줘."

 

>터미널 실행<

두 리스트에서 공통된 요소의 개수:

{5: 1, 6: 1}

 

다시,

"두 리스트의 공통된 요소들이 무엇인지는 안 알려줘도 돼. 그냥 공통된 요소의 갯수만 결과값으로 나오게 하고 싶어."

 

두 번째로 알려준 코드를 조심스럽게 옮기고 정리해준다.

 

 

챗GPT가 알려준 코드가 강의 내용과 아주 살짝 다르니 헷갈리지 말고 잘 확인하며 해본다.

 

fif만 쳐도 felif (flask elif) 가 자동완성된다. 선택!

 

 

챗 GPTㄱㄱ 

"로또 홈페이지를 만들려고 하는데 HTML과 CSS로 공이 6개 있는 홈페이지 코드를 작성해줘."

 

공 색깔이 못생겼다. 내가 파스텔톤을 좋아하니 파스텔 톤의 알록달록한 모양으로 다시 꾸며달라고 해본다.

 

 

…이게 뭐람

 

"아니, 전부 다 같은 색이잖아. 공 하나하나 다 다른 색상으로 칠하고 싶은거야. 각각의 공은 한 가지 색으로만 칠하고."

 

 

조금 마음에 들어졌다.

 

다만 강의에서는 

<ul class=“lotto-numbers”>

       <li>공1</li>

       <li>공2</li>

       <li>공3</li>

       <li>공4</li>

       <li>공5</li>

       <li>공6</li>

</ul>

을 사용했는데 나는 챗GPT가 다른 코드를 알려줘서 차이가 있었다.

 

<div class="lotto-container">

        {% for element in data.lotto %}

         <div class="lotto-ball">{{ element|e }}</div>

         {% endfor %}

    </div>

 

강의보다 내 코드가 더 간편해보이니 그냥 나는 그대로 진행해보기로 한다.

 

 

오~ 잘 출력이 되는 것을 확인할 수 있다.

 

추가로 이미지를 넣어주기 위해 스파르타 코인맨 이미지 png파일을 받아주고,

vs code에서는 새로운 파일을 생성한다.

이때 무조건 파일명은 static이다. 무조건이다.

static 파일에 코인맨png 드래그해서 넣어주고, index.html 안녕,{{data.name}} 밑에 img하고 탭, 그럼 이미지 태그가 자동완성된다. 

<img src="" alt="">

 

일단 하라는대로 따라해본다.

 

<img src="{{url_for('static', filename='coinman.png')}}" alt="">

 

그리고 CSS에서 img를 height 100px로 맞춰주면

 

 

짜잔, 이미지 파일이 앙증맞게 들어가있다.

이 와중에 계속 탈락인거 진짜 킹받네..

 

::오늘의 회고::

오늘은 결국 원래 있던 조에서 나와 강의 듣기 조로 다시 들어갔다.

어제부터 고민했던 거지만 더 늦어지면 오히려 다른 조원틀에게 피해가 갔을 거다..

고작 이틀이었는데 이것저것 정신없이 찾으면서 프로젝트를 한 경험이 생겨서

강의를 듣는 자세와 마음가짐, 이해되는 정도가 전부 새로워졌다.

처음 치타우리 족을 보고 온 아이언맨이 된 기분이었다.(과장 좀 했다.)

그러다 보니 강의 내용을 토씨하나 안놓치고 정리하려는 의지가 생겨 글이 이렇게나 길어졌다.

어제 자기전에, 앞으로 질문봇이 되리라 다짐했었는데 오늘 실제로 질문을 개많이했다.

내일도 개많이해야지.