Download to read offline
Uploaded byCore.Today
CoreDot TechSeminar 2018 - Session1 Park Jihun
코어닷 기술 세미나 2018 Session #1 : 박지훈 (코어닷투데이 개발자) 파이썬을 이용해 세상에서 가장 쓸모없는 홈페이지 만들기 14:00 ~ 14:50 Python Flask로 사용자가 글을 쓰면, 마음대로 수정하고 삭제해버리는 쓸모없는 웹사이트(Useless Website)를 만들어 봅니다. - Python라이브러리인 flask을 이용한 웹사이트 개발 과정 소개 - MongoDB를 이용해 웹사이트상에서 게시물 작성,조회,수정,삭제(CRUD) 기능 구현 실습 https://coredottoday.github.io/2018/10/15/Coredot-기술-세미나/ https://www.youtube.com/watch?v=gfbWxyz7Zeo
![[D2 CAMPUS]웹 개발자의 스펙 : HTTP](https://cdn.slidesharecdn.com/ss_thumbnails/d2campushttp-150822061635-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[NEXT] Flask 로 Restful API 서버 만들기](https://cdn.slidesharecdn.com/ss_thumbnails/flask2-141209115126-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
CoreDot TechSeminar 2018 - Session1 Park Jihun
- 1. 파이썬으로 세상에서 가장 쓸모없는 홈페이지만들기 박지훈 코어닷투데이 2018년 10월 26일 CoreDot Tech Seminar 2018
- 2. 2 강연자 소개 96년생 박지훈 -수리과학과 -현4개월차 코어닷투데이 인턴 개발자 -현 휴학생 -전 RESTA 프론트엔드 개발자 -전 카페알바 할줄아는것 -파이썬코딩 하고싶은것 -자연어처리, 딥러닝, 데이터사이언스 같은 있어보이는 기술
- 3.
- 4.
- 5. 5 개발 프로그래밍언어로 소스코드를 써서 프로그램을 만드는것 프로그래밍언어 컴퓨터가 이해할 수 있는 문법 체계를 가진 언어
- 6. 6 개발을 할 줄안다 프로그램을 만들 줄 안다
- 7.
- 8.
- 9.
- 10.
- 11. 11 인터넷에 있는 수많은튜토리얼들… 하지만… “(배우고 싶은것) 강좌” 구글에다가 치면 다나옴…
- 12. 12 오늘도 열심히 블로그/유투브를따라 하던 A씨. 길을 가다 도저히 풀리지 않는 에러를 만나고 마는데…
- 13. 13 결국 걸쭉하게 나쁜말을뱉고 마는 AC…! XX! AC~~X! XXXXX! 외않되 XX! 나쁜말! 나나나나쁜말!
- 14. 14 왜인지 도저히 몰라화/짜증을 내고 포기하는 A씨…! 쒸익,,, 쒸익,,,
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. 21 구글링을 통해 SMOOTHHH하게해결하는 A씨 Feat.
- 22. 22 인내심 구글링 코딩을 제대로시작하고 싶다면?
- 23. 23 인내심 (끈기) 구글링 코딩을 제대로 시작하고싶다면? 실행력
- 24.
- 25. 25 다룰 내용 웹사이트가 보이는원리와 구조 Flask의 기본 사용법과 MongoDB와의 연동
- 26.
- 27.
- 28. 28 크롬 (Chrome) 불여우 (Firefox) 인터넷탐험가 (Internet Explorer) 나침반 (Safari)
- 29.
- 30. 웹페이지의 구조 30 응답 Response 이미지파일, 레이아웃 &스타일파일 (HTML & CSS), 폰트파일, …
- 31. 31 요청 Request 응답 Response “웹사이트에 들어간다“ = “웹사이트를 보기위해필요한 파일들을 웹서버로부터 요청해서 다운받는다” 웹페이지의 구조
- 32.
- 33. 웹 개발 33 응답 Response HTML CSS JS 이미지, 폰트 요청 Request 이파일들을 만들고 구성해야함
- 34. 34 웹사이트 뼈대가 되는파일 HTML파일
- 35. 35 웹사이트 뼈대를 꾸미는파일 CSS 파일
- 36. 36 폰트이미지파일 그 밖에 JS파일,이미지파일, 폰트파일 등등
- 37. 웹 개발 37 응답 Response HTML CSS JS 이미지, 폰트 요청 Request 이파일들을 만들고 구성해야함
- 38. 웹 개발 38 응답 Response 요청 Request 요청이 어떠어떻게오면, 어떠어떤 데이터를 불러 와서 어떠어떻게 응답을 하도록 만들어야함
- 39. 웹 개발 39 응답 Response 요청 Request 요청이 어떠어떻게오면, 어떠어떤 데이터를 불러 와서 어떠어떻게 응답을 하도록 만들어야함 HTML CSS JS 이미지, 폰트 이 파일들을 만들고 구성해야함
- 40.
- 41. 웹 개발 41 요청 Request 응답 Response “웹사이트를 만든다” = 웹개발을한다“ = “웹을 보여주는데 필요한 파일들을 만들고, 사람들이 페이지를 보려고 할 때, 이 파일들을 다운받도록 해주는 프로그램을 만드는 것” HTML, CSS, JS … 곧 보게될 Flask
- 42. 42 오늘 만들 페이지는무엇인가?
- 43. 43 1. 그럴듯하게 보이는웹사이트 2. 쓸데없는 웹사이트
- 44.
- 45. 쓸모 없는 페이지 45 글을쓰면! 글을 지운다!
- 46.
- 47. Flask (Python), MongoDB, BootstrapTheme 어떻게? 47 응답 Response 요청 Request 오늘 만들 페이지
- 48. Flask (Python), MongoDB, BootstrapTheme 어떻게? 48 응답 Response 요청 Request Flask가 하는일 요청이 어떠어떻게 오면, 어떠어떤 데이터를 불러 와서 어떠어떻게 응답을 하도록 만들어야함 이 데이터를 저장할 때 쓰는 게 MongoDB
- 49. Flask (Python), MongoDB, BootstrapTheme 49 응답 Response 요청 Request Frontend(프론트엔드) 이미지파일, 레이아웃/스타일/JS파일 (HTML/CSS/JS …), 폰트파일, … 다른사람들이 이미 만들어놓은 멋진 Bootstrap Theme들이 있다. 시간이 없으니 감사히 가져다가 쓰도록 하자! 하지만 저작권은 꼭 확인해보도록 하자! 어떻게?
- 50. Flask란 무엇인가 50 - 파이썬으로웹페이지를 만들 수 있게 해주는 마법의 도구 (Framework) - 어려운 기능은 다 라이브러리로 형이 미리 만들어놨다 가져다 써라 - 파일 하나로도 페이지를 만들 수 있는 심플함. 가벼움. - 프로토타입, 랜딩페이지 개발에 용이
- 51. Flask란 무엇인가 51 - 파이썬으로웹페이지를 만들 수 있게 해주는 마법의 도구 (Framework) - 어려운 기능은 다 라이브러리로 형이 미리 만들어놨다 가져다 써라 - 파일 하나로도 페이지를 만들 수 있는 심플함. 가벼움. - 프로토타입, 랜딩페이지 개발에 용이 - 프로그래밍 언어 (컴파일러라는 것으로 프로그램을 만들 수 있음, 웹사이트 도 프로그램의 일종) - 다른 프로그래밍 언어들보다 쉬움 - 쓰는 사람이 많음 -> 커뮤니티 활성화 -> 질문많고, 라이브러리많음 -> 구 글에 모르는거 검색했을 때 잘나옴 - 다양한 분야에서 사용중
- 52. MongoDB는 무엇인가 52 - 페이지에필요한 데이터(ex. 게시물정보, 유저정보 등등 )를 저장하는 데 사용하는 데이터베이스 - NoSQL (높은 자유도, 확장성) 제목 태그 내용 생성시간 RDS (SQL) 제목 시간 태그 내용 제목 내용1 내용2 그냥 아무거나 카테고리 막 써도 들어감 NoSQL 제목 태그 내용 생성시간 제목 태그 내용 생성시간 제목 태그 내용 생성시간 제목 태그 내용 생성시간
- 53.
- 54. AWS란 무엇인가 54 - AmazonWeb Service – 아마존에서 제공하는 클라우드서비스 - 요즘 다들 클라우드 클라우드 하죠? - 보안 알아서 다 해줌, 관리 알아서 다 해줌. 서버컴퓨터 사서 조립할 필요 없음, 공간도 필요 없음, 뒷처리 필요 없음, 등등 - 처음 가입시 EC2라는 서비스를 1년간 무료로 사용할 수 있어 가벼운 웹사이트를 공짜로 돌릴 수 있다! Microsoft의 Azure서비스도 있고 알리바바도 알리바바클라우드가 있다! 관심이 있다면 다른 클라우드 서비스들도 한번 알아보는 것을 추천!
- 55.
- 56.
- 57.
- 58. 기본 코드를 돌려보자 58 1.Anaconda 설치 (Python) 2. Anaconda Prompt 열기 3. 가상환경이라는 것을 만든다 Seminar 자리에 아무거나 써도됨 (가상환경 이름) 4. 다만들어졌으면 가상환경을 킨다
- 59. 기본 코드를 돌려보자 59 5.성공적으로 켜졌으면 매애앤 앞에 (가상환경이름) 이 보인다. 요렇게 6. 플라스크 설치 명령어 실행 7. 프로젝트 폴더를 하나 만든다. 환경설정
- 60. 기본 코드를 돌려보자 60 9.폴더 안에 application.py 라는 파일을 만들고 내용을 더도 말고 덜도 말고 딱 9줄만 써보자 웹페이지 파일 생성
- 61. 기본 코드를 돌려보자 61 10.폴더 경로를 복사 11. Anaconda prompt로 돌아가서 cd 하고 복사한 경로를 붙여넣는다 (마우스 오른쪽클릭이 붙여넣기) 12. 드디어드디어드디어어어!!! 실행! (실행전 가상환경에 들어와 있는지 맨앞에 있는 (가상환경이름) 표시를 확인할 것!) *경로를 이동하는 명령어 (프로젝트폴더로 이동해야한다) 실행
- 62. 기본 코드를 돌려보자 62 따-란~!*켜진걸다시 끄는거는 ctrl+c 13. 인터넷을 키고 주소창에 localhost:5000 이라고 치고 엔터
- 63.
- 64.
- 65.
- 66.
- 67.
- 68. 기본 코드 설명 68 localhost/또는 localhost
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75. 조금 그럴듯한 페이지를만들어보자 75 1. 폴더 두개를 새로 만든다. static, templates (스펠링 유의)
- 76. 조금 그럴듯한 페이지를만들어보자 76 2. 구글에 bootstrap theme이라고 검색하면 나오는 사이트들에 들어가서 zip 파일로 된 테마를 다운받는다. https://startbootstrap.com/template-overviews/landing-page/
- 77. 조금 그럴듯한 페이지를만들어보자 77 3. 다운받은 파일들을 보면 주로 이렇게 있을텐데,
- 78. 조금 그럴듯한 페이지를만들어보자 78 얘네들은 아까만든 static 폴더로,
- 79. 조금 그럴듯한 페이지를만들어보자 79 얘는 templates 폴더로
- 80. 조금 그럴듯한 페이지를만들어보자 80 최종파일 구조
- 81. 조금 그럴듯한 페이지를만들어보자 81 최종파일 구조 뼈대
- 82. 조금 그럴듯한 페이지를만들어보자 82 최종파일 구조 뼈대를 꾸미는 애들
- 83. 조금 그럴듯한 페이지를만들어보자 83 최종파일 구조 나머지
- 84. 조금 그럴듯한 페이지를만들어보자 84 index.html 파일을 쪼끔 수정해주자. 여기 박스쳐져있는 애들처럼, href=, src= 으로 시작하는 애들 중에 https://랑 http://가 없는애들은 앞에 static/을 붙여준다 무슨말이냐면 이렇게
- 85. 조금 그럴듯한 페이지를만들어보자 85 얘네들은 아까만든 static 폴더로,
- 86. 조금 그럴듯한 페이지를만들어보자 86 위쪽에도있고
- 87. 조금 그럴듯한 페이지를만들어보자 87 아래쪽도
- 88. 조금 그럴듯한 페이지를만들어보자 88 중간에도 있다. (이미지파일) 이제 귀찮아서 펜으로...
- 89. 89 Index.html 수정 다했으면저장하고, 마지막으로 application.py파일에서 요렇게만 수정해준다.
- 90. 90 짜잔~! Ctrl+c 하고 다시python application.py 명령어를 치면?
- 91. 91 index.html 파일 안에저 텍스트들이 있다. 그래서 저 텍스트들을 찾아서 원하는 텍스트로 바꾸면 된다. 텍스트를 바꿔보자
- 92. 92 짜잔~! Ctrl+c 하고 다시python application.py 명령어를 치면?
- 93. 93 테마만 잘 가져와서쪼끔 수정하는법만 알면 된다
- 94.
- 95. 쓸데없는 사이트를 만들어보자! 95 1.Anaconda Prompt로 돌아가서 pip install pymongo 명령어를 친다. 2. 인터넷에서 MongoDB를 다운받고 설치한다.
- 96. 쓸데없는 사이트를 만들어보자! 96 3.설치가 다 되면, C:Program FilesMongoDBServer3.6bin폴더에 있는 mongod.exe 파일을 실행 (mongod.exe가 켜져있어야만 데이터베이스를 사용할 수 있음, 얘도 서버다, 데이터베이스 서버)
- 97. 97 코드를 보기전 여기서잠깐. MongoDB의 기본 개념, 명령어를 보자
- 98. MongoDB구조, 기본명령어 98 데이터베이스(database)-가장 큰단위 콜렉션(collection) 콜렉션(collection) 콜렉션(collection) . . . 문 서 문 서 문 서 . . . 활용예시 – 네이버에서 뉴스와 사전서비스에 MongoDB를 활용다고 치자. 네이버뉴스 서비스를 위해 데이터베이스를 만든다 네이버뉴스 데이터베이스에는 각 신문사 콜렉션 이 있고, 각 신문사 콜렉션 안에는 뉴스기사 문서가 들 어간다 네이버사전 서비스를 위해 데이터베이스를 만든다. 네이버사전 데이터베이스에는 각 언어별 콜렉션이 있고 각 언어별 콜렉션에는 단어 문서들(단어와 그 해석)이 들어있다.
- 99. MongoDB구조, 기본명령어 99 데이터베이스(database)-가장 큰단위 콜렉션(collection) 콜렉션(collection) 콜렉션(collection) . . . 문 서 문 서 문 서 . . . 우리가 만들 사이트에서는? 우리 서비스를 위한 데이터베이스를 만들고, 그 데이터베이스 안에는 게시글을 모아둔 콜렉션이 있 고, 그 콜렉션 안에는 게시글 문서가 있다.
- 100. MongoDB구조, 기본명령어 100 데이터베이스(database)-가장 큰단위 콜렉션(collection) 콜렉션(collection) 콜렉션(collection) . . . 문 서 문 서 문 서 . . . 우리가 만들 사이트에서는? 우리 서비스를 위한 데이터베이스를 만들고, 그 데이터베이스 안에는 게시글을 모아둔 콜렉션이 있 고, 그 콜렉션 안에는 게시글 문서가 있다. 데이터베이스 설정 데이터베이스, 콜렉션은 우리가 따로 만들 필요가 없다. 문서를 넣으면 우리가 지정한 이름으로 자동으로 생성
- 101. 문서 생성 101 데이터베이스 설정 설정한데이터베이스 콜렉션이름 추가 Seminar라는 데이터베이스안에 있는 콜렉션에 문서 추가 저장할 문서 {“키”:”저장할값”,”키”:”저장할 값”} 의 형태 키 값
- 102. 문서 조회 102 설정한 데이터베이스 콜렉션이름 조회 데이터베이스설정 Seminar라는 데이터베이스안에 있는 콜렉션의 전체 문서 조회
- 103. 문서 수정 103 설정한 데이터베이스 콜렉션이름 수정 수정할문서는 “title”이 “제목입 니다”인 문서 (첫번째 {}) {“$set”:{“수정할키”:”수정할 내 용”}} 데이터베이스 설정
- 104. 문서 삭제 104 설정한 데이터베이스 콜렉션이름 삭제 삭제할문서는 “title”이 “제목입 니다”인 문서 데이터베이스 설정
- 105. 특정 문서 조회 105 설정한데이터베이스 콜렉션이름 삭제 검색할 문서는 “title”이 “제목입 니다”인 문서 데이터베이스 설정
- 106.
- 107. 쓸데없는 사이트를 만들어보자! 107 5.이전코드와 동일한 코드에 Flask와 MongoDB를 연결하기 위해 다음 코드를 추가해서 application.py 파일을 만든다 Flask와 mongoDB를 연결 DB이름은 seminar 4. 프로젝트 폴더를 새로 만들고 그 폴더로 이동한다. 얘는 곧 쓸거
- 108. 쓸데없는 사이트를 만들어보자! 108 6.hello() 아래 코드를 다음과 같이 수정 mongoDB에서 데이터를 불러 와 articles라는 배열에 저장 데이터를 html파일로 전달 6. templates폴더를 만들고 index,html을 다음과 같이 만든다. Flask에서 전달된 데이 터 불러오는 부분 글쓰기버튼
- 109.
- 110.
- 111.
- 112. 쓸데없는 사이트를 만들어보자! 112 7.new() 라는 함수 (페이지) 를 새로 만든다 6. templates폴더 안에다가 new,html을 다음과 같이 만든다.
- 113. 쓸데없는 사이트를 만들어보자! 113 7.new() 라는 함수 (페이지) 를 새로 만든다 6. template폴더 안에다가 new,html을 다음과 같이 만든다. New라는 애는 두가지 용도로 쓰인다. 첫번째는 입력하는 화면을 띄우는 용도, 두번째는 입력하는 화면에서 “글쓰기”버튼을 눌렀 을때 입력한 값을 MongoDB로 전달하는 용도 여기가 첫번째 용도 여기가 두번째 용도
- 114.
- 115.
- 116.
- 117.
- 118. 쓸데없는 사이트를 만들어보자! 118 8.edit() 라는 함수 (페이지) 를 새로 만든다 New와 기능적으로 거의 똑같다.
- 119. 쓸데없는 사이트를 만들어보자! 119 8.edit() 라는 함수 (페이지) 를 새로 만든다 New와 기능적으로 거의 똑같다.
- 120. 쓸데없는 사이트를 만들어보자! 120 8.edit() 라는 함수 (페이지) 를 새로 만든다 New와 기능적으로 거의 똑같다. 수정 화면에 들어왔을때
- 121. 쓸데없는 사이트를 만들어보자! 121 8.edit() 라는 함수 (페이지) 를 새로 만든다 New와 기능적으로 거의 똑같다. 수정 화면에서 사용자가 글을쓰고 수정하기 버튼 을 눌렀을 때
- 122. 쓸데없는 사이트를 만들어보자! 122 8.edit() 라는 함수를 새로 만든다 New와 기능적으로 거의 똑같다. 다만 어떤 문서를 삭제할 것인지에 대한 정보가 들어가는 것과
- 123. 쓸데없는 사이트를 만들어보자! 123 8.edit() 라는 함수를 새로 만든다 New와 기능적으로 거의 똑같다. 다만 어떤 문서를 삭제할 것인지에 대한 정보가 들어가는 것과 새로만드는 insert가 아니라 기존에 있는 것을 수 정한다는 update를 사용한다는 점이 다름.
- 124. 쓸데없는 사이트를 만들어보자! 124 8.edit() 라는 함수 (페이지) 를 새로 만든다 New와 기능적으로 거의 똑같다. 다만 어떤 문서를 삭제할 것인지에 대한 정보가 들어가는 것과 새로만드는 insert가 아니라 기존에 있는 것을 수 정한다는 update를 사용한다는 점이 다름. New.html 파일도 똑같이 사용한다.
- 125.
- 126. 쓸데없는 사이트를 만들어보자! 126 9.delete() 라는 함수(페이지)를 새로 만든다 제일 간단. 이 페이지로 들어가면
- 127. 쓸데없는 사이트를 만들어보자! 127 9.delete() 라는 함수(페이지)를 새로 만든다 제일 간단. 이 페이지로 들어가면 요 title을 가진 친구를
- 128. 쓸데없는 사이트를 만들어보자! 128 9.delete() 라는 함수(페이지)를 새로 만든다 제일 간단. 이 페이지로 들어가면 요 title을 가진 친구를 삭제.
- 129. 쓸데없는 사이트를 만들어보자! 129 9.delete() 라는 함수(페이지)를 새로 만든다 즉, /delete/(제목) 으로 이동하면 해당 제목을 가진 문서가 삭제된다.
- 130.
- 131.
- 132.
- 133. 쓸데없는 사이트를 만들어보자! 133 9.아래 코드를 참고해서 쓸데없는 코드를 넣자!
- 134. 쓸데없는 코드 추가 134 … 새로고침새로고침 새로고침 새로고침 새로고침 새로고침 새로고침 새로고침 (삭제)
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.