서버는 어떤 컴퓨터든지 그 역할을 수행할 수 있다. 모든 컴퓨터도 모든 역할을 할 수 있다.

그런데 언제나 요청에 응답하려면 컴퓨터가 항상 켜져 있어야 한다.그리고 app.py가 항상 실행되어 있어야 하고 모두가 접근할 수 있는 IP주소로 나의 웹 서비스에 접근할 수 있도록 컴퓨터를 밖에다가 열어놔야한다.

듣기만 해도 뭔가 보안에 취약해 보이고 왠지 특별한 컴퓨터가 있어야 할 것 같은 느낌이 든다.

그래서 통상적으로 모든 서비스는 이렇게 지금 코딩하는 컴퓨터에다가 서버 역할을 시켜서 밖에다 열어두지 않는다.특히 요새는 클라우드 환경:인터넷 환경에 있는 컴퓨터를 사서 거기다 올려놓고 사람들한테 그쪽으로 접속하게 만들어 둔다.

옛날에는 서버실이 따로 있고 컴퓨터들의 본체만 쌓아두고 거기다가 서버실을 만들어두기도 했었다. 요새는 그런 회사가 거의 없다.

그래서 AWS(아마존 웹서비스.아마존 e-커머스 회사에서 만들어둔 클라우드 플랫폼이다.) 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용할 것이다.

🐾 IP 주소와 포트

사실 우리가 접속하는 컴퓨터는 숫자로 되어있는 주소(IP 주소)가 붙어있다. 우리가 아는 URL 은 우리가 알아보기 쉽게 하는 등의 이유로 IP 주소를 알파벳으로 바꾼 거다. 이렇게 변환해주는 시스템을 DNS 라고 한다.

• IP 주소(줄여서 IP라고 부른다.)

  : 컴퓨터가 통신할 수 있도록 컴퓨터마다 가지는 고유한 주소라고 생각하면 된다. 정확히는 네트워크가 가능한 모든 기기가 통신할 수 있도록 가지고 있는 특수한 번호다. 서버는 하나의 주소를 가지고 있다.

• 포트(port)

  : 하나의 IP에 여러 포트가 있다. 하나의 포트에 하나의 프로그램을 실행시킬 수 있다.

카드 삭제 API (Delete → POST)

1) 클라이언트와 서버 연결 확인하기 2) 서버부터 만들기 3) 클라이언트 만들기 4) 완성 확인하기

1) 클라이언트와 서버 연결 확인하기 서버에서 '/api/delete'에 'POST'에'sample_give'로 받고 있고 msg로는 'delete 연결되었습니다!'를 주고 있다. 클라이언트에선 변수로 name을 받는 deleteStar(name)라는 함수'POST'에 '/api/delete' sample_give:'샘플데이터'로 주고 있고 alert으로 msg를 받는다.

브라우저에서 삭제를 누르니 'delete 연결되었습니다!'라는 msg가 뜬다.잘 연결이 되어있다.

2) 서버부터 만들기 name을 받아야한다. name_receive = request.form['name_give'] 받은 name으로 삭제를 해주어야한다. db.mystar.delete_one({'name':name_receive}) msg로는 '삭제완료!'를 해주겠다. return jsonify({'msg': 'delete 연결되었습니다!'})

3) 클라이언트 만들기 데이터로는 name_give로 주고 방금 받은 name을 변수로 가져가면 되겠다. data: {name_give:name}, 마찬가지로 alert 밑에 새로고침 코드를 넣어준다. window.location.reload();

4) 완성 확인하기 리로딩을 하고 삭제 버튼을 눌러준다. 그러면 refresh 되면서 삭제한 카드가 삭제가 된다.

좋아요 API (Update → POST)

좋아요를 높여주는 기능을 만들면 된다. 어떤 의미인지 생각하자면 일단 클라이언트에서 이름을 받아서 그 이름의 좋아요 값을 찾은 다음에 그 좋아요 값에다 1을 더해서 그거를 덮어 씌워 주면 되겠다.다시 말해서 업데이트를 해주면 된다.

1) 클라이언트와 서버 연결 확인하기 2) 서버부터 만들기 3) 클라이언트 만들기 4) 완성 확인하기

1) 클라이언트와 서버 연결 확인하기 서버에서 '/api/like'에다 'POST'에 'sample_give'로 받고 있고 msg로 'like 연결되었습니다!'받고 있다. 클라이언트에선 likestar 함수가 '위로!'라는 버튼에 붙어있다.변수로(name)을 받고 있는데 좋아요를 받은 이름을 받아야 그 이름을 넘겨주면서 그 이름의 like를 올려달라 할 수 있다. 그 함수는 'POST'에 '/api/like'에다 sample_give:'샘플데이터'값을 주고 있다.잘되면 msg가 alert으로 뜬다.

브라우저에서 아무나 한명 '위로!'버튼을 누르니 msg 'like 연결되었습니다!'가 잘뜬다.

2) 서버부터 만들기 서버에서는 이름을 받는다. name_receive = request.form['name_give'] 좋아요를 받은 이름을 찾아서 뭘 해줘야하기 때문에 아까 좋아요 누른 스타에 해당하는 이름 하나를 찾아야한다. 한개 찾기 db를 가져온다. target_star라는 변수를 주고 목록이름은 name 그대로이다. target_star = db.mystar.find_one({'name':name_receive}) target_star로 찾을 것이다.한줄만 나올것이다. 그 안에서 like값만 갖고 오고 싶다. current_like = target_star['like'] 그리고 거기서 +1을 해줄거기 때문에 new_like = current_like +1 이제 star의 like 값을 업데이트 시켜줘야 한다. name_receive로 받아 온것에 'like'를 new_like해주겠다. db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}}) msg로는 '좋아요 완료!'를 띄워주겠다. return jsonify({'msg': '좋아좋아!'})

3) 클라이언트 만들기 data를 뭘로 갖다주냐면 request.form['name_give'] name_give로 준다 했고 내용물은 변수로 담겨질name이다. data: {name_give:name},

한가지 더,좋아요를 눌렀을때 새로고침이 되면 더 좋겠다.alert 아래에 window.location.reload();

4) 완성 확인하기 브라우저에서 위로!를 누르면 업데이트되면서 +1이 축적되고 refresh(새로고침) 되면서 좋아요가 많은 스타가 위로 올라간다.

좋아요 버튼이 눌리면 likeStar(name)함수가 작동이 되면서 좋아요를 받은 변수(name)이 들어가게 되고 그 좋아요 받은 이름을 'name_give'로 형식으로 주고 서버에서 받아서 그 좋아요 받은 이름을 찾는다.그 찾는 이름에서 like를 찾고 거기서 +1을 해준다. 그리고 그 +1해준 이름을 +1로 업데이트로 반영시켜준다.

영화인 조회 API (Read → GET)

1. 클라이언트와 서버 연결 확인하기
2. 서버부터 만들기
3. 클라이언트 만들기
4. 완성 확인하기

1. 클라이언트와 서버 연결 확인하기 서버에서 '/api/list'에'GET' sample_give로 받고 msg로는 'list 연결되었습니다!'라고 내려주고 있다. 클라이언트에서는 showStar라는 함수로 요청하고 있고 로딩이되자마자 동작하게 되어있다.(조회) GET에 '/api/list?sample_give=샘플데이터'

브라우저에서 로딩하자마자 'list 연결되었습니다!'라는 msg가 뜬다.연결이 잘되어있다.

2. 서버부터 만들기 서버에서 할 일 Robo3T에서 가져왔던 정보들을 쭉 클라이언트에 내려주면 된다. 나홀로메모장에서 articles 내려주듯이 내려주면 되는데 다른점은 like의 역순으로 내려줘야 한다.일단 전부 내려주는것 부터 해본다. movie_star = list(db.mystar.find({},{'_id':False})) return jsonify({'movie_stars':movie_star}) 그다음 이제 정렬을 해줄건데, pymongo에는 정렬을 해서 뽑는 기능이 있다.

🔍🔍pymongo 정렬🔎🔎>>sort라는 단어가 나온다. 🔍🔍pymongo sort w3school🔎🔎 mydoc = mycol.find().sort("name") 예시를 보니 이름순(오름차순)대로 정렬된다. mydoc = mycol.find().sort("name", -1) 예시를 보니 이름역순(내림차순)으로 정렬된다.

find()가 끝나는 지점에서 붙여주면 되겠다. movie_star = list(db.mystar.find({},{'_id':False}).sort('like', -1)) 큰따옴표대신 작은따옴표로 대체해본다.

3. 클라이언트 만들기 클라이언트에서 해야될 일은 서버에서 response에 이 'movie_stars' 내려줬던걸 확인해 봐야한다.

   let mystars = response['movie_stars']
                        console.log(mystars)

   딕셔너리가 들어있는 리스트 형태로 순서대로 잘 찍혔다.

이제 for문으로 돌려준다. 받아올 것은 (name,img_url,recent,url,like)다. let 목록변수 = 받기로한 데이터의 변수[i]['목록'] 하나씩 목록마다 순서대로 꺼내졌다.

마지막으로 카드를 만들어서 붙여줘야하는데

카드의 이미지,이름,좋아요 수,최신작들을 바꿔줘야 한다. 여기에 하나 더 숨겨져 있는데 카드 디브를 열어보면 onclick="likestar('김다미')"에 이름을 넣게 되어있다. 위에가서 보면 likestar(name) 이름을 받는 함수 이다. 아래에 여러개의 이름이 더 있는데 빼먹지말고 같이 교체해주면 되겠다. card div 전체를 복사해주고 let temp_html=`` 에 넣어준다. 너무 기니까 접어주고 그 아래에 $('#id값').append(temp_html) 원래 있던 card div는 삭제해준다.

4. 완성 확인하기 like의 역순으로 잘 나오는지 확인해야 한다. 아직 조회의 기능밖에 없으니까 Robo3T로 가서 mystar 컬렉션에서 아무나 like를 수정해준다.like목록 내용물 아무거나에서 오른쪽 버튼>Edit Document>like 1로 바꾸고 save 브라우저에서 리로딩해서 보면 바꾼 카드의 인물이 제일 위에 올라와 있다.

File>New Project>moviestar>create New>Python File>app.py New>Directory>static/templates(>html File>index.html) File>setting>flask/pymongo/bs4/requests

데이터 쌓기

데이터를 먼저 모아두고 그 데이터를 보여주는 작업 크롤링해서 원하는 정보를 긁어오는 것이다. 시간상 크롤링 코드 짜놓은걸 갖다 쓰겠다. New>python File>init_db 붙여놓고 작동시켜준다. 자료들이 잘 들어갔는지 확인하기 위해서 robo3T를 써주겠다. collections>mystar 잘 들어갔다.

뼈대 준비하기

코드스니펫 app.py/index.html 복붙하기 데이터 쌓기 했던 파일은 삭제하기 app.py 구동하기>localhost:5000

💾리스팅 API (Read → GET)💻

우리가 만들 API 두 가지

1️⃣ 포스팅API - 카드 생성 (Create) : 클라이언트에서 받은 url, comment를 이용해서 페이지 정보를 찾고 저장하기 2️⃣✔ 리스팅API - 저장된 카드 보여주기 (Read)

1️⃣ 클라이언트와 서버 연결 확인하기 2️⃣ 서버부터 만들기 3️⃣ 클라이언트 만들기 4️⃣ 완성 확인하기

1️⃣✔ 클라이언트와 서버 연결 확인하기

👩‍💼app.py에서 받는 형식 체크하기 🙋‍♀️showarticles 에서 주는 형식 체크 성공하면 app.py에서 어떤 msg 내려주는지 체크 showarticles는 로딩이되자마자 나오게 되어있다. 브라우저에서 로딩을 하자마자 'GET 연결 되었습니다!'라는 alert이 뜬다.

2️⃣✔ 서버부터 만들기

👨‍💼서버 쪽에서 할 일 저장된 정보를 모두 불러와서 그대로 클라이언트한테 줄거기 때문에 클라이언트로부터 받을 데이터 없다. same_ages = list(db.users.find({'age':21},{'_id':False})) articles로 변수를 받겠다. articles collection에서 데이터를 가져온다. find에 조건없다. articles = list(db.articles.find({}, {'_id': False}))

이제 msg를 내려줄게 아니라 articles 정보를 내려주면 된다. 'all_articles'라고 하고 내려줄것이다. return jsonify({'all_articles':articles})

3️⃣✔ 클라이언트 만들기

서버에서 준 데이터를 그대로 브라우저에 그려줄(붙여줄)것이기 때문에 🙋‍♀️데이터 가지고 가야할 것 없다. url: "/memo", 그리고 서버에서 준 데이터들을 잘 받았는지 확인하기 위해, (response)에 articles가 잘 내려오는지 확인하는게 먼저다. 먼저 let articles = response['']

app.py에서 return jsonify({'all_articles':articles}) 👉response에 all_articles로(=articles전체db)내려준다고 하였다. let articles = response['all_articles'] console.log(articles) 브라우저에 리로딩하고 확인

이제 카드를 붙이려면 for문을 돌려야한다. (console에 찍혀 있는 5개의 데이터를 가져와야한다.) let 변수 = collection이름[에서의 i번째]['가져올 목록'] 순서대로 나열해준다

for (let i = 0; i < articles.length; i++) {
     let title = articles[i]['title']
     let image = articles[i]['image']
     let url = articles[i]['url']
      let desc = articles[i]['desc']
      let comment = articles[i]['comment']

    console.log(title,image,url,desc,comment)

잘 찍혔다.

이제 붙여주겠다. card-div를 하나 가져온다. 내용물에 붙여준다. temp_html 붙여줄건데 어디다 붙여주냐면 id "cards-box" 에다 붙여준다. $('#cards-box').append(temp_html)

이제 처음 붙어있던 카드들을 삭제해줘도 될 것 같다. 있던 card div들을 삭제해준다.

4️⃣✔ 완성 확인하기

붙여진 카드 url들어간다. 원하는 영화 들어가서 url을 따온 뒤에 포스팅박스 안에 url을 넣고 comment 써주기 기사저장 누르고 리로딩되면 방금 내가 작성한 카드가 붙는것을 확인 할 수 있다.

📢API 만들고 사용하기

📀포스팅API (Create → POST)💿

우리가 만들 API 두 가지

1️⃣✔ 포스팅API - 카드 생성 (Create) : 클라이언트에서 받은 url, comment를 이용해서 페이지 정보를 찾고 저장하기 2️⃣ 리스팅API - 저장된 카드 보여주기 (Read)

1️⃣ 클라이언트와 서버 연결 확인하기 2️⃣ 서버부터 만들기 3️⃣ 클라이언트 만들기 4️⃣ 완성 확인하기

1️⃣✔ 클라이언트와 서버 연결 확인하기

app.py에서 먼저 볼 것은 어떤 형태인가. /memo에 post형식이다. 'sample_give'형태로 받는다. postarticle이라는 함수에서 비교확인을 한다. 확인을 다 했으면 postaticle이라는 함수가 붙어있는 쪽으로 간다. 기사 저장 부분에 붙어있다. (순서): 기사 저장을 누르면>postaticle 함수가 불리고>이게 불리면 ajax콜을 할 것이고> app.py(창구)에서 post /memo형식이 맞고 sample_give를 잘 받으면> msg로 'POST 연결되었습니다!'를 주면>alert으로 그 msg를 띄워준다.

기사저장을 누르니 POST 연결되었습니다!라는 문구가 뜬다. 잘 연결 되었다.

2️⃣✔ 서버부터 만들기

👩‍💼첫째,url하고 코멘트를 받아야한다. (창구에서 민증 가져오라는 식) url_receive = request.args.get('url_give') comment_receive = request.args.get('comment_give')

둘째, 받은 url을 가지고 타이틀,이미지,디스크립션 크롤링 해와야한다.

크롤링코드 조각기능으로 짜놓은게 있다. 서버에 import되있는지 확인

탭으로 한 칸 띄워줘야 def listing 함수에 들어간다.

url_give로 받는 url_receive를 크롤링 해온 url주소 대신 url = url_receive로 바꿔치기 해도되지만 data에 있는 url대신 url_receive로 넣어준다. (갖고온 url주소는 없애 버린다.) url_receive 받아서 data에 들어가고 크롤링이 진행될 것이다.

그런데,지금은 print가 필요가 없다. insert를 해줘야한다.(post니 정보를 받고있는 입장이다) pythonprac폴더>dbprac을 끌어다 놓는다. import가 app.py에도 있는지 본다.

저장해줄 목록을 하나씩 적어준다. doc={'목록 이름':목록 내용물} 이런식 db.articles.insert_one(doc) articles에 저장하기로 한다. 저장이 완료 되면 msg로 띄워줄것은 대충 '저장 완료!'라고 해둔다.

3️⃣✔ 클라이언트 만들기

url,comment를 가지고 app.py(창구)에 가야 한다. let 가져가야할 것 = $('#해당 input-box id').val()

function postArticle() {
                let url = $('#post-url').val()
                let comment = $('#post-comment').val()
                $.ajax({

post랑 /memo형식 같고 data: {sample_give:'샘플데이터'},만 바꿔주면 된다. app.py(창구)에서 어떤 방식으로 가져오라고 했냐면 url_receive = request.form['url_give'] comment_receive = request.form['comment_give'] url_give랑 comment_give방식으로 가져오라고 했다. 👉data: {url_give:url,comment_give:comment},

url,comment를 가져가서 app.py에서 잘 처리해주면 성공메시지로 저장완료!alert 띄우기

4️⃣ 완성 확인하기

브라우저에서 리로딩하고 포스팅박스열기>url작성>comment작성>기사저장>저장완료msg보기 그런데,저장완료!까지 떴는데 작성했던게 새로고침이 안됀다.새로고침을 해주자 alert아래에 window.location.reload() 작성해준다. 리로딩하고 다시작성 이제 기사저장하면 새로고침이 된다. robo3T에서 확인해보기

이미지,제목,요약 등을 어디서 가져올까 API 설계를 했는데 어떤 기술이 필요한데 그 기술을 먼저 검증을 해봐야 한다. 프로젝트 시작하기 전에 테스트를 해본다.개인적으로 조각 기능이라 부른다한다.

❔❔이미지,제목,요약들을 어떻게 url만 갖고 크롤링을 해올까❔❔

📢meta태그를 이용해서 크롤링을 해볼 것이다.

<head>안에 <meta>가 있는데 그 안에 og:title,og:image,og:description을 주목해봐야한다.

카톡이나 페이스북 이런데 공유 했을때 자동으로 이미지,타이틀,요약이 나오는데 이런 거를 og:title,og:image,og:description 이라는 meta태그에다가 넣어놓으면 어느 사이트든 자동으로 긁어갈 수 있도록 조치를 취해논거다.

많은 메신저들이 이 형태를 이용한다. 반대로 우리는 url을 이렇게 만드는 입장이라고 한다면 og:title,og:image,og:description을 잘 넣어놔야 공유할 때 저렇게 잘 뜬다.

📢이제 og:title,og:image,og:description을 스크래핑 해올 거다.

테스트 할 Python File을 만든다.실행이 잘되면 app.py에다가 필요한 부분은 갖다가 넣을것이다. 그러면 중간에 구현하지 못하는 기능이 있어서 스트레스 받을 일이 없다.

코드스니펫에서 크롤링 기본코드를 복붙한다. print(soup)해서 html이 잘 찍히는지 확인 먼저 한다.

title = soup.select_one('') 👉네이버 영화 그린북에서 element에서 meta태그안의 og:title그린북쪽에서 copyselector해서 넣는다. print(title)하면 안나온다.

🎈meta태그의 순서

왜냐면 사람이 직접 브라우저에서 element들어가서 확인한 meta태그의 순서와 파이썬 코드가 접속했을 때 나오는 meta태그의 순서가 다르기 때문이다. 괄호의 숫자를 바꿔가면서 찾아야하는데 너무 번거롭다.

그래서 지금은 이 방법이 아니라 ('meta[]') 👉meta 태그 중에서 [] 속성이 일치하는 애를 가지고 와라

title = soup.select_one('meta[property="og:title"]') print(title) ▶

그 중에서도 이 content만 갖고 오면 된다. print(title['content']) ▶ 그린북

이 print(title['content'])를 title = soup.select_one('meta[property="og:title"]')['content'] 여기다 두면 똑같다.

마찬가지로 나머지도 복붙해서 데이터만 바꿔 끼워준다.

ogtitle = soup.select_one('meta[property="og:title"]')['content'] ogimage = soup.select_one('meta[property="og:image"]')['content'] ogdesc = soup.select_one('meta[property="og:description"]')['content'] print(ogtitle,ogimage,ogdesc) ▶

조각 기능을 완성 하였다. app.py를 코딩하다가 조각 기능이 필요한 순간에 적절하게 갖다 붙히면 된다.

New project>alonememo app.py/templates/static setting>flask/pymongo/(url넣었을때 자동으로 정보가 가져와졌다.크롤링이 필요 크롤링을 위한)requests/bs4

모든 프로젝트를 하기 전에는 API를 설계하는 일이 가장 처음에 해야될 일이다. 그래야 우리 서비스에 어떤 기능들이 필요로하고 그 기능은 어떤 순서로 구현을 할 건지 이런 계획하는 설계 일을 해야한다.

👉나홀로메모장을 기준으로 어떤 기능들이 필요한지 API를 먼저 설계를 해볼 것이다. 첫번째 기능은 url하고 코멘트를 서버 쪽에 보내줘서 서버에서 그 데이터를 저장 하는거(POST) 두번째 기능은 카드들을 보여 주는 것(GET)이다. DB에 저장해야 할 것들은 이미지URL,제목,요약,코멘트 그리고 제목을 눌렀을 때 링크까지해서 5개 이다.

👩‍💼API 설계하기👩‍💻

받은 url을 가지고 제목,요약,이미지 주소 스크래핑 제목,요약,url,이미지url,코멘트(그 데이터)5개 정보를 모두 DB에 저장 다되면 success

클라이언트한테 받을 데이터 없다.왜냐하면 다 줄거기 때문에. 카드 만들어서 붙이면 끝

🐾이 리스팅API는 클라이언트에서 언제 호출할까 로딩이 되자마자 바로 기사저장 버튼에다가 로딩이 끝나면 바로 호출되는 Ajax콜 하나 만든다.

제목, 저자, 리뷰

💾저장된 리뷰를 화면에 보여주기(Read → GET)💻

1️⃣ 클라이언트와 서버 확인하기 2️⃣ 서버부터 만들기 3️⃣ 클라이언트 만들기 4️⃣ 완성 확인하기

1️⃣✔ 클라이언트와 서버 확인하기

👩‍💼서버쪽 형태 /review, get sample_give라는 이름으로 데이터를 받는다. 🙋‍♂️클라이언트 get type에 /review에 sample_give 이름으로 샘플데이터를 가져간다. success되면 response로 잘 내려와서 alertd로 msg를 찍어줘라 되있다. 서버쪽에서 msg를 내려줄거는 '이 요청은 GET!' 클라이언트 showreview 함수가 언제 불리냐면

$(document).ready(function () {
                showReview();
            });

로딩되자마자 불린다. 연결이 잘되었다.

2️⃣✔ 서버부터 만들기

👨‍💼서버쪽의 역할 GET은 통상적으로 데이터 조회를 할때 쓴다 했다.데이터를 건들게 없고 조회만 해주기 때문에 클라이언트한테 어떤 데이터를 받을게 없다. 서버는 모든 리뷰를 DB에서 가져와서 그대로 내려주기만 하면 됀다. sample_receive = request.args.get('sample_give') print(sample_receive) 데이터 받아주는 코드 지우기

DB에서 리뷰 가지고 오는 코드를 붙여 넣는다.

same_ages = list(db.users.find({'age':21},{'_id':False}))

reviews라는 변수로 받을것이다. collection의 bookreview에서 불러오고 찾는 조건은 없다.다 가져온다.

reviews = list(db.bookreview.find({}, {'_id': False}))

return jsonify({'msg': '이 요청은 GET!'}) 메세지를 내려줄 필요는 없다. return jsonify({'all_reviews': reviews})

3️⃣✔ 클라이언트 만들기

🙋‍ all_reviews가 잘 내려오면 그거를 가지고 for문을 돌면서 리뷰들을 붙여주면 된다.

url: "/review?sample_give=샘플데이터", 데이터 조회이기 때문에 클라이언트가 가져가야할 데이터는 없다. 👉url: "/review",

만약에 잘 내려왔다면 response중에서 all_reviews 값만 일단 가져온다. reviews라는 변수로 붙여주겠다. let reviews = response['all_reviews'] 잘 내려왔는지 확인하기 위해 console.log(reviews) 잘 찍혔다. 이제 for문을 돌릴 것이다. (쌓을 데이터가 필요하면 브라우저에서 몇번 더 작성해 준다.)

for (let i = 0; i < reviews.length; i++ ) {
     let title = reviews[i]['title']
     let author = reviews[i]['author']
     let review = reviews[i]['review']

     console.log(title,author,review)

잘 찍힌다. 이제 찍어줄게 아니라 붙여줄 것이다. let temp_html = `` 안에 뭘 붙여주냐면 브라우저 아래 테이블만들어 놓은곳에 제목저자리뷰의 내용물에 붙여줘야하기 때문에 아래 테이블의 내용물 reviews-box를 본다. 확실치 않으면 tr태그 전체를 복붙해서 본다. 맞으니까 ctrl+x로 가져온다.

let temp_html = ` <tr>
                    <td>${title}</td>
                    <td>${author}</td>
                    <td>${review}</td>
                </tr>` 

이렇게 보여줄 데이터 이름을 자리에 맞춰주고 이제 붙여줄 건데 어디다 붙여주냐면 id="reviews-box"라는 곳에서 가져왔다. $('#reviews-box').append(temp_html)

4️⃣✔ 완성 확인하기

이제 브라우저에 가서 확인 해주면 아래에 잘 붙는걸 볼 수 있다.

코드스니펫에서 app.py뼈대와 index.html 뼈대 복붙 app.py에서 ▶run>브라우저에 localhost:5000 창 띄우기

📢API 만들고 사용하기

제목, 저자, 리뷰

💿정보 저장하기(Create → POST)📀

1️⃣ 클라이언트와 서버 확인하기 2️⃣ 서버부터 만들기 3️⃣ 클라이언트 만들기 4️⃣ 완성 확인하기

1️⃣✔ 클라이언트와 서버 확인하기

👩‍💼app.py 창구에서 @app.route('/review', methods=['POST']) /review에 post타입이다. sample_give라는 이름으로 데이터를 받고 있다. 주고받는 형태가 다 맞아떨어지면 msg를 '이 요청은 post!'라고 내려주고 있다. 🙋‍♂️index.html 클라이언트에서 ajax콜이 makereview라는 함수에서 불리고 있다. post type에 ulr은 /review 로 요청을 한다. sample_give 형태로 샘플데이터라는 데이터를 가져간다고 나온다. 요청이 됐고 가져가는 데이터도 잘 받았으면 response로 '이 요청은 post!'라는 msg를 받는다. 그것이 alert으로 되있고 리로드되면 뜬다. makereview함수가 어디에 붙어있냐면 리뷰작성하기 버튼에 붙어있다. 👉브라우저에서 리뷰작성하기 버튼을 누르면 Ajax콜이 동작한다. alert으로 '이 요청은 post!'라고 뜬다.연결이 잘 됐다

2️⃣✔ 서버부터 만들기

👨‍💼서버쪽 일 (창구 일) 클라이언트(고객에서) 제목,저자,리뷰 데이터가 들어오면 그것을 받아다가 DB에 저장해준다.

데이터 받을 준비를 한다. title_receive = request.form['title_give'] author_receive = request.form['author_give'] review_receive = request.form['review_give']

(print(sample_receive))지우기

이제 DB 저장을 해야하는데 폴더>pythonprac>dbprac을 드래그해서 파이참에 끌어다 놓기 저장 코드 참고해서 만들기

딕셔너리 먼저 만들어주기

doc = {
        'title': title_receive,
        'author': author_receive,
        'review': review_receive
    }

bookreview에 저장하기

db.bookreview.insert_one(doc)

데이터를 받고 저장이 다 완료되면 메세지로 return jsonify({'msg': '저장 완료!'})

3️⃣✔ 클라이언트 만들기

🙋‍♂️클라이언트 쪽 일 (고객 일) 제목,저자,리뷰를 가져와서 보내주면 된다. JQuery로 값을 가져와야한다.

function makeReview() {

let 변수 = $('#각 inputbox id값').val()

    let title = $('#title').val()
    let author = $('#author').val()
    let review = $('#bookReview').val()

이걸 Ajax에 실어서 보내줘야 한다. 서버에서 받기로 한 이름 title_give data: {sample_give:'샘플데이터'}이거를 👉data: {title_give:title,author_give:author,review_give:review}

4️⃣✔ 완성 확인하기

브라우저에서 제목,저자,리뷰를 작성하고 리뷰작성하기를 누른다. alert '저장완료!'를 확인한 뒤 robo3T로 가서 확인을 한다.

📢 API란

은행이 고객을 받기 위해서 만들어 놓은 창구처럼 서버도 클라이언트 요청을 받기 위해서 만들어놓는 창구이다. 은행도 창구에 어떤 규칙이 있다. 민증 지참,입금을 하려면 입출금 창구로 가세요 등 마찬가지로,이 API도 규칙이 있다.그리고 그에 해당하는 주소가 존재한다. 그거를 하나하나 직접 만들어 보겠다.

API에서 우리가 배울 종류는 두가지이다.

GET은 통상적으로 데이터 조회를 요청할 때 쓴다.

예를 들면,데이터를 내가 건들지 않고 예를 들면 어제 들어온 주문목록 갖고 올때

POST는 통상적으로 데이터를 바꿀 때

예를 들면,회원가입 할 때

하나씩 만들고 요청해보도록 하자.

서버에 뭔가를 요청할 때는 ajax콜을 이용한다. API만들기👉클라이언트에서 Ajax로 콜 해보기

👩‍💼GET 요청 (창구에서 받을 준비)

코드스니펫 GET 요청 API코드 복사해서 app.py파일

@app.route('/')
def home():
   return render_template('index.html')

이 코드 아래에 붙여 넣는다.

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = **request**.args.get('title_give')
   print(title_receive)
   return **jsonify**({'result':'success', 'msg': '이 요청은 GET!'})

그리고 기본코드에 request,jsonify를 더 추가 시켜준다.

from flask import Flask, render_template,request,jsonify
app = Flask(__name__)   

🙋‍♂️GET 요청 확인 (고객에서 확인)

이제 확인을 할것인데,GET 요청 Ajax코드를 (아까 서버에서 받은 html이 담긴)브라우저에가서 console창에 붙여넣는다. (⭐어떻게보면 클라이언트 사이드다.)

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

{msg: '이 요청은 GET!', result: 'success'} 이렇게 나오는데 console.log 때문에 msg로 적어둔게 찍혔다. response는 서버에서 내려주는 값이다.

서버에 가서 보면

def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

이렇게 되어있는데'result':'success', 'msg': '이 요청은 GET!' 이 내용물을 response에 담아와서 찍힌 것이다.

app.py는 내가 만들어둔 창구이다.

🙋‍♀️이제 고객에서 벌어지는 일

type은 GET이고 url은 /test url: "/test?title_give=봄날은간다", GET요청은 물음표로 데이터를 들고 간다. 👉title_give라는 이름으로 봄날은간다 라는값을 가져왔다.

👨‍💼창구에서 벌어지는 일

title_receive = request.args.get('title_give') title_give로 갖고온 값을 가져와봐라는 뜻이다. title_receive = '봄날은 간다' 라고 가져온다면 title_receive안에 들어올것이다. print(title_receive) 그리고 그 변수가 프린트 된다. 그리고 그 프린트는 여기에 찍힌다. 그리고 나서 return jsonify({'result':'success', 'msg': '이 요청은 GET!'}) 값을 내려준다.

🙋‍(고객)Ajax로 콜을 하면 👉Ajax로 가져온 값을 👉👨‍💼API(창구)에서 response(처리)를한다. 👉🙋‍고객이 response를 console.log로 확인을 한다.

👨‍💼POST 요청 (창구에서 확인)

코드스니펫 POST요청 API코드를 GET 요청 API코드 아래에 붙여넣는다. GET과 마찬가지의 과정으로 진행된다.

❔❔값을 담아오는 이름을 바꾸면 어떻게 됄까❔❔

그런데,console창에서 data: { title_give2:'봄날은간다' }, 로 바꾸면 어떻게 됄까. (INTERNAL SERVER ERROR) 서버쪽에서 에러가 났다는 뜻이다. 그러면 app.py에서 에러를 확인해보자. werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand. KeyError: 'title_give' 분명 title_give로 값으로 뭔가를 찾으려고 했는데 title_give가 없다. 은행으로 따지면 주민등록번호가 없어요 라는 에러하고 똑같은 뜻이다. 그래서 둘의 이름을 꼭 맞춰줘야한다.

서버를 만들어 볼것이다. 이 전에는 html,css,자바스크립으로 뭔가를 했다. 서버를 만들어서 서버에 갖다줄 파일을 미리 만들어뒀다.

이제는 서버를 만들어서 요청을 받고 파일을 갖다주든지 DB에다 작업을 하든지 이런 서버를 만들어야 한다.

서버는 이 컴퓨터에 돌아가고 있는 하나의 프로그램이다. 포토샵,파워포인트,엑셀 처럼. 한 컴퓨터 내에서 서버를 만들고 브라우저로 접속을 해본다. 👉로컬 개발 환경이다.

서버의 결과물을 어떤 특정 컴퓨터를 사서 그쪽에다 올리는 작업을 할것이다. 내 컴퓨터를 24시간 켜놓지 않아도 구매한 특정 컴퓨터에서 24시간 켜놓음으로써 모든 사람이 접속을 할 수 있게 만드는 것이다.

🔥Flask 시작하기

File>New project>pythonprac>prac>New>PythonFile>app.py 이왕이면 서버를 돌아가게 만드는 파일 이름은 통상적으로 app.py라고 많이 짓는다.

서버에 프레임워크라고 하는 flask 패키지를 설치한다. 이번에도 남이 만들어놓은 패키지를 사용하는 것이다.

프레임워크는 남이 짜둔 규칙이나 틀 안에서 내가 코딩을 자유롭게 해서 편하다. 라이브러리는 내가 마음대로 짜는데 남이 만들어 놓은 것을 중간에 자유롭게 갖다 쓰니까 편하다. 통상적으로 프레임워크는 하나의 프레임워크 안에서 내가 짠다. 그 안에서 라이브러리는 제한없이 갖다 쓸 수 있다.

flask시작 코드를 붙여넣는다. ▶ 0.0.0:5000 까지 나오면 실행이 된거다. 브라우저에 localhost:5000이라 친다. localhost:5000으로 이걸로 내 컴퓨터에서 내가 서버를 돌리고 있는것이다. 그리고 같은 컴퓨터에서 다른 브라우저를 열어서 접속한 것이다. 👉컴퓨터를 두대 살순 없으니까.

5000이라는 숫자는 포트라는 개념이다. 나라의 항구처럼 컴퓨터도 내가 인터넷 세상에다가 뚫어놓은 문의 번호들이 있다.

여기에 써있다. 숫자를 바꿔도 접속이 된다. 그런데 포트라는것은 바꿀 수도 있지만 거의 대부분 정해진 번호를 갖고 있다.괜히 건들였다간 컴퓨터에서 이미 돌아가고 있는 다른 번호들 하고 겹쳐서 원래 것이 안돌아가고 이럴 수 있다.

🏃‍🏊‍♀️🤸‍한 코드단안에서 페이지 오가기

위에거를 복사해서 아래 붙힌뒤 기본코드 home()위에랑 다르게 새로 생성한 아래는 mypage()라고 하고 ('/')랑 다르게 ('/mypage')라고 한다. 2개씩은 서로 달라야 한다. 아래 내용물은 'mypage 입니다'라고 한다. ▶ 주소창에 /mypage를 붙이면 'mypage 입니다'라는 내용물이 담긴 mypage로 넘어간다.

다시 home()내용물로 <button>버튼이다</button>을 치고 그전 페이지로 돌아가면 버튼이다이 뜬다.

🏄‍♀️앞으로 쓸 프레임워크란

이처럼, 내용물에 html전체를 쓰면 페이지가 나오겠지만 너무 길고 복잡하다. 앞으로 쓸 프레임워크는 이런 불편함을 해소해줄 편리한 것들이 다 갖춰져있다.

print를 지워주고 insert 기본코드를 넣고 데이터를 바꿔 끼운다.

 doc = {'title': title,
        'star': star,
        'rank': rank}
         db.movies.insert_one(doc)

👉돌때마다 이 데이터를 db에다 넣어줄 것이다.

Quiz

1.'매트릭스'의 평점 가져오기 2.'매트릭스'의 평점과 같은 평점의 영화 제목들을 가져오기 3.'매트릭스' 영화의 평점을 0으로 만들기

내가 한것

1. movies = db.movies.find_one({'title':'매트릭스'},{'_id':False}) print(movies)

2. same_star = list(db.movies.find({'star':'9.39'},{'_id':False})) print(same_star)

3. db.movies.update_one({'title':'매트릭스'},{'$set':{'star':'0'}})

선생님이 한것

1.movie = db.movies.find_one({'title':'매트릭스'}) print(movie['star'])

movie = db.movies.find_one({'title':'매트릭스'}) target_star= movie['star'] 👉target_star라는 변수를 만들고 movie['star'] (매트릭스 평점)랑 같다는 정의를 내려준다. 2.target_movies = list(db.movies.find({'star':target_star},{'_id':False})) 👉target_movies라는 변수를 만들어주고 target_star를 찾아 넣어달라 한다. print(target_movies) 👉하지만 얘는 리스트 안에 딕셔너리가 들어있는 유형이니까 하나씩 뽑아준다.

for target in target_movies:
    print(target)

👉각자의 타이틀만 필요하니까 print(target['title'])

db.movies.update_one({'title':'매트릭스'},{'$set':{'star':0}}) 👉robo3T가면 0으로 됐지만 ""아이콘이 아니라 다른 아이콘이다 ""이 들어간건 문자열이다.나중에 찾을때 숫자로 찾으면 숫자로 입력한거만 나오고 문자열 따로 나올 것이다.이왕이면 통일해서 넣어주는 게 나중에 관리하기 편하다. 3.db.movies.update_one({'title':'매트릭스'},{'$set':{'star':'0'}}) 👉'0'따옴표를 붙여주자.어떤 형식으로 담겨있는지도 중요하다.

pymongo라는 라이브러리로 조작을할 것이다. 만약에 파이썬으로 엑셀을 조작하려면 파이썬으로 엑셀을 조작할 수 있는 남이 만들어놓은 라이브러리를 이용하면 편할거 같다. 똑같이 파이썬으로 MongoDB를 조작하려고 하면 남이 만들어놓은 pymongo라는 라이브러리를 쓸거다. setting에서 pymongo를 다운받자. pythonprac에서 dbprac이라는 PythonFile을 만든다. pymongo 기본코드를 갖다쓴다.

💬pymongo를 이용하는 4가지

insert doc = {'name':'bobby','age':21} db.users.insert_one(doc)

▶run 하면 아무것도 안나온다. 👉robo3T를 가본다. localDB를 refresh하면 dbsparta가 생겼다. collections>user>오른쪽상단 두번째 아이콘 클릭

🔥기본코드 해석하기

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

from pymongo import MongoClient 👉pymongo를 쓰겠다. client = MongoClient('localhost', 27017) 👉내 컴퓨터에서 지금 돌아가고 있는 mongoDB에 접속할 것이다. db = client.dbsparta 👉dbsparta라는 db이름으로 접속할 것이다.(없으면 자동으로 만들어진다.) mongodb는 딕셔너리가 쌓이는 것이다.

doc = {'name':'bobby','age':21} 👉딕셔너리를 만들어줬다. db.users.insert_one(doc) 👉그 하나 딕셔너리(doc)를 users라는 collection에 넣겠다.

아무리 딕셔너리를 맘대로 쌓을 수 있다 해도 이왕이면 비슷한애들끼리 쌓는게 더 낫기 때문에 콜렉션이라는 개념이 존재한다. 👉db.users.insert_one(doc) db안에 users라는 collection안에 insert해라 나머지 find/update/delete도 이런 식이다.

🍳insert로 데이터 쌓기

doc = {'name':'jane','age':21} db.users.insert_one(doc)

응용해서 4개의 딕셔너리를 하나씩 쌓아준다.

🍠find로 데이터 찾기

same_ages = list(db.users.find({'age':21},{'_id':False}))

뭔가를 찾아서 same_ages라는 변수에다 넣은것이다. print(same_ages) ▶ 리스트 안에 딕셔너리 2개가 들어와있는데 age가 21이다 {'age':21}여기가 조건이다. ,{'_id':False})의 _id는

이 값인데,이값은 나타내지 말라는 뜻이다. false를 거의 붙여주는데 이 조건을 없애버리면 _id까지 갖고와 버린다. 자동으로 생성되는 랜덤한 유니크 값이다.불필요하다.

조건없이 모든 document를 find 할 수도 있다. (db.users.find({}, 중괄호를 비워두면 된다.

여러개 가져올때는 이렇게 하고,

🧂하나만 가져올때는

user = db.users.find_one({'name':'bobby'}) print(user) ▶ bobby 딕셔너리 하나만 가져온다. _id가져오고 싶지 않으면 user = db.users.find_one({'name':'bobby'},{'_id':False}) 여러개 있어도 제일 위에 있는 아이 하나만 가져온다.

🌮update로 데이터 내용물 바꾸기

db.users.update_one({'name':'bobby'},{'$set':{'age':19}}) 👉name이 bobby인 애를 찾아서 age를 19로 바꿔라. ▶하고 robo3T가면 바뀌어 있다. 💡collection이름(user)가 맞나 확인하고 run하면 된다.

db.users.update_many({'name':'bobby'},{'$set':{'age':19}}) 👉name이 bobby인 애를 모두 찾아서 age를 19로 바꿔라 ⚠하지만 update_many는 잘 쓰지 않는다.한번에 다 바꾸는건 리스크가 크다.⚠

delete🥞로 데이터 삭제하기

db.users.delete_one({'name':'bobby'}) ▶robo3T가면 name이 bobby인 딕셔너리가 삭제되어있다.

db.users.delete_many({'name':'bobby'}) ⚠하지만 delete_many는 잘 쓰지 않는다.한번에 다 바꾸는건 리스크가 크다.⚠

데이터를 잘 쌓으려기보단 데이터를 잘 갖다 쓰려고 쓰는게 목적이 더 강하다. 예를 들면 책장이라고 하면 책을 보관하는게 목적이면 아무대나 쌓아두면 그만인데 책장을 쓰는 이유는 나중에 잘 찾아서 뽑으려고다.잘 정돈된 책장은 순서에 맞게 정리되어 있다. 데이터 베이스도 마찬가지로 나중에 잘 찾기 위해 쓰는것이다.

그래서 데이터베이스 프로그램을 만드는 많은 회사들이 쌓는방식에 따라 상황별로 잘 가져갈 수 있다고 홍보를 한다.

📢데이터베이스는 크게 두종류다

SQL/NoSQL(Not only SQL)

🎈SQL은 엑셀에 좀더 가깝다.

예를들면 출석체크를 할때 미리 칸을 만들어두고 이름,이메일,전화번호 등 그 칸에 맞게 채워나간다. 거기서 한 친구의 정보를 적을 때, 전화번호가 없다면 그 칸은 공란으로 둔다던지 정해진 틀이 있다.

SQL은 열과 행을 미리 정해놔야한다. 예를 들면 1만개의 회원 DB가 있다 치자. 이제 회원들 집주소를 추가로 한번 받아보자.컬럼을 하나 더 만들어서 1만1번째 부터는 집 주소가 들어가겠지만 1만번째까지는 그 컬럼이 빈칸이 되어있다.👉중간에 바꾸기가 불편하다. 대신 정형화되어있는 데이터를 뽑아가는 방식은 최적화되어 있다. 데이터가 일관적이고 분석하기가 굉장히 빠르다. 대표적으로 MS-SQL,My-SQL,오라클 등

🎈NoSQL은 정해진 틀이 아니다.

한줄 한줄이 딕셔너리 형태로 그냥 들어가는 것이다.

NoSQL은 데이터 하나하나마다 딕셔너리형태로 다 다르다. 똑같이 1만1번째부터 주소를 추가로 받을때 앞전처럼 그전 데이터를 공란으로 냅둘 필요가 없다.👉그래서 굉장히 유연하다.앞으로 바뀔 일이 많은 초기 스타트업이나 초기 서비스들에서 많이 채택하는 방식이다. 대표적으로 MongoDB가 있다.

🎈데이터베이스도 마찬가지지만 서버라는 것은 컴퓨터의 역할이다. DB도 포토샵,일러스트,파워포인트 처럼 프로그램 사서 쓰듯이 그냥 프로그램이자 역할이다. 한 컴퓨터 내에서 서버도 돌리고 크롤링도 하고 DB도 돌릴 수 있다.

robo3t에 connect를 하면 데이터베이스에 접속 하는거다.

MongoDB는 데이터베이스다. 기본적으로 데이터를 쌓아둔다. 내 눈에 보이지 않게 켜진다. Robo3T를 가지고 MongoDB의 데이터를 우리 눈으로 볼 수 있게 한다.

랭킹,영화제목,평점 가져오기 네이버영화 저번 시간에서 title가져오기 까지 했었다.

내가 한것

알게된 점 위에서 순서 엉망으로 해도 print 할때,순서대로 적으면 순서대로 출력된다.

선생님이 하는 방법

순위에서 오른쪽검사하면 순위표시인 alt값만 가져올것이다. 일단 copy selector한다

for tr in trs:
    a_tag = tr.select_one('td.title > div > a')

    if a_tag is not None:
        title = a_tag.text
        rank = tr.select_one('td:nth-child(1) > img')
        print(rank)

rank를 한번 찍어본다. <img alt="50"어쩌고가 나온다. 'alt'값이 제일 중요해 보인다. print(rank['alt']) ▶순위가 순서대로 쭉 나온다.

그런데 ['alt']값이 print(rank['alt']) 여기 있을 필요가 없다. rank = tr.select_one('td:nth-child(1) > img')['alt'] 여기로 보내준다.드래그하고 그대로 옮기면 옮겨진다.신기하다⭐ 같은 rank라서 가능하다. 그대로 ▶run하면 똑같이 나온다.

star = tr.select_one('td.point')
        print(star.text)

별점도 마찬가지로 copy selector 해준다. 역시나 .text가 여기있을 필요 없고 star = tr.select_one('td.point').text 이렇게 둔다.

마무리로 print(rank,star,title) 하면 순서대로 나온다.

크롤링은 정답을 찾아가는 게 아니다. 되게 만드는게 크롤링이다. 같은 크롤링을 하더라도 사람마다 세운 전략이 다 다르다. 그래서 코드가 다 다를 수 있다. 결국은 뽑아내느냐가 중요하다.

📢저번에 이어서 이번엔 크롤링 패키지를 이용해보겠다.

https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303 여기서 순위나 영화제목,평점 이런것들을 내가 갖고오는 것

크롤링이라는 단어 자체는 구글의 검색 엔진이나 네이버의 검색 엔진이 내 사이트를 퍼가는 그 행위를 크롤링이라고 한다. 그 전 행위는 스크래핑이라고 하긴 하는데, 둘 다 혼용해서 많이 쓴다. 하지만,지금 할 것을 크롤링이라 부르겠다.

🎈순위,영화명,별점을 가지고 올 것이다.

그 전에 크롤링에 필요한 beautifulsoup4(bs4)라는 패키지를 다운받아보겠다. File>Settings>pythonprac>interpreter>+>BS4>Install 크롤링 기본세팅: (import requests from bs4 import BeautifulSoup headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303',headers=headers) soup = BeautifulSoup(data.text, 'html.parser') # 코딩 시작)

❔❔크롤링이 가능한 이유가 뭘까❔❔

기본적인 이유는 인터넷과 상관이 없는데,내가 받아온 페이지에서 솎아내는게 크롤링이다. 크롤링을 할 때는 기술적으로 딱 두가지가 중요하다.

첫번째는 코드 단에서 브라우저를 켜지 않고,요청을 하는것. 🌠requests가지고 한다.🌠

두번째는 요청돼서 가져 온 것(예를 들면 검사를 눌러서 이렇게 보면 Elements에 있는 html들 중에) 내가 원하는 정보를 잘 솎아내는 것 🌠BS4가지고 한다.🌠 잘 솎아내는게 beautifulsoup4의 역할이다. 예를들면 페이지에서 '그린 북'의 코드를 전체코드에서 솎아내려고 하면 매우 힘들기 때문에 BS4가 필요하다.

👉그래서 크롤링 기본코드를 붙여놓고 시작을 해야한다.

제일 처음 할 일은 print(soup) ▶프린트 해보면 페이지의 html 전체가 그대로 나온다.

🎈기본 코드 뜻 첫째줄은 import하는 것이고 headers는 왜 붙이는 것이냐면 코드 단에서 이렇게 요청을 했을 때 그런 기본적인 요청은 막아둔 사이트들이 많다. 그래서 내가 브라우저에서 엔터 친 것 마냥 효과를 내어주는 거다. headers= 그다음에 url 들어가고 data로 요청을 받아오면 soup = BeautifulSoup(data.text, 'html.parser') 그거를 가지고 솎아내기 좋은 BeautifulSoup 형태로 만들어서 print(soup) 찍어준것이다.

📢BS4의 사용 방법은 크게 두 가지 있다.

select_one /select select_one은 하나 나오는것이고 select는 리스트로 여러개 나온다.

🎈select_one 하나 가져오는 방법

title = soup.select_one('') 페이지의 '그린 북' 오른쪽 클릭 > copy > copy selector 그리고 ('')여기에 붙여 넣는다. selector는 선택자이다. 얘가 타고타고 들어가서 얘가 정확히 어디 있는지 알려준다. print(title)

<a href="/movie/bi/mi/basic.naver?code=171539" title="그린 북">그린 북</a>

이 출력된다.

이것도 사용법인데 두 가지이다.

🎈첫번째 사용법

태그와 태그 안에 있는 그린북 텍스트를 가지고 오고 싶다면 .text하면 된다 print(title.text) ▶그린북

🎈두번째 사용법

print(title)했을때 찍혀나온 <a href="/movie/bi/mi/basic.naver?code=171539"title="그린북">그린북 즉, <a>태그의 속성을 가져오고 싶다. print(title['href']) ▶/movie/bi/mi/basic.naver?code=171539 a href의 속성이 나온다. 이 방법들은 하나를 가져오는 방법 이었고,

🎈select 여러개의 리스트를 가져오는 방법

그린북이 어디있나 봤을 때,오른쪽 버튼 검사해서 위아래로 훑어본다. 그러면 가로로 길게 줄이 표시되는데 우리가 전략을 짤 때 한 줄을 가져와서 거기서 순위,이름,평점을 가지고 오고 또 그 아랫줄 가져와서 통으로 가져오는게 편할거 같다. 한 줄을 가져와서 copy selector로 붙여넣는다. 그리고 그 밑에줄도 가져와서 붙여넣는다. 나머지는 같고 :nth-child(4)이 부분이 다르다.제거한다.

그러면 #old_content > table > tbody > tr ** 이것에 **해당하는 애들이 다 나온다. 한줄이었던<tr>..</tr>들이 다 나온다. 보아하니 :nth-child(3) 얘는 3번째만 딱 특정한 거고 하니 그전 겹치는 코드만 가져온다.

tr들을 가져올거니까 trs로 하고 trs = soup.select('#old_content > table > tbody > tr') 💡select는 여러개 가져오는거라서 결과가 리스트로 나온다. for문을 돌려준다.

for tr in trs:
  print(tr)

▶tr들이 하나씩 나온다.

🎈그 중에 타이틀만 솎아보자.

for문이니까 print(tr)에서 여러가지 찾으면 된다. 그린북에서 copy selector를 해온다. #old_content > table > tbody > tr:nth-child(2) > td.title > div > a tr:nth-child(2) 까지는 찾았었다. 나머지 td.title > div > a 를 a_tag = tr.select_one('td.title > div > a') 👉a_tag = tr중에서 하나를 찾는데 내용물은 'td.title > div > a' print(a_tag) 기존 tr까지 찾은 데서 추가한 것까지 찾는다. 이번엔 여러개 가져와서 솎아낼 필요 없다 title은 하나밖에 없으니까. ▶title들이 나온다.

그런데,중간에 None이라는것이 찍혀 나온다. "줄"들이다. 크롤링이라는 거는 사이트의 모양새마다 다 다르기 때문에 사이트마다 전략을 다 다르게 가져가야 한다. 👉이런 줄 안에서 얘를 가지고 오려면 에러가 나겠구나. 🧪에러가 나는지 확인해보자. print(a_tag.text) ▶AttributeError: 'NoneType' object has no attribute 'text' 에러가 난다. 👉None에다가 .text 하지마라

if a_tag is not None:
    print(a_tag)

▶None이 사라졌다.

if a_tag is not None:
    title = a_tag.text
    print(title)

각 text가 title에들어가서 print 내용물로 타이틀들만 하나씩 나온다.

🎈request import:

(import requests # requests 라이브러리 설치 필요 r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99') rjson = r.json() print(rjson['RealtimeCityAir']['row'][0]['NO2']))

url을 복사해서 주소에 쳐주면 저번에 한 RealtimeCityAir가 나온다. print(rjson) ▶ ajax에서 했던것과 유사하게 나온다. 👉거의 두 줄만에 한 거다. rjson = r.json() 👉json을 프린트할 수 있게 변형한 거다.

중구의 IDEX_MVL값을 찍어보겠다. print(rjson)의 json은 전체이다. print(rjson['RealtimeCityAir']['row'][0]['MSRSTE_NM']) ▶중구

🎈반복문 활용

구들만 뽑아보겠다. gus = rjson['RealtimeCityAir']['row'] for gu in gus : print(gu) 💡전에 말했듯이 꼭 sum이 아니어도 된다가 적용됐다. ▶row 내용물이 하나씩 출력이 됐다.

🎈이건 리스트니까 for문을 활용해 본다.

for gu in gus :
    gu_name = gu['MSRSTE_NM']
    gu_mise = gu['IDEX_MVL']
    print(gu_name,gu_mise)

▶구의 이름과 미세먼지 값이 하나씩 출력이 된다.

🎈if문을 활용해 보자.

    if (gu_mise > 55) :
        print(gu_name, gu_mise)

미세먼지가 55이상인것만 출력이 된다. 💡print가 :친 이후부터 if문에서 tab이 안되어 있으면 if문의 내용물이 아니다 tab주의 💡if (gu_mise > 55) :의 괄호는 있어도 되고 없어도 된다.