[4주차] Python Framework: Flask

 

안녕! 안녕!

필자의 진도는 어느새 4주차를 향해 가고 있다.

이것 저것 많이 배운 것 같기도 하고.. 별로 배운 게 없는 것 같기도 하고..

여러므로 아리송한 시점이라고 할 수 있다.

어쨌거나 그동안 배운 것들을 잠시 점검해볼까?

 

1주차 ~ 2주차: [HTML / CSS / JavaScript] 를 각각 제작하여 웹의 프론트 단을 구축하였다.

3주차: [Python / MongoDB] 를 활용하여 웹의 서버 단을 대충 만들어보았다.

 

그렇다면 4주차부터는 뭘 배우는걸까?

 

그.. 필자는 시작언어가 Java라고 했지?

그 녀석도 똑같이 클라이언트를 제작하고, 3계층 기법을 이용하여 서버단을 구축하였었다.

이때 필자가 의존했던 가장 강력한 우군이 있었는데..

그놈이 바로 Framework 였다.

자바에서는 Spring Boot 라는 거의 독보적인 프레임워크가 있었지..

 

파이썬 역시 마찬가지로 프레임워크가 존재한다.

바로 FLASK!

4주차에서는 요 플라스크라는 놈을 집중적으로 다뤄볼 것이다.

 

도구에 익숙해지기 위해 여러가지 예제를 풀어보겠지만..

스프링도 마찬가지이고, 플라스크 역시 전공서적 한 권 붙잡고 끈덕지게 파고 들어야 하는 녀석이다.

그렇기 때문에 필자는 개념 먼저 잡고 가는 과정이 선행되어야 한다고 생각했다.

 

보나마나 이번에도 글이 토나올 정도로 길어지겠지..

당연한 거 아니겠는가?

프레임워크는 학부에서도 한 학기 전공수업 과정이라니까?

그것을 얄팍하기 짝이 없는 게시물 하나로 퉁치려는 게 더 어불성설이지..

어쨌거나 이번주도 열심히 달려보자.

 

전방에 힘찬 함성 5초간.. 발사!

 

---

1. FLASK-Ⅰ: 서버를 만들어보자!

 

갑자기 뜬금없이 느껴지는가?

어느 언어로 프로그래밍에 입문을 하건 시작은 다 똑같을 것이다.

바로 해당 언어에 특화된 프레임워크를 활용하여 간단하게나마 서버 (Server)를 만들어 보는 것이다.

보통은 이것을 백-엔드 작업이라고 부르겠지..

 

그런데 왜 하필 프레임워크일까?

심지어 JetBrains에서 제공하는 IDE를 Pro 버전으로 쓰기 위해서는 쥰내 비싼데???

맞다. 진짜 토 나올 정도로 비싸다.

고작 프레임워크 하나 쓰겠다고 1년에 몇 십만원씩 양이 (洋異) 놈들에게 갖다 바치라는 것은!

바로 나라를 팔아먹는 이적 행위일지니..!

척화비 In My Heart!!!

 

...

 

농담이다.

이러니까 맨날 글이 쓸 데 없이 늘어지지.. ㅡㅡ

지금 필자는 수업에서 제공하는 수강 코드를 가지고 Pro 버전을 4달 짜리로 끊어놨지만..

그 기간이 지나면 필자는 양이놈들에게 나라를 가져다 팔아먹던지!

그게 아니라면 JetBrains 계정을 무수히 만들어 꼼수를 써가면서까지!

그 비싼 IDE를 계속 쓸 수 밖에 없는 몸이 되어버렸다..

모르고 있었다면 별 수 없는데.. 그 기술적 이기에 마개조 당해버렸기 때문이다.

 

필자 이 개새끼 또 개소리를 장황하게 늘어놓는데? 할 수도 있겠지만..

그만큼 프레임워크가 너무너무너무너무 편리하고 유용함을 강조하고 싶어서이다.

플라스크는 이제 간신히 걸음마를 떼는 과정이지만

자바 스프링 부트로는 이미 진즉에 로컬 서버를 구축하여, 도메인으로까지 배포하는 과정까지 다 끝낸 바가 있다.

그래서 더더욱 그 문명의 이기 앞에 몸서리 칠 수밖에 없는 것이다.

 

우리 한 번 뇌를 비우고 상상해보자.

어떠한 방식으로든 맥도날드 서비스를 이용해본 적이 있지?

매장방문이 가장 일반적일테고..

맥 딜리버리도 늘상 이용하는 서비스일 것이다.

 

좀 더 안쪽으로 들어가보자.

오늘도 맛있게 먹으면 0칼로리라고 아가리를 터는 손님들이 홀에 한 가득이다.

조금만 더 안쪽으로 와보면 카운터 예쁜 알바생 눈나가 생긋! 하고 웃으며 반겨주고 있다.

상하이 스파이시 치킨버거 콤보세트 같은 초wwww 인싸메뉴는 엄두도 못내는..

필자같은 찐따들을 위해 구비된 키오스크도 홀 구석탱이에 짱박혀 있다.

 

더.. 더.. 심연 속으로 들어가보자.

이 쪄죽을 날씨에 정신없이 바쁘게 돌아가는 주방이 있다.

어떤 분들은 빵을 삶고 있고

또 어떤 분들은 열심히 페티를 굽고 있다.

어어? 점마는 왜 홀로 나갈 감튀를 지가 다 쳐먹고 있노?

돌아버린거냐?

 

...

 

우리는 이제부터 저 주방을 만들어 볼 것이다.

 

호에에에에에에에???????

 

주방을 만들거라고.. ㅡㅡ

 

애초에 백엔드 개발자로 밥 벌어먹도록 마음먹었으면 각오한 일 아니야?

 

하지만 너무 벌써부터 학을 띌 필요는 없다.

누가 댁보고 소를 키워오라고 했음?

아님 양상추를 재배 해오라고 했나?

조리도구를 최고급으로 맞춰오라고 했나?

 

프레임워크는 그 모든 제반사항을 전부 해결 해준다.

 

자바에서는 스프링 부트, 파이썬에서는 플라스크.

이놈들만 있으면 우리들이 소를 키울 이유도

양상추를 재배할 이유도

조리도구를 최고급으로 구비할 이유가 하등 없다.

 

다 알아서 준비 해주니까!

 

그게 바로 프레임워크이다.

이해 확실하게 되지?

그래서 필자는 백엔드가 너무너무 재밌다.

프론트엔드 설명할 때랑은 글에서 풍기는 성의부터 다르게 느껴지지 않는가?

 

사실 여기까지가 서론이다.

???????????

서론이 여기서 끝났다고..

본론은 진짜 뭐 없어.

파이참에서 Flask를 임포트 해주면 끝이야.

 

 

바로 이렇게 말이다.

우리는 방금 주방 세팅을 완벽하게 끝내놓은 것이다.

 

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return '해병 유니버스에 온 것을 환영한다, 아쎄이!'

@app.route('/myPage')
def myPage():
   return '앆!! 전우애로 귀신까지 때려잡던 앙증맞은 그 날이여!'

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

 

그리고 이딴 식으로 일을 시작할 수도 있겠지.

 

 

주문하신 군데리아 세트메뉴 나왔습니다!

 

 

해병짜장 시킨 놈 누구야.. ㅡㅡ

 

 

이렇게 내용을 끝내버렸으면?

필자나.. 혹시 이 글을 읽을지도 모를 독자들이나..

남는 게 뭐가 있겠나?

적어도 이번 시간을 통해 프레임워크라는 개념 하나는 확실히 잡지 않았는가?

 

필자가 추구하는 엔지니어의 상이 바로 이렇다.

무엇이든 확실하게 짚고 넘어가는 것

처음에는 조금 고단할지 모르지만, 나중 가서는 가장 여유가 넘치는 팀

그 의지를 이 블로그에 담아서 올리는 것이다.

 

자! 아직 갈 길이 멀다.

우리는 이제 플라스크의 맛만 조금 본 것 뿐이다.

미리 독자 여러분의 명복을 기원한다..

 

---

2. FLASK-Ⅱ: HTML Request

 

 

필자가 미리 만들어놓은 HTML 화면이다.

 

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=5000,debug=True)

 

아직까지 큰 의미는 없지만 요 놈이 해당 웹 페이지의 실행파일 (*.exe) 같은 소스코드다.

 

분명 제목을 HTML Request 라고 했지?

HTML을 요청 (Request)했다는 뜻이다.

어디로 요청을 했는데?

우선은 Local Host 서버에 요청을 했고..

그에 대한 응답으로 저런 요상망측한 클라이언트 화면이 응답 (Response)으로 되돌아 온 것이다.

 

로컬 호스트가 무엇인고? 하면..

내 컴퓨터에서만 읽고, 쓸 수 있는 내부 서버망이라고 생각하면 된다.

즉, 여러분이 아무리 http://Localhost:5000 을 타고 들어오려고 한들..

요청에 대한 응답으로 클라이언트 화면을 보여줄 수는 없는 것이다.

왜? 나는 아직 저 페이지를 도메인으로 배포하지 않았으니까.

 

중요한 것은 요청과 그에 대한 응답처리이다.

서버에서 요청을 하면 클라이언트에서 응답해주는..

그런 일련의 약속을 우리는 API라고 한다.

이 API를 다뤄보기 위한 사전 작업으로 아무 의미 없는 HTML 화면을 시험삼아 띄워본 것이다.

 

---

3. FLASK-Ⅲ: Handling API Process

 

이제 본격적으로 API를 다뤄보도록 하자.

API는 어렵게 생각하면 어렵고, 쉽게 생각하면 쉽다.

위에서 API 서버와 클라이언트 간 약속.. 이라고 언급한 바가 있지?

서버에서 Request를 날리면 클라이언트에서 Response를 돌려보낸다!

필자는 이 정도면 충분히 이해가 되서 걍 넘어갔는데..

독자들 중에서는 이마저도 도통 뭔 소리인지 모르는 분들이 왜 없겠는가?

 

이번에도 맥도날드로 비유해보자.

오늘도 맛있게 먹으면 0칼로리라고 부르짖는 아가리어터는 치즈버거 세트가 먹고 싶다.

마침 필자같은 찐따들을 위해 키오스크가 준비되어 있네?

어렵지 않게 치즈버거 세트를 주문 (요청) 했다.

한 10분 정도 기다리니까 '치즈버거 세트 주문하신 분~!' 하면서 나를 찾는 소리가 들린다.

천천히 호흡을 가다듬으며 카운터로 다가갔고..

알바생 눈나는 나에게 준비된 메뉴를 전달 (응답) 해줬다.

이제 인적이 드문 구석탱귀로 자리를 잡고 치즈버거 세트를 조지면 된다.

아.. 오늘도 한 건 했다.

 

이 일련의 과정이 바로 API이다.

주방의 존재는 우선 차치해라.

손님 입장에서 주방은 알 바 아니다.

 

비유를 통해 이해를 충분히 도왔으니 좀 더 깊게 들어가보록 하자.

API는 다음과 같이 크게 두 영역으로 구분된다.

 

1) doGet

• READ (조회)
• /api/poducts?query='paimon'

 

2) doPost

• CREATE (생성) / UPDATE (수정) / DELETE (삭제)
• {'key': 'id', 'value': 'sexy_elf_queen'}

 

어려울 거 없다.

API는 무조건 저 형식을 따른다.

그것이 서버와 클라이언트 간의 약속이니까!

 

우선은 이 정도 개념만 숙지하고 넘어가자.

더 깊이 파고들면 갑자기 헷갈리기 시작한다.

필자도 좀 전까지 소스코드를 만지작 거리다가 걍 싹 다 지워버렸다.

어짜피 예제를 다루면서 숙달하는 시간이 있을테니..

괜히 머리를 복잡하게 만들지 말자!

 

그래도 혹시 모르는 변태들을 위해 소스코드를 주석과 함께 달아놓겠다.

이해가 되신 분들은 이 앞의 내용을 다룰 때 한결 수월할 것이다.

 

* Serving Flask app 'app' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on all addresses (0.0.0.0)
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on http://127.0.0.1:5000
 * Running on http://172.30.1.2:5000 (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 798-957-314

1) Run Flask Server

 

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   # title_give: 봄날은간다
   print(title_receive)
   # Print out '봄날은간다' on Flask Console window!
   return jsonify({'result':'success', 'msg': '주문하신 해병짜장 나왔습니다!'})
   # 데이터를 JSON화 시켜서 ajax로 리턴!

2) doPost Request to Client (HTML)

 

head>
    <meta charset="UTF-8">
    <title>해병 유니버스</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function hey() {
            $.ajax({
                type: "POST",
                url: "/test",
                data: {title_give: '봄날은간다'},
                // title_give 값(String)을 app server로 전송
                success: function (response) {
                    console.log(response['msg'])
                    // JSON화 되어서 return 받은 데이터를 크롬 콘솔창에 출력!
                }
            })
        }
    </script>
</head>
<body>
<h1>해병대 자원입대를 환영한다, 아쎄이!</h1>
<button onclick="hey()">전우애 실행 버튼</button>
</body>

3) Response

 

 

해병 짜장 하나 주세요!!!

 

 

앆!! 주문하신 해병짜장 하나 나왔습니다!!!

 

---

우선 4주차 개발일지에 관한 내용은 여기에서 끊도록 하겠다.

예제까지 밀어넣으면 오히려 가독성이 떨어질까 우려가 되서 그렇다.

4가지 정도의 예제를 앞으로 필자와 함께 만들어볼텐데..

코드리뷰에 따로 포스팅 하는 것이 좋을 것 같다.

개발일지는 개념 정도만 참고하는 수준으로 알고 넘어가면 좋겠다.

 

이상 긴 글 봐주셔서 고맙다.

다음 5주차에 뵙도록 하지..