1) 학습한 내용

백엔드

백엔드는 웹사이트나 웹 애플리케이션 또는 모바일 솔루션의 프로세스와 관련된 서버 측(Server-side)과 데이터베이스를 관리해 주는 기술로, 프론트엔드가 눈에 직접 보이는 영역이었다면, 백엔드는 눈에 보이지 않는 서버에서 작용하는 기술을 다룬다. 그 중에서 파이썬 Flask에 한해서 적기로 한다.

프론트 엔드와 백엔드의 차이

프론트엔드는 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(User Interface, UI)를 말한다면, 백엔드는 웹 애플리케이션의 사용자가 보지 못하는 영역인 서버나 데이터베이스를 관리하는 기술이다.

파이썬 Flask

플라스크(Flask)는 2004년 오스트리아의 오픈소스 개발자 아르민 로나허(Armin Ronacher)가 만든 웹 프레임워크다. 플라스크는 아르민 로나허가 만우절에 장난삼아 던진 아이디어였는데 사람들의 관심이 높아져 서비스로 만들어졌다. 현재, 플라스크는 장고(Django)와 더불어 파이썬 웹 프레임워크의 양대 산맥으로 자리매김하고 있다.

Flask의 특징은 자유도가 높은 프레임워크다. 프레임워크는 대부분 규칙이 복잡하고 개발자는 그 규칙을 반드시 따라야 한다. 하지만 플라스크에는 최소한의 규칙만 있으므로 개발의 자유도는 다른 프레임워크보다 높다.

간단히 말하자면, Flask는 웹페이지를 찍어내는 공장이다.

설치법

pip install Flask

위의 소스코드를 비주얼 스튜디오 코드 터미널에 입력하면 된다.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"
    
app.run()

flask를 실행시키는 코드다. 그 다음에는 flask 코드가 있는 문서를 실행시킬 때, 내 컴퓨터를 기준으로

PS D:\zakumann\zakumann\Python> python 10.flask.py

를 입력했었다.

glitch.com에서 flask를 테스트하는 코너에서 다음과 같은 코드를 입력했었다.

from flask import Flask

app = Flask(__name__)

topics = [
  {"id":1, "title":"HTML", "body":"html is ...."},
  {"id":2, "title":"CSS", "body":"css is ...."},
  {"id":3, "title":"JS", "body":"Javascript is ...."},
]

def template(content):
    liTags = ''
    for topic in topics:
        liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
    return f'''
  <html>
    <body>
      <h1><a href="/">WEB</a></h1>
      <ol>
        {liTags}
      </ol>
      {content}
       <ul>
        <li><a href='/create/'>create</a></li>
    </body>
  </html>
  '''
  
@app.route("/")
def index():
  return template(f'<h2>Welcome</h2>Hello, WEB!')

@app.route("/read/<int:id>/")
def read(id):
  title = ''
  body = ''
  for topic in topics:
    if topic['id'] == id:
      title = topic['title']
      body = topic['body']
      break;
  return template(f'<h2>{title}</h2>{body}')
  
@app.route('/create/')
def create():
  content='''
  <form action="/create/">
    <p><input type="text" name="title" placeholder="title"></p>
    <p><textarea placeholder="body"></textarea></P>
    <p><input type="submit" value="create"></p>
  </form>
  '''
  return template(content)

@app.route('/update/')
def update():
  return 'Update'

app.run()

이 코드는 flask를 실행하기 위해 사용된 코드로, 기본적인 홈페이지 구성을 만들때 사용된 것으로 참고용으로 쓰여진 것이다.

참고 자료

내용 추가 및 제거

어제 배웠던 Flask의 백엔드를 구현시켰다면 이번에는 글을 추가 및 삭제 시키는 기능을 구현해보았다.

topics = [
  {"id":1, "title":"HTML", "body":"HTML is ...."},
  {"id":2, "title":"CSS", "body":"CSS is ...."},
  {"id":3, "title":"JS", "body":"JS is ...."}
]
nextId = 4

어제 작성했던 코드 밑에 nextId =4 를 추가시켰는데, nextId는 밑에 작성할 nextId를 통해서 글을 작성한다.

@app.route('/create/')
def create():
  content = '''
    <form action="/create_process/" method="POST">
      <p><input type="text" name="title" placeholder="title"></p>
      <p><textarea name="body" placeholder="body"></textarea></p>
      <p><input type="submit" value="create"></p>
    </form>
  '''
  return template(content)

위의 코드는 글 내용을 추가시키는 코드로 이전에 작성했었던 template()로 연결되어 진다. /create/기능을 통해서 아래의 코드와 연동된다.

@app.route('/create_process/', methods=['POST'])
def create_process():
  global nextId
  title = request.form['title']
  body = request.form['body']
  newTopic = {"id":nextId, "title": title, "body": body}
  topics.append(newTopic)
  nextId = nextId + 1
  return redirect(f'/read/{nextId-1}/')

이 코드를 통해서 새로 작성된 글을 업로드시킬 수가 있으며, request.form을 통해서 이뤄지는데 여기서

from flask import Flask

를 작성했었는데 여기에서 request, redirect를 추가시킨다.

from flask import Flask, request, redirect

이를 추가시켜야만 비로서 새로운 글을 업로드 시킬 수가 있다.

다음으로, 작성했던 글을 삭제시키는 코드를 구현시키면 우선 이전에 작성했던 코드를 수정해야 할 필요가 있는데, 아래와 같이 코드를 수정하면 된다.

def template(content, id=None):

(중략)

def template(content, id=None):
  liTags = ''
  for topic in topics:
    liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
  return f'''
  <html>
    <body>
      <h1><a href="/">WEB</a></h1>
      <ol>
        {liTags}
      </ol>
      {content}
      <ul>
        <li><a href="/create/">create</a></li>
        <li>
          <form action="/delete/{id}/" method="POST">
            <input type="submit" value="delete">
          </form>
        </li>
      </ul>
    </body>
  </html>
  '''

위의 코드를 통해서 업로드 되었던 글을 지울 수 있는 코드가 구현되어졌다. 다음에는 실제로 글을 지울 수 있는 기능을 구현 시킬 차례다.

@app.route('/delete/<int:id>/', methods=['POST'])
def delete(id):
  for topic in topics:
    if topic['id'] == id:
      topics.remove(topic)
      break;
  return redirect('/')

DJango와 Flask와의 비교

이건 수업 바깥의 경우로 Django와 Flask도 똑같은 파이썬을 기반으로 하지만 차이점이 있다.

Django

django는 ORM (Object relational mapping) 기능이 내장되어있어 객체 관계 매핑이라고도 하며 데이터베이스 시스템과 데이터 모델 클래스를 연결하는 역할을 한다. 그리고, ORM을 이용해 다양한 데이터베이스를 지원하고 있으며, SQL 의존적인 코드를 벗어나 생산적인 코딩이 가능하게 되어 유지보수가 편하다. 그리고, django는 자동으로 관리자 화면을 구성해주는데 데이터베이스에 대한 관리 기능을 위하여 프로젝트를 시작하는 시점에 관리자 화면을 제공합니다. 이런 관리자 화면을 이용하여 web application에서 사용하는 데이터들을 쉽게 생성하거나 변경이 가능하다.

Flask

Flask는 Python의 Micro framework를 기반으로 단순하고 매우 가벼운 web framework로, URL 라우팅, Template, Cookie, Debugger 및 개발서버 등 기본 기능만을 제공한다. 그러기 때문에 django의 1/10밖에 안 되는 코드로 구현되어있으며, 직접 소스코드를 분석하여 내부적으로 일어나는지 여부를 확인할 수 있으며 권장되고 있다. Flask의 구조는 크게 WSGI용 Library인 Werkzeug와 HTML 렌더링 엔진인 Jinja2 template으로 구성되어있다. 즉, Flask는 기본 기능 제공에 다양한 확장 모듈을 이용할 수 있는 구조이다. 이 때문에, django에서는 특수한경우 내부 로직에서 어떠한 기능을 지원하지 않거나 장애가 발생했을 때 이를 해결하기위해 큰 비용이 들게되지만 Flask는 정해진 확장 모듈이 없기때문에 다양한 방법으로 해결이 가능하다.

Flask는 단 10줄도 안되는 코드로 웹 서버를 구동할 수 있다. 너무나도 간단해서, from flask import Flask 를 시작으로 서버를 시작하는 코드까지 10줄이 되지 않는다. 물론 그만큼 최소한의 패키지로 구성되어있기때문에 Hello World는 간단히 구현 되지만, 상용 웹 서버를 구현할때는 단순하지만은 않다. 왜냐하면, Flask에는 ORM (Object relational mapping) 기능이 제공되지 않기 때문에 개발자가 직접 SQLAlchemy 등 개발자에게 편하거나 익숙한 패키지를 설치하여 사용할 수 있다.

위에서 언급한대로 Flask는 최소한의 기능만을 제공해서 데이터 베이스 연결 외에도 양식 처리, 보안, 인증 등 모두 개발자가 직접 처리해주어야 한다.

즉, django에서는 탄탄한 framework 안에서 다른 설계 패턴으로 벗어날 수 없다는 점을 Flask에서는 직접 새로운 framework로 설계할 수 있다는 장점이 있지만 이제 막 파이썬 웹 프레임워크에 진입하는 입장에서는 신경써야할게 한두가지가 아니기때문에 최대 단점으로 다가올 수 있다.

출처

DJANGO 사용 서비스

Pinterest Engineering
Mozilla
Bitbucket
Udemy
The Onion
Disqus
Washington Post
NASA
Spotify
Instagram Engineering
National Geographic
The Guardian
JSFiddle

Flask 사용 서비스

Pinterest
Twilio

출처

2) 학습내용 중 어려웠던 점

flask는 리액트와 같은 프론트엔드가 아닌 서버와 관련된 백엔드이다. 그나마, 이번 수업은 백엔드에 대해서는 이런 것이 있다는 정도로 알려주는 차원이어서 잘만 따라하면 무난했다. 다만, 소스코드를 다루는 과정에서 오타가 나오는 경우가 있어서 개발자를 목표로 한다면 오타가 발생했을 때가 가장 골칫거리가 된다.

3) 해결방법

flask는 사용법이 홈페이지에 나와있는지라 거기에 나온 지시대로 행했다. 그리고, 강사가 보여준 소스코드를 참고해 가면서 따라했었다. 그리고, 비주얼 스튜디오 코드를 통해서 강사의 소스코드와 내 소스코드를 비교해 가면서 오타를 점검하는데 도움이 되었다. 이 비교는 '선택 항목 비교'라는 명령문으로 해결을 했다.

4) 학습소감

이번에는 프론트엔드가 아니라 백앤드에 관한 설명이다. 백엔드는 프론트 엔드와는 달리 서버에 관한 수업이다. 거기에다, 나는 프론트 엔드에 대한 독학은 해왔었지만 백엔드에 관한건 공부한 적이 없어서 이번 수업에 어려움을 겪었다. 그나마, 백엔드 관련 수업은 비주얼 스튜디오 코드의 기능과 강사의 소스코드 공개를 통해서 넘어갔었다. 만약에, 풀스택을 목표로 한다면 백엔드 또한 배워야 한다.

Author And Source

이 문제에 관하여(2022/03/30), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zakumann/20220330

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

2022/03/30