1. python

  • 크롤링 : 웹에 접속하여 솎아내는 작업
  • Venv 라이브러리가 실행 상태인지 확인 후 진행한다.

 

  • pip install bs4(beautifulsoup4) 설치

Spartaprac 파일 선택하고 pip install bs4 + enter

 

 

  • 크롤링 기본 format 코드

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.naver?sel=pnt&date=20210829',headers=headers)

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

# 코딩 시작

 

 

  • Select 복사

 

 

 

  • <그린북> 요소만 가져온다.


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.naver?sel=pnt&date=20210829',headers=headers)

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

 

# 코딩 시작

a = soup.select_one('#old_content > table > tbody > tr:nth-child(3) > td.title > div > a')

print(a)

 

 

  • 그린북 텍스트만 가져오기

 

a = soup.select_one('#old_content > table > tbody > tr:nth-child(3) > td.title > div > a')

print(a.text)

 

 

 

  • 그린북의 url만 복사하기

 

a = soup.select_one('#old_content > table > tbody > tr:nth-child(3) > td.title > div > a')

print(a['href'])

 

 

  • 네이버 영화의 제목만 가져오기
    영화     제목 → F12(검사) → 복사(copy) →  selector 복사(selector copy)

 

영화제목 2~3개 selector copy 후 공통 값을 찾기

 

#old_content > table > tbody > tr:nth-child(3)

#old_content > table > tbody > tr:nth-child(4)

 

 

# 코딩 시작

#old_content > table > tbody > tr:nth-child(3)

#old_content > table > tbody > tr:nth-child(4)

trs = soup.select('#old_content > table > tbody > tr')

for tr in trs :                  #tr에서 하나씩 꺼내서 trs에 넣자

    print(tr)

 

 

 

  • 영화 제목만 가져오자
     

# 코딩 시작

#old_content > table > tbody > tr:nth-child(2) > td.title > div > a

trs = soup.select('#old_content > table > tbody > tr')

for tr in trs :                  # tr에서 하나씩 꺼내서 trs에 넣자

    a = tr.select_one('td.title > div > a')   # tr까지 가져왔으니까 td~a까지 가져와서 a에 담자

    print(a)

 

 

None은 a태그를 찾았는데 a태그가 없을 때 none이라고 뜬다.

 

바(bar)도 tr태그로 만들었기 때문이다.

 

 

# a is not None, a != None : a가 None과 같지 않다.  

# a is None, a == None : a가 none과 같다

 

 

trs = soup.select('#old_content > table > tbody > tr')

for tr in trs :                

    a = tr.select_one('td.title > div > a')

    if a is not None :

        print(a.text)

 

 

 

 

  • 영화 페이지의 순위, 제목, 평점만 가져오자
     

아래 두가지는 똑같이 작동한다.

# 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :                
    a = tr.select_one('td.title > div > a')
    if a is not None :
        title = a.text
        rank = tr.select_one('td:nth-child(1) > img')
        print(rank['alt'])		 # 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :                
    a = tr.select_one('td.title > div > a')
    if a is not None :
        title = a.text
        rank = tr.select_one('td:nth-child(1) > img')['alt']
        print(rank)

 

 

 

# 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :                
    a = tr.select_one('td.title > div > a')
    if a is not None :
        title = a.text
        rank = tr.select_one('td:nth-child(1) > img')['alt']
        star = tr.select_one('td.point')
        print(star.text)		 # 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :                
    a = tr.select_one('td.title > div > a')
    if a is not None :
        title = a.text
        rank = tr.select_one('td:nth-child(1) > img')['alt']
        star = tr.select_one('td.point').text
        print(star)

 

 

 

# 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :                
    a = tr.select_one('td.title > div > a')
    if a is not None :
        title = a.text
        rank = tr.select_one('td:nth-child(1) > img')['alt']
        star = tr.select_one('td.point').text
        print(rank,title,star)		 # 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :                
    a = tr.select_one('td.title > div > a')
    if a is not None :
        title = a.text
        rank = tr.select_one('td:nth-child(1) > img')
        star = tr.select_one('td.point')
        print(rank['alt'],title,star.text)

 

 

 

 

2. DB 종류와 뜻 

  • DB란 저장한 데이터를 잘 가져오기 위한 것이다.
  • SQL : RDBMS
    틀    (정해진 칸)에 정보를 넣는 것이다. / 대기업 용 등
     
  • NoSQL : not only SQL (SQL 뿐만이 아니다.)
    MongoDB 내 마음대로 저장하는 것 / 비즈니스 유연성에 편리함
    (    예) A : 이름, 연락처, 이메일
          B : 이름, 연락처, 나이, 주소
  • 창업할때에는 NoSQL로 사용하다가 기업이 커지면 SQL로 사용하기도 한다.

 

 

 

 

 

 

 

3. MongoDB 설치하기

 

  • 내컴퓨터(python)과 MongoDB 연결하기

Pymongo 설치
 pip install pymongo + enter

② dnspython 설치
    pip install dnspython + enter

 

 

 

  • Pymongo 기본 탬플릿

from pymongo import MongoClient

client = MongoClient('여기에 URL 입력')

db = client.dbsparta

 

Pymongo로 이동하여 Connect → connect your application을 누른다.

 

DRIVER : Python 선택

VERSION : 3.6 or later 선택

복사 버튼 선택 

[Close]한다.

 

복사한 url을 붙여넣어준다.

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:<password>@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

 

비밀번호 입력

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

 

 

  • Sparta DB에 딕셔너리 데이터 저장하기
    아래     코드 입력 후 ctrl+save → '터미널에서 파이썬 실행하기'

 

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

doc = {

    'name' : '영수',

    'age' : 24

}

db.users.insert_one(doc)

 

Python에서는 아무일도 일어나지 않는다.

 

아래와 같이 오류가 나는 경우 비밀번호에 <>가 포함되었기 때문이다..

 

MongoDB에서 Browse Collections를 클릭한다.

 

 sparta dbspace안에 Users라는 소그룹이 생성되었다.

 

 

4. pymongo로 mongoDB 조작하기(요약코드)

  • Pymongo 코드 요약
저장 doc = {'name':'bobby','age':21}
db.users.insert_one(doc)
한 개 찾기 all_users = list(db.users.find({},{'_id':False}))
바꾸기 db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
지우기 db.users.delete_one({'name':'bobby'})

 

 

 

  • DB에 데이터 저장하기
     

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

 

doc = {'name' : '영희','age' : 30}

db.users.insert_one(doc)

 

doc = {'name' : '철수','age' : 32}

db.users.insert_one(doc)

 

마우스 오른쪽 → 터미널에서 Python 파일실행

Python은 아무일도 일어나지 않는다.

 

REFRESH 해주면 영희, 철수 데이터가 추가된다.

 

 

  • Pymongo(find) 다 가져오기
all_users = list(db.users.find({},{'_id':False}))

{} : 조건
{'_id':False} : _id는 안보겠다.

 

 

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

 

all_users = list(db.users.find({},{'_id':False}))

 

for a in all_users:

    print(a)

 

모든 유저 정보를 list형태로 담자

all_users를 프린트하자

 

 

 

  • 1개만 가져오기
user = db.users.find_one({'name':'bobby'})

 

user = db.users.find_one({})

print(user)

 

 

 

  • 데이터 변경하기
    name이 '영수'를 찾아서 age를 19로 변경해라
     
db.users.update_one({'name':'영수'},{'$set':{'age':19}})

 

 

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

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

 

 

 

  • 데이터 삭제하기

name이 '영수'인 데이터를 찾아서 삭제하라

db.users.delete_one({'name':'영수'})

 

 

 

 

 

3주차 후기 : DB에 데이터까지 저장하다니!

                    너무 신기하고 재미있다 ㅎㅎ

                    단, 오타가 너무 심해서 진도가 안나간다 ㅎㅎㅎ 

                    문법에 맞게 작성하고, 오타를 조심해야겠다 

 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'BootChamp' 카테고리의 다른 글

웹개발종합반 1주차 개발일지  (0) 2023.03.19
웹개발종합반2주차 개발일지  (0) 2023.03.19

분명히 이미 해봤던건데 기억이 나지 않는다 ㅎ

이번 기회에 제대로 익혀서 내것으로 만들어야겠다.

  •  html, css 주석 : Ctrl + /
  • 콘솔 창 줄 바꿈 : shift + enter
  • 코드 정렬 : Shift + Alt + F
  • 들여쓰기 : Tap
  • 그림 삽입 시 3줄이 세트

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');

            background-position: center;

            background-size: cover;
 

  • 가운데 정렬 시킬 때 4줄이 세트

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

  • 이미지 어둡게 하기
    background-image:  linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) , url

'BootChamp' 카테고리의 다른 글

웹개발종합반 3주차 개발일지  (0) 2023.03.20
웹개발종합반2주차 개발일지  (0) 2023.03.19

 

 

 

let A = '사과'

 

  •  

    <script>

        let a = ['사과', '수박', '딸기', '감']

        let b=3

        console.log(a[1])

       

    </script>

 

 

  • 리스트에 몇개가 담겨있나 길이를 보자

    <script>

        let a = ['사과', '수박', '딸기', '감']

        let b=3

        console.log(a.length)

       

    </script>

 

 

  • A안에 name과 age를 저장

    <script>

        let a = {'name':'영수','age':27}

        let b=3

        console.log(a)

       

    </script>

 

 

 

  • 딕셔너리 key=Value

    <script>

        let a = {'name':'영수','age':27}

        let b=3

        console.log(a['age'])

       

    </script>

 

 

 

  • a의 0번째, 1번째, 2번째 값이 있다.

    <script>

        let a = [

        {'name':'영수','age':27},

        {'name':'철수','age':25},

        {'name':'순자','age':30}

        ]

        console.log(a)

       

    </script>
 

 

 

console.log(a[0]['name'])
0번째의 이름이 무엇인가?

 

 

2. JQuery

 

 

 

  • JQuery의 명찰은 id로 지칭한다.

 

  1. 자료형 리스트
  • 버튼을 눌렀을 때 id=q1의 이름을 사과로 바꿔줘

 

        function checkResult(){

            let a = '사과'

            $('#q1').text(a)

        }

 

 

    </script>

 

 

<div class="list-part">

            <h2>2. 리스트</h2>

            <div id="q1">테스트</div>

        </div>

 

 

 

 

    <script>

        function checkResult(){

            let a = ['사과', '배', '감', '귤']

            $('#q1').text(a[1])

        }

    </script>

 

  • 딕셔너리 : Q1의 이름을 바꾸고 css 컬로도 바꿔줘

 

    <script>

        function checkResult(){

            let a = ['사과', '배', '감', '귤']

            $('#q1').text(a[1])

            $('#q1').css('color', 'red')

        }

    </script>

 

      

 

        $('#q1').css('font-size','40px') 폰트 사이즈를 40px로 바꿔라

 

  • 리스트 디셔너리

    <script>

        function checkResult(){

            let a = ['사과', '배', '감', '귤']

            $('#q1').text(a[1])

            $('#q1').css('color', 'red')

            $('#q1').css('font-size','40px')

            let b = {'name':'영수','age':30 }

            $('#q2').text(b['name'])

            let c = [

                {'name':'영수','age':30 },

                {'name':'철수','age':35 }

            ]

            $('#q3').text(c[1]['age'])

        }

    </script>

 

 

 

  1. 반복문

 

 

  • forEach : 하나씩 꺼내서 보여줘
     

    <script>

        let fruits = ['사과', '배', '감', '귤']

        fruits.forEach((a)=>{

            console.log(a)

        })

    </script>

 

 

 

 

 

 

 

  1. 조건문

 

 

  • 조건문 if else
    조건문 : 요소의 값을 비교하라

 

<script>

        let age = 24

        if(age > 20){

            console.log('성인입니다')    

        }else{

                console.log('청소년입니다.')

            }

    </script>

 

 

 

  • 조건문+반복문

    <script>

        let ages = [12, 14, 15, 26, 37, 24]

        ages.forEach((a)=>{

            if(a>20){

                console.log('성인')

            }else{

                console.log('청소년')

            }

        })

    </script>
 

 

3. $('# ').append

JQuery에 자주 쓰이는 친구

 

  • 변수를 만들고 q1에 리스트에있는변수값을 순차적으로 넣어주기

<script> function checkResult() {

    let fruits = ['사과','배','감','귤','수박']

    fruits.forEach((a)=>{

        let temp_html = `<p>${a}</p>`

        $('#q1').append(temp_html)

    })

 }

 

 </script>

 

 

 

  • 사과, 귤, 감을 삭제하고 리스트 fruit에 있는 값을 순차적으로 넣어주자

<script> function checkResult() {

    let fruits = ['사과','배','감','귤','수박']

    $('#q1').empty()

    fruits.forEach((a)=>{

        let temp_html = `<p>${a}</p>`

        $('#q1').append(temp_html)

    })

 }

 

 </script>

 

 

 

  • 기존 값은 초기화해주고 리스트 딕셔너리 people 에 값을 순차적으로 변수로 넣어주자

`(백틱) 오타를 조심하자!

<script> function checkResult() {

        let people = [

        {'name':'서영','age':24},

        {'name':'현아','age':30},

        {'name':'영환','age':12},

        {'name':'서연','age':15},

        {'name':'지용','age':18},

        {'name':'예지','age':36}

]

        $('#q2').empty()

        people.forEach((a)=>{

            let name = a['name']

            let age = a['age']

            let temp_html = `<p> ${name}는 ${age}살입니다.</p>`

            $('#q2').append(temp_html)

        })

    }

</script>



  •  

 

 

4. 서버 클라이언트 통신 이해하기

서울시 미세먼지 Open API

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

 

 

Dictionury

 

 

4. fetch

 

 

 

 

 

 

 

  • Fetch는 url로 api의 데이터를 받아오는 것이다.

 

  • API도 import해서 JSON 형태로 변환해서 사용할거야
    fetch url을 가져오고 그리고 json형태로 변환할거야 그리고 데이터를 console.log할거야

    <script>

        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

            console.log(data)

        })

    </script>
 

 

 

  • RealtimeCityAir의 row의 0번째를 가져와

    <script>

        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

            console.log(data['RealtimeCityAir']['row'][0])

        })

    </script>

 

 

 

  • RealtimeCityAir의 row를 rows 리스트에 담아서 모두 보여줘

    <script>

        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

            let rows = data['RealtimeCityAir']['row']

            rows.forEach((a) => {

                console.log(a)              

            })

        })

    </script>

 

 

 

  • RealtimeCityAir의 row를 rows 리스트 데이터 중 구(MSRSTE_NM)의 이름만 보여줘
     


    <script>

        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

            let rows = data['RealtimeCityAir']['row']

            rows.forEach((a) => {

                console.log(a['MSRSTE_NM'])              

            })

        })

    </script>
 

 

 

 

  • RealtimeCityAir의 row를 rows 리스트 데이터 중 구(MSRSTE_NM)와 미세먼지 상태(IDEX_NM)를 이름만 보여줘

    <script>

        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

            let rows = data['RealtimeCityAir']['row']

            rows.forEach((a) => {

                console.log(a['MSRSTE_NM'], a['IDEX_NM'])              

            })

        })

    </script>

 

 

 

  • 버튼을 누르면 기존 리스트 내용은 지우고 구('MSRSTE_NM')와 미세먼지 수치('IDEX_MVL')를 보여주자

    <script>

        function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((res) => res.json()).then(data => {

                let rows = data['RealtimeCityAir']['row']

                $('#names-q1').empty()

                rows.forEach((a) => {

                    let gu_name = a['MSRSTE_NM']

                    let gu_mise = a['IDEX_MVL']

                    let temp_html = `<li> ${gu_name} : ${gu_mise}</li>`

                    $('#names-q1').append(temp_html)

                });

            })

        }

    </script>
 

 

 

 

  • 버튼을 누르면 기존 리스트 내용은 지우고 구('MSRSTE_NM')와 미세먼지 수치('IDEX_MVL')를 보여주자
    그리고 미세먼지 수치가 40이 넘어가면 빨간색으로 표시하자

    <script>

        function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

                let rows = data['RealtimeCityAir']['row']

                $('#names-q1').empty()

                rows.forEach((a) => {

                    let gu_name = a['MSRSTE_NM']

                    let gu_mise = a['IDEX_MVL']

                    let temp_html = ``

                    if(gu_mise > 40){

                        temp_html = `<li class="bad"> ${gu_name} : ${gu_mise}`

                    } else{

                        temp_html = `<li> ${gu_name} : ${gu_mise}</li>`

                    }

                    $('#names-q1').append(temp_html)

                });

            })

        }

    </script>

 

 

 

  • 서울시 따릉이 API를 통해 거치대위치, 총 자전거 수, 이용가능 수를 표 형태로 보여주자

<script>

        function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {

                let rows = data['getStationList']['row']

                $('#names-q1').empty()

                rows.forEach((a) => {

                    let name = a['stationName']

                    let rack = a['rackTotCnt']

                    let bike = a['parkingBikeTotCnt']

                    let temp_html = `<tr>

                                    <td>${name}</td>

                                    <td>${rack}</td>

                                    <td>${bike}</td>

                                    </tr>`

                    $('#names-q1').append(temp_html)

                });

            });

        }

 

    </script>

 

 

 

<script>

        function q1() {

        }

 

    </script>

 

<button onclick="q1()">업데이트</button>

버튼을 클릭하면 q1이 업데이트 된다.

 

 

 

<script>

        function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {

                let rows = data['getStationList']['row']

 

             });

        }

 

    </script>

 

Fetch 기본 뼈대를 쓰고 서울시 따릉이 open API Url을 입력한다.

let lows = data['getStationList']['row']

lows라는 변수에 'getStationList'와 'row' 데이터를 담는다.

 

<script>

        function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {

                let rows = data['getStationList']['row']

                rows.forEach((a) => {

                    let name = a['stationName']

                    let rack = a['rackTotCnt']

                    let bike = a['parkingBikeTotCnt']

 

                });

            });

        }

 

rows의 데이터를 하나씩 뽑아서 name, rack, bike 변수에 담는다.

 

<script>

        function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {

                let rows = data['getStationList']['row']

                $('#names-q1').empty()

                rows.forEach((a) => {

                    let name = a['stationName']

                    let rack = a['rackTotCnt']

                    let bike = a['parkingBikeTotCnt']

                    let temp_html = `<tr>

                                    <td>${name}</td>

                                    <td>${rack}</td>

                                    <td>${bike}</td>

                                    </tr>`

                    $('#names-q1').append(temp_html)

                });

            });

        }

 

    </script>

 

temp_html에 html 형태로 반복할 정보를 입력한다.

temp_html에서 변수를 지정해줄때에는 ${} 중괄호로 입력해야한다.

$('#names-q1') class에 rows의 변수의 수 만큼 temp_html을 실행한다.

 

 

<script>

        function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {

                let rows = data['getStationList']['row']

                $('#names-q1').empty()

                rows.forEach((a) => {

                    let name = a['stationName']

                    let rack = a['rackTotCnt']

                    let bike = a['parkingBikeTotCnt']

                    let temp_html = `<tr>

                                    <td>${name}</td>

                                    <td>${rack}</td>

                                    <td>${bike}</td>

                                    </tr>`

                    $('#names-q1').append(temp_html)

                });

            });

        }

 

    </script>

 

기존에 있던 내용은 모두 지워주고 실행시킨다.

 

 

  • If else를 통해 bike가 5보다 작으면 빨간색으로 표시해주자

 

    <script>

        function q1() {

            fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {

                let rows = data['getStationList']['row']

                $('#names-q1').empty()

                rows.forEach((a) => {

                    let name = a['stationName']

                    let rack = a['rackTotCnt']

                    let bike = a['parkingBikeTotCnt']

                   

                    let temp_html = ``

                    if(bike < 5){

                        temp_html = `<tr class="red">

                                    <td>${name}</td>

                                    <td>${rack}</td>

                                    <td>${bike}</td>

                                    </tr>`

                    } else{

                        temp_html = `<tr>

                                    <td>${name}</td>

                                    <td>${rack}</td>

                                    <td>${bike}</td>

                                    </tr>`

                    }

                    $('#names-q1').append(temp_html)

                });

            });

        }

 

    </script>

 

 

 

 

  • 2주차 숙제 : index.html 파일에 서울의 날씨 API를 붙여주기

    <script>

        $(document).ready(function() {

            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {

                let number = data['temp']

                $('#temp').text(number)  

                });

            })

    </script>

Number라는 변수에 'temp'를 넣어주고 span id=tmep에 text로 number 값을 넣어주기

 $(document).ready(function(){

}
문서를 새로고침 할때마다 자동으로 script가 실행되도록 한다.

 

 

2주차 후기 : 오타에 조심하자

                    오타 찾다가 하루가 다 간다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'BootChamp' 카테고리의 다른 글

웹개발종합반 3주차 개발일지  (0) 2023.03.20
웹개발종합반 1주차 개발일지  (0) 2023.03.19

+ Recent posts

티스토리툴바