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

1. 웹

2. 애플리케이션

3. 개발

4.
짧게

5. 맛보기

6.
조영호

7.
snatcher@nhn.com

8.
2014

9. NHN

10. NEXT

12.
창의체험

14. Programmer?

15. 생각하기

16.
Programming Language
컴퓨터와

17. 대화하기

18.
특정

19. 영역의

20. 기술

21. 적용하기

22.
문제를

23. 해결하는

24. 사람

26. 제가

27. 적어

28. 놓은

29. 메시지와

30. 제

31. 이름을

33.
컴퓨터

34. 화면에

35. 출력하고

36. 싶어요~

38. 생각하기

40. Cho Young Ho
다른

41. 사람이

42. 여러분의

43. 이름을

44. 알

45. 수

46. 있도록

48.
네임

49. 태그에

50. 이름을

51. 적습니다

53. 원하는

54. 메시지를

55. 카드에

56. 기록합니다

58. 일단

59. 들어봐야지

60. 뭔

61. 소리야?

62. ㅡㅡ;;

63.
카드에

64. 메시지를

65. 적을

66. 때마다

68. 카드를

69. 보관함에

70. 추가합니다

72. Quit
Quit를

73. 적으면

74. 메시지

75. 적기를

76. 종료하고

78. 일단

79. 들어봐야지

80.
뭔

81. 소리야?

82. ㅡㅡ;;

83.
창의체험

84. 놀러옴

85.
아직까지는

86. 잘

87. 모르겠다;;

88.
네임

89. 태그에

90. 적힌

92.
이름과

93.
카드

94. 목록에

95. 적힌

97.
전체

98. 메시지를

100.
모아

101. 기록합니다

102.
Cho

103. Young

104. Ho

106. ‘네임태그’

114. 에

115. Cho

116. Young

117. Ho”라고

118. 기록하기

119.
비어

120. 있는

121. ‘메시지보관함’

129. 준비하기

131.
‘메시지

132. 카드’

140. 준비하기

141.
‘메시지

142. 카드’

150. 내용이

151. ‘Quit’이

152. 아닌

153. 동안

154. 아래

155. 내용

156. 실행하기

161. ‘메시지

162. 카드’

169. 에

170. 내용

171. 적기

176. 만약

177. ‘메시지

178. 카드’

187. 내용이

188. ‘Quit’이

189. 아니라면

196. ‘메시지보관함’

203. 에

204. ‘메시지카드’

213. 추가하기

215.
‘네임태그’

222. 의

223. 이름과

224. ‘메시지보관함’

231. 의

232. 전체

233. 목록기록하기

235. Programming Language
컴퓨터와

236. 대화하기

238. ‘네임태그’

246. 에

247. Cho

248. Young

249. Ho”라고

250. 기록하기

251.
비어

252. 있는

253. ‘메시지보관함’

261. 준비하기

263.
‘메시지

264. 카드’

272. 준비하기

273.
‘메시지

274. 카드’

282. 내용이

283. ‘Quit’이

284. 아닌

285. 동안

286. 아래

287. 내용

288. 실행하기

293. ‘메시지

294. 카드’

301. 에

302. 내용

303. 적기

308. 만약

309. ‘메시지

310. 카드’

319. 내용이

320. ‘Quit’이

321. 아니라면

328. ‘메시지보관함’

335. 에

336. ‘메시지카드’

345. 추가하기

347.
‘네임태그’

354. 의

355. 이름과

356. ‘메시지보관함’

363. 의

364. 전체

365. 목록기록하기

381.
nameTag = Cho Young Ho
messageBox = []
message =
while message != QUIT:
message = raw_input()
if message != 'QUIT':
messageBox.append(message)
print nameTag, messageBox

383. 다른

384. 사람들과

385. 메시지를

386. 공유하고

387. 싶다면?

389. Web

390. Application

392. 특정

393. 영역의

394. 기술

395. 적용하기

397. 생각하기

398.
Programming Language
컴퓨터와

399. 대화하기

400.
특정

401. 영역의

402. 기술

403. 적용하기

404.
프로그래머는

406. ‘네임태그’

414. 에

415. Cho

416. Young

417. Ho”라고

418. 기록하기

419.
비어

420. 있는

421. ‘메시지보관함’

429. 준비하기

431.
‘메시지

432. 카드’

440. 준비하기

441.
‘메시지

442. 카드’

450. 내용이

451. ‘Quit’이

452. 아닌

453. 동안

454. 아래

455. 내용

456. 실행하기

461. ‘메시지

462. 카드’

472. 적기

477. 만약

478. ‘메시지

479. 카드’

488. 내용이

489. ‘Quit’이

490. 아니라면

500. ‘메시지보관함’

507. 에

508. ‘메시지카드’

517. 추가하기

519.
‘네임태그’

526. 의

527. 이름과

528. ‘메시지보관함’

535. 의

536. 전체

537. 목록기록하기

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

539. 웹

540. 페이지

541. 보여주기

543. 아무리

544. 거대한

545. 프로그램이라도

547. 작은

548. 부분으로

549. 분해할

550. 수

551. 있어요

554. http://www.naver.com/

556. http://www.naver.com/

557.
요청
응답

558. 어떤

559. 페이지를

560. 보고

561. 싶나요?

563. 서버에게

564. 보고

565. 싶은

566. 페이지를

567. 요청하면

569. 서버는

570. 원하는

571. 페이지를

572. 만들어서

573. 보내줍니다

575. 개발자로서

576. 우리의

577. 역할은

578.
요청에

579. 따라

580. 적절한

581. html

582. 페이지를

583. 연결해

584. 주는

585. 것

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

589. 로그인

590. 페이지

591. 이동하기

593. 이

594. 페이지에

595. 있죠?

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

599. lia href=/signup회원가입/a/li
lia href=/login로그인/a/li

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

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

602. 로그인

603. 페이지

604. 이동

605. 성공!!!!

607. 아름답게

608. 꾸미기

610. 여러분의

611. 계정을

612. 등록하세요

614. 방금

615. 등록한

616. 계정을

617. 이용해

618. 로그인해봅시다

620. 화면이

621. 왜

622. 이모냥일까요?

624. 화면을

625. 예쁘게

626. 치장해

627. 봅시다

629. 열어

630. 봅시다!!!

632. !-- 여기에 css 경로를 입력하세요 --
link rel=stylesheet href=
link rel=stylesheet href=
link rel=stylesheet href=

633. !-- 여기에 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

635. http://www.naver.com/

636.
읽고

637.
쓰기

638.
서버가

639. 돌려주는

640. HTML은

642. 사용자가

643. 보게될

644. 내용을

645. 구성하고

647. http://www.naver.com/

648.
HTML안에

649. 정의된

650. CSS는

652. 화면의

653. 모양을

654. 결정합니다

656. http://www.naver.com/

657.
요청
응답
지금까지

658. 둘러본

659. 웹

660. 애플리케이션

661. 기술

663. 메시지

664. 작성하기

666. ‘트윗하기’

667. 기능을

668. 살펴

669. 봅시다

671. 열어

672. 봅시다!!!

674. 양식

675.
제출

677. 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

678. 제출

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

680. 생각하기

681.
Programming Language
컴퓨터와

682. 대화하기

683.
특정

684. 영역의

685. 기술

686. 적용하기

687.
해봅시다~

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

690. 일단

691. 들어봐야지

692. 뭔

693. 소리야?

694. ㅡㅡ;;

695.
우리는

696. form을

697. 이용해

698. “message”라는

699. 부분에

700. 메시지를

701. 담고

702. 있습니다

703.
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

704. 서버는

705. 제출된

706. “form”에서

708.
“message”를

709. 찾아야

710. 합니다

711.
request.form['message']

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

713. 카드를

714. 담기

715. 위한

716. 보관함을

717. 만들어야

718. 합니다

719.
messageBox
=
[]

720. # 여기에 원하는 주소를 넣으세요
@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)

721. 잘

722. 되죠?

724. 하지만

725. 서버를

726. 껐다

727. 키면

729. 메시지가

730. 추가된

731. 화면

733. http://www.naver.com/

734.
요청
응답
읽고

735.
쓰기

736.
메시지를

737. 계속

738. 보관하기

739. 위해서는

740. “데이터베이스”를

741. 사용해야

742. 합니다

744. # 여기에 원하는 주소를 넣으세요
@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()

745. 생각하고,

746. 말하고,

747. 기술

748. 적용하기

749.
생각하기

750.
Programming Language
컴퓨터와

751. 대화하기

752.
특정

753. 영역의

754. 기술

755. 익히기

757. 다른

758. 종류의

759. 브라우저를

760. 열어

761. 새로운

762. 사용자들

763. 등록하고

764.
양쪽

765. 창에서

766. 메시지를

767. 트윗해

768. 보세요

770. 다른

771. 사용자를

772. follow할

773. 수도

774. 있습니다

776. form id=follow_form action=/follow method=post
input type=hidden id=follower_id name=userid /
/form

777. # 여기에 원하는 주소를 입력하세요
@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)

778. 이전에

779. 살펴본

780. 트윗

781. 작성

782.
흐름과

783. 유사하죠?

785. 아무리

786. 거대한

787. 프로그램이라도

789. 작은

790. 부분으로

791. 분해할

792. 수

793. 있어요

796. http://www.naver.com/

797.
요청
응답
읽고

798.
쓰기

799.
요청을

800. 처리하는

801. 방식

803. 생각하기

804.
Programming Language
컴퓨터와

805. 대화하기

806.
특정

807. 영역의

808. 기술

809. 적용하기

811. 생각하기

812.
Programming Language
컴퓨터와

813. 대화하기

814.
특정

815. 영역의

816. 기술

817. 적용하기

818.
프로그래머의

819. 일상