스파르타코딩클럽 3주차 필기

Hanal·2021년 10월 3일
0

연습 겸 복습

1) 스파르타가 만들어둔 OpenAPI파악하기

[코드스니펫] 나홀로메모장 API(GET)

http://spartacodingclub.shop/post

[코드스니펫] 나홀로메모장 구경하기

http://spartacodingclub.shop/

2)포스팅가져오기 API 붙이기

  1. 2주차에 완성했던 '나홀로메모장' 키기
  2. 우선, 로드가 다 되면 실행되는 함수를 하나 만들기.
  • 구글링해보기: javascript 로딩 후 실행
    [코드스니펫] 로딩 후 바로실행
$(document).ready(function(){
  //태그 등의 셋팅이 완료되었을 시점에 이벤트 발생
  listing();
});

function listing() {
	console.log('화면 로딩 후 잘 실행되었습니다');
}
  1. API 결과값을 다시한번 확인하기
$(document).ready(function(){
  listing();
});

function listing() {
	$.ajax({
	  type: "GET",
	  url: "http://spartacodingclub.shop/post",
	  data: {},
	  success: function(response){
			console.log(response)
	  }
	})
}
  • response['result'] 에 정상 여부가 있고, response['articles']에 리스트로 아티클들이 들어가 있습니다.
  1. 기사데이터를 log에 찍어보기.
$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/post",
  data: {},
  success: function(response){
	   console.log(response['articles'])
  }
})
  1. articles를 돌면서, 하나씩 출력해보기.
$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/post",
  data: {},
  success: function(response){
	   let articles = response['articles'];
		 for (let i = 0; i < articles.length; i++) {
			 let article = articles[i];
			 console.log(article);
		 }
  }
})

-- 다시 한 번 복습하는 반복문

for(let i = 0;//시작조건
    i < articles.length; // 반복조건
    i++//더하기
    {
    console.log(article);//매번 실행
    }
  1. article 내용 ()으로 HTML을 만들어 붙이기.
$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/post",
  data: {},
  success: function (response) {
      let articles = response['articles'];
      for (let i = 0; i < articles.length; i++) {
          let article = articles[i];
          let image = article["image"];
          let url = article["url"];
          let title = article["title"];
          let desc = article["desc"];
          let comment = article["comment"];
          let temp_html = `<div class="card">
                             <img class="card-img-top" src="${image}" alt="Card image cap">
                             <div class="card-body">
                               <a href="${url}" target="_blank" class="card-title">${title}</a>
                               <p class="card-text">${desc}</p>
                               <p class="card-text comment">${comment}</p>
                             </div>
                           </div>`;
          $('#cards-box').append(temp_html);
      }
  }
})
  1. 먼저 있던 카드들을 지우기.
$(document).ready(function () {
    $('#cards-box').empty();
    listing();
});
  1. 1~7단계 통해 완성된 전체 script 코드
<script>
    $(document).ready(function () {
        $('#cards-box').empty('');
        listing();
    });

    function listing() {
        $.ajax({
				  type: "GET",
				  url: "http://spartacodingclub.shop/post",
				  data: {},
				  success: function (response) {
				      let articles = response['articles'];
				      for (let i = 0; i < articles.length; i++) {
				          let article = articles[i];
				          let image = article["image"];
				          let url = article["url"];
				          let title = article["title"];
				          let desc = article["desc"];
				          let comment = article["comment"];
				          let temp_html = `<div class="card">
				                             <img class="card-img-top" src="${image}" alt="Card image cap">
				                             <div class="card-body">
				                               <a href="${url}" target="_blank" class="card-title">${title}</a>
				                               <p class="card-text">${desc}</p>
				                               <p class="card-text comment">${comment}</p>
				                             </div>
				                           </div>`;
				          $('#cards-box').append(temp_html);
				      }
				  }
				})
    }

    function openclose() {
        // id 값 post-box의 display 값이 block 이면
        if ($('#post-box').css('display') == 'block') {
            // post-box를 가리고
            $('#post-box').hide();
            $('#btn-posting-box').text('포스팅 박스 열기');
        } else {
            // 아니면 post-box를 펴라
            $('#post-box').show();
            $('#btn-posting-box').text('포스팅 박스 닫기');
        }
    }
</script>

04. 파이썬 시작하기

3)파이썬을 설치한다는 것의 의미

  • 파이썬을 설치한다?
    => 일종의 번역팩을 설치한다고 생각하면 됨. 컴퓨터는 101010010과 같은 언어로만 알아듣는다. 파이썬 문법으로 된 것을 101010010로 변환해줄 수 있도록, 번역 패키지를 설치하는 것.

4) 첫 파이썬 파일 실행

  • hello.py 파일 안에 다음 내용을 붙여넣습니다.
print('Hello, sparta')

5) 파이썬 문법을 시작하기에 앞서...

  • 파이썬은 매우 직관적인 언어이고, 할 수 있는 것도 많다.
    그런데, 개발자들도 모든 문법을 기억하기란 쉽지 않음. 따라서 필요한 것들은 구글링해서 찾아보기.
  • 단, tuple과 set 자료형, class는 기초 단계에선 다루지 않겠습니다. (몰라도 괜찮고, 많은 개발자들도 모릅니다. 나중에 필요한 일이 생겼을 때 배워야 의미를 알 수 있습니다!)

05. 파이썬 기초공부

6) 파이썬 기초 문법

변수 & 기본연산

a = 3		# 3을 a에 넣는다
b = a		# a를 b에 넣는다
a = a + 1 	# a+1을 다시 a에 넣는다

num1 = a*b	# a*b의 값을 num1이라는 변수에 넣는다
num2 = 99 	# 99의 값을 num2이라는 변수에 넣는다

# 변수의 이름은 마음대로 지을 수 있음!
# 진짜 "마음대로"짓는 게 좋을까? ㅎ..

자료형

  • 숫자, 문자형
name = 'bob'	#변수에는 문자열이 들어갈 수도 있고,
num = 12		#숫자가 들어갈 수도 있고,

is_number = True	#True 또는 False ->"Boolean"형이 들어갈 수도 있습니다.(컴퓨터 과학에서, 불린(boolean)은 논리적인 데이터 유형이다. 불린은 참(true) 혹은 거짓(false) 값만을 가질 수 있다)

#########
# 그리고 List, Dictionary 도 들어갈 수도 있죠. 그게 뭔지는 아래에서!
  • 리스트 형(Javascript의 배열형과 동일)
a_list =[]
a_list.append(1)		#리스트에 값을 넣는다
a_list.append([2,3])	#리스트에 [2,3]이라는 리스트를 다시 넣는다

# a_list의 값은? [1,[2,3]]
# a_list[0]의 값은? 1
# a_list[1]의 값은? [2,3]
# a_list[1][0]의 값은? 2
  • Dictionary 형 (Javascript의 dictionary형과 동일)
a_dict = {}
a_dict = {'name':'bob', 'age':21}
a_dict['height'] = 178

# a_dict의 값은? {'name':'bob','age':21, 'height':178}
# a_dict['name']의 값은? 'bob'
# a_dict['age']의 값은? 21
# a_dict['height']의 값은? 178
  • Dictionary 형과 List형의 조합
people = [{'name':'bob','age':20},{'name':'carry','age':38}]

# people[0]['name']의 값은? 'bob'
# people[1]['name']의 값은? 'carry'

person = {'name':'john','age':7}
people.append(person)

# people의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
# people[2]['name']의 값은? 'john'

함수

  • 함수의 정의-이름은 마음대로 정할 수 있음!
# 수학문제에서
f(x) = 2*x+3
y = f(2)
y의 값은? 7

# 참고: 자바스크립트에서는
function f(x){
	return 2*x+3
}

# 파이썬에서
def f(x):
	return 2*x+3
    
y = f(2)
y의 값은? 7
  • 함수의 응용
def sum_all(a,b,c):
	return a+b+c
    
def mul(a,b):
	return a*b

result = sum_all(1,2,3) + mul(10,10)

# result라는 변수의 값은?

조건문

  • if/else로 구성!
def oddeven(num):  # oddeven이라는 이름의 함수를 정의한다. num을 변수로 받는다.
	if num % 2 == 0: # num을 2로 나눈 나머지가 0이면
		 return True   # True (참)을 반환한다.
	else:            # 아니면,
		 return False  # False (거짓)을 반환한다.

result = oddeven(20)
# result의 값은 무엇일까요?
def is_adult(age):
	if age > 20:
		print('성인입니다')    # 조건이 참이면 성인입니다를 출력
	else:
		print('청소년이에요')  # 조건이 거짓이면 청소년이에요를 출력

is_adult(30)
# 무엇이 출력될까요? 성인입니다

반복문

=> 파이썬에서의 반복문은, 리스트의 요소들을 하나씩 꺼내쓰는 형태.

  • 즉, 무조건 리스트와 함께 쓰임!
fruits = ['사과','배','감','귤']

for fruit in fruits:
	print(fruit)

# 사과, 배, 감, 귤 하나씩 꺼내어 찍힙니다.
  • for 문 예시
family = ['mother', 'father']
for x in family:		#family의 각 항목 x에 대하여:
		print(x)		#x를 출력하라.
  • 응용-과일 개수 세기 함수
    [코드스니펫] 리스트 예제
    fruits = ['사과','배','배','감','수박','귤','딸기','사과','배','수박']
    count = 0
    for fruit in fruits:
    	if fruit == '사과':
    		count += 1
    print(count)
    #사과의 개수를 세어 보여줍니다.

def count_fruits(target):
count = 0
for fruit in fruits:
if fruit == target:
count += 1
return count

subak_count = count_fruits('수박')
print(subak_count) #수박의 개수

gam_count = count_fruits('감')
print(gam_count) #감의 개수


- 다른 예제
#### [코드스니펫] 딕셔너리 예제

people = [{'name': 'bob', 'age': 20},
{'name': 'carry', 'age': 38},
{'name': 'john', 'age': 7},
{'name': 'smith', 'age': 17},
{'name': 'ben', 'age': 27}]

#모든 사람의 이름과 나이를 출력해봅시다.
for person in people:
print(person['name'], person['age'])

#이번엔, 반복문과 조건문을 응용한 함수를 만들어봅시다.
#이름을 받으면, age를 리턴해주는 함수
def get_age(myname):
for person in people:
if person['name'] == myname:
return person['age']
return '해당하는 이름이 없습니다'

print(get_age('bob'))
print(get_age('kay'))


## 6. 파이썬 패키지 설치하기
### 7) 파이썬 패키지 설치하기
- Python에서 패키지는 모듈(일종의 기능들 묶음)을 모아 놓은 단위.
  이런 패키지의 묶음을 라이브러리라고 볼 수 있음.
  
  즉, 여기서는 패키지 설치 = 외부 라이브러리 설치!
  
1. 가상 환경(virtual environment) 이란?  - 프로젝트별로 패키지들을 담을 공구함.
가상환경(virtual environment)은
같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경 입니다.

### 8) Requests 라이브러리 사용해보기 + List/Dictionary/함수/If/For문 연습

- 아래 방법으로 서울시 대기 OpenAPI에서, 중구의 NO2 값을 가져올 수 있습니다.

#### [코드스니펫] requests 써보기

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'])

- 모든 구의 IDEX_MVL 값을 찍어주자!

import requests # requests 라이브러리 설치 필요

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

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

- IDEX_MVL 값이 60 미만인 구만 찍어주자!
=>들여쓰기가 얼마나 중요한지 다시한번 확인해보세요!

import requests # requests 라이브러리 설치 필요

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

for gu in gus:
if gu['IDEX_MVL'] < 60:
print (gu['MSRSTE_NM'], gu['IDEX_MVL'])

## 8. 웹스크래핑(크롤링) 기초
### 9) 웹스크래핑 해보기 (영화 제목)
#### [코드스니펫] 네이버영화페이지

https://movie.naver.com/movie/sdb/rank/rmovie.nhn?sel=pnt&date=20200303

- 패키지 추가 설치하기(beautifulsoup4)

bs4

#### [코드스니펫] 크롤링 기본 세팅

import requests
from bs4 import BeautifulSoup

#타겟 URL을 읽어서 HTML를 받아오고,
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)

#HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
#soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
#이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')

#############################
#(입맛에 맞게 코딩)
#############################


- select/select_one의 사용법
=> 영화 제목을 가져와보기!
=> 태그 안의 텍스트를 찍고 싶을 땐 -> 태그.text
=> 태그 안의 속성을 찍고 싶을 땐 -> 태그['속성']
import requests
from bs4 import BeautifulSoup

#URL을 읽어서 HTML를 받아오고,
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)

#HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

#select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

#movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        # a의 text를 찍어본다.
        print (a_tag.text)
  • beautifulsoup 내 select에 미리 정의된 다른 방법을 알아봅니다

#선택자를 사용하는 방법 (copy selector)
soup.select('태그명')
soup.select('.클래스명')
soup.select('#아이디명')

soup.select('상위태그명 > 하위태그명 > 하위태그명')
soup.select('상위태그명.클래스명 > 하위태그명.클래스명')

#태그와 속성값으로 찾는 방법
soup.select('태그명[속성="값"]')

#한 개만 가져오고 싶은 경우
soup.select_one('위와 동일')

- 항상 정확하지는 않으나, 크롬 개발자도구 참고할 수도 있음.
1. 원하는 부분에서 마우스 오른쪽 클릭 → 검사
2. 원하는 태그에서 마우스 오른쪽 클릭
3. Copy → Copy selector로 선택자를 복사할 수 있음

## 12. pymongo로 DB조작하기
### 14) pymongo로 mongoDB 조작하기
#### pymongo 라이브러리의 역할
=> mongoDB 라는 프로그램을 조작하려면, 특별한 라이브러리, pymongo가 필요하답니다!

- 패키지 설치하기

pymongo

#### [코드스니펫] pymongo 기본 코드

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

코딩 시작


- DB연결하기 & 데이터 넣기
#### [코드스니펫] pymongo(insert)

from pymongo import MongoClient #pymongo를 임포트 하기(패키지 인스톨 먼저 해야겠죠?)
client = MongoClient('localhost', 27017) #mongoDB는 27017 포트로 돌아갑니다.
db = client.dbsparta #'dbsparta'라는 이름의 db를 만듭니다.

#MongoDB에 insert 하기

#'users'라는 collection에 {'name':'bobby','age':21}를 넣습니다.
db.users.insert_one({'name':'bobby','age':21})
db.users.insert_one({'name':'kay','age':27})
db.users.insert_one({'name':'john','age':30})

- 모든 결과 값을 보기
#### [코드스니펫] pymongo(find)

from pymongo import MongoClient # pymongo를 임포트 하기(패키지 인스톨 먼저 해야겠죠?)
client = MongoClient('localhost', 27017) # mongoDB는 27017 포트로 돌아갑니다.
db = client.dbsparta # 'dbsparta'라는 이름의 db를 만듭니다.

MongoDB에서 데이터 모두 보기

all_users = list(db.users.find({}))

참고) MongoDB에서 특정 조건의 데이터 모두 보기

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

print(all_users[0]) # 0번째 결과값을 보기
print(all_users[0]['name']) # 0번째 결과값의 'name'을 보기

for user in all_users: # 반복문을 돌며 모든 결과값을 보기
print(user)


- 특정 결과 값을 뽑아 보기
#### [코드스니펫] pymongo(find_one)

[코드스니펫] pymongo(find_one)


- 수정하기
#### [코드스니펫] pymongo(update_one)

#생김새
db.people.update_many(찾을조건,{ '$set': 어떻게바꿀지 })

#예시 - 오타가 많으니 이 줄을 복사해서 씁시다!
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

user = db.users.find_one({'name':'bobby'})
print(user)

- 삭제하기(거의 안 씀)
#### [코드스니펫] pymongo(delete_one)

db.users.delete_one({'name':'bobby'})

user = db.users.find_one({'name':'bobby'})
print(user)


### 15) pymongo 사용법. 코드요약

저장 - 예시

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

한 개 찾기 - 예시

user = db.users.find_one({'name':'bobby'})

여러개 찾기 - 예시 ( _id 값은 제외하고 출력)

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

바꾸기 - 예시

db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

지우기 - 예시

db.users.delete_one({'name':'bobby'})

profile
My goal is to become a developer. I will upload what I learned on a weekly basis.

0개의 댓글