[nhn next] 2014 nhn next 창의체험

85
웹 애플리케이션 개발 짧게 맛보기 조영호 [email protected] 2014 NHN NEXT 창의체험

Upload: youngho-cho

Post on 10-May-2015

2.339 views

Category:

Education


5 download

DESCRIPTION

고등학생들을 대상으로 열린 NHN NEXT 창의체험 행사 발표 자료입니다.

TRANSCRIPT

Page 1: [NHN NEXT] 2014 NHN NEXT 창의체험

웹����������� ������������������  애플리케이션����������� ������������������  개발����������� ������������������  짧게����������� ������������������  맛보기����������� ������������������  

조영호����������� ������������������  [email protected]����������� ������������������  

2014����������� ������������������  NHN����������� ������������������  NEXT����������� ������������������  ����������� ������������������  창의체험����������� ������������������  

Page 2: [NHN NEXT] 2014 NHN NEXT 창의체험

Programmer?  

Page 3: [NHN NEXT] 2014 NHN NEXT 창의체험

생각하기����������� ������������������  

Programming Language

컴퓨터와����������� ������������������  대화하기����������� ������������������  

특정����������� ������������������  영역의����������� ������������������  기술����������� ������������������  적용하기����������� ������������������  

문제를����������� ������������������  해결하는����������� ������������������  사람����������� ������������������  

Page 4: [NHN NEXT] 2014 NHN NEXT 창의체험

제가����������� ������������������  적어����������� ������������������  놓은����������� ������������������  메시지와����������� ������������������  제����������� ������������������  이름을����������� ������������������  ����������� ������������������  컴퓨터����������� ������������������  화면에����������� ������������������  출력하고����������� ������������������  싶어요~����������� ������������������  

Page 5: [NHN NEXT] 2014 NHN NEXT 창의체험

생각하기����������� ������������������  

Page 6: [NHN NEXT] 2014 NHN NEXT 창의체험

Cho Young Ho

다른����������� ������������������  사람이����������� ������������������  여러분의����������� ������������������  이름을����������� ������������������  알����������� ������������������  수����������� ������������������  있도록����������� ������������������  ����������� ������������������  네임����������� ������������������  태그에����������� ������������������  이름을����������� ������������������  적습니다����������� ������������������  

Page 7: [NHN NEXT] 2014 NHN NEXT 창의체험

원하는����������� ������������������  메시지를����������� ������������������  카드에����������� ������������������  기록합니다����������� ������������������  

Page 8: [NHN NEXT] 2014 NHN NEXT 창의체험

일단����������� ������������������  들어봐야지����������� ������������������  뭔����������� ������������������  소리야?����������� ������������������  ㅡㅡ;;����������� ������������������  

카드에����������� ������������������  메시지를����������� ������������������  적을����������� ������������������  때마다����������� ������������������  

Page 9: [NHN NEXT] 2014 NHN NEXT 창의체험

카드를����������� ������������������  보관함에����������� ������������������  추가합니다����������� ������������������  

Page 10: [NHN NEXT] 2014 NHN NEXT 창의체험

Quit

Quit를����������� ������������������  적으면����������� ������������������  메시지����������� ������������������  적기를����������� ������������������  종료하고����������� ������������������  

Page 11: [NHN NEXT] 2014 NHN NEXT 창의체험

일단����������� ������������������  들어봐야지����������� ������������������  

뭔����������� ������������������  소리야?����������� ������������������  ㅡㅡ;;����������� ������������������  창의체험����������� ������������������  놀러옴����������� ������������������  

아직까지는����������� ������������������  잘����������� ������������������  모르겠다;;����������� ������������������  

네임����������� ������������������  태그에����������� ������������������  적힌����������� ������������������  ����������� ������������������  

이름과����������� ������������������  

카드����������� ������������������  목록에����������� ������������������  적힌����������� ������������������  ����������� ������������������  

전체����������� ������������������  메시지를����������� ������������������  ����������� ������������������  

모아����������� ������������������  기록합니다����������� ������������������  Cho����������� ������������������  Young

����������� ������������������  Ho����������� ������������������  

Page 12: [NHN NEXT] 2014 NHN NEXT 창의체험

‘네임태그’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  에����������� ������������������  "Cho����������� ������������������  Young����������� ������������������  Ho”라고����������� ������������������  기록하기����������� ������������������  비어����������� ������������������  있는����������� ������������������  ‘메시지보관함’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  준비하기����������� ������������������  ����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  준비하기����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  내용이����������� ������������������  ‘Quit’이����������� ������������������  아닌����������� ������������������  동안����������� ������������������  아래����������� ������������������  내용����������� ������������������  실행하기����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  에����������� ������������������  내용����������� ������������������  적기����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  만약����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  내용이����������� ������������������  ‘Quit’이����������� ������������������  아니라면����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������   ����������� ������������������  ‘메시지보관함’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  에����������� ������������������  ‘메시지카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  추가하기����������� ������������������  ����������� ������������������  ‘네임태그’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  의����������� ������������������  이름과����������� ������������������  ‘메시지보관함’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  의����������� ������������������  전체����������� ������������������  목록기록하기����������� ������������������  

Page 13: [NHN NEXT] 2014 NHN NEXT 창의체험

Programming Language

컴퓨터와����������� ������������������  대화하기����������� ������������������  

Page 14: [NHN NEXT] 2014 NHN NEXT 창의체험

‘네임태그’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  에����������� ������������������  "Cho����������� ������������������  Young����������� ������������������  Ho”라고����������� ������������������  기록하기����������� ������������������  비어����������� ������������������  있는����������� ������������������  ‘메시지보관함’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  준비하기����������� ������������������  ����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  준비하기����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  내용이����������� ������������������  ‘Quit’이����������� ������������������  아닌����������� ������������������  동안����������� ������������������  아래����������� ������������������  내용����������� ������������������  실행하기����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  에����������� ������������������  내용����������� ������������������  적기����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  만약����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  내용이����������� ������������������  ‘Quit’이����������� ������������������  아니라면����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������   ����������� ������������������  ‘메시지보관함’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  에����������� ������������������  ‘메시지카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  추가하기����������� ������������������  ����������� ������������������  ‘네임태그’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  의����������� ������������������  이름과����������� ������������������  ‘메시지보관함’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  의����������� ������������������  전체����������� ������������������  목록기록하기����������� ������������������  

Page 15: [NHN NEXT] 2014 NHN NEXT 창의체험

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������   ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

nameTag = "Cho Young Ho"  messageBox = []  

message = ""  while message != "QUIT":  

message = raw_input()  if message != 'QUIT':  

messageBox.append(message)  

print nameTag, messageBox  

Page 16: [NHN NEXT] 2014 NHN NEXT 창의체험
Page 17: [NHN NEXT] 2014 NHN NEXT 창의체험

다른����������� ������������������  사람들과����������� ������������������  메시지를����������� ������������������  공유하고����������� ������������������  싶다면?����������� ������������������  

Page 18: [NHN NEXT] 2014 NHN NEXT 창의체험

Web����������� ������������������  Application����������� ������������������  

Page 19: [NHN NEXT] 2014 NHN NEXT 창의체험

특정����������� ������������������  영역의����������� ������������������  기술����������� ������������������  적용하기����������� ������������������  

Page 20: [NHN NEXT] 2014 NHN NEXT 창의체험

생각하기����������� ������������������  

Programming Language

컴퓨터와����������� ������������������  대화하기����������� ������������������  

특정����������� ������������������  영역의����������� ������������������  기술����������� ������������������  적용하기����������� ������������������  

프로그래머는����������� ������������������  

Page 21: [NHN NEXT] 2014 NHN NEXT 창의체험

‘네임태그’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  에����������� ������������������  "Cho����������� ������������������  Young����������� ������������������  Ho”라고����������� ������������������  기록하기����������� ������������������  비어����������� ������������������  있는����������� ������������������  ‘메시지보관함’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  준비하기����������� ������������������  ����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  준비하기����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  내용이����������� ������������������  ‘Quit’이����������� ������������������  아닌����������� ������������������  동안����������� ������������������  아래����������� ������������������  내용����������� ������������������  실행하기����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  적기����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  만약����������� ������������������  ‘메시지����������� ������������������  카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  내용이����������� ������������������  ‘Quit’이����������� ������������������  아니라면����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ‘메시지보관함’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  에����������� ������������������  ‘메시지카드’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  추가하기����������� ������������������  ����������� ������������������  ‘네임태그’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  의����������� ������������������  이름과����������� ������������������  ‘메시지보관함’����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  의����������� ������������������  전체����������� ������������������  목록기록하기����������� ������������������  

nameTag = "Cho Young Ho"messageBox = []message = ""while message != "QUIT": message = raw_input("Message to Write: ") if message != "QUIT": messageBox.append(message) print nameTag, messageBox  

Page 22: [NHN NEXT] 2014 NHN NEXT 창의체험

웹����������� ������������������  페이지����������� ������������������  보여주기����������� ������������������  

Page 23: [NHN NEXT] 2014 NHN NEXT 창의체험

아무리����������� ������������������  거대한����������� ������������������  프로그램이라도����������� ������������������  

Page 24: [NHN NEXT] 2014 NHN NEXT 창의체험

작은����������� ������������������  부분으로����������� ������������������  분해할����������� ������������������  수����������� ������������������  있어요����������� ������������������  

Page 25: [NHN NEXT] 2014 NHN NEXT 창의체험
Page 26: [NHN NEXT] 2014 NHN NEXT 창의체험

http://www.naver.com/����������� ������������������  

Page 27: [NHN NEXT] 2014 NHN NEXT 창의체험

http://www.naver.com/����������� ������������������  

요청

응답

Page 28: [NHN NEXT] 2014 NHN NEXT 창의체험

어떤����������� ������������������  페이지를����������� ������������������  보고����������� ������������������  싶나요?����������� ������������������  

Page 29: [NHN NEXT] 2014 NHN NEXT 창의체험

서버에게����������� ������������������  보고����������� ������������������  싶은����������� ������������������  페이지를����������� ������������������  요청하면����������� ������������������  

Page 30: [NHN NEXT] 2014 NHN NEXT 창의체험

서버는����������� ������������������  원하는����������� ������������������  페이지를����������� ������������������  만들어서����������� ������������������  보내줍니다����������� ������������������  

Page 31: [NHN NEXT] 2014 NHN NEXT 창의체험

개발자로서����������� ������������������  우리의����������� ������������������  역할은����������� ������������������  

요청에����������� ������������������  따라����������� ������������������  적절한����������� ������������������  html����������� ������������������  페이지를����������� ������������������  연결해����������� ������������������  주는����������� ������������������  것����������� ������������������  

Page 32: [NHN NEXT] 2014 NHN NEXT 창의체험
Page 33: [NHN NEXT] 2014 NHN NEXT 창의체험

# 여기에 원하는 주소를 입력하세요 @app.route('/') def home(): # 여기에 html 페이지 이름을 입력하세요 return render_template('')

'/home')  

'home.html')  

Page 34: [NHN NEXT] 2014 NHN NEXT 창의체험

로그인����������� ������������������  페이지����������� ������������������  이동하기����������� ������������������  

Page 35: [NHN NEXT] 2014 NHN NEXT 창의체험

이����������� ������������������  페이지에����������� ������������������  있죠?����������� ������������������  

Page 36: [NHN NEXT] 2014 NHN NEXT 창의체험
Page 37: [NHN NEXT] 2014 NHN NEXT 창의체험

<li><a href="/signup">회원가입</a></li><li><a href="<<여기에 로그인 페이지로 가는 링크를 추가하세요>>">로그인</a></li>

Page 38: [NHN NEXT] 2014 NHN NEXT 창의체험

<li><a href="/signup">회원가입</a></li><li><a href="/login">로그인</a></li>

Page 39: [NHN NEXT] 2014 NHN NEXT 창의체험

# 여기에 원하는 주소를 입력하세요@app.route(’/’)def login(): if g.user: return redirect(url_for('public_timeline')) # 여기에 html 페이지 이름을 입력하세요 return render_template('', error=error)

Page 40: [NHN NEXT] 2014 NHN NEXT 창의체험

# 여기에 원하는 주소를 입력하세요@app.route('/login')def login(): if g.user: return redirect(url_for('public_timeline')) # 여기에 html 페이지 이름을 입력하세요 return render_template('login.html', error=error)

Page 41: [NHN NEXT] 2014 NHN NEXT 창의체험

로그인����������� ������������������  페이지����������� ������������������  이동����������� ������������������  성공!!!!����������� ������������������  

Page 42: [NHN NEXT] 2014 NHN NEXT 창의체험

아름답게����������� ������������������  꾸미기����������� ������������������  

Page 43: [NHN NEXT] 2014 NHN NEXT 창의체험

여러분의����������� ������������������  계정을����������� ������������������  등록하세요����������� ������������������  

Page 44: [NHN NEXT] 2014 NHN NEXT 창의체험

방금����������� ������������������  등록한����������� ������������������  계정을����������� ������������������  이용해����������� ������������������  로그인해봅시다����������� ������������������  

Page 45: [NHN NEXT] 2014 NHN NEXT 창의체험

화면이����������� ������������������  왜����������� ������������������  이모냥일까요?����������� ������������������  

Page 46: [NHN NEXT] 2014 NHN NEXT 창의체험

화면을����������� ������������������  예쁘게����������� ������������������  치장해����������� ������������������  봅시다����������� ������������������  

Page 47: [NHN NEXT] 2014 NHN NEXT 창의체험

열어����������� ������������������  봅시다!!!����������� ������������������  

Page 48: [NHN NEXT] 2014 NHN NEXT 창의체험

<!-- 여기에 css 경로를 입력하세요 --><link rel="stylesheet" href=""><link rel="stylesheet" href=""> <link rel="stylesheet" href="">

Page 49: [NHN NEXT] 2014 NHN NEXT 창의체험

<!-- 여기에 css 경로를 입력하세요 --><link rel="stylesheet" href="static/css/bootstrap.css"><link rel="stylesheet" href="static/css/bootstrap-theme.css"> <link rel="stylesheet" href="static/css/timeline.css">

Page 50: [NHN NEXT] 2014 NHN NEXT 창의체험
Page 51: [NHN NEXT] 2014 NHN NEXT 창의체험

http://www.naver.com/����������� ������������������  

읽고����������� ������������������  쓰기����������� ������������������  

서버가����������� ������������������  돌려주는����������� ������������������  HTML은����������� ������������������  

Page 52: [NHN NEXT] 2014 NHN NEXT 창의체험

����������� ������������������  사용자가����������� ������������������  보게될����������� ������������������  내용을����������� ������������������  구성하고����������� ������������������  

Page 53: [NHN NEXT] 2014 NHN NEXT 창의체험

http://www.naver.com/����������� ������������������  

HTML안에����������� ������������������  정의된����������� ������������������  CSS는����������� ������������������  

Page 54: [NHN NEXT] 2014 NHN NEXT 창의체험

화면의����������� ������������������  모양을����������� ������������������  결정합니다����������� ������������������  

Page 55: [NHN NEXT] 2014 NHN NEXT 창의체험

http://www.naver.com/����������� ������������������  요청

응답

지금까지����������� ������������������  둘러본����������� ������������������  웹����������� ������������������  애플리케이션����������� ������������������  기술����������� ������������������  

Page 56: [NHN NEXT] 2014 NHN NEXT 창의체험

메시지����������� ������������������  작성하기����������� ������������������  

Page 57: [NHN NEXT] 2014 NHN NEXT 창의체험

‘트윗하기’����������� ������������������  기능을����������� ������������������  살펴����������� ������������������  봅시다����������� ������������������  

Page 58: [NHN NEXT] 2014 NHN NEXT 창의체험

열어����������� ������������������  봅시다!!!����������� ������������������  

Page 59: [NHN NEXT] 2014 NHN NEXT 창의체험

양식����������� ������������������  

제출����������� ������������������  

Page 60: [NHN NEXT] 2014 NHN NEXT 창의체험

<form id="twit_form" action="/twit" method="post" class="form-horizontal"> <textarea id="message" name="message" rows="4" class="form-control” placeholder="트윗 메시지”></textarea> <button id="twit_btn" class="btn btn-small btn-primary" type="submit">트윗</button></form>

Page 61: [NHN NEXT] 2014 NHN NEXT 창의체험

제출����������� ������������������  

# 여기에 원하는 주소를 넣으세요 @app.route('/', methods=['POST'])def twit(): message = Message(g.user, '여기에 메시지 정보를 넣으세요’) # 여기에 메시지를 기록하기 위한 코드를 넣으세요 # 여기에 html 페이지 이름을 입력하세요 return render_template('', messages = messages, timeline="public")

Page 62: [NHN NEXT] 2014 NHN NEXT 창의체험

생각하기����������� ������������������  

Programming Language

컴퓨터와����������� ������������������  대화하기����������� ������������������  

특정����������� ������������������  영역의����������� ������������������  기술����������� ������������������  적용하기����������� ������������������  

해봅시다~����������� ������������������  

Page 63: [NHN NEXT] 2014 NHN NEXT 창의체험

# 여기에 원하는 주소를 넣으세요 @app.route('/', methods=['POST'])def twit(): message = Message(g.user, '여기에 메시지 정보를 넣으세요') # 여기에 메시지를 기록하기 위한 코드를 넣으세요 # 여기에 html 페이지 이름을 입력하세요 return render_template('', messages = messages, timeline="public")

@app.route('/twit', methods=['POST'])

Page 64: [NHN NEXT] 2014 NHN NEXT 창의체험

일단����������� ������������������  들어봐야지����������� ������������������  뭔����������� ������������������  소리야?����������� ������������������  ㅡㅡ;;����������� ������������������  

우리는����������� ������������������  form을����������� ������������������  이용해����������� ������������������  “message”라는����������� ������������������  부분에����������� ������������������  메시지를����������� ������������������  담고����������� ������������������  있습니다����������� ������������������  

<form id="twit_form" action="/twit" method="post" class="form-horizontal"> <textarea id="message" name="message" rows="4" class="form-control” placeholder="트윗 메시지”></textarea> <button id="twit_btn" class="btn btn-small btn-primary" type="submit">트윗</button></form>

Page 65: [NHN NEXT] 2014 NHN NEXT 창의체험

서버는����������� ������������������  제출된����������� ������������������  “form”에서����������� ������������������  ����������� ������������������  “message”를����������� ������������������  찾아야����������� ������������������  합니다����������� ������������������  

request.form['message']  

Page 66: [NHN NEXT] 2014 NHN NEXT 창의체험

# 여기에 원하는 주소를 넣으세요 @app.route('/twit', methods=['POST'])def twit(): message = Message(g.user, '여기에 메시지 정보를 넣으세요’) # 여기에 메시지를 기록하기 위한 코드를 넣으세요 # 여기에 html 페이지 이름을 입력하세요 return render_template('', messages = messageBox, timeline="public")

request.form['message']  

Page 67: [NHN NEXT] 2014 NHN NEXT 창의체험

카드를����������� ������������������  담기����������� ������������������  위한����������� ������������������  보관함을����������� ������������������  만들어야����������� ������������������  합니다����������� ������������������  

messageBox  =  []  

Page 68: [NHN NEXT] 2014 NHN NEXT 창의체험

# 여기에 원하는 주소를 넣으세요 @app.route('/twit', methods=['POST'])def twit(): message = Message(g.user, request.form['message’]) # 여기에 메시지를 기록하기 위한 코드를 넣으세요 # 여기에 html 페이지 이름을 입력하세요 return render_template('', messages = messageBox, timeline="public")

messageBox = []

messageBox.insert(0, message)  

return render_template('timeline.html', messages = messageBox, timeline="public")  

Page 69: [NHN NEXT] 2014 NHN NEXT 창의체험

잘����������� ������������������  되죠?����������� ������������������  

Page 70: [NHN NEXT] 2014 NHN NEXT 창의체험

하지만����������� ������������������  서버를����������� ������������������  껐다����������� ������������������  키면����������� ������������������  

Page 71: [NHN NEXT] 2014 NHN NEXT 창의체험

메시지가����������� ������������������  추가된����������� ������������������  화면����������� ������������������  

Page 72: [NHN NEXT] 2014 NHN NEXT 창의체험

http://www.naver.com/����������� ������������������  요청

응답읽고����������� ������������������  쓰기����������� ������������������  

메시지를����������� ������������������  계속����������� ������������������  보관하기����������� ������������������  위해서는����������� ������������������  “데이터베이스”를����������� ������������������  사용해야����������� ������������������  합니다����������� ������������������  

Page 73: [NHN NEXT] 2014 NHN NEXT 창의체험

# 여기에 원하는 주소를 넣으세요 @app.route('/twit', methods=['POST'])def twit(): message = Message(g.user, request.form['message’]) # 여기에 메시지를 기록하기 위한 코드를 넣으세요 # 여기에 html 페이지 이름을 입력하세요 return render_template('', messages = messages, timeline="public")

messageBox = []

messagesBox.insert(0, message)  

return render_template('timeline.html', messages = messageBox, timeline="public")  

messageBox = []

database.insertMessage(message)  messageBox = database.findMessages()  

Page 74: [NHN NEXT] 2014 NHN NEXT 창의체험

생각하고,����������� ������������������  말하고,����������� ������������������  기술����������� ������������������  적용하기����������� ������������������  생각하기����������� ������������������  

Programming Language

컴퓨터와����������� ������������������  대화하기����������� ������������������  

특정����������� ������������������  영역의����������� ������������������  기술����������� ������������������  익히기����������� ������������������  

Page 75: [NHN NEXT] 2014 NHN NEXT 창의체험

다른����������� ������������������  종류의����������� ������������������  브라우저를����������� ������������������  열어����������� ������������������  새로운����������� ������������������  사용자들����������� ������������������  등록하고����������� ������������������  양쪽����������� ������������������  창에서����������� ������������������  메시지를����������� ������������������  트윗해����������� ������������������  보세요����������� ������������������  

Page 76: [NHN NEXT] 2014 NHN NEXT 창의체험

다른����������� ������������������  사용자를����������� ������������������  follow할����������� ������������������  수도����������� ������������������  있습니다����������� ������������������  

Page 77: [NHN NEXT] 2014 NHN NEXT 창의체험

<form id="follow_form" action="/follow" method="post"> <input type="hidden" id="follower_id" name="userid" /> </form>

Page 78: [NHN NEXT] 2014 NHN NEXT 창의체험

# 여기에 원하는 주소를 입력하세요 @app.route('/', mewhods=['POST'])def follow_user(): if not g.user: abort(401) # userid를 이용해 사용자 정보를 읽어 오도록 수정하세요 whom = database.findUser('#여기를 수정하면 됩니다') follower = Follower(g.user, whom) # database.saveFollower()를 이용해 follower를 저장하세요 return redirect(url_for('user_timeline', userid=request.form['userid']))

@app.route(’/follow', methods=['POST'])

request.form['userid'])

database.saveFollower(follower)

Page 79: [NHN NEXT] 2014 NHN NEXT 창의체험

이전에����������� ������������������  살펴본����������� ������������������  트윗����������� ������������������  작성����������� ������������������  흐름과����������� ������������������  유사하죠?����������� ������������������  

Page 80: [NHN NEXT] 2014 NHN NEXT 창의체험

아무리����������� ������������������  거대한����������� ������������������  프로그램이라도����������� ������������������  

Page 81: [NHN NEXT] 2014 NHN NEXT 창의체험

작은����������� ������������������  부분으로����������� ������������������  분해할����������� ������������������  수����������� ������������������  있어요����������� ������������������  

Page 82: [NHN NEXT] 2014 NHN NEXT 창의체험
Page 83: [NHN NEXT] 2014 NHN NEXT 창의체험

http://www.naver.com/����������� ������������������  요청

응답읽고����������� ������������������  쓰기����������� ������������������  

요청을����������� ������������������  처리하는����������� ������������������  방식����������� ������������������  

Page 84: [NHN NEXT] 2014 NHN NEXT 창의체험

생각하기����������� ������������������  

Programming Language

컴퓨터와����������� ������������������  대화하기����������� ������������������  

특정����������� ������������������  영역의����������� ������������������  기술����������� ������������������  적용하기����������� ������������������  

Page 85: [NHN NEXT] 2014 NHN NEXT 창의체험

생각하기����������� ������������������  

Programming Language

컴퓨터와����������� ������������������  대화하기����������� ������������������  

특정����������� ������������������  영역의����������� ������������������  기술����������� ������������������  적용하기����������� ������������������  

프로그래머의����������� ������������������  일상����������� ������������������