4주차 개발일지

1. Flask 시작하기 - 서버만들기

• Pycharm에서 python interpreter-> flask 설치를 해준다.

• app.py 파일 생성 후 하단의 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)

• Run app 실행 시 하단과 같은 메시지가 뜨고, 크롬에서 localhost:5000 접속 시 페이지가 제대로 뜨면 성공
  
• URL 나눠보기
  @app.route('/) 부분을 수정해서 URL을 나눌 수 있다.
  url 별로 함수명이 같거나, route('/')내의 주소가 같으면 안된다.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():  
   return 'This is My Page!'

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

2. Flask시작하기 - HTML파일 주기

• Flask 서버를 만들 때, 항상 프로젝트 폴더 안에
  ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
  ㄴtemplates 폴더 (html파일을 넣어둡니다)
  ㄴapp.py 파일
  을 만들고 시작하자!
• html 파일 불러오기
  flask 내장함수 render_template를 이용하면 된다. (하단 코드 참고)

from flask import Flask, render_template
app = Flask(__name__)

## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.

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

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

3. Flask시작하기 - 본격 API 만들기

• GET, POST 방식
  
• GET, POST 요청에서 클라이언트의 데이터를 받는 방법
  GET요청 API 코드
  
  GET요청 확인 ajax코드
  

  GET요청 API코드 중
  title_receive = request.args.get('title_give')의 의미:
  'title_give'로 갖고온 값(봄날은간다)을 가져온다.
  그 값이 'title_receive'라는 변수에 넣어진다.
  그 변수는 print(title_receive)에서 출력됨.
  그리고
  return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
  json으로 return 값 내려줌.

즉, ajax로 콜을 해서 그 ajax로 가지고 온 것을 API로 처리하여 response로 주고, ajax가 response에서 console.log 등으로 볼 수 있다는 것.

POST요청 API 코드

['title_give']로 갖고온 값을 거기다가 찍어준다.

POST요청 확인 ajax코드

data를 {title_give:'봄날은간다'} 이렇게 가져온다.
그럼 서버부분의 title_receive = request.form['title_give']는
title_receive = '봄날은간다'가 되는 것.

파이참에서 이렇게 '봄날은간다'가 잘 찍힌다.

그리고 return jsonify({'result':'success', 'msg': '이 요청은 POST!'})에 의해 콘솔창에 '이 요청은 POST!'라고 잘 찍히는 것을 볼 수 있다.

4. 정리

• 서버
  API 기능은 다음 세 단계로 구성되어야 한다.

1. 클라이언트가 준 데이터 가져오기.
2. DB에 정보 삽입하기
3. 성공 여부 & 성공 메시지 반환하기

• 클라이언트
  xx를 작성하기 위해 필요한 정보는 다음 세 가지 입니다.
  에이(a)
  비(b)
  씨(c)

따라서 클라이언트 코드는 다음 세 단계로 구성되어야 한다.
1. input에서 a, b, c 가져오기
2. 입력값이 하나라도 없을 때 alert 띄우기.
3. Ajax로 서버에 저장 요청하고, 화면 다시 로딩하기

5. Meta tag(메타태그)

• < head > < /head > 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들 (예: 구글 검색 시 표시 될 설명문, 사이트 제목, 카톡 공유 시 표시 될 이미지 등. 마치 SEO Description, SEO Title 같은 거라는 생각이 들었다.)
• 메타태그는 개발자도구(F12)에서 가져오려는 값(이미지, 타이틀 등)을 확인하여 하단과 같이 설정할 수 있다.
  select_one을 이용해 meta tag를 먼저 가져와보기
  
• 가져온 meta tag의 content를 가져와보기
  

6. 해당 작업을 실습하고 나서 배운 것들 or 중요한 것들

• url부분을 잘 보자
  서버부분 url에 title이라고 써져 있는데 클라이언트 부분에 오타를 내거나 다른 값으로 잘못 설정하여 실행이 제대로 되지 않은 적이 있었다. 꼭 확인하자.
• 에러가 났을 땐 파이참 에러메시지를 잘 보자
  어떤 부분에서 에러가 났는지 친절하게 명시해준다. 그 부분으로 돌아가서 print를 해보고, 출력이 되지 않는다면 코드를 뜯어보고 스스로 해결하려는 습관을 가져야 한다.
• print를 해보자
  중간중간 내가 작성한 코드가 잘 작성한건지, 출력은 제대로 되는지 확인하는 것은 매우 중요하다. print() 혹은 console.log()로 계속 확인하는 것을 아예 습관화 해야 한다.