3주차 코딩 개발 일지 (3-3 ~ 3-7)

영현·2022년 3월 15일
국비지원코딩내일배움카드스파르타코딩클럽코딩독학
0

스파르타클럽 코딩일지 3주차

목록 보기
1/4

☑️ OpenAPI 붙여보기 복습

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 퀴즈</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400&display=swap" rel="stylesheet">
</head>

<style>
    .wrap {
        width: 900px;
        margin: auto;
    }

    * {
        font-family: 'IBM Plex Sans KR', sans-serif;
    }

    .comt {
        color: blue;
        font-weight: bold;
    }

    .postbox {
        display: none;

        width: 500px;
        margin: 10px auto 30px auto;

        border: 2px solid black;
        border-radius: 10px;

        padding: 50px

    }
</style>
<script>
    $(document).ready(function () {
        $('#cards-box').empty();
        listing();
    });

    function listing() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/post",
            data: {},
            success: function (response) {
                let rows = response['articles']
                for(let i = 0; i < rows.length; i++){
                    let comment = rows[i]['comment']
                    let desc = rows[i]['desc']
                    let image = rows[i]['image']
                    let title = rows[i]['title']
                    let url = rows[i]['url']

                    let temp_html = ` <div class="card">
                                        <img class="card-img-top"
                                             src="${image}"
                                             alt="Card image cap">
                                        <div class="card-body">
                                            <h5 class="card-title">
                                                <a href="${url}">${title}</a>
                                            </h5>
                                            <p class="card-text">${desc}</p>
                                            <p class="card-text comt">${comment}</p>
                                        </div>`

                      $('#cards-box').append(temp_html);

                }
            }
        })
    }

    function openclose() {
        let status = $('#post-box').css('display');
        if (status == 'block') {
            $('#post-box').hide();
            $('#posting-box-btn').text('포스팅박스 열기');
        } else {
            $('#post-box').show();
            $('#posting-box-btn').text('포스팅박스 닫기');
        }

    }
</script>

<body>
<div class="wrap">
    <div class="jumbotron">
        <h1 class="display-4">나홀로 링크 메모장!</h1>
        <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다.</p>
        <hr class="my-4">
        <!--            <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>-->
        <p class="lead">
            <a id="posting-box-btn" onclick="openclose()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스
                열기</a>
        </p>
    </div>
    <div class="postbox" id="post-box">
        <div class="form-group">
            <label>아티클 URL</label>
            <input class="form-control" id="article-url">
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">간단 코멘트</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">기사저장</button>
    </div>
    <div class="card-columns" id="cards-box">
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1495785870240-c8456d5aeda2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="https://www.naver.com/">여기 기사 제목이 들어가죠</a>
                </h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comt">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1495785870240-c8456d5aeda2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="https://www.naver.com/">여기 기사 제목이 들어가죠</a>
                </h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comt">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1495785870240-c8456d5aeda2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="https://www.naver.com/">여기 기사 제목이 들어가죠</a>
                </h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comt">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1495785870240-c8456d5aeda2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="https://www.naver.com/">여기 기사 제목이 들어가죠</a>
                </h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comt">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1495785870240-c8456d5aeda2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="https://www.naver.com/">여기 기사 제목이 들어가죠</a>
                </h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comt">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://images.unsplash.com/photo-1495785870240-c8456d5aeda2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="https://www.naver.com/">여기 기사 제목이 들어가죠</a>
                </h5>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comt">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
    </div>
</div>

</body>

</html>

␣
☑️ 파이썬 시작하기

  • 파이썬을 설치했다. = 파이썬 번역팩을 설치했다.
    → 내가 파이썬으로 명령을 내리면 컴퓨터가 알아들을 수 있는 언어로 이것을 번역해줘

✔︎ 작동시킬때는 작성 중인 창에서 우클릭 누르고 Run~ 로 해야한다.

☑️ 파이썬 기초 문법

  • 변수 & 기본연산
a = 3      # 3을 a에 넣는다
b = a      # a를 b에 넣는다
a = a + 1  # a+1을 다시 a에 넣는다

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

a = 2
b = 3

print(a+b)

☞ 5

✽ TIP! 오류 볼 때 마지막 문장 부분(TypeError)을 복붙해서 구글링 해본다.

  • 자료형

⎯ 리스트형

a_list = ['사과','배','감']

print(a_list[1])

☞ 배
a_list = ['사과','배','감']
a_list.append('수박')

print(a_list)

☞ ['사과', '배', '감', '수박']

⎯ Dictionary 형 (Javascript의 dictionary형과 동일)

a_dict = {'name':'bob','age':27}

print(a_dict['name'])

☞ bob
a_dict = {'name':'bob','age':27}
a_dict['height'] = 178

print(a_dict)

☞ {'name': 'bob', 'age': 27, 'height': 178}
  • 함수
* 수학문제
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 aa(num1,num2):
    print('안녕')
    return num1+num2

result = aa(2,3)

print(result)

⎯ 조건문

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):  		→ is_adult라는 이름의 함수를 정의,
							  age를 변수로 받는다.
    if age > 20:  			→ age가 20보다 크면
        print('성인입니다')   	→'성인입니다'를 출력
    else:					→ 아니면
        print('청소년입니다')	→'청소년입니다'를 출력

is_adult(30)
is_adult(15)

☞ 성인입니다
☞ 청소년입니다

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

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

count = 0
for fruit in fruits:
	if fruit == '사과':
		count += 1  → count를 1개 올려줘라

print(count)

☞ 사과 개수 출력
2
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'])
    
☞ bob
☞ carry
☞ john
☞ smith
☞ ben

✽ 나이가 20보다 작은 값을 출력
for person in people:
    if person['age'] < 20:
        print(person)
        
☞ {'name': 'john', 'age': 7}
☞ {'name': 'smith', 'age': 17}

␣

  • 파이썬 패키지 사용해보기

    ✦ 패키지? 라이브러리?
    → Python 에서 패키지는 모듈(일종의 기능들 묶음)을 모아 놓은 단위.
    이런 패키지의 묶음을 라이브러리 라고 볼 수 있습니다.
    즉, 패키지 설치 = 외부 라이브러리 설치!

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:
    gu_name = gu['MSRSTE_NM']
    gu_mise = gu['IDEX_MVL']
    if (gu_mise > 100) :
        print(gu_name,gu_mise)
        
        
☞ 중구 108.0
☞ 종로구 101.0
☞ 중랑구 101.0
profile
영현
다음 포스트

3주차 코딩 개발 일지 (3-8 ~ 3-9 )

0개의 댓글

관련 채용 정보