내일배움캠프 2일차 개발일지

이민기·2022년 4월 19일
1
post-thumbnail

JQuery?

제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다.

제이쿼리는 여러분의 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줍니다.

또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.

이러한 제이쿼리는 오늘날 가장 인기 있는 자바스크립트 라이브러리 중 하나입니다.

  1. 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다.

  2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다.

  3. 애니메이션 효과나 대화형 처리를 간단하게 적용해 줍니다.

  4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있습니다.

  5. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재합니다.

  6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있습니다.

제이쿼리 최신 버전에 대한 더 자세한 사항은 다음 링크를 참고하면 됩니다.

jQuery Foundation : http://blog.jquery.com

jQuery 임포트

제이쿼리를 임포트 해주어 사용이 가능하다.

jQuery 기본 문법

// ID name 에서 밸류값을 가져 온다.
$('#name').val();

// ID name 에 밸류값을 지정 한다.
$('#name').val('밸류값 지정');
// ` 백틱으로 HTML 문서 변수에 저장할수 있다.
let html = `<button>나는 추가될 버튼이다!</button>`;
# 저장된 HTML 문서를 추가 할수 있다 append
$('#box').append(html);
<script>
        function open_box(){
            $('#post-box').show()
        }
        function close_box(){
            $('#post-box').hide()
        }
 </script>

hide() , show() 를 이용해 display를 숨기거나 나타나게 할수 있다.

Ajax 사용법

<script>
        function click() {
            // 여기에 코드를 입력하세요
            $('#id').empty();
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    let rows = response["RealtimeCityAir"]["row"];
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM'];
                        let gu_mise = rows[i]['IDEX_MVL'];
                        let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

Ajax를 이용해서 API 서버에 JSON 형식의 문서를 가져 올수 있다.

가져온 문서를 for 문으로 돌려 원하는 정보를 얻어 올수 있다.

서울 날씨 정보를 가져와 보기

function 날씨가져오기()
 $.ajax({
              type: "GET",
              url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
              data: {},
              success: function(response){
                  console.log(response['temp'])
                }
              })
        });

Python

파이썬은 1991년 네덜란드계 프로그래머인 귀도 반 로섬이 발표한 고급 프로그래밍 언어로, 플랫폼에 독립적이며 인터프리터식, 객체지향적, 동적 타이핑(dynamically typed) 대화형 언어이다. 파이썬이라는 이름은 귀도가 좋아하는 코미디 〈Monty Python's Flying Circus〉에서 따온 것이다. 이름에서 고대신화에 나오는 커다란 뱀을 연상하는 경우도 있겠지만, 이와는 무관하다. 다만 로고에는 뱀 두마리가 형상화 되어 있다.

파이썬은 비영리의 파이썬 소프트웨어 재단이 관리하는 개방형, 공동체 기반 개발 모델을 가지고 있다. C언어로 구현된 사이썬 구현이 사실상의 표준이다.

파이썬 3.9 버전 이상부터는 64비트로 바뀌면서 32비트 컴퓨터에서 사용할 수 없다. 파이썬 3.9 버전 이상을 사용하려면 64비트 컴퓨터여야 한다.

현대의 파이썬은 여전히 인터프리터 언어처럼 동작하나 사용자가 모르는 사이에 스스로 파이썬 소스 코드를 컴파일하여 바이트 코드(Byte code)를 만들어 냄으로써 다음에 수행할 때에는 빠른 속도를 보여 준다.

Python 기본 문법

#변수를 저장하고 출력한다.
num = 1000 #숫자형
한글 = '세종대왕' #문자형
print(num)
print(한글)

#movie_people 리스트에 자료를 저장한다.
movie_people = ['이병헌','고두심','유해진','차승원]

#movie_people 3번째 자료를 출력한다. 0,1,2
movie_people[2]

#movie_people에 길이 즉 저장된 값에 수를 출력한다. length
len(movie_people)

#반복문(for)으로 moive_people 내용을 i안에 저장후 반복해서 출력한다.
for i in movie_people:
	print(i)
    
#if문 이병헌 문자열이 movie_people 리스트에 있다면 참,아니면 거짓
#참이면 바로 아래 실행 아니면 else 를 실행
if '이병헌' in movie_people:
	print('이병헌 멋지다!')
else:
	print('이병헌 집에 갔어!')
    
#예외처리 try 처리를 해보고 에러가 발생되면 except 아래것을 출력
#finally는 무조건 실행됩니다.
try:
	print(1/0)
except:
	print('에러가 났습니다')
finally:
	print('무조건실행')

파이썬 크롤링

파이썬으로 지니뮤직 간단한 크롤링을 해보도록 하겠습니다.

requests(사이트를 받아 온다.)
bs4(사이트 내용을 크롤링 해올수 있는 라이브러리)
둘다 임포트를 해줍니다.

headers으로 접속 환경을 셋팅에 로봇이 아니라는걸 숨깁니다.
크롤링할 사이트를 requests로 받아오고

bs4로 해당 html 문서를 파싱 합니다.

lists에 셀렉트할 태그를 저장해주고 for문으로 돌려 원하는 내용을 크롤링 해옵니다.

아래는 완성된 코드 입니다.

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://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

lists = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for ls in lists:
    title = ls.select_one('td.info > a.title.ellipsis').text.strip()
    rank = ls.select_one('td.number').text[0:2].strip()
    artist = ls.select_one('td.info > a.artist.ellipsis').text
    print(rank, title, artist)

파이썬은 간단한 데이터베이스 관리 뿐만 아니라 서버 프레임워크(Flask, Django)를 사용하여,
서버를 구축에 사용할수 있습니다.

파이썬을 더 공부하여, Flask및 Django로 서버를 구축하는 방향으로 공부가 진행될 예정입니다.

이로써 2일차 공부를 마치고 개발일지를 마무리 하도록 하겠습니다.

profile
지나가는사람

1개의 댓글

comment-user-thumbnail
2022년 4월 25일

장고를 향해 고고!!

답글 달기