파이썬 플라스크로 배우는 웹프로그래밍 #1 (abcd foundation)

49
파이썬 플라스크로 배우는 웹프로그래밍 #1 ABCD Foundation 스노우키위, 한 성 일

Upload: -

Post on 23-Jun-2015

7.206 views

Category:

Software


3 download

DESCRIPTION

파이썬으로 코딩 기초를 배우고 플라스크로 웹서비스 개발을 배우는 과정을 다루고 있습니다. - 입문용 자료입니다. ABCD : http://www.abcds.kr/ Facebook Group : https://www.facebook.com/groups/562787713823026/ 한성일 : https://www.facebook.com/jamie.han.16 [email protected]

TRANSCRIPT

Page 1: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

파이썬����������� ������������������  플라스크로����������� ������������������  배우는����������� ������������������  웹프로그래밍����������� ������������������  #1����������� ������������������  

����������� ������������������   ����������� ������������������   ����������� ������������������   ����������� ������������������   ����������� ������������������   ����������� ������������������   ����������� ������������������   ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ABCD����������� ������������������  Foundation����������� ������������������  

스노우키위,����������� ������������������  한����������� ������������������  성����������� ������������������  일����������� ������������������  

Page 2: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

0. 프롤로그

Page 3: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

왜?•디자이너와의����������� ������������������  친분

•스타트업����������� ������������������  관계자들만����������� ������������������  관심을����������� ������������������  보임

•많아짐

Page 4: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

기존 스터디와 다른점

•개발����������� ������������������  프로젝트����������� ������������������  과정����������� ������������������  전체를����������� ������������������  본다.

•머리에����������� ������������������  쥐가남

•개발자����������� ������������������  체험����������� ������������������  (개발자와의����������� ������������������  대화����������� ������������������  능력����������� ������������������  향상)

Page 5: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

목표

•프로젝트����������� ������������������  전체를����������� ������������������  보기

•무조건����������� ������������������  만들기����������� ������������������  +����������� ������������������  서비스����������� ������������������  해보기

•마이크로����������� ������������������  프로필����������� ������������������  (커뮤니케이션����������� ������������������  가능한..)

Page 6: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

목표

• ����������� ������������������  혼자����������� ������������������  하는����������� ������������������  방법을����������� ������������������  배운다.����������� ������������������  

• ����������� ������������������  코딩을����������� ������������������  한다����������� ������������������  못한다는����������� ������������������  종이����������� ������������������  한장����������� ������������������  차이����������� ������������������  

• ����������� ������������������  못한다고����������� ������������������  생각하면����������� ������������������  절대����������� ������������������  못한다.����������� ������������������  

• ����������� ������������������  생각보다����������� ������������������  재미있다.����������� ������������������  

• ����������� ������������������  개발자도����������� ������������������  더듬더듬����������� ������������������  과정을����������� ������������������  거친다.����������� ������������������  

����������� ������������������   -����������� ������������������  You����������� ������������������  can����������� ������������������  do����������� ������������������  it!

Page 7: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

스터디 멤버들

•운영진����������� ������������������  소개����������� ������������������  

•자기소개

Page 8: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

1. 프로그램밍(코딩)이란?

Page 9: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

프로그래밍이란?

1. 컴퓨터에게 뭔가를 시키는 과정

2. 컴퓨터는 0 1 만 알아 먹음

3. 사람이 쓰는 언어를 컴퓨터가 알수 있도록 번역

Page 10: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

프로그래밍을 배워야 하는 이유는?

http://youtu.be/SESuctdE9vM

Page 11: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

2. 개념

Page 12: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

파이썬(Python) 이란?

•프로그래밍����������� ������������������  언어����������� ������������������  쉽고����������� ������������������  다방면에����������� ������������������  사용가능����������� ������������������  

•인터프리터����������� ������������������  언어����������� ������������������  

����������� ������������������   https://mirror.enha.kr/wiki/Python����������� ������������������  

•귀도����������� ������������������  반����������� ������������������  로섬(Guido����������� ������������������  van����������� ������������������  Rossum)����������� ������������������  

����������� ������������������   크리스마스����������� ������������������  

����������� ������������������   TV����������� ������������������  프로그램

Page 13: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

웹서비스 구조도

인터넷사용자 서버

데이터베이스

처리된 HTML

보고 싶다.

데이터

1

2

3

Page 14: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

개발환경

•서버에서의����������� ������������������  처리를����������� ������������������  배움����������� ������������������  

•로컬����������� ������������������  PC����������� ������������������  (노트북)에����������� ������������������  서버설치����������� ������������������  

•파이썬����������� ������������������  

•플라스크����������� ������������������  설치

Page 15: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

3. 파이썬 설치

Page 16: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

개발툴

• Brackets����������� ������������������  ����������� ������������������   에디터����������� ������������������  

����������� ������������������   http://brackets.io/

•그외����������� ������������������  (편리한)

사용 툴

Page 17: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

파이썬 + Flask 설치

1.����������� ������������������  파이썬����������� ������������������  다운로드����������� ������������������  

����������� ������������������   https://www.python.org/����������� ������������������  (파이썬����������� ������������������  공식)����������� ������������������  

����������� ������������������   꼭!����������� ������������������  Python����������� ������������������  2.7.8을����������� ������������������  받아야����������� ������������������  합니다.

Page 18: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

2.����������� ������������������  python-2.7.8.msi����������� ������������������  설치����������� ������������������  ����������� ������������������   C:\Python27����������� ������������������  경로에����������� ������������������  설치됨����������� ������������������  !3-1.����������� ������������������  setuptools����������� ������������������  설치����������� ������������������  (파이썬����������� ������������������  패키지����������� ������������������  관리툴)����������� ������������������  ����������� ������������������   https://pypi.python.org/pypi/setuptools/1.0#windows

파이썬 설치

3-2.����������� ������������������  다운로드����������� ������������������  파일����������� ������������������  압축해제����������� ������������������  

����������� ������������������   ez_setup.py����������� ������������������  더블클릭����������� ������������������  (커맨드창이����������� ������������������  뜨고����������� ������������������  주루룩..����������� ������������������  사라집니다.)

Page 19: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

4-1.����������� ������������������  환경변수����������� ������������������  설정

파이썬 설치

컴퓨터����������� ������������������  >����������� ������������������  마우스우클릭����������� ������������������  >����������� ������������������  속성 고급����������� ������������������  시스템����������� ������������������  설정 환경변수

Page 20: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

4-2.����������� ������������������  환경변수����������� ������������������  설정����������� ������������������  

����������� ������������������   기존����������� ������������������  설정����������� ������������������  뒷줄에����������� ������������������  ����������� ������������������  

����������� ������������������   ;C:\Python27;C:\Python27/Scripts����������� ������������������  ����������� ������������������  ����������� ������������������   추가

파이썬 설치

1

2

4-3.����������� ������������������  환경변수����������� ������������������  설정����������� ������������������  

����������� ������������������   새로만들기����������� ������������������  >����������� ������������������  입력����������� ������������������  

PYTHONPATH

C:\Python27\Lib ����������� ������������������   추가

Page 21: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

5.����������� ������������������  파이썬����������� ������������������  설치확인����������� ������������������  (IDLE����������� ������������������  :����������� ������������������  pure����������� ������������������  Python)

명령어창����������� ������������������  실행����������� ������������������  시작버튼����������� ������������������  >����������� ������������������  검색창에����������� ������������������  cmd

python

Page 22: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

6.����������� ������������������  PIP����������� ������������������  설치����������� ������������������  (Python����������� ������������������  패키지����������� ������������������  관리자)����������� ������������������  

����������� ������������������   easy_install pip

*����������� ������������������  pip����������� ������������������  에����������� ������������������  대해����������� ������������������  더����������� ������������������  알고����������� ������������������  싶다면����������� ������������������  ����������� ������������������  ����������� ������������������   https://pypi.python.org/pypi/pip

Page 23: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

(맥OS)파이썬 + 플라스크 설치

1.����������� ������������������  터미널����������� ������������������  실행

Page 24: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

(맥OS)파이썬 + Flask 설치

2.����������� ������������������  파이썬����������� ������������������  확인����������� ������������������  (IDLE����������� ������������������  :����������� ������������������  pure����������� ������������������  Python)����������� ������������������  

$python

3.����������� ������������������  PIP����������� ������������������  설치����������� ������������������  (Python����������� ������������������  패키지����������� ������������������  관리자)����������� ������������������  

����������� ������������������   $sudo easy_install pip

*����������� ������������������  pip����������� ������������������  에����������� ������������������  대해����������� ������������������  더����������� ������������������  알고����������� ������������������  싶다면����������� ������������������  ����������� ������������������  ����������� ������������������   https://pypi.python.org/pypi/pip

Page 25: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

4. 프로그래밍 기초 (Python)

*����������� ������������������  참조����������� ������������������  ����������� ������������������   http://www.stavros.io/tutorials/python/

Page 26: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

파이썬 기초와 문법

“내가����������� ������������������  이름����������� ������������������  지어주기����������� ������������������  전에는����������� ������������������  그는����������� ������������������  ����������� ������������������  다만����������� ������������������  메모리����������� ������������������  주소에����������� ������������������  지나지����������� ������������������  않았다.”����������� ������������������  

-����������� ������������������  변수

“돈을����������� ������������������  넣으면����������� ������������������  캔이����������� ������������������  나온다.”����������� ������������������  -����������� ������������������  함수

Page 27: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

파이썬 기초와 문법 (실습)0.����������� ������������������  기본����������� ������������������  

변수선언����������� ������������������  

����������� ������������������   myString = “a”

*문법을����������� ������������������  쓸때����������� ������������������  꼭����������� ������������������  탭으로����������� ������������������  인댄트(탭����������� ������������������  :����������� ������������������  들여쓰기)����������� ������������������  

* #으로����������� ������������������  시작하는건����������� ������������������  주석����������� ������������������  (주석은����������� ������������������  메모����������� ������������������  실행되지����������� ������������������  않음)

Page 28: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

파이썬 기초와 문법 (실습)

>>> myvar = 3 >>> myvar += 2 >>> myvar 5 >>> myvar -= 1 >>> myvar 4 >>> mystring = "Hello" >>> mystring += " world." >>> print mystring Hello world. >>> myvar, mystring = mystring, myvar >>> print myvar Hello world. >>> print mystring 4

1.����������� ������������������  변수����������� ������������������  (Variable)

Page 29: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

파이썬 기초와 문법

animals = ["cat", "dog", "lion", "rabbit"] >>> print animals for item in animals: print item !!if animals[1] == "cat": print “고양이다" elif animals[1] == "dog": print "개다" else: print "뭐지" !!while animals[1] == “dog": print animals[1] pass # 무한루프

2.����������� ������������������  제어문

•더����������� ������������������  공부하기����������� ������������������  ����������� ������������������   Python����������� ������������������  기초

Page 30: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

파이썬 기초와 문법

def sum(a, b, c): return a+b+c !>>> sum(1, 2, 3) !def add(a, b, c=" alive"): return a + b + c !>>> add("I ", "am")

3.����������� ������������������  함수����������� ������������������  (Functions)

•더����������� ������������������  공부하기����������� ������������������  ����������� ������������������   Python����������� ������������������  기초

Page 31: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

5. 플라스크(Flask) 설치

*����������� ������������������  참조����������� ������������������  ����������� ������������������   http://flask-docs-kr.readthedocs.org/ko/latest/installation.html

Page 32: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 설치

pip install virtualenv mkdir C:\flask-space\ch1 cd C:\flask-space\ch1 virtualenv venv #virtualenv를 사용한다면 pip install flask

1-1.����������� ������������������  윈도우����������� ������������������  (C:\flask-space)

1-2.����������� ������������������  맥����������� ������������������  OS����������� ������������������  (도큐멘트����������� ������������������  /����������� ������������������  flask-space)

sudo pip install virtualenv sudo mkdir ~/Documents/flask-space/ch1 sudo chmod 777 ~/Documents/flask-space/ch1 cd ~/Documents/flask-space/ch1 sudo virtualenv venv #virtualenv를 사용한다면 sudo pip install flask

cd����������� ������������������  ~/Documents/flask-space/ch1

명령어����������� ������������������  창에서����������� ������������������  flask-space����������� ������������������  로����������� ������������������  가려면����������� ������������������  ����������� ������������������   cd����������� ������������������  C:\flask-space\ch1

OS 별로 따로 보세요!!

Page 33: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 설치(실습)

3.����������� ������������������  내장서버����������� ������������������  구동����������� ������������������  &����������� ������������������  테스트����������� ������������������  

테스트는����������� ������������������  브라우져에서����������� ������������������  아래����������� ������������������  경로����������� ������������������  입력����������� ������������������  http://127.0.0.1:5000/

2.����������� ������������������  기본����������� ������������������  어플리케이션����������� ������������������  생성

hello.py 로 저장 (flask-space/ch1) hello.py����������� ������������������  경로에서����������� ������������������  아래����������� ������������������  명령어로����������� ������������������  내장서버����������� ������������������  구동����������� ������������������  python hello.py

from flask import Flask app = Flask(__name__) [email protected]('/') def hello_world(): return 'Hello World!' !if __name__ == '__main__': app.debug = True app.run()

Page 34: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

6. 플라스크(Flask) 실습

*����������� ������������������  참조����������� ������������������   http://flask-docs-kr.readthedocs.org/ko/latest/quickstart.html

Page 35: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크(Flask)는?1. 기본개념

• Python이����������� ������������������  웹서비스가����������� ������������������  가능하도록����������� ������������������  만들어주는����������� ������������������  프레임워크����������� ������������������  

•설정이����������� ������������������  쉽다?����������� ������������������  

•파일����������� ������������������  하나로����������� ������������������  기능을����������� ������������������  제공하는����������� ������������������  마이크로����������� ������������������  프레임워크����������� ������������������  

•필요한����������� ������������������  기능이����������� ������������������  있다면����������� ������������������  그때����������� ������������������  그때����������� ������������������  기능����������� ������������������  추가����������� ������������������  가능����������� ������������������  (pip)

Page 36: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 사용

#!/usr/bin/python # -*- coding: utf-8 -*- import sys reload(sys) sys.setdefaultencoding('utf8') !from flask import Flask app = Flask(__name__) [email protected]('/') def hello_world(): return 'Hello World!' [email protected]('/main') def main(): return 'main page' !if __name__ == '__main__': app.run()

라우팅(Routing)

한글����������� ������������������  깨짐����������� ������������������  방지����������� ������������������  복사해서����������� ������������������  사용하세요.

플라스크����������� ������������������  객체����������� ������������������  실행

라우팅����������� ������������������  설정

컨트롤러����������� ������������������  설정

내장서버����������� ������������������  실행

Page 37: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 사용

@app.route('/user/<username>') def show_user_profile(username): return 'User %s' % username [email protected]('/post/<int:post_id>') def show_post(post_id): return 'Post %d' % post_id

파라미터(Parameter)

username����������� ������������������  으로����������� ������������������  값을����������� ������������������  받아����������� ������������������  출력����������� ������������������  %s 는����������� ������������������  문자

<int:post_id> 로����������� ������������������  숫자값만����������� ������������������  받도록����������� ������������������  설정����������� ������������������  %d는����������� ������������������  숫자(정수)

Page 38: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 사용

@app.route('/logging') def logging_test(): test = 1 app.logger.debug('디버깅 필요') app.logger.warning(str(test) + " 라인") app.logger.error('에러발생') return “로깅 끝"

로깅(Logging)

콘솔에만����������� ������������������  표시할때����������� ������������������  사용����������� ������������������  개발자가����������� ������������������  필요한����������� ������������������  정보를����������� ������������������  출력����������� ������������������  할����������� ������������������  수����������� ������������������  있음

Page 39: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 사용

render_template, request, session # import 에 추가 해야 함 [email protected]('/login_form') def login_form(): return render_template('login_form.html') [email protected]('/login', methods=['POST']) def login(): if request.method == 'POST': if ( request.form['username'] == 'jamie' and request.form['password'] == ‘1234'): session['logged_in'] = True session['username'] = request.form['username'] return request.form['username'] + " 님 환영합니다." else: return '로그인 정보가 맞지 않습니다.' else: return '잘못된 접근’ !app.secret_key = ‘sample_secret_key’

로그인 (Post, Session)

- session����������� ������������������  과����������� ������������������  request����������� ������������������  가����������� ������������������  사용되었음����������� ������������������  - app.secret_key = 'abc' ����������� ������������������   세션키를����������� ������������������  꼭추가해아함

Page 40: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 사용

<!DOCTYPE html> <html lang="en"> <head> <title>로그인 테스트</title> </head> <body> <form method="post" action="/login"> <h2>로그인 정보를 입력해주세요</h2> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Password"> <button type="submit">로그인</button> </form> </body> </html>

로그인

저장����������� ������������������  위치����������� ������������������  :����������� ������������������  templates/login_form.html

Page 41: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 사용GET을 이용한 로그인 (request, session)

실제 서비스에선 절대 GET방식 로그인을 하면 안됨

@app.route('/get_test', methods=['GET']) def get_test(): if request.method == 'GET': if (request.args.get('username') == "jamie" and request.args.get('password') == "1234"): return request.args.get('username') + " 님 환영합니다." else: return '로그인 정보가 맞지 않습니다.' else: return '잘못된 접근'

Page 42: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 사용

@app.route('/logout') def logout(): session['logged_in'] = False session.pop('username', None) return redirect(url_for('index'))

로그아웃 (session)

request, redirect, url_for, session # import 에����������� ������������������  추가해야����������� ������������������  함

Page 43: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 템플릿 (jinja2)

@app.route('/template') @app.route('/template/<tempid>') def template_test(tempid=None): sports = ['야구', '축구', '농구'] return render_template('template.html', tempid=tempid, sports=sports)

템플릿 테스트

Page 44: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

플라스크 템플릿 (jinja2)템플릿 테스트

<!DOCTYPE html> <html lang="en"> <head> <title>템플릿 테스트</title> </head> <body> <div> <h3> - 파라미터 : {{ tempid }} </h3> {% if not session.logged_in %} <h3> <a href="{{ url_for('login_form') }}">로그인</a> 해주세요. </h3> {% else %} <h3> <a href="{{ url_for('logout') }}">로그아웃</a> </h3> {% endif %} <h3> - 사람들이 좋아하는 운동 </h3> {% for i in sports %} <h3> {{ i }} </h3> {% if i == '축구' %} <h5> {{ i }}는 아닌데.. </h5> {% endif %} {% endfor %} </div> </body> </html>

저장����������� ������������������  경로����������� ������������������  :����������� ������������������  templates/template.html

Page 45: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

7. 예고편

Page 46: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

부트스트랩 + Mysql

http://bootstrapk.com/BS3/ https://wrapbootstrap.com/ 데이터베이스����������� ������������������  기본����������� ������������������  설정과����������� ������������������  기본����������� ������������������  SQL����������� ������������������  

Bootstrap����������� ������������������  -����������� ������������������  프론트����������� ������������������  앤드����������� ������������������  제작툴 Mysql����������� ������������������  -����������� ������������������  데이터베이스

Page 47: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

부트스트랩깔끔한 디자인의 화면..!!

Page 48: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

Q&A

Page 49: 파이썬 플라스크로 배우는 웹프로그래밍 #1 (ABCD Foundation)

수고하셨습니다. :D

• ABCD����������� ������������������  Foundation����������� ������������������  ����������� ������������������   https://www.facebook.com/groups/562787713823026/����������� ������������������  !• 한성일����������� ������������������  ����������� ������������������   https://www.facebook.com/jamie.han.16����������� ������������������  ����������� ������������������   [email protected]