![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/caiuxd/btrPnf9sqh0/JYUIwe3xKOfAUdKDVr3BpK/img.png)
◎ 오늘 배울 것? -HTML과 mongoDB를 연동해서 서버 만들기 ● 로컬 개발환경 : 한 컴퓨터에 서버를 만들어 요청과 출력을 한 번에 하는 것. 클라이언트 = 서버 ○ flask 시작하기 flask패키지를 설치하자. app.py파일을 하나 새로 만들어 flask기본 코드를 넣고 실행한다. from flask import Flask app = Flask(__name__) @app.route('/') def home(): return 'This is Home!' if __name__ == '__main__': app.run('0.0.0.0',port=5000,debug=True) 새 창을 열어 주소창에 'localhost:5000'을 입력하면 새로운 페이지가 나온다. 하나 더 만들어보자. @app.r..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bkoiBL/btrPgVCDDWt/0oB3BA2mmUmojQjbYaGS31/img.jpg)
● 크롤링 결과를 가지고 연습해보자. 새로운 폴더를 만들어 시작하자. 1) 영화 '가버나움'의 평점을 가져오자. 특정 결과값을 가져오려면? .find_one() 먼저 해당 데이터를 가져와보자. movie = db.movies.find_one({'title': '가버나움'}) print(movie) 여기서 평점만 가져온다. print(movie['star']) 2) '가버나움'의 평점과 같은 평점의 영화 제목들을 가져오자. '가버나움'의 평점을 이용하여 같은 평점인 영화들을 가져온다. movie = db.movies.find_one({'title':'가버나움'}) star = movie['star'] '가버나움'의 평점을 선언해준 후 조건을 걸어준다. all_movies = list(db.moviess.f..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/0riGR/btrOZ8BbNQ4/JRdd61MqK9O058MAROMDM0/img.jpg)
◎ 데이터베이스(DB) - DB를 쓰는 이유? 데이터를 저장하고 나중에 잘 찾기 위해! ○ DB의 종류 - SQL : 행/열에 데이터를 저장하는 것. 정형화되어 있는 만큼, 데이터의 일관성이나 분석에 용이하지만 중간에 열을 하나 더하는 건 어렵다. -NoSQL : 딕셔너리 형태로 데이터를 저장해두는 DB. 데이터 하나 하나 마다 같은 값들을 가질 필요가 없으므로 자유로운 형태의 데이터 적재에 유리하다. 하지만 일관성이 부족하다. DB는 컴퓨터가 아닌 프로그램으로 설치하면 사용할 수 있다. 요새는 Cloud형태에서 제공하는 DB를 많이 사용한다. 왜? 유저가 몰리거나 / DB를 백업해야 하거나 / 모니터링 하기에 아주 용이하다. 수업에서도 Cloud형태에서 제공하는 NoSQL의 종류인 mongoDB Atl..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/Droi2/btrOYw9U7Ag/YXO6DKK8Nln55l8q3wdPh1/img.jpg)
◎ 파이썬 패키지 - 크롤링을 하기 위해서는 남들이 만들어 놓은 라이브러리가 필요하다. 이러한 라이브러리를 '패키지'라고 부른다. ▶ 패키지 설치 = 외부 라이브러리 다운 만약, 내가 사용하던 패키지가 아닌 다른 패키지를 사용해야하는 상황이라면? → 가상환경(virtual environment)을 사용한다. ● 가상환경이란? : 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경이다. 파이썬 폴더를 만들때 생기는 'venv'폴더가 이 역할을 한다. ○ 패키지 설치하기 파일 → 설정창에서 프로젝트: 파일명 안의 Python인터프리터 들어가기 + 눌러서 'requests'검색 후 패키지 ..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/c63MDz/btrOS3fqLJ3/LxC89p7eXD4axl16mVVXM0/img.jpg)
◎ 파이썬 기초 문법 ● 변수 ,기본연산 - 변수 선언하기 문자열도 넣을 수 있다. - 사칙연산 a = 3 b = 6 print(a*b, a+b, a-b, b%a) 실행을 하면 창에 print의 결과값이 찍힌다. 문자열을 더해보자. firstname = 'kiji' lastname = 'kim' print(firstname+lastname) ● 자료형 변수 안에는 숫자, 문자열 그리고 참/거짓을 구분하는 'Boolean'형도 들어갈 수 있다. 거기에 리스트, 딕셔너리도 들어간다. - 리스트형 a_list = [] 자바스크립트의 리스트형과 형태가 같다. 리스트에 값을 추가하려면? a_list = [1,2,3,4] a_list.append(5) print(a_list) 자바스크립트에서는 .push()를 사용..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/lYQcc/btrOtFUwX0F/kbsKnn7x6umeeV9nwtWfD1/img.jpg)
● 실시간 따릉이 정보를 알아보자. 업데이트 버튼을 누르면 실시간 따릉이의 정보가 나오게하자. 실시간 정보 →http://spartacodingclub.shop/sparta_api/seoulbike 먼저 기본 골격부터 입력 후 콘솔창에 찍어본다. function q1() { $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulbike", data: {}, success: function (response) { console.log(response) } }) } 이제 하나씩 찍어주기 위해 반복문으로 돌린 후, 여기서 필요한 정보가 어디에 들어있는지 보고 찍어보자. > 거치대 위치, 거치대 수, 현재 남은 수 변수를 선언해 찍어보..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bCGG2N/btrOscLbiX3/X0FlWNceR2t2WsEWqLaBnK/img.jpg)
◎ 서버- 클라이언트 통신 이해하기 ●서버가 클라이언트의 요청을 받고 데이터를 내려주는 형태에 대해 알아보자. 서울시에서 제공하는 openAPI를 살펴보자. http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 위처럼 키-밸류 쌍으로 이루어진 데이터양식을 'JSON'이라고 한다. JSONView를 설치하면 정리된 데이터를 볼 수 있다. ● 클라이언트가 서버에 요청하는 방법에 대해 알아보자. 클라이언트는 'API'를 통해 요청을 보내는데 API는 은행창구와 비슷하게 고객의 요청의 종류에 따라 다르게 처리한다. - GET타입 : 주로 데이터 조회를 원할때 사용한다. 예) 영화 목록 조회하기 https:/..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bQllgy/btrN79tToBI/gyjdnvKuPkp26Vd3YG6ZaK/img.jpg)
○ Javascript복습 - 버튼을 클릭한 수가 짝수인지 홀수인지 나타내보자. 1주차에서 만든 영화기록페이지에서 실행해보자. 먼저 버튼에 동작을 연결해보자. 영화 기록하기 연결이 잘 되었다면 이제 함수를 만들어보자. 클릭한 수를 담는 변수를 선언한 후 홀/짝을 구분한다. 2로 나누었을때 나머지가 0이면 짝수, 1이면 홀수라는 조건을 달아준다. let count = 0 function hey() { count += 1 if (count %2 == 0) { alert('짝수') } else { alert('홀수') } } ◎ JQuery : HTML요소들을 조작하는, 편리한 javascript를 미리 작성해둔 라이브러리 (like 부트스트랩) ● jquery 사용하기 https://www.w3schools..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/2XBGk/btrN3rjdlNm/Y7abTPObOX0tinJG5BNQKk/img.png)
◎ 팬명록을 만들어보자 숙제는 해설영상 없이 스스로 해보았다. 우선 상단부분부터 만들어보자. html을 구성하고 css를 설정한다. 김기지 팬명록 구역의 크기를 맞춰주자. 배경이미지를 넣고 글자의 속성도 바꿔준다. background-image: url("포스터1.jpg"); background-position: center 45%; background-size: cover; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; 이제 포스팅박스를 만들자. 지난 시간에 만든 영화 기록하기 포스팅박스를 참고해보자. 먼저 구역을 정해보자. 포스팅박스 구역의 크기를 정한 후 중앙으로 옮겨준..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/SklpW/btrN2V5imVv/GUeITp8CBN7L19bcYtKJGk/img.jpg)
◎ Javascript : 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어 안의 이 함수가 버튼이 클릭할때 작동되기 위해 버튼에 동작을 달아준다. 영화 기록하기 로컬파일로 가서 버튼을 클릭하면 메서지창이 뜬다. 여기서 검사의 콘솔창을 통해 의 설정을 이어서 실행할 수 있다.(저장은 되지 않음) 콘솔창에 hey()를 입력해보자. 콘솔창은 개발자들이 자바스크립트의 테스트 시에 발생하는 번거로움을 해결하기 위해 만들어졌다. 콘솔창을 통해 자바스크립트의 기초 문법을 배워보자. ○ 변수 : 값을 담는 것 변수를 선언할 때는 let을 사용한다. 문자열을 넣어줄때는 ' ' 로 묶어줘야 인식이 가능하다. 여기서 사칙연산도 가능하고 문자열의 더하기도 가능하다. ○ 자료형 : 값이 커져 변수를 선언하기에 복..