내일배움단 11일메이킹챌린지 2일차

2일차 ( Flask 서버를 위한 폴더 세팅 ~ API 구조 / 프로젝트 2일차 )

[ 2일차 ] 홈페이지 구성 논의

• 조이름 선정 : 민초단 연봉 6조
• 페이지 구성

  1) 상단 슬라이드식 이미지 배너
  2) 그 아래 카테고리 (클릭시 조회)
  3) 그 아래 카드 목록 (선택된 카테고리에 따라 다르게 조회)
  4) 검색창 추가
  5) 별도 페이지_게임별 상세 페이지 (상세정보, 댓글)

[1] Flask 기초

(0) 폴더 세팅

한 폴더 안에,

• static 폴더 ( 이미지, css 파일 )
• templates 폴더 ( html 파일 )
• app.py 파일 ( 서버 코드 파일 )

(1) 패키지 Flask를 설치한다.
(2) 프레임워크를 사용한 Flask 기본 코드를 입력한다.

• 프레임워크 : 서버를 구동시켜주는 편한 코드 모음.

Flask 기본 코드

from flask import Flask
app = Flask(__name__)
@app.route('/')
     def home():
        return 'This is Home!'
if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

(3) http://localhost:5000/ 으로 들어가서 접속 확인한다.

• ‘This is Home!’ 이라고 뜨면 성공.
• 터미널 창 클릭 & Ctrl + C 누르면 서버 종료를 할 수 있다.
• @app.route(‘/‘) 부분을 수정하면 URL을 나눌 수 있다.

(4) html 파일 불러와 적용 할 수도 있다.

예시 코드

from flask import Flask, render_template
			#template 폴더를 임포트
app = Flask(__name__)
@app.route('/')
	def home():
   		return render_template('index.html')
        		#template 폴더 안에 있는 index.html 파일을 적용
if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

• API : 클라이언트의 요청에 따라 데이터를 제공하는, 은행의 창구 같은 역할을 함. 요청을 할때에는 HTTP request Method를 통해 해야함.

  ① GET : 통상적으로, '데이터 조회' 를 요청할 때 사용.
  데이터는 URL 뒤에 물음표를 붙여 key=value로 전달함.

  ② POST : 통상적으로, '데이터의 생성, 변경, 삭제' 를 요청할 때 사용.
  데이터는 바로 보이지 않는 HTML body에 key:value 형태로 전달함.
  

예시 코드

GET 요청 API 코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   			#title_give의 값을 불러와 title_receive에 저장.
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
   			#클라이언트에게 회신.

GET 요청 확인 Ajax 코드

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    		#title_give, 즉, '봄날은 간다'가 데이터로 들어감.
    data: {},
    success: function(response){
       console.log(response)
       		#위 API 코드에서 마지막 줄을 회신받게 됨.
    }
  })

POST 요청 API 코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   			#title_give의 값을 불러와 title_receive에 저장.
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
  			#클라이언트에게 회신.

POST 요청 확인 Ajax 코드

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
   		#data로서 key:vaule 형태로 '봄날은 간다'를 전달
    success: function(response){
       console.log(response)
    		#위 API 코드에서 마지막 줄을 회신받게 됨.
    }
  })

강의를 듣고 난후_

	:아직은 이 모든 내용들을 전부 이해하지는 못하지만, 그래도 아직
	예제가 4개나 남았으니까 그것들을 반복하다 보면 조금은 이해할 
    	수 있지 않을까 싶다. 수업을 듣다보면 나도 조금은 이것들을 응용
        하여 나만의 페이지를 만들 수 있을까? 일단은 공부를 더 해서 프
        로젝트에 조금이라도 보탬이 되고 싶다.
        프로젝트에 쓸만한 부트스트랩들을 찾고 정리해보자.