오늘 뭐했냐/웹개발종합반

4주차

스스로에게 2023. 6. 3. 20:34

4주차 정리

프레임워크 : 

서버를 만들기 위해 어느정도 만들어져 있는 꾸러미들

→ 큰 형태의 라이브러리라 생각하면 비슷하다 (우린 Flask를 사용)

 

사용법 : 

  1. 가상환경 python -m venv venv 그리고 활성화
  2. pip install flask 프레임워크 설치
  3.  app.py 만들기 여기서 html 작업이 가능하지만 매우 복잡해진다
    그래서 HTML을 분리해 따로 작업한 다음 연동한다
    (프레임워크를 사용했기에 제작자가 지정한 방식에 따라 만들어야한다)
    -> render_template 사용 
  4. flask프레임워크에 render_template 기능 사용
    작업하는 파일이 들어있는 폴더에 templates 폴더 (html파일을 넣어둡니다)를 만든다
    따라서 작업하는 공간에 작업 중인 파일(app.py)와 templates 폴더 (html파일이 들어감)
    이 두 개가 기본틀이라고 할 수 있다

작동 방식 : 

  1. flask의 render_template을 이용하기 위해 templates 폴더 안에 index.html을 만든다
  2. 이를 Flask라고 하는 파이썬 백엔드 서버가 돌면서 가져다 준다
  3. 그리고 브라우저는 HTML CSS JS를 보고 그려주는 역할이다

이게 브라우저가 아니라 앱으로 이루어지면 앱개발이다

(자세한 내용은 훨씬 복잡하겠지만 일단 강의에선 이해를 돕기 위해 간단히 이렇게 설명해줌)

 

밑에는 내가 나름대로 이해한 내용이다

@app.route('/')
def home():
    return render_template('index.html') render_template을 이용해 index.html 연동
    
    
    ...
    
    if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True) http://localhost:5000 란 사이트를 만들어냄

http://localhost:5000 -> 내가 내 컴퓨터에 접속한 주소 

이 주소에 들어가면 클라이언트가 요청을 보내고 Flask로 연동된 index.html을 가져가라는 응답을 한다

그럼 브라우저는 HTML CSS JS를 확인해 우리가 보는 화면으로 그려준다

 

 

요청 방식: 

이 때 클라이언트가 서버에 요청할 때도 방식이 존재한다

여러 방식이 존재하지만 이 강의에서는 GET, POST 방식을 사용

  1. GET 요청

통상적으로 데이터 조회(Read)를 요청할 때, 사용 (모든 경우는 아님)

데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달

  1. POST 요청

통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 사용( 모든 경우는 아님)

데이터 전달 : 바로 보이지 않는 HTML

 

요청과 응답의 과정 :  

function hey() {
 let formData = new FormData();
        formData.append("title_give", "블랙팬서");
        // 1 .뭔가 데이터를 담을 공간이 만들어지고 그 안에 쌓였다

        fetch("/test", { method: "POST", body: formData })
        // 2. 그 데이터를 /test 라는 곳으로 보낸다
        // 2-1. index.html(프론트엔드)에서 보낸 데이터를 app.py(백엔드 부분)에서 받는다
                                
        // 7. 응답을 받아온다
          .then((res) => res.json())
        // 8. 응답받은 데이터를 우리가 볼 수 있게 .json()으로 바꿔주고
          .then((data) => {
        // 9. data에 담는다 그리고 어떻게 사용할지 정한다
            console.log(data); // {'result':'success', 'msg': '이 요청은 POST!'}
          });
      }
@app.route('/test', methods=['POST'])
# /test라는 곳으로 POST방식의 요청으로 들어온다

# 3. index.html에서 보낸 POST방식의 요청을 받았다 
def test_post():
   title_receive = request.form['title_give']
    #title_give라는 데이터가 있으면 이것을 title_receive라는 변수에 담는다
   
    # 4. title_give라는 데이터가 있는지 확인하고 있으면 변수에 담는다 
    # 4-1. title_give가 있고 그 안에 '블랙팬서'라는 데이터가 있다
    # 4-2. request.form['title_give'] = '블랙팬서'
   
   print(title_receive) 

	# 5. title_receive를 출력한다 
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
 	# 서버에서 클라이언트로 보내는 데이터 
	
    # 6. 요청이 끝났고 응답을 보낸다 (jsonify({'result':'success', 'msg': '이 요청은 POST!'}))

내가 나름대로 해석한 것은 위와 같다 이게 틀릴 수도 있지만

일단은 이렇게 개념을 잡고 후에 더 많이 배운 다음에 다시 개념을 다듬어야겠다

 

일에는 항상 순서가 중요한 경우가 많았기에 강의를 보면서 순서를 생각했다

 

  • 무엇을 해야할지 살펴본다
  • 저장과 저장한 것을 가져와 출력하는 게 있다면 저장을 먼저 해야 기능이 잘 작동 되는지 확인이 된다
  • 강의에서는 서버(app.py)를 먼저 만들고 클라이언트(index.html)를 작업했다
  • 내가 필요한 요소가 무엇인지 생각한다
    예를 들면 이름 주소 구매평수가 필요하다는 것을 생각하고 그것부터 변수를 만든다
  • url입력을 받아 그 url에서 무엇인가 데이터를 가져올 때  meta태그에 og를 활용해서
    일반적으로 공통적으로 가지고 있는 정보를 사용하였다
저작자표시 (새창열림)