항해99 4주차 개인필기 모음

Seong Hyeon Kim·2022년 4월 19일
Flask서버
0

항해99

목록 보기
10/16

4-1.

1. 서버만들어보기

기본항목 : 파이참-설정-인터프리터-flask 설치후 새로운 파일에서 app.py 라는 이름으로 파일 생성

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)

이후 다음과 같은 코드스니펫을 app.py 파일에 복붙 후 실행을 한다.

2. 서버 실행시켜보기

그리고 localhost:5000 이라고 인터넷 주소창에 적어서 실행해보면
http://localhost:5000 안에 'This is Home!' 라는 문구가 떠있는 걸 볼수 있다.

이 간단한 코드 몇줄로 서버가 생성된것이다.

주소창에 적힌 localhost:5000 이라는 주소를 좀더 세밀하게 나눠서 설명하자면,
일반적으로 서버는 한대의 컴퓨터를 사용해서 돌린다고 보면 되는데 내가 파이참으로 실행하고
내가 다시 그 서버로 들어가보는것 이러한 환경을 로컬 환경이라고 부른다.

그리고

@app.route('/mypage')
def mypage():
return '이것은 나의 페이지닷!!!'

라는 코드를 몇글자 더 쳐서 다음과 같은 코드를 만든후

from flask import Flask
app = Flask(__name__)

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


@app.route('/mypage')
def mypage():
   return '이것은 나의 페이지닷!!!'

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

이번엔 http://localhost:5000/mypage 라고 인터넷주소창에 입력후 실행하면
'이것은 나의 페이지닷!!!' 이라는 문구가 나온걸 볼수있다.

즉 첫번째 서버와 두번째 서버의 차이점은
@app.route('')의 괄호 안에 / 가 들어갔냐, /mypage 가 들어갔냐의 차이점이 있다.
@app.route('') 괄호안에 들어가있는 글자에 따라서 그게 이 사이트의 도메인이 되는 것이다.

4-2

flask기초 기본 폴더 만든후 html 파일 만들기

app.py 에 만들어도 html 파일을 만들어도 상관으 없지만
어느세월에 그렇게 새로 만들것이며 그러면 너무 복잡해지기 때문에

기본적으로 사용하는 부분에 따라서 폴더가 나뉘어 진다.

👉 Flask 서버를 만들 때, 항상,

프로젝트 폴더 안에,
ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
ㄴtemplates 폴더 (html파일을 넣어둡니다)
ㄴapp.py 파일

이렇게 세 개를 만들어두고 시작하세요. 이제 각 폴더의 역할을 알아봅시다!

(꼭 참고!! venv는 실제로는 보이지만, 안보인다~라고 생각하세요! 기억하시죠?)

static, templates 의 폴더를 다 만들면
templates 폴더 안에 새로 만들기로 index.html 파일을 만든 후

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1> 나의 첫 웹페이지</h1>
    <button> 버튼을 만들자 </button>
</body>
</html>

라고 작성해보자. 그러면 이 html 파일은 실행시 나의 첫 웹페이지 라는 문구와 버튼이 생성된 결과물이 실행될 것이다.

그리고 app.py 로 다시 돌아가서 기존에 있던 내용을 수정하여 render_template 를 추가해 준다

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

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

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

바꾸면 이러한 모습이 된다. 참고로 맨 마지막줄 app.run 의 포트값은 내가 기존 만들어놓은 서버 문제로 인해 5001로 바꿔서 실행하였다.

이러한 과정들을 통해 알수 있는건 맨 첫줄에 flask 옆에 render_template을 실행할것을 미리 설정? 해두고 변수 home에 

def home():
   return render_template('index.html')

라는 식으로 ()안에 내가 연결할 파일을 연결해줌으로서 이제 app.py 는 index 폴더와 연동되어 운영되는 방식임을 알 수 있다.

4-3 get post 방식 설명

1) 들어가기 전에: GET, POST 요청타입 - 리마인드

👉 리마인드! 은행의 창구가 API와 같다는 것을 기억하시나요? ****같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "방식"이 존재합니다.
HTTP 라는 통신 규약을 따른다는 거 잊지 않으셨죠? 클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려주는 거에요.

👉 **GET, POST 방식**

여러 방식(링크)이 존재하지만 우리는 가장 많이 쓰이는 GET, POST 방식에 대해 다루겠습니다.

  • GET → 통상적으로! 데이터 조회(Read)를 요청할 때
    예) 영화 목록 조회
    → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
    → 예: google.com?q=북극곰

  • POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
    예) 회원가입, 회원탈퇴, 비밀번호 수정
    → 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

  • 2) GET, POST 요청에서 클라이언트의 데이터를 받는 방법
    • 예를 들어, 클라이언트에서 서버에 title_give란 키 값으로 데이터를 들고왔다고 생각합시다.
      (주민등록번호 라는 키 값으로 900120- .. 을 가져온 것과 같은 의미) 👉 받은 값을 개발자가 볼 수 있게 print 로 찍어볼 수 있게 했습니다. 실전에선 print로 찍어주는 것 외에, 여러가지 작업을 할 수 있겠죠?

예시를 통한 상세설명

순서1 jquery 넣기

///jquery 임포트
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

index.html 파일 안에 title 밑에 혹의 그외 /head 안쪽에만 들어가면 되는데 적절한 위치에 jquery 임포트 코드스니팻을 입력한다 이후

순서2 get요청 ajax 코드 넣기

script 한개 더 만들고 

            $.ajax({
                type: "GET",
                url: "/test?title_give=봄날은간다",
                data: {},
                success: function (response) {
                    console.log(response)
                }
            })

애를 넣어주면 되는데 이왕 만들거 함수를 하나 만들어서 그 안에 코드를 넣어준다.

function hey(){
            $.ajax({
                1️⃣type: "GET",
                2️⃣url: "/test?title_give=봄날은간다",
                3️⃣data: {},
                4️⃣success: function (response) {
                5️⃣    console.log(response)
                }
            })
        }

이 코드의 내용에 대해서 자세하게 설명을 하자면
1번 - 방식. GET 인지 POST 인지 알려주는 부분
2번 - '/test' 라는 창구에 가는데 'title_give' 라는 이름으로 '봄날은간다' 라는 내용을 내가 가져가겠따 라는 내용이 되겠다.
좀더 쉽게 예시를 들자면 '주민등록번호' 라는 이름으로 '931014'라는 내용을 가져갈게 라고 생각하면 된다.
여기서 주민등록번호가 title_give, 봄날은간다 가 931014 라는 개념으로 생각하면 된다.
3번 - 생략
4번 - 잘된다면 내가 다시 응답하겠다. 어디에??
5번 - 콘솔에 응답하겟다.

라는 내용이 되겠따.

추가적으로 여기서는 function hey() 를 사용해 주었고, 이 hey를 버튼에 연결시켜서 연동되게 해놓았다.

<button onclick="hey()"> 버튼을 만들자 </button>

.

순서3. api 만들기

그럼 이제 이 /test 라는 창구를 만들어야 하는데 어떻게 만드냐?

다시 app.py 로 돌아와서 get요청 API코드를 만들어준다 

1️⃣@app.route('/test', methods=['GET'])
2️⃣def test_get():
3️⃣   title_receive = request.args.get('title_give')
4️⃣   print(title_receive)
5️⃣   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

이때 app.py의 맨 첫줄에 render_template 를 사용전 적어준것처럼 이번에는 api 코드에 있는 내용인 ,request, jsonify 를 추가로 작성해준다.

이 코드도 자세한 설명을 하자면
1번 - /test 라는 창구에서 그것을 받았다.
2번 - 함수이름인거 같음
3번 - ()안에 있는 title_give로 뭔가를 받아와서 변수에 넣고
4번 - 그 받아온 변수를 찍어줬다.
5번 - 성공했을때 콘솔창에 나오는 문구 인것 같다.

추가적으로 여기서는 function hey() 를 사용해 주었고, 이 hey를 버튼에 연결시켜서 연동되게 해놓았다.

<button onclick="hey()"> 버튼을 만들자 </button>

실제로 localhost:5000에 들어가서 콘솔창 띄우고 버튼을 누르면 5번의 문구가 나오는것을 확인할 수 있따.

순서4. 이번엔 POST 방식 해보기

index 파일에 있던 GET 방식을 다 지우고 post방식으로 다시 코드를 작성한다.

<script>
        function hey(){
            $.ajax({
                type: "POST",
                url: "/test",
                data: {title_give: '봄날은간다'},
                success: function (response) {
                    console.log(response)
                }
            })
        }
    </script>

그리고 작성이 끝나면 app.py 로 다시 돌아가서

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': 'POST요청을 잘 받았어요'})

라고 추가적으로 작성한다. 코드에 작동방식 대한 설명을 하자면
/test 라는 창구를 만들었고 그 창구에서는 POST만 받는 것은 이쪽으로 오라고 설정해둔 것이고, title_give 를 받아서(title_receive) print, 즉 찍어줫다.

총괄적인 설명

우리가 버튼을 누르면 - index파일의 body에 있는 hey() 가 불러지고 - script의 function hey() 안에 만들어놓은 ajax 요청이 실행이 되며 - ajax 내부의 요청대로 /test 라는 창구에 POST방식의 요청으로 요청이 된거고 - app.py 안에 있는 /test에 POST 가 잇는것을 확인 - 그 창구에서 첫번째로 하는 일은 title_give 의 내용을 갖고 왔는지 확인 - index 파일에 title_give 안에 보면 봄날은 간다 있는거 확인 - 오키 그럼 그것을 변수에 저장한 후 print 즉 찍어본다.- 그리고 난 이제 일을 다 했으니 너에게 어떤 데이터를 돌려줄것이다. '요청을 잘 받았어요' 라는 데이터 - 그럼 그 데이터는 index의 response 안에 들어오게 됨 - 그리고 그 들어온거를 consloe 로 찍어보게 되는것

이게 이 복잡한 내용의 실행 상세 경로가 되겠다.

추가적인 꿀팁

  • console.log(response) 를 console.log(response['msg']) 로 바꿔주면 진짜 글자만 나옴
profile
Seong Hyeon Kim
삽질도 100번 하면 요령이 생긴다. 부족한 건 경험으로 채우는 백엔드 개발자
이전 포스트

항해99 3주차 개인필기

다음 포스트

항해99 4주차 개인필기 모음(2)

0개의 댓글