<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>nani</title>
        <link>https://velog.io/</link>
        <description>옍</description>
        <lastBuildDate>Mon, 17 Jul 2023 02:39:23 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>nani</title>
            <url>https://images.velog.io/images/nani_jin/profile/efd0c6ae-7150-4741-a860-db46aed21637/3A5D1855-5E11-40B7-96E9-6878C44168EA_1_201_a.jpeg</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. nani. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/nani_jin" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[파트 7. 기타]]></title>
            <link>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-7.-%EA%B8%B0%ED%83%80</link>
            <guid>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-7.-%EA%B8%B0%ED%83%80</guid>
            <pubDate>Mon, 17 Jul 2023 02:39:23 GMT</pubDate>
            <description><![CDATA[<p>1) for문과 if문을 한번에</p>
<pre><code>mylist = [3, 2, 6, 7]
answer = [num**2 for num in mylist if num % 2 == 0]</code></pre><p>2) flag 대신 for-else 사용</p>
<pre><code>import math

if __name__ == &#39;__main__&#39;:
    numbers = [int(input()) for _ in range(5)]
    multiplied = 1
    for num in numbers:
        multiplied *= num
        if math.sqrt(multiplied) == int(math.sqrt(multiplied)):
            print(&#39;found&#39;)
            break
    else:
        print(&#39;not found&#39;)</code></pre><p>3) 두 변수의 값 바꾸기 - swap</p>
<pre><code>a = 3
b = &#39;abc&#39;

a, b = b, a # 참 쉽죠?</code></pre><p>4) 이진 탐색하기 - binary search</p>
<pre><code>import bisect
mylist = [1, 2, 3, 7, 9, 11, 33]
print(bisect.bisect(mylist, 3))</code></pre><p>5) 클래스 인스턴스 출력하기 - class의 자동 string casting
파이썬에서는 <strong>str</strong> 메소드를 사용해 class 내부에서 출력 format을 지정할 수 있습니다.</p>
<pre><code>class Coord(object):
    def __init__ (self, x, y):
        self.x, self.y = x, y
    def __str__ (self):
        return &#39;({}, {})&#39;.format(self.x, self.y)

point = Coord(1, 2)</code></pre><p>6) 가장 큰 수, inf
코테를 풀다보면, 최솟값을 저장하는 변수에 아주 큰 값을 할당해야 할 때가 있다.
이때 사용하기 좋은 것이 inf다.</p>
<pre><code>min_val = float(&#39;inf&#39;)
min_val &gt; 10000000000

inf에는 음수 기호를 붙이는 것도 가능하다.
max_val = float(&#39;-inf&#39;)</code></pre><p>7) 파일 입출력 간단하게 하기.</p>
<pre><code>with open(&#39;myfile.txt&#39;) as file:
    for line in file.readlines():
        print(line.strip().split(&#39;\t&#39;))</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[파트6. Itertools / Collections 모듈]]></title>
            <link>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B86.-Itertools-Collections-%EB%AA%A8%EB%93%88</link>
            <guid>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B86.-Itertools-Collections-%EB%AA%A8%EB%93%88</guid>
            <pubDate>Mon, 17 Jul 2023 02:04:50 GMT</pubDate>
            <description><![CDATA[<p>1) 곱집합 구하기 - product
예시) 두 스트링 &#39;ABCD&#39;, &#39;xy&#39; 의 곱집합은 Ax Ay Bx By Cx Cy Dx Dy</p>
<p>보통 사람들은 for문을 이용해 두 iterable 원소를 하나씩 곱하지만,
itertools.product를 이용하면, for 문을 사용하지 않고 곱집합을 구할 수 있다.</p>
<pre><code>import itertools

iterable1 = &#39;ABCD&#39;
iterable2 = &#39;xy&#39;
iterable3 = &#39;1234&#39;
print(list(itertools.product(iterable1, iterable2, iterable3)))</code></pre><p>2) 2차원 리스트를 1차원 리스트로 만들기 - from_iterable</p>
<pre><code>my_list = [[1, 2], [3, 4], [5, 6]]

# 방법 1 - sum 함수
answer = sum(my_list, [])

# 방법 2 - itertools.chain
import itertools
list(itertools.chain.from_iterable(my_list))

# 방법 3 - itertools와 unpacking
import itertools
list(itertools.chain(*my_list))

# 방법 4 - list comprehension 이용
[element for array in my_list for element in array]

# 방법 5 - reduce 함수 이용 1
from functools import reduce
list(reduce(lambda x, y: x+y, my_list))

# 방법 6 - reduce 함수 이용 2
from functools import reduce
import operator
list(reduce(operator.add, my_list))</code></pre><p>3) 순열과 조합
combinations와 permutations를 이용하면 쉽게 풀 수 있음!</p>
<pre><code>from itertools import *

def solution(mylist):
    answer = sorted(list(permutations(mylist)))
    return answer</code></pre><pre><code>&lt;참고&gt;
import itertools

pool = [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;]
print(list(map(&#39;&#39;.join, itertools.permutations(pool)))) # 3개의 원소로 순열 만들기
print(list(map(&#39;&#39;.join, itertools.permutations(pool, 2)))) # 2개의 원소로 순열 만들기</code></pre><p>4) 가장 많이 등장하는 알파벳 찾기 - collections의 Counter (참고 : hjseo-dev.log)</p>
<pre><code>answer = collections.Counter(mylist)
values = [i for i in answer.values()]
items = [i for i in answer.items()]</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[파트 5. Sequence Types 다루기]]></title>
            <link>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-5.-Sequence-Types-%EB%8B%A4%EB%A3%A8%EA%B8%B0</link>
            <guid>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-5.-Sequence-Types-%EB%8B%A4%EB%A3%A8%EA%B8%B0</guid>
            <pubDate>Mon, 17 Jul 2023 00:49:14 GMT</pubDate>
            <description><![CDATA[<p>1) sequence 멤버 하나로 이어붙이기 - join
시퀀스의 멤버들을 하나의 string으로 이어붙여야 할 때,
보통 for문을 이용해 원소를 하나씩 이어 붙이지만 파이썬에서는 str.join(iterable)을 사용하면 편리하다</p>
<pre><code>my_list = [&#39;1&#39;,&#39;100&#39;,&#39;33&#39;]
answer = &#39;&#39;.join(my_list)</code></pre><p>2) sequence type의 * 연산 - 삼각형 별찍기</p>
<pre><code>n = 어쩌고
answer = &#39;abc&#39; * n</code></pre><p>또는</p>
<pre><code>n = 어쩌고
answer= [123, 456] * n</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[파트 4. Iterable 다루기]]></title>
            <link>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-4.-Iterable-%EB%8B%A4%EB%A3%A8%EA%B8%B0</link>
            <guid>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-4.-Iterable-%EB%8B%A4%EB%A3%A8%EA%B8%B0</guid>
            <pubDate>Mon, 17 Jul 2023 00:31:58 GMT</pubDate>
            <description><![CDATA[<pre><code>&lt;참고&gt;
원본의 순서는 변경하지 않고, 정렬된 값을 구하려면? sort 함수 가능!
list1 = [3, 2, 5, 1]
list2 = [i for i in list1] # 또는 copy.deepcopy를 사용
list2.sort()

list1 = [3, 2, 5, 1]
list2 = sorted(list1)</code></pre><p>1) 2차원 리스트 뒤집기
다음을 만족하는 함수, solution을 완성해주세요.</p>
<ul>
<li>solution 함수는 이차원 리스트, mylist를 인자로 받습니다</li>
<li>solution 함수는 mylist 원소의 행과 열을 뒤집은 한 값을 리턴해야합니다.
예를 들어 mylist [[1, 2, 3], [4, 5, 6], [7, 8, 9]]가 주어진 경우, solution 함수는 [[1, 4, 7], [2, 5, 8], [3, 6, 9]] 을 리턴하면 됩니다.</li>
</ul>
<pre><code>def solution(mylist):
    answer = list(map(list,zip(*mylist)))
    return answer</code></pre><p><strong>zip을 이용하라!</strong></p>
<pre><code>&lt;예시 #1&gt;
list1 = [1,2,3,4]
list2 = [10,20,30,40]
list3 = [5,6,7,8]
answer = []
for num1, num2, num3 in zip(list1,list2,list3):
    print(num1+num2+num3)</code></pre><pre><code>&lt;예시 #2&gt;
animals = [&#39;cat&#39;,&#39;dog&#39;,&#39;lion&#39;]
sounds = [&#39;meow&#39;, &#39;woof&#39;, &#39;roar&#39;]
answer = dict(zip(animals,sounds)) # {&#39;cat&#39;: &#39;meow&#39;, &#39;dog&#39;: &#39;woof&#39;, &#39;lion&#39;: &#39;roar&#39;}</code></pre><p>2) i번째 원소와 i+1번째 원소 - zip
보통은 len과 index를 이용해 각 원소에 접근한다.
하지만 zip을 이용하면 index를 사용하지 않고 각 원소에 접근할 수 있다.</p>
<pre><code>def solution(mylist):
    answer = []
    for i in range(len(mylist)-1):
        answer.append(abs(mylist[i] - mylist[i+1]))
    return answer

if __name__ == &#39;__main__&#39;:
    mylist = [83, 48, 13, 4, 71, 11]    
    print(solution(mylist))</code></pre><p>대신</p>
<pre><code>def solution(mylist):
    answer = []
    for number1, number2 in zip(mylist, mylist[1:]):
        answer.append(abs(number1 - number2))
    return answer

if __name__ == &#39;__main__&#39;:
    mylist = [83, 48, 13, 4, 71, 11]    
    print(solution(mylist))</code></pre><p>3) 모든 멤버의 type 변환하기 - map
보통 for문을 이용해 원소의 타입을 하나씩 바꾼다.</p>
<pre><code>list1 = [&#39;1&#39;, &#39;100&#39;, &#39;33&#39;]
list2 = []
for value in list1:
    list2.append(int(value))</code></pre><p>대신 map을 이용하면 for문을 사용하지 않고도 일괄 변환할 수 있다.</p>
<pre><code>list1 = [&#39;1&#39;, &#39;100&#39;, &#39;33&#39;]
list2 = list(map(int, list1))</code></pre><p><strong>응용 예시</strong></p>
<pre><code>def solution(mylist):
    answer = list(map(len,mylist))
    return answer</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[파트 3. str 다루기]]></title>
            <link>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-3.-str-%EB%8B%A4%EB%A3%A8%EA%B8%B0</link>
            <guid>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-3.-str-%EB%8B%A4%EB%A3%A8%EA%B8%B0</guid>
            <pubDate>Sun, 16 Jul 2023 14:11:11 GMT</pubDate>
            <description><![CDATA[<p>1) 문자열 정렬하기
문자열 s와 자연수 n이 입력으로 주어집니다. 문자열 s를 좌측 / 가운데 / 우측 정렬한 길이 n인 문자열을 한 줄씩 프린트해보세요.</p>
<pre><code>s, n = input().strip().split(&#39; &#39;)
n = int(n)

print(s.ljust(n))
print(s.center(n))
print(s.rjust(n))</code></pre><p>2) 알파벳 출력하기
입력으로 0이 주어지면 영문 소문자 알파벳을, 입력으로 1이 주어지면 영문 대문자 알파벳을 사전 순으로 출력하는 코드를 짜세요.</p>
<pre><code>import string
num = int(input().strip())
if num == 0:
    print(string.ascii_lowercase)
elif num == 1:
    print(string.ascii_uppercase)</code></pre><pre><code>&lt;참고&gt;
import string 

string.ascii_lowercase # 소문자 abcdefghijklmnopqrstuvwxyz
string.ascii_uppercase # 대문자 ABCDEFGHIJKLMNOPQRSTUVWXYZ
string.ascii_letters # 대소문자 모두 abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
string.digits # 숫자 0123456789</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[파트 2. 정수 다루기]]></title>
            <link>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-2.-%EC%A0%95%EC%88%98-%EB%8B%A4%EB%A3%A8%EA%B8%B0</link>
            <guid>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-2.-%EC%A0%95%EC%88%98-%EB%8B%A4%EB%A3%A8%EA%B8%B0</guid>
            <pubDate>Sun, 16 Jul 2023 14:10:33 GMT</pubDate>
            <description><![CDATA[<p>1) 몫과 나머지
숫자 a, b가 주어졌을 때 a를 b로 나눈 몫과 a를 b로 나눈 나머지를 공백으로 구분해 출력해보세요.</p>
<pre><code>a,b = map(int,input().strip().split(&#39; &#39;))
print(&quot;{0} {1}&quot;.format(a//b,a%b))</code></pre><p>혹은 divmod 사용시 큰 숫자를 다룰 때 더 빠르다.</p>
<pre><code>a,b = map(int,input().strip().split(&#39; &#39;))
print(*divmod(a,b))</code></pre><p>2) n진법으로 표기된 string을 10진법 숫자로 변환하기
base 진법으로 표기된 숫자를 10진법 숫자 출력해보세요.</p>
<pre><code>num, base = map(int, input().strip().split(&#39; &#39;))
num = str(num)
answer = int(num,base)

print(answer)</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[파트 1. Python 꿀팁]]></title>
            <link>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-1.-Python-%EA%BF%80%ED%8C%81</link>
            <guid>https://velog.io/@nani_jin/%ED%8C%8C%ED%8A%B8-1.-Python-%EA%BF%80%ED%8C%81</guid>
            <pubDate>Sun, 16 Jul 2023 13:57:34 GMT</pubDate>
            <description><![CDATA[<p>파이썬 기초체력이 없음을 느꼈따. 
이 간극을 위해 파이썬을 파이썬답게를 들어보기로 한다.</p>
<p>iterable: 자신의 멤버를 한 번에 리턴할 수 있는 객체. list, str, tuple, dict 등이 여기에 속함.
sequence: int 타입 인덱스를 통해, 원소에 접근할 수 있는 iterable. list, str, tuple이 여기에 속함.</p>
<pre><code>def solution(mylist):
    return list(map(len, mylist))</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[요즘 많이 보는 수학정리 사이트]]></title>
            <link>https://velog.io/@nani_jin/%EC%9A%94%EC%A6%98-%EB%A7%8E%EC%9D%B4-%EB%B3%B4%EB%8A%94-%EC%88%98%ED%95%99%EC%A0%95%EB%A6%AC-%EC%82%AC%EC%9D%B4%ED%8A%B8</link>
            <guid>https://velog.io/@nani_jin/%EC%9A%94%EC%A6%98-%EB%A7%8E%EC%9D%B4-%EB%B3%B4%EB%8A%94-%EC%88%98%ED%95%99%EC%A0%95%EB%A6%AC-%EC%82%AC%EC%9D%B4%ED%8A%B8</guid>
            <pubDate>Mon, 04 Apr 2022 05:13:23 GMT</pubDate>
            <description><![CDATA[<p>공돌이의 수학정리노트 : <a href="https://angeloyeo.github.io/">https://angeloyeo.github.io/</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[웹개발 종합반 7주차 (3.7)]]></title>
            <link>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-7%EC%A3%BC%EC%B0%A8-2.28</link>
            <guid>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-7%EC%A3%BC%EC%B0%A8-2.28</guid>
            <pubDate>Mon, 28 Feb 2022 13:22:39 GMT</pubDate>
            <description><![CDATA[<p>(앞으로 해야할 것)
<del>1. select에 따라 해당하는 오름 카드들만 나오게</del>
<del>2. 코멘트 달기</del>
<del>3. 웹페이지 배포</del>
4. 지도 만들기
5. 코멘트 꾸며주기
6. 카드 리스트 이름 순으로 정렬해주기</p>
<p>1) app.py</p>
<pre><code>from flask import Flask, render_template, request, jsonify
import requests
app = Flask(__name__)

from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient(&#39;mongodb+srv://test:sparta@cluster0.4n13d.mongodb.net/Cluster0?retryWrites=true&amp;w=majority&#39;, tlsCAFile=ca)
db = client.dbsparta

headers = {&#39;User-Agent&#39; : &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36&#39;}
data = requests.get(&#39;https://gis.jeju.go.kr/rest/JejuOleumVRImg/getOleumRDetailList&#39;,headers=headers)

d = data.json()
oleums = d[&quot;resultSummary&quot;]

@app.route(&#39;/&#39;)
def home():
    return render_template(&#39;index.html&#39;)

@app.route(&quot;/oleums&quot;, methods=[&quot;POST&quot;])
def jejuoleum_post():
    for oleum in oleums:
        name = oleum[&#39;oleumKname&#39;]
        address = oleum[&#39;oleumAddr&#39;]
        altitude = oleum[&#39;oleumAltitu&#39;]
        x = oleum[&#39;x&#39;]
        y = oleum[&#39;y&#39;]
        explan = oleum[&#39;explan&#39;]
        img = oleum[&#39;imgPath&#39;]
        doc = {
            &#39;name&#39;: name,
            &#39;address&#39;: address,
            &#39;altitude&#39;: altitude,
            &#39;x&#39;: x,
            &#39;y&#39;: y,
            &#39;explan&#39;: explan,
            &#39;img&#39;: img
        }
        db.oleums.insert_one(doc)

@app.route(&quot;/oleums&quot;, methods=[&quot;GET&quot;])
def jejuoleum_get():
    oleum_list = list(db.oleums.find({}, {&#39;_id&#39;: False}))
    print(oleum_list[0])
    return jsonify({&#39;oleums&#39;: oleum_list})

@app.route(&quot;/comment&quot;, methods=[&quot;POST&quot;])
def comment_post():
    comname_receive = request.form[&#39;comname_give&#39;]
    star_receive = request.form[&#39;star_give&#39;]
    comment_receive = request.form[&#39;comment_give&#39;]

    doc = {
        &#39;comname&#39; : comname_receive,
        &#39;star&#39; : star_receive,
        &#39;comment&#39; : comment_receive
    }

    db.comment.insert_one(doc)
    return jsonify({&#39;msg&#39;: &#39;저장 완료!&#39;})
@app.route(&quot;/commentlist&quot;, methods=[&quot;POST&quot;])
def comment_get():
    comname_receive = request.form[&#39;comname_give&#39;]
    comment_list = list(db.comment.find({&#39;comname&#39;:comname_receive}, {&#39;_id&#39;: False}))
    print(comment_list)
    return jsonify({&#39;comments&#39;: comment_list})

if __name__ == &#39;__main__&#39;:
    app.run(&#39;0.0.0.0&#39;, port=5000, debug=True)</code></pre><ol start="2">
<li><p>index.html</p>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

<pre><code> &lt;meta property=&quot;og:title&quot; content=&quot;제주 오름 지도🏔&quot;/&gt;
 &lt;meta property=&quot;og:description&quot; content=&quot;제주의 오름들을 구경하세요&quot;/&gt;
 &lt;meta property=&quot;og:image&quot; content=&quot;http://www.ibulgyo.com/news/photo/201506/141816_88579_3155.jpg&quot;/&gt;

 &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
       integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
 &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot;
         integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot;
         crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

 &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js&quot;&gt;&lt;/script&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css&quot;/&gt;

 &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Gowun+Batang&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;

 &lt;title&gt;제주 오름 지도&lt;/title&gt;

 &lt;style&gt;
 * {
     font-family: &#39;Gowun Batang&#39;, serif;
 }

 .mytitle {
     width: 100%;
     height: 250px;

     background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(&#39;data:image/jpeg;base64,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&#39;);
     background-position: center;
     background-size: cover;

     color: white;

     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
 .myselect {
     margin : 30px;

     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;

     border : 1px solid white;
     box-shadow : 0px 0px 2px 0px darkgray;
 }
 .mycomment {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
 .mycomment &gt; .btn {
     margin: 20px 10px 10px 10px;
 }
 .mybtns {
     margin : 10px 10px 10px 160px;
     }

 &lt;/style&gt;
 &lt;script&gt;
     $(document).ready(function () {
         set_temp()
         save_oleum()
         show_oleum()
         close_box()
     });

     function set_temp() {
         $.ajax({
             type: &quot;GET&quot;,
             url: &quot;http://spartacodingclub.shop/sparta_api/weather/jeju&quot;,
             data: {},
             success: function (response) {
                 $(&#39;#temp&#39;).text(response[&#39;temp&#39;])
             }
         })
     }

     function save_oleum(){
         $.ajax({
             type : &#39;POST&#39;,
             url: &#39;/oluems&#39;,
             data: {},
             success: function (response) {
                 window.location.reload()
             }
         })
     }

     function show_oleum(){
         $.ajax({
             type : &#39;GET&#39;,
             url : &#39;/oleums&#39;,
             data : {},
             success : function (response) {
                 let rows = response[&#39;oleums&#39;]
                 for (let i = 0; i &lt; rows.length; i++) {
                     let name = rows[i][&#39;name&#39;]
                     let address = rows[i][&#39;address&#39;]
                     let altitude = rows[i][&#39;altitude&#39;]
                     let x = rows[i][&#39;x&#39;]
                     let y = rows[i][&#39;y&#39;]
                     let explan = rows[i][&#39;explan&#39;]
                     let img = rows[i][&#39;img&#39;]

                     let temp_html = `&lt;div class=&quot;card&quot; style=&quot;width: 18rem;&quot;&gt;
                                         &lt;img src=&quot;${img}&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
                                         &lt;div class=&quot;card-body&quot;&gt;
                                             &lt;h5 class=&quot;card-title&quot;&gt;${name}&lt;/h5&gt;
                                             &lt;p class=&quot;card-text&quot;&gt;${address}&lt;/p&gt;
                                             &lt;p class=&quot;card-text&quot;&gt;${explan}&lt;/p&gt;
                                         &lt;/div&gt;
                                     &lt;/div&gt;
                                     `
                     $.ajax({
                         type: &#39;POST&#39;,
                         url: &#39;/commentlist&#39;,
                         data: {comname_give: name},
                         success: function (response) {
                             let rows = response[&#39;comments&#39;]
                             for (let i = 0; i &lt; rows.length; i++) {
                                 let comname = rows[i][&#39;comname&#39;]
                                 let star = rows[i][&#39;star&#39;]
                                 let comment = rows[i][&#39;comment&#39;]
                                 let star_image = &#39;⭐&#39;.repeat(star)
                                 temp_html = temp_html + `&lt;div class=&quot;card&quot; style=&quot;width: 18rem;&quot;&gt;
                                                         &lt;div class=&quot;card-body&quot;&gt;
                                                         &lt;p class=&quot;card-text&quot;&gt;${star_image}&lt;/p&gt;
                                                         &lt;p class=&quot;card-text&quot;&gt;${comment}&lt;/p&gt;&lt;/div&gt;`
                             }

                             if (x &lt; 126.431492) {
                                 $(&#39;#west-box&#39;).append(temp_html)
                                 $(&#39;#west-box&#39;).hide()
                             } else if (x &gt; 126.672505) {
                                 $(&#39;#east-box&#39;).append(temp_html)
                                 $(&#39;#east-box&#39;).hide()
                             } else {
                                 $(&#39;#middle-box&#39;).append(temp_html)
                                 $(&#39;#middle-box&#39;).hide()
                             }
                         }
                     })

                 }
             }
         })
     }

     function OnSelect(){
         var gubun = document.getElementById(&quot;floatingSelect&quot;).options[document.getElementById(&quot;floatingSelect&quot;).selectedIndex].value;

         if (gubun ==1){
             $(&#39;#east-box&#39;).hide()
             $(&#39;#middle-box&#39;).hide()
             $(&#39;#west-box&#39;).show();
         }else if (gubun ==2){
             $(&#39;#east-box&#39;).hide()
             $(&#39;#west-box&#39;).hide()
             $(&#39;#middle-box&#39;).show();
         }else if (gubun ==3){
             $(&#39;#west-box&#39;).hide()
             $(&#39;#middle-box&#39;).hide()
             $(&#39;#east-box&#39;).show()
         }else{
             $(&#39;#west-box&#39;).hide()
             $(&#39;#middle-box&#39;).hide()
             $(&#39;#east-box&#39;).hide()
         }
     }

     function open_box() {
         $(&#39;#comment-box&#39;).show()
     }
     function close_box() {
         $(&#39;#comment-box&#39;).hide()
     }

     function posting() {
         let comname = $(&#39;#comname&#39;).val()
         let star = $(&#39;#star&#39;).val()
         let comment = $(&#39;#comment&#39;).val()

         $.ajax({
             type: &#39;POST&#39;,
             url: &#39;/comment&#39;,
             data: {comname_give: comname, star_give: star, comment_give: comment},
             success: function (response) {
                 alert(response[&#39;msg&#39;])
                 window.location.reload()
             }
         })
     }</code></pre></li>
</ol>
<pre><code>    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class=&quot;mytitle&quot;&gt;
    &lt;h1&gt;제주 오름 지도&lt;/h1&gt;
    &lt;p&gt;제주의 기온 : &lt;span id=&quot;temp&quot;&gt;00.0&lt;/span&gt;도&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;mycomment&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;btn btn-success&quot; onclick=&quot;open_box()&quot;&gt;당신의 경험을 공유하세요&lt;/a&gt;

    &lt;div id=&quot;comment-box&quot;&gt;
        &lt;div class=&quot;form-floating mb-3&quot;&gt;
            &lt;input id=&quot;comname&quot; type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;name@example.com&quot;&gt;
            &lt;label&gt;오름 이름&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group mb-3&quot;&gt;
            &lt;label class=&quot;input-group-text&quot; for=&quot;inputGroupSelect01&quot;&gt;난이도&lt;/label&gt;
            &lt;select class=&quot;form-select&quot; id=&quot;star&quot;&gt;
                &lt;option selected&gt;-- 선택하기 --&lt;/option&gt;
                &lt;option value=&quot;1&quot;&gt;⭐&lt;/option&gt;
                &lt;option value=&quot;2&quot;&gt;⭐⭐&lt;/option&gt;
                &lt;option value=&quot;3&quot;&gt;⭐⭐⭐&lt;/option&gt;
                &lt;option value=&quot;4&quot;&gt;⭐⭐⭐⭐&lt;/option&gt;
                &lt;option value=&quot;5&quot;&gt;⭐⭐⭐⭐⭐&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-floating&quot;&gt;
            &lt;textarea id=&quot;comment&quot; class=&quot;form-control&quot; placeholder=&quot;Leave a comment here&quot;&gt;&lt;/textarea&gt;
            &lt;label for=&quot;floatingTextarea2&quot;&gt;코멘트&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class=&quot;mybtns&quot;&gt;
            &lt;button onclick=&quot;posting()&quot; type=&quot;button&quot; class=&quot;btn btn-outline-success&quot;&gt;완료&lt;/button&gt;
            &lt;button onclick=&quot;close_box()&quot; type=&quot;button&quot; class=&quot;btn btn-outline-secondary&quot;&gt;닫기&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;myselect&quot;&gt;
    &lt;select class=&quot;form-select&quot; id=&quot;floatingSelect&quot; aria-label=&quot;Floating label select example&quot; onchange=&quot;OnSelect();&quot;&gt;
        &lt;option selected&gt;-- 원하는 지역을 선택하세요 --&lt;/option&gt;
        &lt;option value=&quot;1&quot;&gt;서부&lt;/option&gt;
        &lt;option value=&quot;2&quot;&gt;중부&lt;/option&gt;
        &lt;option value=&quot;3&quot;&gt;동부&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
&lt;div class=&quot;mycards&quot;&gt;
    &lt;div class=&quot;row row-cols-1 row-cols-md-4 g-4&quot; id=&quot;west-box&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row row-cols-1 row-cols-md-4 g-4&quot; id=&quot;middle-box&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row row-cols-1 row-cols-md-4 g-4&quot; id=&quot;east-box&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p>3) 현재 페이지 상태</p>
<p><img src="https://images.velog.io/images/nani_jin/post/23984e01-1bae-4618-9acb-14de1f7121fc/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-28%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.21.05.png" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[웹개발 종합반 6주차 (기획안)]]></title>
            <link>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-6%EC%A3%BC%EC%B0%A8-%EA%B8%B0%ED%9A%8D%EC%95%88</link>
            <guid>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-6%EC%A3%BC%EC%B0%A8-%EA%B8%B0%ED%9A%8D%EC%95%88</guid>
            <pubDate>Tue, 15 Feb 2022 12:50:23 GMT</pubDate>
            <description><![CDATA[<p>먼저, 내가 생각하고 있는 웹페이지는 제주도에 있는 오름들의 위치를 알려주는 지도와 함께,
오름의 위치를 클릭하면 오름의 이름과 함께 고도, 코멘트를 알려준다.
또 위쪽 오른편에는 제주의 현재 날씨를 알려주는 배너(?)를 띄워놓을 것.
추가 기능으로는 웹페이지를 사용하는 사람들이 오름에 대한 코멘트를 달고 서로 볼 수 있게 할 것이다.
이전까지 배웠던 것들을 실행에 옮겨 내 웹페이지를 만드는 것이기 때문에 최대한 앞에서 배웠던 것들을 활용해 볼 계획이다.</p>
<p><img src="https://images.velog.io/images/nani_jin/post/a0f1ec5b-53ff-402b-a86e-ec182210608f/IMG_2588F38D7DAD-1.jpeg" alt=""></p>
<p>(이용할 openAPI)
<a href="https://www.jejudatahub.net/data/view/data/811">https://www.jejudatahub.net/data/view/data/811</a></p>
<hr>
<p>(1주차 멘토링 피드백)
지도를 구현하는게 꽤나 복잡해서 시간 내에 하는게 어려울 거라는 피드백을 받아서
대신에 리스트 형태로 바꾸고 동서남북 혹은 동서 정도만 나눠 표시해준다.
그리고 다음 시간까지 HTML, CSS , mongoDB 저장까지 해가기루 했다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[웹개발 종합반 5주차 (hw)]]></title>
            <link>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-5%EC%A3%BC%EC%B0%A8-hw</link>
            <guid>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-5%EC%A3%BC%EC%B0%A8-hw</guid>
            <pubDate>Sun, 13 Feb 2022 14:46:35 GMT</pubDate>
            <description><![CDATA[<ol>
<li><p>도메인
<a href="http://sparta-nani.shop/">http://sparta-nani.shop/</a></p>
</li>
<li><p>보이는 것
<img src="https://images.velog.io/images/nani_jin/post/603cc0e1-0de1-4e73-9a80-71725b3137a0/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-13%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.45.20.png" alt=""></p>
</li>
</ol>
]]></description>
        </item>
        <item>
            <title><![CDATA[웹개발 종합반 5주차 (study)]]></title>
            <link>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-5%EC%A3%BC%EC%B0%A8-study</link>
            <guid>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-5%EC%A3%BC%EC%B0%A8-study</guid>
            <pubDate>Sun, 13 Feb 2022 14:44:44 GMT</pubDate>
            <description><![CDATA[<p><strong>(5주차 목표)</strong>
나의 버킷리스트로 복습, 팬명록을 클라우드 환경에 배포</p>
<p><strong><em>Filezilla</em></strong> 
: 우리가 클라우드 환경에 뭔가를 올리는데 (파일을 보내는데) 그 뭔가를 올릴 수 있게 해주는 것.
<strong><em>Gabia</em></strong> 
: 도메인 + 웹호스팅</p>
<blockquote>
<p><strong><em>복습 ! 버킷리스트</em></strong></p>
</blockquote>
<p><strong><em>① 뼈대 준비하기 - app.py</em></strong></p>
<pre><code>from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route(&#39;/&#39;)
def home():
    return render_template(&#39;index.html&#39;)

@app.route(&quot;/bucket&quot;, methods=[&quot;POST&quot;])
def bucket_post():
    sample_receive = request.form[&#39;sample_give&#39;]
    print(sample_receive)
    return jsonify({&#39;msg&#39;: &#39;POST(기록) 연결 완료!&#39;})

@app.route(&quot;/bucket/done&quot;, methods=[&quot;POST&quot;])
def bucket_done():
    sample_receive = request.form[&#39;sample_give&#39;]
    print(sample_receive)
    return jsonify({&#39;msg&#39;: &#39;POST(완료) 연결 완료!&#39;})

@app.route(&quot;/bucket&quot;, methods=[&quot;GET&quot;])
def bucket_get():
    return jsonify({&#39;msg&#39;: &#39;GET 연결 완료!&#39;})

if __name__ == &#39;__main__&#39;:
    app.run(&#39;0.0.0.0&#39;, port=5000, debug=True)</code></pre><p><strong><em>② 뼈대 준비하기 - index.html</em></strong></p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;

    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
          integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot;
            integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot;
            crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Gowun+Dodum&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;

    &lt;title&gt;인생 버킷리스트&lt;/title&gt;

    &lt;style&gt;
        * {
            font-family: &#39;Gowun Dodum&#39;, sans-serif;
        }

        .mypic {
            width: 100%;
            height: 200px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(&#39;https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1189&amp;q=80&#39;);
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypic &gt; h1 {
            font-size: 30px;
        }

        .mybox {
            width: 95%;
            max-width: 700px;
            padding: 20px;
            box-shadow: 0px 0px 10px 0px lightblue;
            margin: 20px auto;
        }

        .mybucket {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .mybucket &gt; input {
            width: 70%;
        }

        .mybox &gt; li {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-bottom: 10px;
            min-height: 48px;
        }

        .mybox &gt; li &gt; h2 {
            max-width: 75%;
            font-size: 20px;
            font-weight: 500;
            margin-right: auto;
            margin-bottom: 0px;
        }

        .mybox &gt; li &gt; h2.done {
            text-decoration: line-through
        }
    &lt;/style&gt;
    &lt;script&gt;
        $(document).ready(function () {
            show_bucket();
        });

        function show_bucket() {
            $.ajax({
                type: &quot;GET&quot;,
                url: &quot;/bucket&quot;,
                data: {},
                success: function (response) {
                    alert(response[&quot;msg&quot;])
                }
            });
        }

        function save_bucket() {
            $.ajax({
                type: &quot;POST&quot;,
                url: &quot;/bucket&quot;,
                data: {sameple_give: &#39;데이터전송&#39;},
                success: function (response) {
                    alert(response[&quot;msg&quot;])
                }
            });
        }

        function done_bucket(num) {
            $.ajax({
                type: &quot;POST&quot;,
                url: &quot;/bucket/done&quot;,
                data: {sameple_give: &#39;데이터전송&#39;},
                success: function (response) {
                    alert(response[&quot;msg&quot;])
                }
            });
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;mypic&quot;&gt;
    &lt;h1&gt;나의 버킷리스트&lt;/h1&gt;
&lt;/div&gt;
&lt;div class=&quot;mybox&quot;&gt;
    &lt;div class=&quot;mybucket&quot;&gt;
        &lt;input id=&quot;bucket&quot; class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;이루고 싶은 것을 입력하세요&quot;&gt;
        &lt;button onclick=&quot;save_bucket()&quot; type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot;&gt;기록하기&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mybox&quot; id=&quot;bucket-list&quot;&gt;
    &lt;li&gt;
        &lt;h2&gt;✅ 호주에서 스카이다이빙 하기&lt;/h2&gt;
        &lt;button onclick=&quot;done_bucket(5)&quot; type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot;&gt;완료!&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;h2 class=&quot;done&quot;&gt;✅ 호주에서 스카이다이빙 하기&lt;/h2&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;h2&gt;✅ 호주에서 스카이다이빙 하기&lt;/h2&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot;&gt;완료!&lt;/button&gt;
    &lt;/li&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p><strong><em>③ POST 연습 (기록하기)</em></strong></p>
<pre><code>- 요청 정보 : URL = /bucket, 요청 방식 = POST
- 클라이언트(ajax) → 서버(flask) : bucket
- 서버(flask) → 클라이언트(ajax) : 메시지를 보냄 (기록 완료!)

단! 서버에서 번호를 만들어 함께 넣어주어야 업데이트가 가능하다!

1) 클라이언트와 서버 연결 확인하기
2) 서버부터 만들기
- ① 번호 만들기 이전에 DB에 저장
* num, bucket, done(완료 여부)가 DB에 저장되어야 함.

@app.route(&quot;/bucket&quot;, methods=[&quot;POST&quot;])
def bucket_post():
    bucket_receive = request.form[&#39;bucket_give&#39;]

doc = {
    &#39;num&#39; : 0,
    &#39;bucket&#39;: bucket_receive,
    &#39;done&#39;: 0 # 아직 안했으면 0, 했으면 1

}
db.bucket.insert_one(doc)
return jsonify({&#39;msg&#39;: &#39;등록 완료!&#39;})

- ② 번호를 붙인다.
이때 db에 있는 모든 데이터를 가져온 후 그 전체 길이로 번호를 매겨줌.

bucket_list = list(db.bucket.find({}, {&#39;_id&#39;:False}))
count = len(bucket_list) + 1

3) 클라이언트 만들기
function save_bucket() {
        let bucket = $(&#39;#bucket&#39;).val()

        $.ajax({
            type: &quot;POST&quot;,
            url: &quot;/bucket&quot;,
            data: {bucket_give: bucket},
            success: function (response) {
                alert(response[&quot;msg&quot;])
                window.location.reload()
            }
        });
}
4) 완성 확인하기
잘 됐으면 db에 잘 쌓여있을 것임.</code></pre><p><strong><em>④ GET 연습 (보여주기)</em></strong></p>
<pre><code>- 요청 정보 : URL = /bucket, 요청 방식 = GET
- 클라이언트(ajax) → 서버(flask) : (X)
- 서버(flask) → 클라이언트(ajax) : 전체 버킷리스트를 보여주기

1) 클라이언트와 서버 연결 확인하기
2) 서버부터 만들기
@app.route(&quot;/bucket&quot;, methods=[&quot;GET&quot;])
def bucket_get():
    bucket_list = list(db.bucket.find({}, {&#39;_id&#39;: False}))
    return jsonify({&#39;bucket&#39;: bucket_list})

3) 클라이언트 만들기
* 먼저 데이터를 확인하는것이 우선! console.log(response[&#39;bucket&#39;])으로 콘솔에서 확인하기!
function show_bucket() {
        let rows = response[&#39;buckets&#39;]
        for (i = 0; i &lt; rows.length; i++){
            let bucket = rows[i][&#39;bucket&#39;]
            let num = rows[i][&#39;num&#39;]
            let done = rows[i][&#39;done&#39;]

            let temp_html = ``
            if (done == 0){
                temp_html = `&lt;li&gt;
                                &lt;h2&gt;✅ ${bucket}&lt;/h2&gt;
                                &lt;button onclick=&quot;done_bucket(${num})&quot; type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot;&gt;완료!&lt;/button&gt;
                            &lt;/li&gt;`
            } else {
                temp_html = `&lt;li&gt;
                                &lt;h2 class=&quot;done&quot;&gt;✅ ${bucket}&lt;/h2&gt;
                            &lt;/li&gt;`
            }
            $(&#39;bucket-list&#39;).append(temp_html)
        }

        $.ajax({
            type: &quot;GET&quot;,
            url: &quot;/bucket&quot;,
            data: {},
            success: function (response) {
                alert(response[&quot;msg&quot;])
            }
        });
    }
4) 완성 확인하기</code></pre><p><strong><em>⑤ POST 연습 (완료하기)</em></strong></p>
<pre><code>- 요청 정보 : URL = /bucket/done, 요청 방식 = POST
- 클라이언트(ajax) → 서버(flask) : num (버킷 넘버)
- 서버(flask) → 클라이언트(ajax) : 메시지를 보냄 (버킷 완료!)

1) 클라이언트와 서버 연결 확인하기
2) 서버부터 만들기
@app.route(&quot;/bucket/done&quot;, methods=[&quot;POST&quot;])
def bucket_done():
    num_receive = request.form[&#39;num_give&#39;]
    db.bucket.update_one({&#39;num&#39;: int(num_receive)},{&#39;$set&#39;:{&#39;done&#39;:1}}) # 숫자를 client로부터 받아왔으면 숫자로 바꿔줘야함. int(num_receive)
    return jsonify({&#39;msg&#39;: &#39;버킷 완료!&#39;})

3) 클라이언트 만들기
function done_bucket(num) {
        $.ajax({
            type: &quot;POST&quot;,
            url: &quot;/bucket/done&quot;,
            data: {num_give: num},
            success: function (response) {
                alert(response[&quot;msg&quot;])
                window.location.reload()
            }
        });
    }
4) 완성 확인하기</code></pre><blockquote>
<p><strong><em>내 프로젝트를 서버에 올리기</em></strong>
누구나 내 서비스를 사용할 수 있게 하기 위해!</p>
</blockquote>
<pre><code>언제나 요청에 응답하려면 
→ 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야 하며
→ 모두가 접근할 수 있는 공개 IP주소로 나의 웹 서비스에 접근할 수 있어야 한다
→ 서버는 그냥 컴퓨터! 우리는 24시간 켜놓을 수 있는 컴이 없음. 그럼 어캄?
→ 외부 접속이 가능하게 설정한 다음 내 컴퓨터를 서버로 사용할 수 있는데,
→ 우리는 AWS 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해 
  항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용할 것

(장점)
- mongoDB도 클라우드 환경이어서 트래픽 대비가 쉬운 장점이 있는데, 이도 같다.
- 여러가지 서비스를 붙이기도 쉬워진다.</code></pre><p><strong><em>① AWS 서버 (리눅스&lt;feat.오픈소스&gt;라고 하는 OS를 가진 컴퓨터) 구매하기</em></strong></p>
<pre><code>1) 서버 구매하기 - 아래 url로 들어가서 햐
https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2

인스턴스 &gt; 인스턴스 시작 &gt; Ubuntu Server 20.04 &gt; 검토 및 시작 &gt; 시작하기 &gt; 새 키 페어 생성 
&gt; 키 페어 이름 : 아무거나 &gt; 키 페어 다운로드해서 바탕 화면에 두고 &gt; 인스턴스 시작 &gt; 인스턴스 보기

* 인스턴스 상태 : &#39;실행 중&#39; 이면 컴퓨터가 켜진 것이다
* 인스턴스 중지 : 컴퓨터를 끈 상태
* 인스턴스 종료 : 컴퓨터를 반납한 상태

2) 원격 접속하는 법 - 터미널 켜
sudo chmod 400 키페어끌어다놓으샴
enter
맥 비밀번호 입력

ssh -i 키페어끌어다놓으샴 ubuntu@54.180.94.195  # 마지막거 퍼블릭 IPv4 주소임
enter
yes
enter

3) 아래는 몇 가지 명령어 - 수백개여. 늘상 쓰는 것 말고는 외우지 못함
mkdir sparta  # sparta라는 폴더를 만든다. enter를 했는데 아무 일도 안일어나면 리눅스에서는 잘 된것.
ls  # 내 지금 위치에서 폴더들을 보자
cd sparta  # sparta로 들어가 보자
cd ..  # 지금 있는 폴더 밖으로 나가고 싶어</code></pre><p><strong><em>② 서버 세팅하기</em></strong></p>
<pre><code>우리는 막! 컴퓨터를 구매한 상태다. 여기에 이런저런 세팅들(업그레이드, DB설치, 명령어 통일 등)을 해줘야 본격적으로 이용할 때 편리하다.
* 리눅스는 마우스가 없음. 모든 것을 명령어로 쳐야함.


1) 메모장에 붙여서 &#39;#&#39; 있는 줄 빼고 다 터미널에 붙여서 실행
# python3 -&gt; python (귀찮으니까 python3 말고 python이라고 치고 명령할게)
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# pip3 -&gt; pip (패키지 깔때도 구찮으니까 pip3 말고 pip라고 명령할게)
sudo apt-get update
sudo apt-get install -y python3-pip
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

# port forwarding (5000을 떼는 명령어)
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000


2) FileZilla 실행 ↓ - 왼쪽이 내컴, 오른쪽이 새로 산컴</code></pre><p><img src="https://images.velog.io/images/nani_jin/post/a8103737-a473-47ae-89e2-b77a7859fc29/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-13%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.43.24.png" alt=""></p>
<pre><code>* 내가 산 컴퓨터를 오른쪽에 띄우려면
사이트 관리자 열기 &gt; New site &gt; 이름 알아서 정해(강의에선 myec2) 
&gt; 프로토콜 : SFTP &gt; 호스트 : 54.180.94.195(퍼블릭 IPv4 주소), 포트 : 22 
&gt; 로그온 유형 : 키 파일, 사용자 : ubuntu, 키 파일 : 아까 다운 받은거 넣어줘 &gt; 연결 &gt; 확인

3) test.py 만들고 새컴에 넣은 후 테스트 하는 법 - 터미널에서 쳐
cd sparta
ls
python test.py
하면 test.py 안에 넣었던 내용물도 보이고 잘 들어 갔다는 것을 알 수 있음</code></pre><p><strong><em>③ Flask 서버를 실행해보기</em></strong></p>
<pre><code>내 컴에서 app.py, templates, static 을 끌어다가 새 컴에 올린다

1) 터미널에서 확인
ls  # 다 잘 들어온 것을 확인할 수 있음

2) flask, pymongo, dnspython 설치
pip install flask
pip install pymongo
pip install dnspython

3) app.py 실행
python app.py

4) :5000으로 열 수 있는 구멍 만들어주기
인스턴스 &gt; 보안 &gt; 보안 그룹 &gt; Edit inbound rules &gt; 규칙 추가 
&gt; 유형 : 사용자 지정 TCP, 포트 범위 : 5000, 소스 : Anywhere
&gt; 유형 : 사용자 지정 TCP, 포트 범위 : 80, 소스 : Anywhere
&gt; 규칙 저장

5) 접속해보기
http://54.180.94.195:5000/
http://54.180.94.195/

* 왜 둘다 되냐?
https://www.naver.com/은 사실 :80이 숨겨져 있는 건데,
우리의 전략은 80으로 들어와서 5000으로 바꿔주는 전략 (port forwarding)</code></pre><p><img src="https://images.velog.io/images/nani_jin/post/a2d0babc-4a5c-4c2a-a341-55baf5bf5ace/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-13%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.09.17.png" alt=""></p>
<p><strong><em>④ nohup 설정하기</em></strong></p>
<pre><code>터미널을 끄면 접속이 끊긴다.
그렇다면 터미널을 꺼도 어떻게 접속이 끊기지 않게 할 수 있을까?
(다음을 터미널에 입력하면 됨) nohup python app.py &amp;

(그렇다면 다시 이걸 끄는 방법은?) ps -ef | grep &#39;python app.py&#39; | awk &#39;{print $2}&#39; | xargs kill</code></pre><p><strong><em>⑤ 도메인 연결하기</em></strong></p>
<pre><code>https://dns.gabia.com/ &gt; 샀던 도메인 클릭 &gt; DNS 설정 
&gt; 호스트 이름 : @, IP 주소 : 54.180.94.195 &gt; 확인 &gt; 저장

이제 도메인을 치면 연결된 것을 볼 수 있다.</code></pre><p><strong><em>⑥ og 태그 (카톡 등에 공유했을 때 예뿌게 보이기)</em></strong></p>
<pre><code>즉당한 곳에 아래 코드스니펫 붙여넣기
&lt;meta property=&quot;og:title&quot; content=&quot;내 사이트의 제목&quot; /&gt;
&lt;meta property=&quot;og:description&quot; content=&quot;보고 있는 페이지의 내용 요약&quot; /&gt;
&lt;meta property=&quot;og:image&quot; content=&quot;이미지URL&quot; /&gt;

보통 카카오톡(페이스북도 마찬가지)에서는 한번 공유된 것은 크롤링을 반복해서 하지 않게 그대로 저장해놨다가 보여주는데,
og 태그를 바꾸고 싶다면 바꾼 후
카카오톡 og 태그 초기화하기 : https://developers.kakao.com/tool/clear/og
&gt; 원하는 url 집어넣고 &gt; 초기화</code></pre><p><strong><em>(5주차 소감)</em></strong>
일단 숙제가 했던 도메인을 그대로 올리는 거여서 너모 신났고,,
사실 지금까지 달려온 과정들이 잘 생각은 안나지만 강사님이 해준 말이 위안이 되었음.
이제 프로젝트를 하는데 뚝딱뚝딱 재밌게 맹글어봐야것다.</p>
<p><strong><em>* 핵심은 지금 코드를 보고 쓸 수 있을 정도의 이해도를 갖추는 것이다</em></strong></p>
<p><strong><em>(주의해야겠다고 생각한 점)</em></strong>
생각없이 하게 될때도 있는데, 왜 하는지?에 대한 목적성을 잃어버리지 않아야겠다고 생각했다.</p>
<p><strong><em>(5주동안의 써머리)</em></strong>
1,2 주차 (내 눈에 보이는 애) - HTML, CSS, Javascript
3 주차 (서버를 만들 수 있는 언어) - Python
4,5 주차 (내 눈에 보이는 애를 건네줄 친구) - Server</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[MATLAB 09]]></title>
            <link>https://velog.io/@nani_jin/MATLAB-09-debugging</link>
            <guid>https://velog.io/@nani_jin/MATLAB-09-debugging</guid>
            <pubDate>Tue, 08 Feb 2022 18:08:49 GMT</pubDate>
            <description><![CDATA[<p>Debugger is accessible from Editor (EDITOR &gt; Breakpoints)</p>
<blockquote>
<p><strong><em>Breakpoint</em></strong></p>
</blockquote>
<p><strong>1) After running</strong></p>
<pre><code>① stops at breakpoint (at the beginning of the line)
② examine or modify any variable at K&gt;&gt;
or use datatip (position the cursor on variable name)

command+⇧+O : run step by step (step)
command+⇧+I : same as stemp but enters inside functions (step in)
command+⇧+U : (step out)
command+option+R : run to the next breakpoint (continue)</code></pre><p><strong>2) Quit</strong></p>
<pre><code>EDITOR &gt; Quit debugging
command window &gt; fn+F5</code></pre><p><strong>3) Conditional Breakpoint (yellow dot)</strong></p>
<pre><code>조건문 안에 마우스를 클릭한 후 &gt; EDITOR &gt; Breakpoints &gt; 조건 설정
: allows to give a condition to stop for the first time</code></pre><blockquote>
<p><strong><em>File input &amp; output(I/O)</em></strong></p>
</blockquote>
<p><strong>3 steps for general file I/O (부제 : 파일은 공책과 비슷하다)</strong></p>
<pre><code>open a data file → fopen
read or write data → fscanf, fprintf
close the file → fclose</code></pre><p><strong>1) fopen : open a file</strong></p>
<pre><code>fid = fopen(&#39;datafile.txt&#39;,&#39;r&#39;) % 파일명을 계속 반복해서 부르기 귀찮으니 매트랩은 파일명에 고유 번호를 붙여준다
fid: file ID (-1 when there is an error)</code></pre><p><strong>2) permission</strong></p>
<pre><code>r : read (file must exist)
w : write (create or overwrite)
wt : same as w but in text form (use wt not w)
a : append (create or append)
r+ : read/write (file must exist)
w+ : read/write (create or overwrite)
a+ : read/write (create or append)</code></pre><p><strong>3) fclose : close a file</strong></p>
<pre><code>fclose(fid)</code></pre><p><strong>4) fprintf : write to a file</strong></p>
<pre><code>fprintf(fid,&#39;string containing format&#39;,variable,...)
without fid, output is written to the monitor

* format (can specify # of digits after decimal point)
%e : floating point
%f : fixed point
%d : integer
%s : string
%07.2f, %03d   - zero padding in front

* Ex
x = 0 : 0.05 : 0.2;
y = [ x&#39;, exp(x&#39;)];
fid = fopen(&#39;exp.txt&#39;,&#39;w&#39;);
fprintf( fid, &#39;Exponential function\n\n&#39; );
fprintf( fid, &#39;%7.2f %12.5f\n, y);
    ** 그른데 여기서 잠깐! 저장된 file을 보면 y값이 엉망진창인 것을 알 수 있다.
    ** 이유 : Conflict b/w column major and row major
    ** data in memory - column major, data in a file - row major
    ** 해결 방법 : correct y → y&#39;
close(fid);</code></pre><p><strong>5) fscanf</strong></p>
<pre><code>read from a file
a = fscanf( fid, &#39;format&#39;, size)

* file position indicator (다음 읽을 위치 추적)
  : Matlab keeps track of &quot;where to read next&quot; for fscanf

* format
no need to specify data width when reading data separated by spaces
%c : characters
%d : integers
%f, %e : real numbers

* Ex
fid = fopen( &#39;exp.txt&#39;, &#39;r&#39; );
t = fscanf( fid, &#39;%c&#39;, 20 );
A = fscanf( fid, &#39;%f&#39;, [5,2] );  % correct this : 애초에 전치된 행렬로 저장 후 뒤집어라 여기선 [2,5] 한 후 A = A&#39;
fclose( fid );
A</code></pre><p><strong>6) fscanf without size</strong></p>
<pre><code>a = fscanf( fid, &#39;%c&#39; )
  ⟹ reads all remaining part as string

a = fscanf( fid, &#39;%e&#39; )
  ⟹ reads only numbers in remaining part  % 문자를 마주치기 전 숫자 부분만 읽는다. 설령 문자 뒤에 숫자가 있더라도.</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[웹개발 종합반 4주차 (hw)]]></title>
            <link>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-4%EC%A3%BC%EC%B0%A8-hw</link>
            <guid>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-4%EC%A3%BC%EC%B0%A8-hw</guid>
            <pubDate>Tue, 08 Feb 2022 16:13:10 GMT</pubDate>
            <description><![CDATA[<p><strong>1. app.py</strong></p>
<pre><code>from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient(&#39;mongodb+srv://test:sparta@cluster0.4n13d.mongodb.net/Cluster0?retryWrites=true&amp;w=majority&#39;, tlsCAFile=ca)
db = client.dbsparta

@app.route(&#39;/&#39;)
def home():
    return render_template(&#39;index.html&#39;)

@app.route(&quot;/homework&quot;, methods=[&quot;POST&quot;])
def homework_post():
    name_receive = request.form[&#39;name_give&#39;]
    comment_receive = request.form[&#39;comment_give&#39;]

    doc = {
        &#39;name&#39;: name_receive,
        &#39;comment&#39;: comment_receive
    }
    db.homework.insert_one(doc)
    return jsonify({&#39;msg&#39;:&#39;저장 완료!&#39;})

@app.route(&quot;/homework&quot;, methods=[&quot;GET&quot;])
def homework_get():
    homework_list = list(db.homework.find({}, {&#39;_id&#39;: False}))
    return jsonify({&#39;msg&#39;:homework_list})

if __name__ == &#39;__main__&#39;:
    app.run(&#39;0.0.0.0&#39;, port=5000, debug=True)</code></pre><p><strong>2. index.html</strong></p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;

    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
          integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot;
            integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot;
            crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

    &lt;title&gt;초미니홈피 - 팬명록&lt;/title&gt;

    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&amp;display=swap&quot;
          rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            font-family: &#39;Noto Serif KR&#39;, serif;
        }

        .mypic {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(&#39;https://img8.yna.co.kr/etc/inner/KR/2021/06/16/AKR20210616034800005_01_i_P4.jpg&#39;);
            background-position: center 30%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

        .mypost &gt; button {
            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards &gt; .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    &lt;/style&gt;
    &lt;script&gt;
        $(document).ready(function () {
            set_temp()
            show_comment()
        });

        function set_temp() {
            $.ajax({
                type: &quot;GET&quot;,
                url: &quot;http://spartacodingclub.shop/sparta_api/weather/seoul&quot;,
                data: {},
                success: function (response) {
                    $(&#39;#temp&#39;).text(response[&#39;temp&#39;])
                }
            })
        }

        function save_comment() {
            let name = $(&#39;#name&#39;).val()
            let comment = $(&#39;#comment&#39;).val()

            $.ajax({
                type: &#39;POST&#39;,
                url: &#39;/homework&#39;,
                data: {name_give : name, comment_give : comment},
                success: function (response) {
                    alert(response[&#39;msg&#39;])
                    window.location.reload()
                }
            })
        }

        function show_comment() {
            $.ajax({
                type: &quot;GET&quot;,
                url: &quot;/homework&quot;,
                data: {},
                success: function (response) {
                    let rows = response[&#39;msg&#39;]
                    for (i = 0; i &lt; rows.length; i++){
                        let name = rows[i][&#39;name&#39;]
                        let comment = rows[i][&#39;comment&#39;]

                        let temp_html = `&lt;div class=&quot;card&quot;&gt;
                                            &lt;div class=&quot;card-body&quot;&gt;
                                                &lt;blockquote class=&quot;blockquote mb-0&quot;&gt;
                                                    &lt;p&gt;${comment}&lt;/p&gt;
                                                    &lt;footer class=&quot;blockquote-footer&quot;&gt;${name}&lt;/footer&gt;
                                                &lt;/blockquote&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;`

                        $(&#39;#comment-list&#39;).append(temp_html)
                    }
                }
            });
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;mypic&quot;&gt;
    &lt;h1&gt;곽진언(Gwak) 팬명록&lt;/h1&gt;
    &lt;p&gt;현재기온: &lt;span id=&quot;temp&quot;&gt;36&lt;/span&gt;도&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;mypost&quot;&gt;
    &lt;div class=&quot;form-floating mb-3&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;name&quot; placeholder=&quot;url&quot;&gt;
        &lt;label for=&quot;floatingInput&quot;&gt;닉네임&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-floating&quot;&gt;
&lt;textarea class=&quot;form-control&quot; placeholder=&quot;Leave a comment here&quot; id=&quot;comment&quot;
          style=&quot;height: 100px&quot;&gt;&lt;/textarea&gt;
        &lt;label for=&quot;floatingTextarea2&quot;&gt;응원댓글&lt;/label&gt;
    &lt;/div&gt;
    &lt;button onclick=&quot;save_comment()&quot; type=&quot;button&quot; class=&quot;btn btn-dark&quot;&gt;응원 남기기&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;mycards&quot; id=&quot;comment-list&quot;&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p><strong>3. 구현</strong></p>
<p><img src="https://images.velog.io/images/nani_jin/post/ff9b2d96-b19a-4271-8997-380ec7f99233/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-09%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%201.12.37.png" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[웹개발 종합반 4주차 (study)]]></title>
            <link>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-4%EC%A3%BC%EC%B0%A8-study</link>
            <guid>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-4%EC%A3%BC%EC%B0%A8-study</guid>
            <pubDate>Tue, 08 Feb 2022 16:08:14 GMT</pubDate>
            <description><![CDATA[<p><strong>(4주차 목표)</strong>
서버를 만드는 것
<img src="https://images.velog.io/images/nani_jin/post/2fb1674e-cbf6-40ab-a47e-840c474287da/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-07%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.29.07.png" alt=""></p>
<p><strong>* API (application programming interface) *</strong>
  : which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you&#39;re using an API.</p>
<blockquote>
<p><strong><em>Flask is a micro web framework written in Python</em></strong></p>
</blockquote>
<pre><code>서버를 구동시켜주는 편한 코드 모음.
서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다!
3분 요리/소스 세트라고 생각하면 된다!</code></pre><p><strong>1) Flask 시작하기 - 서버 만들기</strong></p>
<pre><code>① 인터프리터 설치
flask, dnspython, pymongo, certifi
  * 크롤링이 필요할 때는 - requests, bs4 추가 설치

② projects &gt; prac &gt; app.py 라는 파이썬 파일에 아래와 같이 입력 후 실행
from flask import Flask
app = Flask(__name__)

@app.route(&#39;/&#39;) # 여기서 &#39;/&#39;이후 부분은 주소창의 &#39;/&#39;이후 부분과 같음.
def home():
   return &#39;This is Home!&#39;

if __name__ == &#39;__main__&#39;:  
   app.run(&#39;0.0.0.0&#39;,port=5000,debug=True)

③ 주소창에 localhost:5000/ 입력 후 엔터를 치면 서버가 만들어 진 것을 확인할 수 있다
  # localhost : 내 컴퓨터에서 내가 개발하고 있고, 내 컴퓨터에서 내가 접속하고 있어. 그러니까 이건 local 개발환경이야.</code></pre><p><strong>2) Flask 시작하기 - HTML 파일 주기</strong></p>
<pre><code>① 기본적으로 만들고 시작할 것
directory &gt; templates
directory &gt; templates &gt; index.html # app.py 에서 함수 안에 return 값으로 입력해도 실행되긴 하지만 그걸 언제 다 쓰냐,, html 파일을 따로 만들어서 쓰는게 굿.
directory &gt; static

② HTML 파일 주기
from flask import Flask, render_template
app = Flask(__name__)

@app.route(&#39;/&#39;)
def home():
   return render_template(&#39;index.html&#39;) # index.html 파일을 읽어와서 줌.

if __name__ == &#39;__main__&#39;:
   app.run(&#39;0.0.0.0&#39;,port=5000,debug=True)</code></pre><p><strong>3) Flask 시작하기 - 본격 API 만들기</strong></p>
<pre><code>① GET/POST 리마인드
GET : 통상적으로, 데이터 조회(read)를 요청할 때
      예) 영화 목록 조회
      데이터 전달 방식 : URL 뒤에 물음표를 붙여 key=value로 전달
      예) google.com?q=북극곰

POST : 통상적으로, 데이터 생성/변경/삭제 요청할 때
       예) 회원가입, 회원탈퇴, 비밀번호 수정
       데이터 전달 방식 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

② JQuery 임포트
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;

③ GET 요청 확인 Ajax 코드 - index.html 의 &lt;script&gt;에다가
function hey(){      # 이왕이면 함수를 만들어서 버튼에 붙여주는 것도 좋은 예시
    $.ajax({
        type: &quot;GET&quot;,
        url: &quot;/test?title_give=봄날은간다&quot;,     # /test라는 창구에 가는데 title_give라는 이름으로 &#39;봄날은간다&#39;라는 데이터를 내가 갖고 갈게.
        data: {},
        success: function(response){      # 잘 된다면 내가 console에다가 찍어볼게
        console.log(response)
        }
    })
}    

④ GET 요청 API 코드 - app.py에다가 import에 request, jsonify 먼저 추가하고.
@app.route(&#39;/test&#39;, methods=[&#39;GET&#39;])
def test_get():
title_receive = request.args.get(&#39;title_give&#39;)     # 요청한 것을 잘 가져왔고
print(title_receive)
return jsonify({&#39;result&#39;:&#39;success&#39;, &#39;msg&#39;: &#39;이 요청은 GET!&#39;})     # 받은 것을 다시 가져가서 콘솔에 찍게 된다

⑤ POST 요청 확인 Ajax 코드 - index.html에다가
    $.ajax({
        type: &quot;POST&quot;,
        url: &quot;/test&quot;,
        data: { title_give:&#39;봄날은간다&#39; },
        success: function(response){
        console.log(response)
        }
})

⑥ POST 요청 API 코드 - app.p에다가
@app.route(&#39;/test&#39;, methods=[&#39;POST&#39;])       # /test 창구에서 POST로 받는 애들 모여라~
def test_post():
title_receive = request.form[&#39;title_give&#39;]
print(title_receive)
return jsonify({&#39;result&#39;:&#39;success&#39;, &#39;msg&#39;: &#39;이 요청은 POST!&#39;})</code></pre><blockquote>
<p><strong><em>예제 1) 화성땅 공동구매</em></strong></p>
</blockquote>
<pre><code>① app.py 기본 코드
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route(&#39;/&#39;)
def home():
    return render_template(&#39;index.html&#39;)

@app.route(&quot;/mars&quot;, methods=[&quot;POST&quot;])
def web_mars_post():
    sample_receive = request.form[&#39;sample_give&#39;]
    print(sample_receive)
    return jsonify({&#39;msg&#39;: &#39;POST 연결 완료!&#39;})

@app.route(&quot;/mars&quot;, methods=[&quot;GET&quot;])
def web_mars_get():
    return jsonify({&#39;msg&#39;: &#39;GET 연결 완료!&#39;})

if __name__ == &#39;__main__&#39;:
    app.run(&#39;0.0.0.0&#39;, port=5000, debug=True)

② templates &gt; index.html 기본 코드
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;

    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
          integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot;
            integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot;
            crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;

    &lt;title&gt;선착순 공동구매&lt;/title&gt;

    &lt;style&gt;
        * {
            font-family: &#39;Gowun Batang&#39;, serif;
            color: white;
        }

        body {
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(&#39;https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg&#39;);
            background-position: center;
            background-size: cover;
        }

        h1 {
            font-weight: bold;
        }

        .order {
            width: 500px;
            margin: 60px auto 0px auto;
            padding-bottom: 60px;
        }

        .mybtn {
            width: 100%;
        }

        .order &gt; table {
            margin: 40px 0;
            font-size: 18px;
        }

        option {
            color: black;
        }
    &lt;/style&gt;
    &lt;script&gt;
        $(document).ready(function () {
            show_order();
        });

        function show_order() {
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;/mars&#39;,
                data: {},
                success: function (response) {
                    alert(response[&#39;msg&#39;])
                }
            });
        }

        function save_order() {
            $.ajax({
                type: &#39;POST&#39;,
                url: &#39;/mars&#39;,
                data: {sample_give: &#39;데이터전송&#39;},
                success: function (response) {
                    alert(response[&#39;msg&#39;])
                }
            });
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;mask&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;order&quot;&gt;
    &lt;h1&gt;화성에 땅 사놓기!&lt;/h1&gt;
    &lt;h3&gt;가격: 평 당 500원&lt;/h3&gt;
    &lt;p&gt;
        화성에 땅을 사둘 수 있다고?&lt;br/&gt;
        앞으로 백년 간 오지 않을 기회. 화성에서 즐기는 노후!
    &lt;/p&gt;
    &lt;div class=&quot;order-info&quot;&gt;
        &lt;div class=&quot;input-group mb-3&quot;&gt;
            &lt;span class=&quot;input-group-text&quot;&gt;이름&lt;/span&gt;
            &lt;input id=&quot;name&quot; type=&quot;text&quot; class=&quot;form-control&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group mb-3&quot;&gt;
            &lt;span class=&quot;input-group-text&quot;&gt;주소&lt;/span&gt;
            &lt;input id=&quot;address&quot; type=&quot;text&quot; class=&quot;form-control&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-group mb-3&quot;&gt;
            &lt;label class=&quot;input-group-text&quot; for=&quot;size&quot;&gt;평수&lt;/label&gt;
            &lt;select class=&quot;form-select&quot; id=&quot;size&quot;&gt;
                &lt;option selected&gt;-- 주문 평수 --&lt;/option&gt;
                &lt;option value=&quot;10평&quot;&gt;10평&lt;/option&gt;
                &lt;option value=&quot;20평&quot;&gt;20평&lt;/option&gt;
                &lt;option value=&quot;30평&quot;&gt;30평&lt;/option&gt;
                &lt;option value=&quot;40평&quot;&gt;40평&lt;/option&gt;
                &lt;option value=&quot;50평&quot;&gt;50평&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;button onclick=&quot;save_order()&quot; type=&quot;button&quot; class=&quot;btn btn-warning mybtn&quot;&gt;주문하기&lt;/button&gt;
    &lt;/div&gt;
    &lt;table class=&quot;table&quot;&gt;
        &lt;thead&gt;
        &lt;tr&gt;
            &lt;th scope=&quot;col&quot;&gt;이름&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;주소&lt;/th&gt;
            &lt;th scope=&quot;col&quot;&gt;평수&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;홍길동&lt;/td&gt;
            &lt;td&gt;서울시 용산구&lt;/td&gt;
            &lt;td&gt;20평&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;임꺽정&lt;/td&gt;
            &lt;td&gt;부산시 동구&lt;/td&gt;
            &lt;td&gt;10평&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;세종대왕&lt;/td&gt;
            &lt;td&gt;세종시 대왕구&lt;/td&gt;
            &lt;td&gt;30평&lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

③ POST 연습 (주문 저장)
- 요청 정보 : URL = /mars, 요청 방식 = POST
- 클라이언트(ajax) → 서버(flask) : name, address, size
- 서버(flask) → 클라이언트(ajax) : 메시지를 보냄 (주문 완료!)

-1) 클라이언트와 서버 연결 확인하기
-2) 서버부터 만들기 - app.py에다가
@app.route(&quot;/mars&quot;, methods=[&quot;POST&quot;])
def web_mars_post():
    name_receive = request.form[&#39;name_give&#39;]     # 데이터를 받아서
    address_receive = request.form[&#39;address_give&#39;]
    size_receive = request.form[&#39;size_give&#39;]

    doc = {
        &#39;name&#39;: name_receive,
        &#39;address&#39;: address_receive,
        &#39;size&#39;: size_receive
    }
    db.mars.insert_one(doc)    # 서버에 넣어준다
    return jsonify({&#39;msg&#39;: &#39;주문 완료!&#39;})

-3) 클라이언트 만들기
function save_order() {
        let name = $(&#39;#name&#39;).val()    # $(&#39;name&#39;) - id값
        let address = $(&#39;#address&#39;).val()
        let size = $(&#39;#size&#39;).val()

        $.ajax({
            type: &#39;POST&#39;,
            url: &#39;/mars&#39;,
            data: { name_give : name, address_give : address, size_give : size },    # 위에서 서버가 name_give ... 이런 이름으로 가져오랬으니까
            success: function (response) {
                alert(response[&#39;msg&#39;])    # &#39;msg&#39; 내용만 alert로 보여줌
                window.location.reload()    # 다 되면 새로고침해주게
            }
        });
    }
-4) 완성 확인하기

④ GET 연습 (주문 보여주기)
- 요청 정보 : URL = /mars, 요청 방식 = GET
- 클라이언트(ajax) → 서버(flask) : (X)
- 서버(flask) → 클라이언트(ajax) : 전체 주문을 보내주기

-1) 클라이언트와 서버 확인하기
-2) 서버부터 만들기 - db에서 모든 주문을 가져와야함
@app.route(&quot;/mars&quot;, methods=[&quot;GET&quot;])
def web_mars_get():
    order_list = list(db.mars.find({}, {&#39;_id&#39;: False}))
    return jsonify({&#39;orders&#39;: order_list})

-3) 클라이언트 만들기 - index.html에다가
 function show_order() {
        $.ajax({
            type: &#39;GET&#39;,
            url: &#39;/mars&#39;,
            data: {},
            success: function (response) {
                let rows = response[&#39;orders&#39;]
                for (let i = 0; i &lt; rows.length; i++){
                    let name = rows[i][&#39;name&#39;]
                    let address = rows[i][&#39;address&#39;]
                    let size = rows[i][&#39;size&#39;]

                    let temp_html = `&lt;tr&gt;
                                        &lt;td&gt;${name}&lt;/td&gt;
                                        &lt;td&gt;${address}&lt;/td&gt;
                                        &lt;td&gt;${size}&lt;/td&gt;
                                    &lt;/tr&gt;`
                    $(&#39;#order-box&#39;).append(temp_html)    # 붙이고 싶은 곳에 id = &quot;order-box&quot;
                }

            }
        });
    }
-4) 완성 확인하기</code></pre><blockquote>
<p><strong><em>예제 2) 스파르타피디아</em></strong></p>
</blockquote>
<pre><code>① URL에서 페이지 정보 가져오기 (meta태그 스크래핑)
  : 메타 태그는, &lt;head&gt;&lt;/head&gt; 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들이다.
    예) 구글 검색 시 표시 될 설명문, 사이트 제목, 카톡 공유 시 표시 될 이미지 등

import requests
from bs4 import BeautifulSoup

url = &#39;https://movie.naver.com/movie/bi/mi/basic.naver?code=191597&#39;

headers = {&#39;User-Agent&#39; : &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36&#39;}
data = requests.get(url,headers=headers)

soup = BeautifulSoup(data.text, &#39;html.parser&#39;)

title = soup.select_one(&#39;meta[property=&quot;og:title&quot;]&#39;)[&#39;content&#39;]
image = soup.select_one(&#39;meta[property=&quot;og:image&quot;]&#39;)[&#39;content&#39;]
desc = soup.select_one(&#39;meta[property=&quot;og:description&quot;]&#39;)[&#39;content&#39;]

print(title,image,desc)

② app.py 기본 코드
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route(&#39;/&#39;)
def home():
    return render_template(&#39;index.html&#39;)

@app.route(&quot;/movie&quot;, methods=[&quot;POST&quot;])
def movie_post():
    sample_receive = request.form[&#39;sample_give&#39;]
    print(sample_receive)
    return jsonify({&#39;msg&#39;:&#39;POST 연결 완료!&#39;})

@app.route(&quot;/movie&quot;, methods=[&quot;GET&quot;])
def movie_get():
    return jsonify({&#39;msg&#39;:&#39;GET 연결 완료!&#39;})

if __name__ == &#39;__main__&#39;:
    app.run(&#39;0.0.0.0&#39;, port=5000, debug=True)

③ index.html 기본 코드
&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;

    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
          integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot;
            integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot;
            crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

    &lt;title&gt;스파르타 피디아&lt;/title&gt;

    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Gowun+Dodum&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;

    &lt;style&gt;
        * {
            font-family: &#39;Gowun Dodum&#39;, sans-serif;
        }

        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(&#39;https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg&#39;);
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mytitle &gt; button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .mytitle &gt; button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            margin: 20px auto 0px auto;
            width: 95%;
            max-width: 1200px;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;

            display: none;
        }

        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }

        .mybtns &gt; button {
            margin-right: 10px;
        }
    &lt;/style&gt;
    &lt;script&gt;
        $(document).ready(function () {
            listing();
        });

        function listing() {
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;/movie&#39;,
                data: {},
                success: function (response) {
                    alert(response[&#39;msg&#39;])
                }
            })
        }

        function posting() {
            $.ajax({
                type: &#39;POST&#39;,
                url: &#39;/movie&#39;,
                data: {sample_give: &#39;데이터전송&#39;},
                success: function (response) {
                    alert(response[&#39;msg&#39;])
                }
            });
        }

        function open_box() {
            $(&#39;#post-box&#39;).show()
        }

        function close_box() {
            $(&#39;#post-box&#39;).hide()
        }
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class=&quot;mytitle&quot;&gt;
    &lt;h1&gt;내 생애 최고의 영화들&lt;/h1&gt;
    &lt;button onclick=&quot;open_box()&quot;&gt;영화 기록하기&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;mypost&quot; id=&quot;post-box&quot;&gt;
    &lt;div class=&quot;form-floating mb-3&quot;&gt;
        &lt;input id=&quot;url&quot; type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;name@example.com&quot;&gt;
        &lt;label&gt;영화URL&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;input-group mb-3&quot;&gt;
        &lt;label class=&quot;input-group-text&quot; for=&quot;inputGroupSelect01&quot;&gt;별점&lt;/label&gt;
        &lt;select class=&quot;form-select&quot; id=&quot;star&quot;&gt;
            &lt;option selected&gt;-- 선택하기 --&lt;/option&gt;
            &lt;option value=&quot;1&quot;&gt;⭐&lt;/option&gt;
            &lt;option value=&quot;2&quot;&gt;⭐⭐&lt;/option&gt;
            &lt;option value=&quot;3&quot;&gt;⭐⭐⭐&lt;/option&gt;
            &lt;option value=&quot;4&quot;&gt;⭐⭐⭐⭐&lt;/option&gt;
            &lt;option value=&quot;5&quot;&gt;⭐⭐⭐⭐⭐&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-floating&quot;&gt;
        &lt;textarea id=&quot;comment&quot; class=&quot;form-control&quot; placeholder=&quot;Leave a comment here&quot;&gt;&lt;/textarea&gt;
        &lt;label for=&quot;floatingTextarea2&quot;&gt;코멘트&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;mybtns&quot;&gt;
        &lt;button onclick=&quot;posting()&quot; type=&quot;button&quot; class=&quot;btn btn-dark&quot;&gt;기록하기&lt;/button&gt;
        &lt;button onclick=&quot;close_box()&quot; type=&quot;button&quot; class=&quot;btn btn-outline-dark&quot;&gt;닫기&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;mycards&quot;&gt;
    &lt;div class=&quot;row row-cols-1 row-cols-md-4 g-4&quot; id=&quot;cards-box&quot;&gt;
        &lt;div class=&quot;col&quot;&gt;
            &lt;div class=&quot;card h-100&quot;&gt;
                &lt;img src=&quot;https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg&quot;
                     class=&quot;card-img-top&quot;&gt;
                &lt;div class=&quot;card-body&quot;&gt;
                    &lt;h5 class=&quot;card-title&quot;&gt;영화 제목이 들어갑니다&lt;/h5&gt;
                    &lt;p class=&quot;card-text&quot;&gt;여기에 영화에 대한 설명이 들어갑니다.&lt;/p&gt;
                    &lt;p&gt;⭐⭐⭐&lt;/p&gt;
                    &lt;p class=&quot;mycomment&quot;&gt;나의 한줄 평을 씁니다&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col&quot;&gt;
            &lt;div class=&quot;card h-100&quot;&gt;
                &lt;img src=&quot;https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg&quot;
                     class=&quot;card-img-top&quot;&gt;
                &lt;div class=&quot;card-body&quot;&gt;
                    &lt;h5 class=&quot;card-title&quot;&gt;영화 제목이 들어갑니다&lt;/h5&gt;
                    &lt;p class=&quot;card-text&quot;&gt;여기에 영화에 대한 설명이 들어갑니다.&lt;/p&gt;
                    &lt;p&gt;⭐⭐⭐&lt;/p&gt;
                    &lt;p class=&quot;mycomment&quot;&gt;나의 한줄 평을 씁니다&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col&quot;&gt;
            &lt;div class=&quot;card h-100&quot;&gt;
                &lt;img src=&quot;https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg&quot;
                     class=&quot;card-img-top&quot;&gt;
                &lt;div class=&quot;card-body&quot;&gt;
                    &lt;h5 class=&quot;card-title&quot;&gt;영화 제목이 들어갑니다&lt;/h5&gt;
                    &lt;p class=&quot;card-text&quot;&gt;여기에 영화에 대한 설명이 들어갑니다.&lt;/p&gt;
                    &lt;p&gt;⭐⭐⭐&lt;/p&gt;
                    &lt;p class=&quot;mycomment&quot;&gt;나의 한줄 평을 씁니다&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col&quot;&gt;
            &lt;div class=&quot;card h-100&quot;&gt;
                &lt;img src=&quot;https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg&quot;
                     class=&quot;card-img-top&quot;&gt;
                &lt;div class=&quot;card-body&quot;&gt;
                    &lt;h5 class=&quot;card-title&quot;&gt;영화 제목이 들어갑니다&lt;/h5&gt;
                    &lt;p class=&quot;card-text&quot;&gt;여기에 영화에 대한 설명이 들어갑니다.&lt;/p&gt;
                    &lt;p&gt;⭐⭐⭐&lt;/p&gt;
                    &lt;p class=&quot;mycomment&quot;&gt;나의 한줄 평을 씁니다&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

④ POST 연습 (포스팅하기)
- 요청 정보 : URL = /movie, 요청 방식 : POST
- 클라이언트(ajax) → 서버(flask) : url, star, comment
- 서버(flask) → 클라이언트(ajax) : 메시지를 보냄 (포스팅 완료!)

-1) 클라이언트와 서버 연결 확인하기
-2) 서버부터 만들기
@app.route(&quot;/movie&quot;, methods=[&quot;POST&quot;])
def movie_post():
    url_receive = request.form[&#39;url_give&#39;]
    star_receive = request.form[&#39;star_give&#39;]
    comment_receive = request.form[&#39;comment_give&#39;]

    headers = {
        &#39;User-Agent&#39;: &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36&#39;}
    data = requests.get(url_receive, headers=headers)

    soup = BeautifulSoup(data.text, &#39;html.parser&#39;)

    title = soup.select_one(&#39;meta[property=&quot;og:title&quot;]&#39;)[&#39;content&#39;]
    image = soup.select_one(&#39;meta[property=&quot;og:image&quot;]&#39;)[&#39;content&#39;]
    desc = soup.select_one(&#39;meta[property=&quot;og:description&quot;]&#39;)[&#39;content&#39;]

    doc = {
        &#39;title&#39;: title,
        &#39;image&#39;: image,
        &#39;desc&#39;: desc,
        &#39;star&#39;: star_receive,
        &#39;comment&#39;: comment_receive
    }
    db.movies.insert_one(doc)
    return jsonify({&#39;msg&#39;: &#39;저장 완료!&#39;})

-3) 클라이언트 만들기
function posting() {
        let url = $(&#39;#url&#39;).val()
        let star = $(&#39;#star&#39;).val()
        let comment = $(&#39;#comment&#39;).val()

        $.ajax({
            type: &#39;POST&#39;,
            url: &#39;/movie&#39;,
            data: {url_give : url, star_give : star, comment_give : comment},
            success: function (response) {
                alert(response[&#39;msg&#39;])
                window.location.reload()
            }
        });
    }
-4) 완성 확인하기

⑤ GET 연습 (보여주기)
- 요청 정보 : URL = /movie, 요청 방식 = GET
- 클라이언트(ajax) → 서버(flask) : (X)
- 서버(flask) → 클라이언트(ajax) : 전체 영화를 보내주기

-1) 클라이언트와 서버 확인하기
-2) 서버부터 만들기
@app.route(&quot;/movie&quot;, methods=[&quot;GET&quot;])
def movie_get():
    movie_list = list(db.movies.find({}, {&#39;_id&#39;: False}))
    return jsonify({&#39;movies&#39;: movie_list})

-3) 클라이언트 만들기
function listing() {
        $.ajax({
            type: &#39;GET&#39;,
            url: &#39;/movie&#39;,
            data: {},
            success: function (response) {
                let rows = response[&#39;movies&#39;]
                for (i = 0; i &lt; rows.length; i++){
                    let comment = rows[i][&#39;comment&#39;]
                    let title = rows[i][&#39;title&#39;]
                    let desc = rows[i][&#39;desc&#39;]
                    let image = rows[i][&#39;image&#39;]
                    let star = rows[i][&#39;star&#39;]

                    let star_image = &#39;⭐&#39;.repeat(star)

                    let temp_html = `&lt;div class=&quot;col&quot;&gt;
                                        &lt;div class=&quot;card h-100&quot;&gt;
                                            &lt;img src=&quot;${image}&quot;
                                                 class=&quot;card-img-top&quot;&gt;
                                            &lt;div class=&quot;card-body&quot;&gt;
                                                &lt;h5 class=&quot;card-title&quot;&gt;${title}&lt;/h5&gt;
                                                &lt;p class=&quot;card-text&quot;&gt;${desc}&lt;/p&gt;
                                                &lt;p&gt;${star_image}&lt;/p&gt;
                                                &lt;p class=&quot;mycomment&quot;&gt;${comment}&lt;/p&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;`

                    $(&#39;#cards-box&#39;).append(temp_html)
                }
            }
        })
    }
-4) 완성 확인하기</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[웹개발 종합반 3주차 (hw)]]></title>
            <link>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-3%EC%A3%BC%EC%B0%A8-hw</link>
            <guid>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-3%EC%A3%BC%EC%B0%A8-hw</guid>
            <pubDate>Wed, 02 Feb 2022 06:19:02 GMT</pubDate>
            <description><![CDATA[<p><strong>1. 코드</strong></p>
<pre><code>import requests
from bs4 import BeautifulSoup

headers = {&#39;User-Agent&#39; : &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36&#39;}
data = requests.get(&#39;https://www.genie.co.kr/chart/top200?ditc=M&amp;rtm=N&amp;ymd=20210701&#39;,headers=headers)

soup = BeautifulSoup(data.text, &#39;html.parser&#39;)

musics = soup.select(&#39;#body-content &gt; div.newest-list &gt; div &gt; table &gt; tbody &gt; tr&#39;)

for music in musics :
    rank = music.select_one(&#39;td.number&#39;).text[0:2]
    title = music.select_one(&#39;td.info &gt; a.title.ellipsis&#39;).text.strip()
    singer = music.select_one(&#39;td.info &gt; a.artist.ellipsis&#39;).text

print(rank,title,singer)</code></pre><p><strong>2. 구현</strong></p>
<p><img src="https://images.velog.io/images/nani_jin/post/f9d14a74-8f7e-480b-90ba-8300b7a9e3c2/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-02%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.17.56.png" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[웹개발 종합반 3주차 (study)]]></title>
            <link>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-3%EC%A3%BC%EC%B0%A8-study</link>
            <guid>https://velog.io/@nani_jin/%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9%EB%B0%98-3%EC%A3%BC%EC%B0%A8-study</guid>
            <pubDate>Wed, 02 Feb 2022 06:14:18 GMT</pubDate>
            <description><![CDATA[<p><strong>(3주차 목표)</strong>
Python basic, Web scraping basic, mongoDB/pymongo</p>
<blockquote>
<p><strong><em>파이썬 기초</em></strong></p>
</blockquote>
<p><strong>1) 숫자 더하기</strong></p>
<pre><code>a = 2
b = 3
print(a+b) % 5</code></pre><p><strong>2) 문자열 더하기</strong></p>
<pre><code>a = &#39;yejin&#39;
b = &#39;shin&#39;
print(a+b) # yejinshin</code></pre><p><strong>3) List</strong></p>
<pre><code>a_list = [&#39;사과&#39;,&#39;배&#39;,&#39;감&#39;]
print(a_list[1]) # 배, python은 0부터 시작.

a_list.append(&#39;수박&#39;)
print(a_list) # [&#39;사과&#39;,&#39;배&#39;,&#39;감&#39;,&#39;수박&#39;]</code></pre><p><strong>4) Dictionary</strong></p>
<pre><code>a_dict = {
    &#39;name&#39; : &#39;bob&#39;,
    &#39;age&#39; : 27
}
print(a_dict[&#39;name&#39;]) # bob</code></pre><p><strong>5) Function</strong></p>
<pre><code>def sum(a,b) :
    print(&#39;더하자!&#39;)
    return a+b    
result = sum(1,2)
print(result) 
# 더하자! 
# 3

def is_adult(age) :
    if age &gt; 20 :
        print(&#39;성인입니다&#39;)
    else :
        print(&#39;청소년입니다&#39;)
is_adult(15)
# 청소년입니다</code></pre><p><strong>6) For</strong></p>
<pre><code>fruits = [&#39;사과&#39;,&#39;배&#39;,&#39;배&#39;,&#39;감&#39;,&#39;수박&#39;,&#39;귤&#39;,&#39;딸기&#39;,&#39;사과&#39;,&#39;배&#39;,&#39;수박&#39;]
for aaa in fruits :
    if aaa == &#39;사과&#39;:
        count += 1    
print(count)
# 2

people = [{&#39;name&#39;: &#39;bob&#39;, &#39;age&#39;: 20}, 
        {&#39;name&#39;: &#39;carry&#39;, &#39;age&#39;: 38},
        {&#39;name&#39;: &#39;john&#39;, &#39;age&#39;: 7},
        {&#39;name&#39;: &#39;smith&#39;, &#39;age&#39;: 17},
        {&#39;name&#39;: &#39;ben&#39;, &#39;age&#39;: 27}]
for person in people :
    if person[&#39;age&#39;] &gt; 20 :
    print(person[&#39;name&#39;])
# carry 
# ben</code></pre><blockquote>
<p><strong>* 패키지 사용해보기*</strong></p>
</blockquote>
<pre><code>import requests # requests 라이브러리 설치 필요

r = requests.get(&#39;http://spartacodingclub.shop/sparta_api/seoulair&#39;)
rjson = r.json()

rows = rjson[&#39;RealtimeCityAir&#39;][&#39;row&#39;]

for row in rows :
    gu_name = row[&#39;MSRSTE_NM&#39;]
    gu_mise = row[&#39;IDEX_MVL&#39;]
    if gu_mise &lt; 60 :
        print(gu_name)
    # 한 줄씩 찍히게 됨

설명 : requests라는 라이브러리를 쓰고 싶어서,
네가 쓰라는데로 r = requests.get ... rjson ... 썼어.
이제 rjson을 가지고 내가 요리를 해볼게.</code></pre><blockquote>
<p><strong><em>크롤링/웹스크래핑 기초</em></strong>
<img src="https://images.velog.io/images/nani_jin/post/92f6e4f5-48bf-49b1-9f3b-a496bfbdefe8/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-04%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.46.03.png" alt=""></p>
</blockquote>
<pre><code>크롤링 : 크롤링을 위해 개발된 소프트웨어를 크롤러(crawler)라 한다.
크롤러는 주어진 인터넷 주소(URL)에 접근하여 관련된 URL을 찾아내고,
찾아진 URL들 속에서 또 다른 하이퍼링크(hyperlink)들을 찾아 분류하고 저장하는 작업을 반복함으로써 
여러 웹페이지를 돌아다니며 어떤 데이터가 어디에 있는지 색인(index) 을 만들어 데이터베이스(DB)에 저장하는 역할을 한다


스크래핑 : 크롤링과 유사 개념으로 소프트웨어를 통해 대상 웹사이트와 같은 데이터 소스에서 
데이터 자체를 추출하여 특정 형태로 저장하는 스크레이핑(scraping)이 있다. 
빅데이터 분석에서는 크롤링을 통해 필요한 데이터가 어디 있는지 알아내고, 
이를 스크레이핑을 통해 수집, 저장하여 분석에 사용하는 것처럼 두 기술을 결합하여 사용하기도 한다.

* 출처 : [네이버 지식백과] 크롤링 [crawling] (용어로 알아보는 우리시대 DATA)</code></pre><p><strong>1) 크롤링 기본 셋팅</strong></p>
<pre><code>import requests
from bs4 import BeautifulSoup

headers = {&#39;User-Agent&#39; : &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36&#39;}
# header에서 call을 날리는데, 마치 browser에서 콜을 날린 것처럼(사람인 것처럼) 해주는 것. 
# 아래 headers=headers 참고.
data = requests.get(&#39;https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&amp;date=20210829&#39;,headers=headers)

soup = BeautifulSoup(data.text, &#39;html.parser&#39;)
print(soup)</code></pre><p><strong>2) beautifulsoup 쓰는 방법</strong></p>
<pre><code>beautifulsoup(bs4) : html은 가져왔는데 그 안에서 내가 찾는 제목을 쉽게 찾기 위한 라이브러리

* 원하는 곳 &gt; 검사 &gt; copy &gt; copy selector 

* 네이버 영화 페이지에서 제목 가져오기
예시 1 - 하나만)
title = soup.select_one(&#39;copy selector 복사한 값&#39;)
print(title) # 그 태그가 찍힘
print(title.text) # 그 태그에서 우리가 원하는 텍스트 부분 나옴
print(title[&#39;(예를 들어) href&#39;]) # href 안에 값이 나옴

예시 2 - 여러개)
movies = soup.select(&#39;#old_content &gt; table &gt; tbody &gt; tr&#39;) # 중복되는 앞부분
for movie in movies : 
    a = movie.select_one(&#39;td.title &gt; div &gt; a&#39;) # 중복되는 뒷부분
    if a is not None : # a == None 
        print(a.text) # 영화 제목들이 순서대로 나옴

* 네이버 영화 페이지에서 순위, 평점, 제목 가져오기
앞에서 봤던 것과 마찬가지로 검사를 누르고 print()로 확인하면서 원하는 값들을 뽑아내면 된다.
movies = soup.select(&#39;#old_content &gt; table &gt; tbody &gt; tr&#39;)

for movie in movies :
    a = movie.select_one(&#39;td.title &gt; div &gt; a&#39;)

    if a != None : # = a is not None
        title = a.text
        rank = movie.select_one(&#39;td:nth-child(1) &gt; img&#39;)[&#39;alt&#39;] # 앞에서 이미 붙인 부분을 제외한 뒷부분을 넣어주고 print(rank) 했더니 원하는 값이 &#39;alt&#39;에 들어있었기 때문에, [&#39;alt&#39;]를 해준다.
        star = movie.select_one(&#39;td.point&#39;).text # 앞에서 이미 붙인 부분을 제외한 뒷부분을 넣어주고 원하는 부분인 text만 뽑아줌.
        print(rank, title, star)</code></pre><blockquote>
<p><strong><em>Data Base(DB) 개괄</em></strong></p>
</blockquote>
<p><strong>1) 들어가기 전에</strong></p>
<pre><code>Q1 : DB는 왜 쓰는 것일까?
A1 : 나중에 잘 찾기 위해서

Q2 : 교보문고에 가서 책을 찾는다고 하면?
A2 : 꽂혀진 방법대로 찾아야 쉽게 찾을 수 있겠쥬? (섹션 → 출판사 → 제목)
따라서, DB에도 Index라는 순서로 데이터들이 정렬되어 있다</code></pre><p><strong>2) DB의 두 가지 종류</strong></p>
<pre><code>SQL : 칸을 정해놓고 순서대로 쌓는 것
NoSQL : 칸이 정해져 있지 않고 들어오는 대로 쌓는 것
 * standard language for storing, manipulating and retrieving data in databases

NoSQL의 대표적인 것이 mongoDB</code></pre><p><strong>3) DB의 실체에 관하여</strong></p>
<pre><code>DB는 특별한 컴퓨터일까?
NO! 아주 간단하게, 우리가 쓰는 프로그램과 같은 것이다.
즉, 내 컴퓨터에 게임을 설치하는 것처럼 DB도 설치할 수 있는 것이다.

그런데 이마저도 요새 cloud 형태로 제공해주는 곳들이 많은데,
유저가 몰리거나/ DB를 백업해야 하거나/ 모니터링 하기가 쉽기 때문이다
그래서, 우리도 최신 클라우드 서비스인 &#39;mongoDB Atlas&#39;를 사용해 볼 것!</code></pre><blockquote>
<p><strong><em>mongoDB/pymongo</em></strong></p>
</blockquote>
<pre><code>pymongo 라이브러리의 역할
: mongoDB 라는 프로그램을 조작하려면, 특별한 라이브러리인 pymongo가 필요하다!</code></pre><p><strong>1) 패키지 설치하기</strong></p>
<pre><code>pymongo, dnspython</code></pre><p><strong>2) mongDB 연결하기</strong></p>
<pre><code>from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient(&#39;mongodb+srv://test:sparta@cluster0.4n13d.mongodb.net/Cluster0?retryWrites=true&amp;w=majority&#39;, tlsCAFile=ca)
db = client.dbsparta

# 나같은 경우에는 맥북이어서인지 보안 때문에 certifi를 추가적으로 설치해줘야 실행되었음.</code></pre><p><strong>3) pymongo로 DB 조작하기</strong></p>
<pre><code># 저장 - 예시
doc = {&#39;name&#39;:&#39;bobby&#39;,&#39;age&#39;:21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({&#39;name&#39;:&#39;bobby&#39;})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{&#39;_id&#39;:False}))

# 바꾸기 - 예시
db.users.update_one({&#39;name&#39;:&#39;bobby&#39;},{&#39;$set&#39;:{&#39;age&#39;:19}})

# 지우기 - 예시
db.users.delete_one({&#39;name&#39;:&#39;bobby&#39;})</code></pre><p><strong>4) 웹스크래핑 결과 저장하기</strong></p>
<pre><code>import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient(&#39;mongodb+srv://test:sparta@cluster0.4n13d.mongodb.net/Cluster0?retryWrites=true&amp;w=majority&#39;, tlsCAFile=ca)
db = client.dbsparta

headers = {&#39;User-Agent&#39; : &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36&#39;}
data = requests.get(&#39;https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&amp;date=20210829&#39;,headers=headers)

soup = BeautifulSoup(data.text, &#39;html.parser&#39;)

movies = soup.select(&#39;#old_content &gt; table &gt; tbody &gt; tr&#39;)

for movie in movies :
    a = movie.select_one(&#39;td.title &gt; div &gt; a&#39;)

    if a != None : # = a is not None
        title = a.text
        rank = movie.select_one(&#39;td:nth-child(1) &gt; img&#39;)[&#39;alt&#39;]
        star = movie.select_one(&#39;td.point&#39;).text
        doc = {
            &#39;title&#39;:title,
            &#39;rank&#39;:rank,
            &#39;star&#39;:star
        }
        db.movies.insert_one(doc)</code></pre><p><strong>5) 웹스크래핑 결과 이용하기</strong></p>
<pre><code>① 영화제목 &#39;가버나움&#39;의 평점 가져오기
movie = db.movies.find_one({&#39;title&#39;:&#39;가버나움&#39;})[&#39;star&#39;]

② &#39;가버나움&#39;의 평점과 같은 평점의 영화 제목들을 가져오기
all_movies = list(db.movies.find({&#39;star&#39;:movie},{&#39;_id&#39;:False}))
  for movie in all_movies:
      print(movie[&#39;title&#39;])

③ &#39;가버나움&#39; 영화의 평점을 0으로 만들기
db.movies.update_one({&#39;title&#39;: &#39;가버나움&#39;}, {&#39;$set&#39;: {&#39;star&#39;: &#39;0&#39;}})</code></pre><p><strong>(3주차 소감)</strong>
mongoDB에 데이터를 저장하고 싶은데 계속 실행이 안되서 헤맸었다.
하지만 슬랙에 물어보니 친절하게 답변해주셔서 쉽게 해결할 수 있었음! 애용해야겠다.</p>
<p><strong>(참고 사이트)</strong></p>
<pre><code>크롤링/웹스크래핑 몹시 헷갈릴 때 : https://kamang-it.tistory.com/entry/PythonCrawlingScraping%ED%81%AC%EB%A1%A4%EB%A7%81%EA%B3%BC-%EC%8A%A4%ED%81%AC%EB%9E%98%ED%95%91-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%9B%90%EB%A6%AC1</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[MATLAB 08-2 (debugging)]]></title>
            <link>https://velog.io/@nani_jin/MATLAB-08-2-debugging</link>
            <guid>https://velog.io/@nani_jin/MATLAB-08-2-debugging</guid>
            <pubDate>Tue, 01 Feb 2022 12:57:24 GMT</pubDate>
            <description><![CDATA[<blockquote>
<p><strong><em>Debugging</em></strong> 
To create is God, To error is human</p>
</blockquote>
<p><strong>1) program bug (error)</strong></p>
<pre><code>bug that is detected by Matlab (syntax error) → easy to find
bug that gives wrong answer → not easy to find
debugging : process of finding bugs and fixing them (* step by step)</code></pre><p><strong>2) Debugging takes a major portion of programming</strong></p>
<p><strong>3) No.1 rule of debugging</strong></p>
<pre><code>check values of variables (ex, remove &#39;;&#39; at the end)</code></pre><blockquote>
<p><strong><em>Style</em></strong></p>
</blockquote>
<p><strong>4) makes program script easy to understand</strong></p>
<p><strong>5) does not affect computation, but very important</strong></p>
<pre><code>① put comments(%) as many as possible
    begginning of program → summary of what program does

② indent dependent statements (if, for, while)
    if (i&lt;0.5)
        i = i + 3;
        end

        if (i&lt;0.5)
            i = i + 3;
        end

③ put blank line between sections

④ one equation (command) in one line</code></pre><blockquote>
<p><strong><em>Comment / Uncomment</em></strong></p>
</blockquote>
<pre><code>command+/ (comment) : insert comment marker in front
command+option+/ (uncomment) : remove comment marker from front</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[MATLAB 08-1]]></title>
            <link>https://velog.io/@nani_jin/MATLAB-08</link>
            <guid>https://velog.io/@nani_jin/MATLAB-08</guid>
            <pubDate>Tue, 01 Feb 2022 12:17:25 GMT</pubDate>
            <description><![CDATA[<p><strong>1) Local variable of function</strong></p>
<pre><code>variables generated in main program are stored in workspace
variables generated in function disappear when function is over

clear
a = 20
b = 30
y = fn_local(3)
whos

* function이 끝나면 바깥 세상에서는 사라진다</code></pre><p><strong>2) Global variable of function (&quot;official&quot; IO channel for function)</strong></p>
<pre><code>function [ out1, out2, ... ] = fn_name( in1, in2, ...)
----------------
----------------

global variable → allows &quot;unofficial&quot; IO channel for function
type fn_global
z = fn_global(3,5) % 여기까지 실행하면 z = []로 나옴. A B C를 안줬기 때문
global A B C % do not use comma to define multiple global vars
A = 7, B = 3, C = 5
z = fn_global(3,5)
A

who global % global vars만 보여줌
clear global % global vars 삭제, clear로 삭제해도 fn_global(2,3)을 입력했을 때 값이 보이는 이유는 
         % base workspace에서는 삭제되었지만 global workspace에서는 살아있기 때문. 따라서 clear global 해야 완전 삭제.</code></pre><p><strong>3) Function handle (어떤 함수의 이름이다)</strong></p>
<pre><code>try : 
y = cos(3)
a = &#39;cos&#39;
y = a(3) % ans = &#39;s&#39;. is this same as y = cos(3)?

* fhandle &amp; feval *
a = @cos % function handle
whos a
y = a(3) % same as y = cos(3)
y = feval(a,3) % The feval function follows the same scoping and precedence rules as calling a function handle directly.</code></pre><p><strong>4) Exercise : function handles</strong></p>
<pre><code>function can take function names as input

let&#39;s change main_func1 into a function (fn_func1)
    input : x0 (initial guess), function names
        output : x (solution), i (# of iterations)
        [x, i] = fn_func1(x0,fn)</code></pre><blockquote>
<p><strong><em>Conflict of Names</em></strong></p>
</blockquote>
<p><strong>5) conflict b/w names of</strong></p>
<pre><code>% 우선순위 (matlab은 이름 가지고 구분을 못한다)
variables
commands/functions
files (both Matlab &amp; Simulink)

rand = 13; % built-in function인데, 우리가 변수로 설정해버리면 망함. rand(1,3) 안됨.
clear rand % 변수로 설정했을때 지워주는 명령.

main_func1 = 4; %file
clear main_func1</code></pre><p><strong>6) precedence among names</strong></p>
<pre><code>variables
files in the directories specified by MATLAB&#39;s search path</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[MATLAB 07]]></title>
            <link>https://velog.io/@nani_jin/MATLAB-07</link>
            <guid>https://velog.io/@nani_jin/MATLAB-07</guid>
            <pubDate>Tue, 01 Feb 2022 02:51:17 GMT</pubDate>
            <description><![CDATA[<p><strong>1) sound</strong></p>
<pre><code>load handel
sound(y,Fs)
which handel.mat</code></pre><p><strong>2) ddang.m</strong></p>
<pre><code>draw 2 cards
each card : number of 1 to 10
38 광땡 → train sound : load train; sound(y,Fs)
땡 → gong sound : load gong; sound(y,Fs)
망통 → laughter sound : load laughter; sound(y,Fs)</code></pre><blockquote>
<p><strong><em>Early iteration stop (see and run : testbreak.m)</em></strong></p>
</blockquote>
<p><strong>3) break</strong></p>
<pre><code>terminates loop
In nested loops, BREAK exits from the loop that it belongs to</code></pre><p><strong>4) continue</strong></p>
<pre><code>passes control to the next iteration</code></pre><p><strong>5) return</strong></p>
<pre><code>causes a return to the invoking function or to the keyboard</code></pre><blockquote>
<p><strong><em>General Form of Function</em></strong></p>
</blockquote>
<p><img src="https://images.velog.io/images/nani_jin/post/da47793b-a0f2-4333-8221-c59260a19f42/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-01%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.16.36.png" alt=""></p>
<p><img src="https://images.velog.io/images/nani_jin/post/d54d81bb-3649-4d9f-8b2d-077231531a18/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-01%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.20.57.png" alt=""></p>
<p><strong>6) function maxij (finding maximum element)</strong></p>
<pre><code>Find max value and its location from input matrix
function [amax, i, j] = maxij(a)
a : input matrix
amax : max value of a
i,j : row and col index of amax in a
use [vmax, i] = max(v)</code></pre><p><strong>7) Newton&#39;s method for solving f(x) = 0</strong>
<img src="https://images.velog.io/images/nani_jin/post/e26de476-0865-4a60-8ed8-d620ac74606c/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-01%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.36.27.png" alt=""></p>
<pre><code>% myNewton.m
%
% This program finds a root of function func1().

x = input(&#39;Type initial guess --&gt; &#39;);
fx = func1(x);
dx = 1e-8;
i = 0; % 몇 번 도는지 보기 위함

while abs(fx) &gt; 1e-10 % 내가 생각하기에 충분히 작은 수. ~=로 대체하면 무한 루프가 되어버림.

    i = i+1
    fx = func1(x);
    dfx = ( func1(x+dx) - func1(x) ) / dx;
    x = x - fx/dfx;

end</code></pre>]]></description>
        </item>
    </channel>
</rss>