Ch 02 데이터 베이스를 이용한 앱만들기

 

2.2 앱 실행하기: Blueprint의 이용

  1. CRUD- Create(데이터 작성) Read Update Delete
    1. Blueprint?
      1. 앱을 분할하기 위한 플라스크 기능 ⇒ 앱의 규모가 커져도 간결한 상태유지
      1. Blueprint 단위로 템플릿/정적 파일을 나눌 수 있다.
      1. Blueprint 인수 설명인수 테이블 (page 92)
      1. Blueprint 객체 생성예
        # Blueprint 객체 생성 예
        sample = Blueprint(
            __name__,
            "sample",  # Blueprint 앱 이름
            static_folder="static",  # Blueprint 앱의 static 파일용 폴더 디렉터리(폴더 위치) ex styl.css
            template_folder="templates",  # Blueprint 앱의 템플릿 파일 폴더 디렉터리, xx.html 과 연결하기 위함
            url_prefix="/sample",  # Blueprint앱의 모든 URL의 맨앞에 추가하여 다른 앱의 경로와 구별 하기 위한 경로
            subdomain="example",  # Blueprint를 서브 도매인으로 하는 경우에 지정
        )
        
        # Blueprint 객체 등록
        app.register_blueprint(sample, url_prefix="/sample", subdomain="example")
    1. CRUD 모듈 앱 작성 예( 90page)
      1. from apps.crud import views as crud_views
        1. 현재 만든 apps 라는 폴더에서 curd 폴더에 있는 views.py 라는 파일을 호출
    1. 엔드포인트 만들기
      1. apps/crud/view.py 를 작성하고 여기에 crud 앱의 엔드 포인트 만
        from flask import Blueprint,  render_template   ------------------------------------- Q 
        #  Blueprint로 crud 앱을 생성한다
        		crud =  Blueprint(
        		"crud",
        		template_folder="templates",
        		static_folder="static".
        )
        #  index 엔드포인트를 작성하고 index.html을     반환한다
        @crud.route("/") 
        def index():
        	return render_template("crud/index.html")

2.3 SQLAlchemy 설정하기

  1. SQLAlchemy? O/R or ORM (Object-Relational Mapping)
    1. SQLAlchemy 가 python 코드를 SQL로 변환
      1. SQL코드를 쓰지 않고도 Python을 이용하여서 데이터베이스 조작가능.
  1. 확장 기능 설치
    1. pip install flask-sqlalchemy
    1. pip install flask-migrate
  1. 사용법 코드 ⇒ p. 100

2.4 데이터 베이스 조작

  1. model.py 에 유저 모델을 정의 (p.102) 하고 마이그레이션 함으로써 DB에 유저테이블 작성 가능
    1. 모델을 사용하기 위해서 apps/crud/__init__.py
      1. models.py 선언 import apps.crud.models
  1. flask db 관련 명령어를 파워셀에 입력하여서 데이터베이스 초기화 및 마이그레션하기
    1. flask db init
      1. 주소를 적는거라고 생각했는데 왜 숫자를 요구할까?
        File "E:\_CosmosMedic\스터디\Flask\venv\lib\site-packages\sqlalchemy\engine\url.py", line 893, in _parse_url
            components["port"] = int(components["port"])
        ValueError: invalid literal for int() with base 10: '\\_CosmosMedic\\스터디\\Flask\\local.sqlite'
      1. 해 ⇒ A code in page 100 수정 필요
        # 앱의 config 설정
        
        # app.config.from_mapping(
        #     SECRET_KEY="2AZSMss3p5QPbcY2hBsJ",
        #     SQLALCHEMY_DATABASE_URI=f"sqlite://{Path(__file__).parent.parent / 'local.sqlite'}",
        #     SQLALCHEMY_TRACK_MODIFICATIONS=False,
        # )
        
        import os 
        basedir = os.path.abspath(os.path.dirname(__file__))
        app.config["SECRET_KEY"] = "2AZSMss3p5QPbcY2hBsJ"
        app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///" + os.path.join(
            basedir, "database.sqlite "
        )
        app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
    1. flask db migrate 실행시 models.py 에 정의 된 테이블 명(users) 및 칼럼의 정보가 생성
    1. flask db upgrade 실행시 생성된 users 테이블 생성
  1. 생성된 데이터베이스는 vscode로 확인 가능
    1. VScode 에서 SQLite SQLite Viewer 설치
    1. local.sqlite 에서 확인가능
  1. SQLAIchenu를 사용한 기본적인 데이터 조작 방법은 p.107 참조

2.5 데이터베이스 이용한 crud 앱 만들기

  1. pip install flask-wtf <유효성 검증이나 CSRF에 대 처하기 위한 폼을 작성하는 플라스크 확장>
  1. 실습내용
    1. 사용자를 신규 장성하기 (p. 117)
    1. 사용자 일람 표시하기 (p. 125)
    1. 사용자 편집하기 (p. 127)
    1. 사용자 삭제하기 (p. 131)

2.6 템플릿의 공통화 상속

  1. jinja2 템플릿 엔진에는 HTML 공통의 템플릿 파일을 상속하는 기능소유
    1. base.html 을 생성하여서 HTML 파일에 중복되는 것을 작성하기 (p.133)
      <!DOCTYPE html> 
      <html lang="ko">
      	<head>
      		<meta  charset="UTF-8"  />
      		<!-- title을 상속처에서 구현한다 -->
      		<title>{% block title %}{%  endblock %}</title>
      		<link rel="stylesheet" href="{{ url_for('crud.static', filename='style.css') }}" />
      	</head> 
      
      	<body>
      		<!-- content를 상속처에서 구현한다 -->
      		{%  block content %}{%  endblock %}
      		<!--  상속처에 개별의 구현이 필요하면 여러 개를 사용 -->
      		<!-- 예시 -->
      		 <table> {%  block table%} {% endblock %} </table>
      	</body> 
      </html>
    1. base.html 사용법
      <!-- base.html 상속 해서  -->
      {%  extends "crud/base.html" %}
      {%  block title %}사용자의 일람{%  endblock %}
      
      <!-- body -->
      {% block content %}
      	<h2> base.html 사용법</h2>
      	.....
      	{%block table} 
      		<tr>
      			<th> ID </th> 
      			<th>사용자 명 </th> 
      			<th>메일주소</th>
      		</tr>
      {%  endblock %}
      

2.7 config 설정하기

  1. 앱 개발환경 등 각각의 환경에 설정해야 하는 config의 값이 환경마다 다르므로 직접기입하지 않고 config를 읽어들어버리는 방법을 학습
  1. 설정 방식
    1. from_object를 사용하는 방법 (p. 137)
    1. from_mapping을 사용하는 방법 (p. 139)
    1. from_envvar를 사용하는 방법 ( p. 140)
    1. from_pyfile을 사용하는 방법 (p. 141)
    1. from_file을 사용하는 방법 (p. 142)

 

' > Python Flask Web App 개발입문' 카테고리의 다른 글

Part 0 파이썬 플라스크 소개  (3) 2023.11.21
책관련 자료  (1) 2023.11.21

Part 0 파이썬 플라스크 소개

 

  1. 플라스와 장고 비교
    1. https://yscho03.tistory.com/109
    1. Flask(플라스크)
      1. 마이크로 웹 프레임워크
      1. 구축사례: werkzeug , jinja , MarkupSafe , ItsDangerous
    1. Django(장고)
      1. 풀스택 프레임워크
      1. 구축사례: Instagram, Mozilla, Nextdoor 및 clubhouse와 같은 일부 대형 웹사이트
  1. 환경 구축
    1. Anaconda Install
      1. Windows ⇒ anaconda 홈페이지에서 다운 후 설치
      1. Mac
        1. m1 → 홈페이지에서 다운 후 설치
        1. m2 → Anaconda에서 아직 지원을 하지 않음.
          1. homebrew 설치
            /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
            설치가 완료되면 마직막 안내 메세지 꼭! 확인해서 따라하기.
          1. Anaconda 설치
            brew install --cask anaconda
          1. Terminal에서 conda 명령어가 오류가 나면conda path 지정
            export PATH="/opt/homebrew/anaconda3/bin:$PATH"
          1. 터미널에서 바로 python 명령어가 가능하도록 conda 설정을 초기화zsh 쉘을 사용하고 있으므로 zsh 입력 쉘을 입력
            conda init zsh
            터미널을 다시 시작하면 앞에 (base) 가 뜨는 것을 확인 가능
          2.  
          3. 쉘 확인 방법은 echo $SHELL

    1. 가상환경 구축
      1. 배울때 마다 책이나 강의에서 요구하는 파이썬 버전이 다르므로 Anaconda 를 설치해서 버전에 맞는 가상환경 구축하는 것도 편리함.
        1. Anaconda Navigator 실행
          1. Environments →+create→ 가상환경명 및 버전 선택
          1. 여기서 생성된 가상환경명을 선택 → Not installed 선택 → promp 검색하여 설치 하면 선택한 파이썬 버전이 적용되어 있는 prompt 생성됨 (mac 에서는 적용 안됨)
        1. 터미널(커맨드) 창에서 가상환경 구축하는 법
          conda create --name 가상환경명 python=파이썬버전
          # 가상환경 실행
          conda activate 가상환경명
    1. 가상환경 구축
      1. Window powershell
      1. PS C:\> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
      1. 원하는 위치에 폴더를 생성 → powershell open (터미널에서 열기)
      1. python -m venv 가상환경이름
      1. Anaconda 로 원하는 파이썬 버전을 생성했을 경우
        1. anaconda prompt 를 실행해서 원하는 폴더로 이동 후
          1. python -m venv 가상환경이름
      1. (가상환경 실행) venv\Scripts\Activate.ps1
        1. 가상환경폴더이름\Scripts\Activate.ps1
      1. (가상환경에 플라스크 설치 )(venv) PS > pip install flask
    1. VScode
      1. 홈페이지에서 컴퓨터 환경에 맞게 설치
      1. 설치 후 파이썬 확장기능 설치
      1. 터미널/쉘 에서 코드 체커및 포메터 라이브러리 설치
        pip install flake8 black isort mypy
        1. 설치 후 톱니바퀴 아이콘에서 설정을 클릭해서 검색 창에 아래에 있는 것을 입력해서 vscode 환경 설정 (page 28)
          1. flake8설정 - PEP8 에 따른 작성법의 코드인지 체크
            1. python > Linting:pylint enable 체크해제
            1. Python > Linting: Flake8 Enabled 체크
              1. 1행의 최대 문자수 기본값은 Hake8이 79개, black이 88개
                1. Flake8 Args라고 검색 창에 입력
                1. -max-line-leng나1=88 추가
          1. black 설정- PEP8 에 따른 작성법으로 코드 자동으로 완성
            1. Python > Formatting: Provider → 포메터를 black 으로 설정
            1. Editor: Format On Save
              1. 파일 저장시 자동으로 포맷기능 활성화
          1. isort 설정하기 - import 문을 PEP8에 맞게 자동으로 정렬
            1. Editor: Code Actions On Save
              1. Edit xxx.json 클릭 아래와 같이 수정
                "editor.codeActionsOnSave": {
                        "source.organizeImports": true
                    }
          1. mypt 설정
          1. 최종 → .vscode 에 있는 settings.json이 아래와 같게 됨
            {
            	"python.linting.flake8Enabled": true, 
            	"python.linting.flake8Args": [
            	"--max-line-length=88" ],
            	"python.formatting.provider": "black", 
            	"editor.formatOnSave": true, "editor.codeActionsOnSave": {
            	"source.organizelmports": true },
            	"python.linting.mypyEnabled": true
            }
          1. 혹시나 깃허브를 이용해서 버전 관리를 하면 커밋 대상에서 제외하기 위해서 아래를 입력
            curl -L http://www.gitignore.io/api/python,flask,visualstudiocode > .gitignore

 

<2023.04 월에 노션에 정리해둔 자료를 티스토리로 옮김 > 

 

예제 코드및 다운로드 링크

  1. 부록 데이터 다운로드 링크
  2. 역자 운영 네이버 카페
  3. Github: https://github.com/ml-flaskbook/flaskbook

참고할 만한 사이트

https://flask.palletsprojects.com/en/2.2.x/quickstart/#

 

Quickstart — Flask Documentation (2.2.x)

Quickstart Eager to get started? This page gives a good introduction to Flask. Follow Installation to set up a project and install Flask first. A Minimal Application A minimal Flask application looks something like this: from flask import Flask app = Flask

flask.palletsprojects.com

https://flask-docs-kr.readthedocs.io/ko/latest/testing.html

 

Flask 어플리케이션 테스트하기 — Flask 0.11-dev documentation

이 문구의 기원을 정확하게 알수는 없지만, 이것은 진실에 가깝다. 테스트되지 않은 어플리케이션은들은 기존 코드의 개선을 어렵게 하며 프로그램 개발자들을 심한 편집증환자로 만들어 버린

flask-docs-kr.readthedocs.io

 

더 멀리, 라우터

네트워크의 중계자, 라우터

LAN은 가정집이나 회사같은 소규모 네트워크이고, 이것이 모인 것을  WAN

점점 더 규모가 커지면서 흩어진 LAN을 연결하고 LAN으로 데이터가 올바르게 전달할 수 있게 돕는 중간 장치가 필요

그래서 탄생 한 것이 라우터(Router)

 

Router : 데이터가 원하는 목적지로 원할하게 도착할 수 있도록 적절한 통신 경로를 안내하는 장치

라우터의 종류 - 가정에 있는 공유기, 인터넷 제공 업체에서 관리하는 라우터 장치 등등

라우팅 테이블로 최적의 경로 찾기

라우터는 가장 빠르게 이동할 수 있는 경로를 찾아 안내

어떻게??

라우팅 테이블(Routing table)

최종 목적지의  IP주소와 목적지에 도달하기 위해 경유해야 할 인근 라우터의 정보가 담긴 테이블 <라우팅 테이블> 을 이용.

가장 빠른길을 찾다 보면 데이터가 네트워크 속에서 무한 루프가 발생할 수 도있다.

이를 방지하기 위해서 TTL(time to live) 라는 유효기간을 각 데이터마다 할당

 

진짜 고유번호, MAC 주소

MAC (media aceess control) 주소는  네트워크를 사용하는 기기라면 모두 가지고 있는 주소

이 주소는 장치들을 서로 인식하고 식별하기 위해 사용

 

MAC 주소의 구조 (8 비트)

a1:b2:c3:d4:e5:f6

a1:b2:c3 = 제조사 식별자

d4:e5:f6 = 실제 고유번호

 

 

 

HTTP 는 상태가 필요해

상태 프로토콜 (state protocol) - 상태를 저장하는 프로토콜 : TCP

무상태 프로토콜 (stateless protocol) - 상태를 저장하지 않는 프로토콜: IP, UDP, HTTP

  • 장점: 상태를 어떻게 저장할지 고려할 필요가 없어서 서버를 단순하게 설계가능
  • 단점: 요청마다 추가 정보를 전달

HTTP 외부에 따로 저장소를 두어 그곳에서 상태를 저장할 수 있도록 관리하고, 필요에 맞게 서버에 상탤르 전달

--- HTTP 단점 보완

브라우저 안의 작은 조각, 쿠키

데이터를 저장하는 방식 중 하나 인 쿠키

 

브라우저에 데이터를 저장하는 이유

  신속성과 서버 비용절감

 

 

숨은 작은 조각, 쿠키

세션 쿠키(session cookie) : 브라우저가 종료될때 함께 사라짐

영구 쿠키 (persistant cookie) : 만료 기간이 존대, 해당 기간이 지나면 삭제

 

쿠키의 단점

보안에 취약

 

퍼스트 파티 쿠키 - 방문한 웹사이트에서 직접 발행한 쿠키

서드 파티 쿠키  - 제 삼자가 발행 한 쿠키

 

개징정보 문제

 쇼핑한 내용과 유사한 광고가 뜨는 모습 <- 서트 파티 쿠키 때문

 

쿠키를 넘어서, 웹 스토리지와 IndexdedDB

더 많이 더 빠르게, 웹 스토리지

 

<그림 첨부>

웹 스토리지는 데이터의 유지시간에 따라 두 가지로 분류

  • 로컬 스토리지 : 자동 로그인처럼 지속해서 사용해야 하는 데이터
  • 세션 스토리지 : 일회성 정보처럼 잠깐만 필요한 데이터

로컬 스토리지에 데이터를 추가하기 위해서는  → localStorage.setItem('key', 'value');

특정 키의 값만 삭제 → removeItem('key')

웹 페이지내 모든 로컬 스토리지 값을 삭제 → clear()

 

브라우저 안의 데이터 베이스, IndexedDB

 

  • 브라우저에 내장된 데이터베이스 이며, 웹 스토리지보다 더 강력하게 데이터를 저장하는 방법
  • 많은 양의 데이터를 체계적으로 관리할 수 있게 해줌 → 물류창고 같은 느낌
  • 클라이언트 단에서 자바스크립트로 조작 가능
  • 웹 스토리지나 쿠키는 키값을 알아야 값을 찾는 것이 가능하지만, IndexedDB 는 cursor라는 개념을 이용하여 키를 몰라도 찾는 것이 가능

세션으로 안전하게 저장하기

브라우저에서 데이터를 저장하면 다른사람들이 쉽게 접근할 수 있다는 문제점이 있다.

 

서버에 데이터를 저장하는 세션

  • 사용자 정보를 서버 측에 저장하는 방법을 말할때도 세션(Session)이라고 한다.
  • 서버에 일시적으로 데이터를 저장할 수 있는 기술 
  • 세션 정보를 저장하는 장소는 쿠키, 세션은 쿠키에 기반한 관계
  • 클라이언트에 세션 정보를 저장하는 과정에서 쿠키사용

??? 쿠키는 실제 데이터를 클라이언트에 저장, 세션은 서버에 저장

 

 

 

 

+ Recent posts