[패스트캠퍼스] 웹 개발 강의(Flask)

국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다.

---

파이썬으로 웹개발을 시작할 수 있는 프레임워크는 Flask 또는 장고(Django)가 있다.

그중에 Flask(Micro Framework)를 사용해 본다.

• 가볍고 빠르고 쉽게 접근 가능하다.
• 라우팅을 직관적으로 쉽게 할 수 있다.
• data를 html 코드에 렌더링 하는데 유용하다.

 

아래에서 설명하는 대로 연습해 본다.

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

빠르게 시작하기 — Flask 0.11-dev documentation

 

Flask 설치

pip3 install flask

 

응답을 만드는 방법 2가지

1. render_template은 html 파일을 렌더링 해주는 함수(html 파일을 응답해 줌)
   1. 루트에 templates 폴더를 만들어서 html 파일을 생성한다. Flask에서 정의해 놓은 이름이므로 오타가 나지 않도록 주의하자
   2. 그리고 그 폴더 안에 index.html 파일을 만들어서 레이아웃을 만든다.
   3. 파이썬 파일에서 아래와 같이 render_template 함수로 hello_wordld.html을 적어주면, html 렌더링을 해준다.
2. jsonify는 데이터 형식을 json형식의 파일로 변환해주는 함수(json 데이터를 응답해 줌)
   1. jsonify(오브젝트나 딕셔너리와 같은 객체) 이렇게 해주면 json 형식으로 변환해서 응답해 준다.

from flask import Flask, render_template, jsonify

app = Flask(__name__)

@app.route('/')
def hello_world(): # define의 약자이고 함수를 만들 때 사용한다
    return render_template('hello_world.html')

@app.route('/fs')
def fs():
    res = []
    for i in range(10):
        res.append(
            {"title": str(i) + " title"}
        )
    return jsonify(res)

 if __name__ == '__main__':
    app.run('localhost', port=5001)

기본 포트는 5000번 포트로 열면 403 에러가 나서 5001번 포트를 지정해 주었다.

 

그리고 css, 혹은 js 파일 등은 static 폴더를 만들어서 넣어주면 된다. 이것도 Flask에서 정의해 놓은 이름이기 때문에 오타가 없도록 주의하자

 

 

flask-pymongo 설치

POST 작성을 위해 mongodb를 유용하게 사용할 수 있는 패키지를 설치한다.

pip3 install flask-pymongo

from flask_pymongo import PyMongo
app = Flask(__name__)
app.config['MONGO_URI'] ='mongodb://localhost:27017/local' # local DB 사용을 위한 연결
mongo = PyMongo(app)

// 아래와 같이 사용하여 쉽게 db에서 내용을 찾고, 가지고 올 수 있다
// mongo.db['디비명'].find()
// mongo.db['디비명'].insert_one({})

 

눈 내리는 효과

눈 내리를 javascript 효과를 만든 코드를 활용하여 적용한다.

https://github.com/hyperstown/pure-snow.js

GitHub - hyperstown/pure-snow.js: Snowfall effect written in pure JavaScript. No additional libraries, no dependencies. Works in

js 파일과 css 파일, 그리고 index.html에 사용한 부분을 확인하고 똑같이 적용해 준다.

https://github.com/hyperstown/pure-snow.js/blob/master/pure-snow.js

GitHub - hyperstown/pure-snow.js: Snowfall effect written in pure JavaScript. No additional libraries, no dependencies. Works in

 

다음 map 쉽게 적용하기

다음 지도에서 적용할 곳을 검색한 후 HTML 태그 복사하여 그대로 사용하면 된다.

 

이미지 업로드 기능 적용하기

먼저, 파일 전달을 위해 form에 enctype = "multipart/form-data"로 변경해 준다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype

HTMLFormElement: enctype property - Web APIs | MDN

input type의 file을 만들고 전달한다.

import os # 경로를 표현하기 위해 사용하는 패키지

...

# 파일 저장
fileinfo = request.files['image']
filepath = os.path.dirname(os.path.abspath(__file__))
filepath = os.path.join(filepath, 'static')
fileinfo.save(os.path.join(filepath, fileinfo.filename))

...
# db에 저장
product_db.insert_one({
	'image': fileinfo.filename
})

...

저장이 됐으면 리스트에도 출력하도록 추가

이미지가 없을 수도 있으니 if문으로 예외처리도 한다.

[강의 스크린샷]

---

그 외 사용한 라이브러리

우편번호 서비스(다음 카카오)

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

이미지 슬라이더

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

아이콘 사용처

https://pictogrammers.com/library/mdi/

Material Design Icons - Icon Library - Pictogrammers

WYSIWYG

https://quilljs.com/

Quill - Your powerful rich text editor