프로젝트 세팅

1. flask 폴더 구조

---

Project 폴더 구조
- - -
Project
|— venv
|— app.py (서버)
|— templates
         |— motto.html (클라이언트 파일)
         |— music.html (클라이언트 파일)

2. venv 가상 환경 활성화

---

1. Shift + Command + P
2. env
3. Venv
4. Python 버전 선택
5. /.venv 폴더 생성 되면 가상 환경 활성화 완료

3. 패키지 설치

---

1. flask 패키지 설치
   pip install flask

2. 라이브러리 리스트 확인하기
   pip ls

4. app.py 라우팅

---

# ✅ 필수 라이브러리
# Flask : 웹서버를 시작할 수 있는 기능. app이라는 이름으로 플라스크를 시작한다
# render_template : html파일을 가져와서 보여준다
from flask import Flask, render_template

app = Flask(__name__)

# ✅ 라우팅
@app.route('/') # 홈으로 설정
def home():
    return render_template("motto.html")

# ✅ 라우팅
@app.route('/music/')
def music():
    return render_template("music.html")

# ✅ 포트 8080으로 설정함
if __name__ == "__main__":
    app.run(debug=True , port=8080)

• python app.py 혹은 python3 app.py으로 서버 실행
• Ctrl + C로 서버 끄기

5. Python 서버에서 HTML 파일로 데이터 넘겨주기

---

웹 사이트에서 데이터가 필요한 경우

1. Python으로 크롤링하여 HTML로 넘겨서 사용하거나,
2. Database에서 필요한 데이터를 만들어 HTML로 넘겨서 사용하면 된다.

📍 app.py

@app.route('/') # 홈으로 설정
def home():
    name = "예티"

    context = {
        "name": name
    }
    
    return render_template("motto.html", data=context)

📍 motto.html

<div class="motto">
  <h3>My life's motto</h3>
  <h2>{{ data.motto }}</h2>
</div>

6. URL 주소에서 데이터 가져오기: url 파라미터 사용하기 <>

---

주소에서 데이터 가져오기 예시

인스타그램을 보면 주소에 따라서 데이터가 변경된다.

• https://www.instagram.com/유저id/

주소창에 유저id 와 같은 문자열을 가지고 와서 변수처럼 사용할 수 있기 때문이다.

주소에 따라 메인 화면 인사말 바꾸기

url 파라미터 사용하기 <>

route() 부분에 <name> 와 같이 <>를 사용하면,
URL의 파라미터에 따라서 name을 변수처럼 쓸 수 있다.

@app.route("/profile/<name>/") # ✅ <변수명>
def profile(name):

    motto = f"{name}야 T1탑은 너뿐이야 난 향수 안 샀다." # ✅ 변수 사용시 앞에 f 붙이기
    
    context = {
        "name": name,
        "motto": motto
    }
    
    return render_template("motto.html", data=context)

URL 파라미터에 따라 name이 바뀜

• 우제
  
• 예티
  

7. 페이지 이동(네비게이트)

---

📍 motto.html에 페이지 이동 기능 구현하기

페이지 이동 기능을 구현하려면, 어디로 이동할지 알려줘야 한다.

• {{ url_for('이동할 곳') }}
• 이동할 곳은 app.py에 있는 각 루트가 가진 함수 이름

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link active" 
	   aria-current="page"
       href="{{ url_for('home') }}">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active"
       aria-current="page"
       href="{{ url_for('music') }}">Music</a>
  </li>
</ul>