스파르타 웹개발 종합반 4주차

2023.01.26 - [스파르타코딩클럽] - 스파르타 웹개발 종합반 3주차

 

스파르타 웹개발 종합반 3주차

 

 

[수업목표]

• Flask 프레임워크를 활용해서 API를 만들 수 있다.
• '화성에 땅사기' API를 만들고 클라이언트에 연결한다. 
• '스파르타피디아' API를 만들고 클라이언트와 연결한다. 

 

 

---

 

 

 

3주차에서 배운 mongoDB로 4주차에서는 이제 서버를 만들어본다. 2개의 프로젝트를 통해 Flask를 이용해서 서버를 만들고 HTML과 mongoDB까지 연동해보는 과정을 경험해보았다. 

 

수업 리뷰에 들어가기 전 배경을 이해하고 가자. 지금 우리는 한대의 컴퓨터로 서버를 만들고 요청을 진행하게 된다. 즉 클라이언트와 서버가 한 컴퓨터 내에 존재하는 것! 이것을 '로컬개발환경' 이라고 한다. 시각화하면 아래의 이미지 같이 나타낼 수 있다.(mongoDB는 클라우드 서비스를 이용하기 때문에 노트북 밖에 위치한다.)

 

출처 : 스파르타코딩클럽 웹개발 종합반 4주차 수업자료

 

 

 

1. Flask 시작하기 

Flask는 웹 애플리케이션 개발을 위한 파이썬 프레임워크다. 서버를 구동할 때 필요한 복잡한 일들을 프레임워크를 사용에 쉽게 가져다 쓸 수 있다. 수업자료에는 프레임워크를 쓰지않고 직접 구동을 하는 건 태양초를 빻아서 고추장을 만드는 격이라고 비유하고 있다.

 

 

[Flask 기본 폴더 구조]

Flask 시작할 때는 항상 폴더 먼저 세팅하고 시작하면 된다.

 

프로젝트 폴더 안에,

• static 폴더 : 이미지, css 파일 넣는 곳
• templates 폴더 : html 파일 넣는 곳
• app.py 파일 : flask 서버를 돌리는 파일은 통상적으로 app.py라고 이름을 짓는다. 

 

 

 1.-1 Flask의 시작 코드는 아래와 같다.

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

코드를 실행 후 http://localhost:5000/ 을 검색하면 Hello, World!가 보이게 될 것이다.

종료하고 싶을 떄는 터미널 창에서 ctrl + c 눌러 서버를 종료한다.

 

 

 

※ 코드 중간 @app.route(' / ')부분을 사용하여 url을 나눌 수 있다. 

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello, World!'
    
@app.route('/mypage')
def mypage():
    return 'url 분리!'

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

▶ 이때 url 별로 함수명이 같거나, route(' / ')내의 주소가 같으면 안된다!

 

 

 

 

1.-2 HMTL 파일 불러오기

templates 폴더에 HTML 파일 담아주고, app.py에서 Flask의 내장함수 render_template을 사용한다. 

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

 

 

 

 

1.-3 GET, POST 요청에서 API 코드

 

app.py에 써준 GET/POST API 코드(서버측) 는 index.html의 ajax에서 받는다(클라이언트측). Ajax의 기본 골격이 생각나지 않는다면 아래 2주차 리뷰에서 확인할 수 있다. 

 

스파르타 웹개발 종합반 2주차 :: IT 인재가 되고 싶어요 (tistory.com)

스파르타 웹개발 종합반 2주차

 

 

• GET 방식 API : 데이터를 argument로 받아서 처리

@app.route('/test', methods=['GET'])
def test_get():
    test_receive = request.args.get('test_give')
    return jsonify({'result' : 'success', 'msg' : 'GET 요청 완료'})

 

• POST 방식 API : form으로 받아서 처리

@app.route('/test', methods=['POST'])
def test_post():
    test_receive = request.form['test_give']
    return jsonify({'result' : 'success', 'msg' : 'POST 요청 완료'})

 

 

더 자세한 설명은 아래 사이트를 참고해보라.

 

[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) Request get parameter(HTTP method GET, POST) - Wings on PC (tistory.com)

[웹 앱프로그래밍] 파이썬 플라스크(Python Flask) Request get parameter(HTTP method GET, POST)

 

 

 

 

2. 미니 프로젝트 : 화성땅 공동구매 

기본적인 코드스니펫은 미리 마련되어 있어, 여기서는 GET(주문 보여주기)과 POST(주문 저장) 방식을 연습해보았다. 

 

2.-1 POST 연습 주문 저장

 

2.-2 GET 연습 주문 보여주기

3. 미니프로젝트 : 스파르타피디아

지난 주차에 만들었던 스파르타피디아에 진짜 후기를 쓸 수 있게 서버를 연결해보았다. 

 

3.-1 POST 연습 포스팅하기

 

3.-2 GET 연습 보여주기

 

 

---

 

+ 숙제로 만든 팬명록에 1) 응원남기고(POST), 2) 응원 보기(GET) 기능을 추가해보았다. 닉네임을 이름으로 너무 정직하게 써놔서 모자이크 처리를 했다.