✍️가비아 접속하기

도메인 구입/연결

도메인을 구매한다는 것은, 네임서버를 운영해주는 업체에 IP와 도메인 메칭 유지비를 내는 것이다. 한국 또는 글로벌 업체 어디든 상관 없지만, 우리는 한국의 '가비아'라는 회사에서 구입해 보자!

• DNS 설정 클릭 → 호스트 이름에 @, IP 주소에 IP 주소를 입력
• 약간의 시간을 가진 후 내 도메인으로 접근하면 접속이 된다!

og 태그

og 태그 만들기

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />

서버에 올려놓은 파일 수정해 보기

1. 일단 작동하는 서버 중지시키기 터미널에 아래 코드 입력하기

ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

2. FileZilla에 올려 놓은 파일 지우고 새로 올리기 static, templates, app.py 3. 다시 서버 실행시키기

nohup python app.py &

4. 작동 확인하기 ❗️참고) 이미지를 바꿨는데 이전 og image가 그대로 나와요! 그 이유는 페이스북/카카오톡 등에서 처음 것을 한동안 저장해놓기 때문

페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/ 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og

• 현재 상황 Git bash 또는 맥의 터미널을 종료하면(=즉, SSH 접속을 끊으면) 프로세스가 종료되면서 서버가 돌아가지 않고 있다. 그러나 우리가 원격 접속을 끊어도 서버는 계속 동작해야겠지?

  ❗️터미널에서 재접속할 때 하나하나 다시 칠 필요 없다. 화살표 위 ↑ 버튼 누르면 이전 꺼 입력한거 그대로 나옴

• 원격 접속을 종료하더라도 서버가 계속 돌아가게 하기

  # 아래의 명령어로 실행하면 된다
  nohup python app.py &

• 서버 종료하기 - 강제종료하는 방법

  ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

• 브라우저에서 접속하기

  http://내AWS아이피/

✍️서버 환경 통일하기

우리는 지금 막! 컴퓨터를 구매한 상태이다. 여기에 이런저런 세팅들(업그레이드, DB설치, 명령어 통일 등)을 해줘야 본격적으로 이용할 때 편리하다.

• EC2 한방에 세팅하기

  # python3 명령어를 python으로 사용할 수 있게 하는 명령어
  # python3 -> python
  sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10
  

1) pip3 설치 2) pip3 명령어를 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

80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어

port forwarding

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

#### filezilla를 이용해서 간단한 python 파일을 올려본다.
![](https://velog.velcdn.com/images/ddabong-dochi/post/a2de72c5-77f7-4c19-8173-28f5ebd6ac24/image.png)
Host에는 내 EC2서버의 퍼블릭 IPv4 주소를 복사해서 넣는다. ip // User: ubuntu로 입력
![](https://velog.velcdn.com/images/ddabong-dochi/post/2902f102-49d5-4dfd-8e4a-ac6ebe212457/image.png)
마우스로 드래그 해서 파일을 업로드/다운로드하면 된다.

### Flask 서버를 실행해보기
- filezilla에서 homework 폴더 째로 드래그 드롭으로 EC2 인스턴스의 home/ubuntu폴더에 업로드한다.
- pip로 패키지 설치

pip install flask pip install pymongo pip install dnspython

- flask 서버 실행해보기
> 아래 명령어로 flask 서버를 실행한다.
python app.py
서버 실행이 되면, 크롬에서 접속을 해본다.
크롬 브라우저 창에 아래와 같이 입력한다.
http://[내 EC2 IP]:5000/
- AWS에서 5000포트를 열어주기
EC2서버(=가상의 내 컴퓨터)에서 포트를 따로 설정하는 것 외에도 AWS EC2에서도 자체적으로 포트를 열고/닫을 수 있게 관리를 하고 있다. 그래서 AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야 한다.
일단 EC2 관리 콘솔로 들어간다. 그리고 보안그룹(영문: Security Group)을 눌러 들어간다. launch-wizard-1이라고 쓰여 있다.
![](https://velog.velcdn.com/images/ddabong-dochi/post/6b00f355-a0f2-4713-98ce-d4bb4adaae9e/image.png)
해당 보안그룹을 클릭한다.
Edit inbound rules를 선택한다.(인바운드 규칙 편집)
✔️두 가지 포트를 추가해보자. Anywhere-IPv4를 클릭한다.
![](https://velog.velcdn.com/images/ddabong-dochi/post/5c40c3d1-d1ff-422d-8482-0ed1360f69c2/image.png)
> 80포트: HTTP 접속을 위한 기본 포트
5000포트: flask 기본 포트

#### 어떻게 되는걸까? 포트 번호 없애기 기본 개념
지금은 5000포트에서 웹서비스가 실행되고 있다. 그래서 매번 :5000이라고 뒤에 붙여줘야 한다. 뒤에 붙는 포트 번호를 없애려면 어떻게 해야 할까?
http 요청에서는 80포트가 기본이기 때문에 굳이 :80을 붙이지 않아도 자동으로 연결이 된다.
포트 번호를 입력하지 않아도 자동으로 접속되기 위해 우리는 80포트로 오는 요청을 5000포트로 전달하게 하는 포트포워딩(port forwarding)을 사용한다.
![](https://velog.velcdn.com/images/ddabong-dochi/post/d1d2acae-381e-48b9-a334-f29c99debdf9/image.png)

'웹서비스 런칭'에 필요한 개념 소개

배포는 누구나 내 서비스를 사용할 수 있게 하기 위한 작업들이다. 웹서비스를 런칭하는 것!

• 웹 서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜줄 거다!
• 언제나 요청에 응답하려면, 1) 컴퓨터가 항상 _켜져있고 프로그램이 실행되어 있어야하고, 2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 _접근할 수 있도록 해야해요.
• 서버는 그냥 컴퓨터라는거 기억나시죠? 외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수도 있어요.
• 그러나 이 수업에서는 AWS 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용할 예정!

☘️AWS서버 구매하기

EC2 서버 구매하기

✍️AWS EC2 서버 사기(준비 상식) 클릭 만으로 내가 원하는 서버(컴퓨터)의 설정을 정하고, 거기에 컴퓨터를 실행시키기 위한 운영체제(OS)를 설치할 거다. 이 수업에서는 OS로 리누스의 Ubuntu를 설치한다. 윈도우와 같이, OS도 여러개 존재한다. 리눅스도 그 중의 하나이며 오픈소스로 발전되는 OS이다. EC2 콘솔페이지

구매 화면들 따라하기

• 인스턴스-인스턴스 시작
• Ubuntu Server 18.04 또는 20.04 버전을 구매
• 키 페어 생성-새 키페어 생성
• 인스턴스 보기-인스턴스 상태(실행 중) 인스턴스 중지 : 컴퓨터 끔 인스턴스 종료 : 컴퓨터 반납 (무료기간 1년 후 결제가 되기 전에 종료하자. 인스턴스에 마우스 우클릭>'인스턴스 상태'클릭

EC2에 접속하기

✍️AWS EC2에 접속하기 (준비 상식 편)

SSH(Secure Shell Protocol) 다른 컴퓨터에 접속할 때 쓰는 프로그램이다. 다른 것들 보다 보안이 상대적으로 뛰어나다. 접속할 컴퓨터가 22번 포트가 열려있어야 접속 가능하다. AWS EC2의 경우, 이미 22번 포트가 열려있다. 확인해보자!

❗️Mac OS: Mac은 ssh가 있어서 명령어로 바로 접근 가능! 터미널 열기(spotlight에 terminal 입력) 방금 받은 내 Keypair의 접근 권한 바꿔주기

sudo chmod 400 받은키페어를끌어다놓기 

SSH로 접속하기

ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에 적힌 퍼블릭 IPv4 주소

간단한 리눅스 명령어 연습하기

리눅스는 윈도우 같지 않아서 '쉘 명령어'를 통해 OS를 조작한다.(일종의 마우스 역할) 팁! 리눅스 커널에서 윗화살표를 누르면 바로 전에 썼던 명령어가 나옴

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

• API 만들고 사용하기 : 버킷리스트 조회 API(Read→ GET)

  a. 요청 정보 : URL= /bucket, 요청 방식 = GET b. 클라(ajax) → 서버(flask) : (없음) c. 서버(flask) → 클라(ajax) : 전체 버킷리스트를 보여주기

리스트를 보여주는 역할까지만이지 아직 '완료' 버튼을 누르면 지워지는건 아니다.

• 서버부터 만들기

  @app.route("/bucket", methods=["GET"])
  def bucket_get():
    buckets_list = list(db.bucket.find({},{'_id':False}))
    return jsonify({'buckets':buckets_list})

• 클라이언트 만들기

  function show_bucket(){
    $('#bucket-list').empty()
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            let rows = response['buckets']
            for (let i = 0; i < rows.length; i++) {
                let bucket = rows[i]['bucket']
                let num = rows[i]['num']
                let done = rows[i]['done']
  
                let temp_html = ``
                if (done == 0) {
                    temp_html = `<li>
                                    <h2>✅ ${bucket}</h2>
                                    <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
                                </li>`
                } else {
                    temp_html = `<li>
                                    <h2 class="done">✅ ${bucket}</h2>
                                </li>`
                }
                $('#bucket-list').append(temp_html)
            }
        }
    });
  }

  🔥버킷리스트 - POST연습(완료하기)

• API 만들고 사용하기 : 버킷리스트 완료 API (Update→ POST)

  a. 요청 정보 : URL= /bucket/done, 요청 방식 = POST b. 클라(ajax) → 서버(flask) : num (버킷 넘버) c. 서버(flask) → 클라(ajax) : 메시지를 보냄 (버킷 완료!)

• 서버부터 만들기 버킷 번호를 받아서 업데이트를 하면 된다. 그런데 num_receive는 문자열로 들어오니까, 숫자로 바꿔주는 것이 중요하다.

  @app.route("/bucket/done", methods=["POST"])
  def bucket_done():
    num_receive = request.form["num_give"]
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
    return jsonify({'msg': '버킷 완료!'})

• 클라이언트 만들기 버킷 넘버를 보여주면 된다. 버킷넘버는? HTML이 만들어질 때 적히게 된다. 바로 아래와 같이🖐

  function done_bucket(num){
    $.ajax({
        type: "POST",
        url: "/bucket/done",
        data: {'num_give':num},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
  }

1. Filezilla 설치하기

• 파일을 보낼 수 있는 프로그램
• 다운로드 클릭 후 가장 기본 버전 설치하기

2. 가비아 가입하기 & 도메인 구입하기

• 현재 .shop 도메인이 500원/1년 할인 행사중이니 무통장입금으로 구입하기(1,000원 이하는 카드 결제 안됨)

☘️버킷리스트 만들기

1. 프로젝트 세팅

• flask 폴더 구조 만들기 : static, templates 폴더 + app.py 만들기
• 패키지 설치 : flask, pymongo, dnspython

2. 뼈대 준비하기
3. POST연습(기록하기)

   a. 요청 정보 : URL= /bucket, 요청 방식 = POST b. 클라(ajax) → 서버(flask) : bucket c. 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!) 단! 서버에서 한 가지 일을 더 해야한다. → 번호를 만들어 함께 넣어주는 것. 그래야 업데이트가 가능함!

• 서버 만들기(클라이언트는 쉬워서 별도로 기재 안함)

  bucket 정보를 받아서, 저장하면 되겠죠? 단, 한 가지 일이 더 있다. → 버킷 번호 와 완료여부 를 함께 넣어주는 것! ❗️번호를 부여하는 이유는 버킷리스트에 같은 항목, 예를 들어 '여행가기'가 2번 있다면 이걸 인식하기 위해 번호를 붙임. 그리고 완료 여부는 아래 화면에 체크하기 위해서 부여.

  @app.route("/bucket", methods=["POST"])
  def bucket_post():
    bucket_receive = request.form['bucket_give']
  
    bucket_list = list(db.buckets.find({},{'_id':False}))
    count = len(bucket_list)+1
  
    doc = {
        'num':count,
        'bucket': bucket_receive,
        'done':0
    }
    db.buckets.insert_one(doc)
  
    return jsonify({'msg': '등록 완료!'})

1. 팬명록의 app.py 코드

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('mongodb+srv://아이디:비밀번호@cluster0.wu00c.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

@app.route('/')
def home():
    return render_template('index.html')

@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    doc = {
        'name': name_receive,
        'comment': comment_receive
    }
    db.listing.insert_one(doc)

    return jsonify({'msg': '응원 완료!'})

@app.route("/homework", methods=["GET"])
def homework_get():
    fan_list = list(db.listing.find({},{'_id':False}))
    return jsonify({'fans': fan_list})

if __name__ == '__main__':
    app.run('0.0.0.0', port=1000, debug=True)

2. 팬명록의 index.html 코드

<!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">

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

    <title>초미니홈피 - 팬명록</title>

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

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

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://thepublic.kr/news/data/20211211/p1065572405381876_990_thum.jpg');
            background-position: center 10%;
            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 > button {
            margin-top: 15px;
        }

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

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

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

        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

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

        function show_comment() {
            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    let rows = response['fans']
                    for (let i=0; i<rows.length; i++){
                        let comment = rows[i]['comment']
                        let name = rows[i]['name']

                        let temp_html =`<div class="card">
                                            <div class="card-body">
                                                <blockquote class="blockquote mb-0">
                                                    <p>${comment}</p>
                                                    <footer class="blockquote-footer">${name}</footer>
                                                </blockquote>
                                            </div>
                                        </div>`
                        $('#comment-list').append(temp_html)
                    }
                }
            });
        }
    </script>
</head>
<body>
<div class="mypic">
    <h1>십센치(10cm) 팬명록</h1>
    <p>현재기온: <span id="temp">36</span>도</p>
</div>
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="name" placeholder="url">
        <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
          style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
    </div>
    <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
</div>
<div class="mycards" id="comment-list">
</div>
</body>
</html>

🔥웹개발 종합반 4주차 후기🔥

화성땅 공동구매, 스파르타피디아 자체 코드로 복사+붙여넣기 한 후 몇 가지만 수정만 하면 되기에 크게 어렵지 않았다. 4주차를 이렇게 일찍 끝낼 맘이 없었는데 중간에 끊어서 하기에는 애매한 강좌가 있어서 한꺼번에 듣게 되었다. 5주차 마지막만 남았는데 어찌 엄청 일찍 끝나는 느낌? 다음주도 기대해 본다!

1. 프로젝트 세팅

• flask 폴더 구조 만들기 : static, templates 폴더 + app.py만들기
• 패키지 설치 : flask, pymongo, dnspython, bs4, requests

2. 조각 기능 구현해보기

• URL에서 페이지 정보 가져오기(meta태그 스크래핑)
• 어떤 부분에 스크래핑이 필요한가? URL만 입력했는데 자동으로 불러와지는 부분들이 있다. 바로 '제목', '썸네일 이미지', '내용'이다. 이 부분은 meta 태그를 크롤링 함으로써 얻을 수 있다.

  메타 태그는 head 태그에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들이다. 예) 구글 검색 시 표시 될 설명문, 사이트 제목, 카톡 공유 시 표시 될 이미지 등 ✍️우리는 그 중 og:image / og:title / og:description 을 크롤링 할 예정

• (연습) 크롤링 기본 코드

  import requests
  from bs4 import BeautifulSoup
  

url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'

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

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

아래와 같이 코딩을 해서 meta tag를 가져온다.

title = soup.select_one('meta[property="og:title"]')['content'] img = soup.select_one('meta[property="og:image"]')['content'] desc = soup.select_one('meta[property="og:description"]')['content'] print(title, img, desc)

### 3. 뼈대 준비하기

### 4. POST 연습(포스팅하기)
- API 만들고 사용하기 - 포스팅API(Create→ POST)
> a. 요청 정보 :  URL= /movie, 요청 방식 = POST
b. 클라(ajax) → 서버(flask) : url, star, comment
c. 서버(flask) → 클라(ajax) : 메시지를 보냄 (포스팅 완료!)

### 5. GET 연습(보여주기)
- API 만들고 사용하기 - 보여주기API(Read→GET)
> a. 요청 정보 :  URL= /movie, 요청 방식 = GET
b. 클라(ajax) → 서버(flask) : (없음)
c. 서버(flask) → 클라(ajax) : 전체 영화를 보내주기

### 6. 완성 코드
- 클라이언트 index.html

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

<title>스파르타 피디아</title>

<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

<style>
    * {
        font-family: 'Gowun Dodum', 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('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
        background-position: center;
        background-size: cover;

        color: white;

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

    .mytitle > button {
        width: 200px;
        height: 50px;

        background-color: transparent;
        color: white;

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

        margin-top: 10px;
    }

    .mytitle > 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 > button {
        margin-right: 10px;
    }
</style>
<script>
    $(document).ready(function(){
      listing();
    });

    function listing() {
        $('#cards-box').empty()
        $.ajax({
            type: 'GET',
            url: '/movie',
            data: {},
            success: function (response) {
                let rows = response['movies']
                for(let i = 0; i < rows.length; i++) {
                    let image = rows[i]['image']
                    let title = rows[i]['title']
                    let desc = rows[i]['desc']
                    let star = rows[i]['star']
                    let comment = rows[i]['comment']

                    let star_image = '⭐'.repeat(star)

                    let temp_html = `<div class="col">
                                        <div class="card h-100">
                                            <img src="${image}"
                                                 class="card-img-top">
                                            <div class="card-body">
                                                <h5 class="card-title">${title}</h5>
                                                <p class="card-text">${desc}</p>
                                                <p>${star_image}</p>
                                                <p class="mycomment">${comment}</p>
                                            </div>
                                        </div>
                                    </div>`

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

    function posting() {
        let url = $('#url').val()
        let star = $('#star').val()
        let comment = $('#comment').val()

        $.ajax({
            type: 'POST',
            url: '/movie',
            data: {url_give: url, star_give: star, comment_give: comment},
            success: function (response) {
                alert(response['msg'])
                window.location.reload()
            }
        });
    }

    function open_box(){
        $('#post-box').show()
    }
    function close_box(){
        $('#post-box').hide()
    }
</script>

영화 제목이 들어갑니다

여기에 영화에 대한 설명이 들어갑니다.

⭐⭐⭐

나의 한줄 평을 씁니다

영화 제목이 들어갑니다

여기에 영화에 대한 설명이 들어갑니다.

⭐⭐⭐

나의 한줄 평을 씁니다

영화 제목이 들어갑니다

여기에 영화에 대한 설명이 들어갑니다.

⭐⭐⭐

나의 한줄 평을 씁니다

영화 제목이 들어갑니다

여기에 영화에 대한 설명이 들어갑니다.

⭐⭐⭐

나의 한줄 평을 씁니다

from pymongo import MongoClient client = MongoClient('내 URL') db = client.dbsparta

import requests from bs4 import BeautifulSoup

@app.route('/') def home(): return render_template('index.html')

@app.route("/movie", methods=["POST"]) def movie_post(): url_receive = request.form['url_give'] star_receive = request.form['star_give'] comment_receive = request.form['comment_give']

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

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

og_image = soup.select_one('meta[property="og:image"]')
og_title = soup.select_one('meta[property="og:title"]')
og_description = soup.select_one('meta[property="og:description"]')

image = og_image['content']
title = og_title['content']
description = og_description['content']

doc = {
    'image':image,
    'title':title,
    'desc':description,
    'star':star_receive,
    'comment':comment_receive
}

db.movies.insert_one(doc)

return jsonify({'msg':'POST 연결 완료!'})

@app.route("/movie", methods=["GET"]) def movie_get(): movies_list = list(db.movies.find({},{'_id':False})) return jsonify({'movies':movies_list})

if name == 'main': app.run('0.0.0.0', port=5000, debug=True) ```

1. 프로젝트 세팅

폴더구조 : static, templates 폴더 + app.py 만들기 패키지 설치 : flask, pymongo, dnspython

2. 뼈대 준비하기

index.html 파일은 templates 폴더 안에 만들기

3. POST 연습(주문 저장)

✔️API 만들고 사용하기 - 이름, 주소, 평수 저장하기(Create→POST)

a. 요청 정보 : URL= /mars, 요청 방식 = POST b. 클라(ajax) → 서버(flask) : name, address, size c. 서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)

✔️클라이언트와 서버 연결 확인하기

<서버 코드-app.py>

@app.route("/mars", methods=["POST"])
def mars_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

<클라이언트 코드-index.html>

function save_order() {
    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { sample_give:'데이터전송' },
        success: function (response) {
            alert(response['msg'])
        }
    });
}

<button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>

✔️서버부터 만들기 name, address, size 정보를 받아서 저장하자.

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }

    db.orders.insert_one(doc)

    return jsonify({'msg': '주문 완료!'})

✔️클라이언트 만들기 이번에는 name, address, size 정보를 보내주자.

function save_order() {
    let name = $('#name').val()
    let address = $('#address').val()
    let size = $('#size').val()

    $.ajax({
        type: 'POST',
        url: '/mars',
        data: { name_give:name, address_give:address, size_give:size },
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

✔️DB에 잘 들어갔는지 확인하기

4. GET 연습(주문 보여주기)

✔️API 만들고 사용하기 - 저장된 주문을 화면에 보여주기(Read→GET)

a. 요청 정보 : URL= /mars, 요청 방식 = GET b. 클라(ajax) → 서버(flask) : (없음) c. 서버(flask) → 클라(ajax) : 전체 주문을 보내주기

✔️서버부터 만들기 받을 것 없이 orders에 주문 정보를 담아서 내려주기만 하면 된다.

5. 전체 완성 코드

• 코드 - 서버 app.py

  from flask import Flask, render_template, request, jsonify
  app = Flask(__name__)
  

from pymongo import MongoClient client = MongoClient('내 URL') db = client.dbsparta

@app.route('/') def home(): return render_template('index.html')

@app.route("/mars", methods=["POST"]) def mars_post(): name_receive = request.form['name_give'] address_receive = request.form['address_give'] size_receive = request.form['size_give']

doc = {
    'name': name_receive,
    'address': address_receive,
    'size': size_receive
}

db.orders.insert_one(doc)

return jsonify({'msg': '주문 완료!'})

@app.route("/mars", methods=["GET"]) def mars_get(): orders_list = list(db.orders.find({},{'_id':False})) return jsonify({'orders':orders_list})

if name == 'main': app.run('0.0.0.0', port=5000, debug=True)

- 코드-클라이언트 index.html

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

<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet">

<title>선착순 공동구매</title>

<style>
    * {
        font-family: 'Gowun Batang', serif;
        color: white;
    }

    body {
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.aitimes.com/news/photo/202010/132592_129694_3139.jpg');
        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 > table {
        margin : 40px 0;
        font-size: 18px;
    }

    option {
        color: black;
    }
</style>
<script>
    $(document).ready(function () {
        show_order();
    });
    function show_order() {
        $('#order-box').empty()
        $.ajax({
            type: 'GET',
            url: '/mars',
            data: {},
            success: function (response) {
                let rows = response['orders']
                for (let i = 0; i < rows.length; i++) {
                    let name = rows[i]['name']
                    let address = rows[i]['address']
                    let size = rows[i]['size']

                    let temp_html = `<tr>
                                        <td>${name}</td>
                                        <td>${address}</td>
                                        <td>${size}</td>
                                      </tr>`
                    $('#order-box').append(temp_html)
                }

            }
        });
    }
    function save_order() {
        let name = $('#name').val()
        let address = $('#address').val()
        let size = $('#size').val()

        $.ajax({
            type: 'POST',
            url: '/mars',
            data: { name_give:name, address_give:address, size_give:size },
            success: function (response) {
                alert(response['msg'])
                window.location.reload()
            }
        });
    }
</script>

• 들어가기 전에: GET, POST 요청타입

  ❗️은행의 창구가 API와 같다는 것을 기억하시나요? 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "방식"이 존재함 HTTP 라는 통신 규약을 따른다는 거 잊지 않으셨죠? 클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려줌

• GET, POST 방식 여러 방식(링크)이 존재하지만 우리는 가장 많이 쓰이는 GET, POST 방식에 대해 다루겠습니다. ✔️GET→통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

              →     데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달                   →     예: google.com?q=북극곰

  ✔️POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때

                       예) 회원가입, 회원탈퇴, 비밀번호 수정
              →     데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

✍️ GET, POST 요청에서 클라이언트의 데이터를 받는 방법

• GET 요청 확인 Ajax코드

  $.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

  /test라는 창구에서 title_give(=주민등록증)라는 이름으로 '봄남은간다'라는 데이터(=주민등록증 번호)를 내가 가지고 갈게!
• GET 요청 API코드

  @app.route('/test', methods=['GET'])
  def test_get():
  title_receive = request.args.get('title_give')
  print(title_receive)
  return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

• POST 요청 Ajax 코드

  $.ajax({
  type: "POST",
  url: "/test",
  data: { title_give:'봄날은간다' },
  success: function(response){
  console.log(response)
  }
  })

• POST 요청 API코드

  @app.route('/test', methods=['POST'])
  def test_post():
  title_receive = request.form['title_give']
  print(title_receive)
  return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

  /test라는 창구는 같은데 GET, POST에 따라 나눠짐

우리는 컴퓨터가 한 대니까....같은 컴퓨터에다가 서버도 만들고 요청도 할거다. 즉, 클라이언트=서버 이것을 바로 "로컬 개발환경"이라고 한다.

⭐️Flask 시작하기 - 서버만들기

1. Flask 기초: 기본 실행

• Python에서 Flask 패키지 설치하기 Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있습니다. (예시) 프레임워크를 쓰지 않으면 태양초를 빻아서 고추장을 만드는 격! 프레임워크는 3분 요리/소스 세트라고 생각하자.
• app.py 파이썬 파일을 만들어 아래 코드를 붙여넣기: 이름은 아무거나 해도 상관없지만 통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름 지음

  # Flask 시작 코드
  

from flask import Flask app = Flask(name)

@app.route('/') def home(): return 'This is Home!'

if name == 'main':
app.run('0.0.0.0',port=5000,debug=True)

- 이제 크롬에서 http://localhost:5000/ 으로 접속하면 화면에 This is Home!이라는 메시지가 보이게 된다.
#### 2. Flask 기초: URL 나눠보기

from flask import Flask app = Flask(name)

@app.route('/') def home(): return 'This is Home!'

@app.route('/mypage') def mypage():
return 'This is My Page!'

if name == 'main':
app.run('0.0.0.0',port=5000,debug=True)

- URL 별로 함수명이 같거나 route('/')내의 주소가 같으면 안됨

### ⭐️Flask 시작하기 - HTML 파일 주기
- 기본 폴더구조를 항상 이렇게 세팅하고 시작해야 한다.
> 프로젝트 폴더 안에,
 ㄴstatic 폴더 (이미지, css파일을 넣어둡니다)
 ㄴtemplates 폴더 (html파일을 담아두고 불러옴)
 ㄴapp.py 파일
 ❗️폴더와 파일은 다르니 구별하기
 - html파일 불러오기
 Flask 내장 함수 render_template를 이용한다.

from flask import Flask, render_template app = Flask(name)

URL 별로 함수명이 같거나,

route('/') 등의 주소가 같으면 안됩니다.

@app.route('/') def home(): return render_template('index.html')

if name == 'main': app.run('0.0.0.0', port=5000, debug=True) ```

• 지니뮤직 사이트
• 순위 / 곡 제목 / 가수를 스크래핑 해보자!
• 👻힌트

  1) 출력 할 때는 print(rank, title, artist) 사용 2) 앞에서 두 글자만 끊기! text[0:2] 를 사용하기 3) 순위와 곡제목이 깔끔하게 나오지 않을 거다. 옆에 여백이 있다던가, 다른 글씨도 나온다던가.. 파이썬 내장 함수인 strip() 구글링 해보기

🔥 내가 작성한 코드 & 생각

import requests
from bs4 import BeautifulSoup

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

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

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

for song in songs:
    rank = song.select_one('td.number').text[0:2].rstrip()
    title = song.select_one('td.info > a.title.ellipsis').text.lstrip()
    artist = song.select_one('td.info > a.artist.ellipsis').text

    if "19금" in title:
        print(rank, title.strip("19금").lstrip(), artist)
    else:
        print(rank, title, artist)

1. 일단 크롬에 사이트 켜놓고 어떤 태그가 사용됐고, 어디까지인지 확인했다.
2. rank를 text로 가져오니 순위 외에 뒤에 '20위 상승' 등의 덧붙는 글자들이 있어서 text[0:2]로 삭제함
3. title과 artist는 같은 td.info에 있으나 클래스가 달라서 선택자에서 차이가 난다.
4. print할 시 여백이 매우 존재하기 때문에 rstrip, lstrip로 제거해줬다. 공백 제거하는거 같은데 r이 오른쪽이겠지

❗️여기까지 해줬는데 노래 중 Justin Bieber에 Peaches가 앞에 "19금" 단어가 붙어서 제거해 줘야 한다.

이거 하나만 그런 거라서 text[]로 해보자니 안 될 것 같아서 if 문을 써봤다. title 내에 "19금" 글자가 있으면 제거 하고 공백을 조정하라는...일단 요기까지 내가 해봤는데 잘 된다.

과연 숙제 답안 코드로 올라온 것과 차이가 얼마나 날까? ✔️ 3주차 숙제 답안 코드

import requests
from bs4 import BeautifulSoup

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

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

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

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

이때는 peaches가 없었나; 별 다른 내용이 없네 곡 순위 리스트 중에 제일 좋아하는 노래로 머리를 쓴 게 아이러니🫠

웹개발 종합반 3주차 소감💕

파이썬 패키지를 통한 크롤링과 mongoDB 연결을 배웠다. 1~2주차가 프론트엔드라고 하면 3주차는 백엔드인건가? 구분이 맞나? 암튼 4주차부터 2개가 합쳐진다는데 어떻게 연결하고 진행되는지 궁금하다! 암튼 여기까지는 할만했음😙

• 네이버 영화에서 순위, 영화 제목, 평점을 가져와 DB에 저장해 보자.

  import requests
  from bs4 import BeautifulSoup
  

from pymongo import MongoClient client = MongoClient('mongodb+srv://test:sparta@cluster0.55vah.mongodb.net/Cluster0?retryWrites=true&w=majority') db = client.dbsparta

URL을 읽어서 HTML를 받아오고,

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

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦

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

select를 이용해서, tr들을 불러오기

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

movies (tr들) 의 반복문을 돌리기

for movie in movies: # movie 안에 a 가 있으면, a_tag = movie.select_one('td.title > div > a') if a_tag is not None: rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기 title = a_tag.text # a 태그 사이의 텍스트를 가져오기 star = movie.select_one('td.point').text # td 태그 사이의 텍스트를 가져오기 print(rank,title,star)

#### 2. (연습_Quiz) 웹스크래핑 결과 이용하기
** (1) 영화제목 '가버나움'의 평점을 가져오기**
 ✍️내가 써 본 코드

from pymongo import MongoClient client = MongoClient('mongodb+srv://test:sparta@cluster0.wu00c.mongodb.net/Cluster0?retryWrites=true&w=majority') db = client.dbsparta

movie = db.movies.find_one({'title':'가버나움'}) print(movie['score'])

DB에서 pymongo로 찾는건데 논점 파악 못 하고 bs4로 찾고 있었네...🥹

** (2) '가버나움'의 평점과 같은 평점의 영화 제목들을 가져오기**
 ✍️내가 써 본 코드

from pymongo import MongoClient client = MongoClient('mongodb+srv://test:sparta@cluster0.wu00c.mongodb.net/Cluster0?retryWrites=true&w=majority') db = client.dbsparta

all_movies = list(db.movies.find({},{'_id':False})) gover = db.movies.find_one({'title': '가버나움'})['score']

for movie in all_movies: if gover == movie['score']: print(movie['title'])

나는 가버나움의 평점을 변수 gover로 지정하고 for 문 안에서 만약 저 평점과 같은게 있으면 title을 찾아내! 이렇게 썼다.
_🔥아래는 완성 코드로 제시된 코드_

target_movie = db.movies.find_one({'title':'가버나움'}) target_star = target_movie['star']

movies = list(db.movies.find({'star':target_star}))

for movie in movies: print(movie['title'])

완성 코드는 내가 해석한 바에 따르면 아예 if문 그런거 없이 가버나움의 평점과 같은 평점을 변수로 아예 지정한 것 같다.

** (3) '가버나움' 영화의 평점을 0으로 만들기**
 ✍️내가 써 본 코드

from pymongo import MongoClient client = MongoClient('mongodb+srv://test:sparta@cluster0.wu00c.mongodb.net/Cluster0?retryWrites=true&w=majority') db = client.dbsparta

db.movies.update_one({'title': '가버나움'}, {'$set': {'score': 0}})

``` 오 쉽다 이러고 바로 바꿨는데 영상 보니 주의할점! 이러면서 바꿀 부분을 설명해주네;; 저렇게 쓰면 score가 0으로 입력되어서 '숫자'로 입력된다. ❗️그런데 데이터 저장된 거 보면 따옴표 있고 모두 '문자열'로 저장되어져 있다. 그러니까 우리도 문자열로 저장하기!!

짤막 16일차 후기

퇴근하고 공부하다가 중간에 밖에서 밥 먹고 다시 와서 하자니 벌써 10시 30분...이 됐다. 그래도 안 빠뜨리고 하루에 조금씩 공부하다니! 대단해😎...그런데 오늘 퀴즈 영상은 5분짜리인데 나는 한 20~30분 한 듯...분발하자

• pymongo : mongoDB라는 프로그램을 파이썬 내에서 조작하려면 설치가 필요한 라이브러리
• 패키지 설치 2개 : pymongo, dnspython
• pymongo로 조작하기(기본 코드)

  from pymongo import MongoClient
  client = MongoClient('여기에 URL 입력')
  db = client.dbsparta

  ❗️'여기에 URL 입력' 은 어떤 URL이냐면 아래 mongoDB 화면에서 가져와야 한다.

• mongoDB Atlas 화면에서 Connect your application 클릭 (Driver: python, Version: 3.6 or later
• 이미지에 적힌 code 내용 중 myFirstDatabase 이 부분은 이미지 상단에 적힌 'Connet to Cluster0' 중 Cluster0으로 변경

🔥아래 코드를 입력해서 데이터를 넣어보자!

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

db.users.insert_one(doc)

그럼 이 데이터는 어디에 어떻게 저장되는 것일까?

왼쪽에 있는 저 users는 뭘까? db.users.insert_one(doc) 위의 코드 작성할 때 적은 부분이다. 컬렉션이라고 부른다. 아무리 데이터를 막 집어 넣을 수 있다고 하더라도 좀 비슷한 애들끼리 모아놓아야 되지 않겠습니까!

2. pymongo로 DB 조작하기

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

• users라는 데에 가서 업데이트를 하는데 조건이 뭐냐면 name이 bobby인 애를 찾아 가지고 age를 19로 만들어라!

☘️ pymongo 코드 요약

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

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

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

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

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

1. DB는 왜 쓰는 것일까?

= 우리가 방 정리를 하는 이유는 무엇일까? 🔥바로 나중에 잘 찾기 위해서. 잘 뽑아 쓰기 위해서 ❗️교보문고에 가서 책을 찾는다고 하면? 꽂혀진 방법대로 찾아야 쉽게 찾을 수 있음(섹션→출판사→책제목) 우리 눈에 보이진 않지만 사실 DB에는 Index라는 순서로 데이터들이 정렬되어 있음

2. DB의 두 가지 종류

• RDBMS(SQL)

  행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사함. 데이터 50만 개가 적재된 상태에서, 갑자기 중간에 열을 하나 더하기는 어려울 것임. 그러나, 정형화되어 있는 만큼, 데이터의 일관성이나 / 분석에 용이함 ❗️초기 스타트업 같은 경우는 회사의 아직 체계도 안 잡혀 있고 성장해 나가는 시기이기에 그럴 때마다 유연하게 대처가 어려울 수 있음. 중간 중간에 수정하기가 어려우니까! ex) MS-SQL, My-SQL 등

• No-SQL

  딕셔너리 형태로 데이터를 저장해두는 DB. 고로 데이터 하나 하나 마다 같은 값들을 가질 필요가 없게 됨. 자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족함. ex) MongoDB

3. DB의 실체에 관하여

✍️ DB는 무엇일까? 특별한 컴퓨터인가? 간단하게 말하면 우리가 쓰는 프로그램과 같은 것. 데이터를 잘 쌓고 잘 가져오는 그런 프로그램. 그런데 요새는 클라우드 형태로 제공해주는 곳들이 많음(요새 트렌드임) 유저가 몰리거나 / DB를 백업해야 하거나 / 모니터링 하기가 아주 용이하기 때문!

4. MongoDB 시작하기

• 가입하기 : 구글로 로그인하고 Accept Privacy..Service에 체크→Submit
• preferred language로 Python 선택
• Shared를 클릭하고 넘어가기
• - 연결 준비하기* 1) Allow Access from Anywhere 클릭 → Add IP address 클릭 2) Username, Password를 아래와 같이 입력 → Create Database User 클릭 3) Choose a connection method 클릭

• 어떤 걸 스크래핑 할 건지? 패키지 추가 설치하기 : bs4 (beautifulsoap4)

  크롤링을 하려면 2가지 일을 해야 되는데 첫번째는 요청해서 해당 html을 가져오는거(그거는 request 라이브러리로 해결), 두번째는 그 안에서 영화 제목을 찾는 거(이게 bs4가 도와줄 부분)

• 크롤링 기본 세팅

  import requests
  from bs4 import BeautifulSoup
  

타겟 URL을 읽어서 HTML를 받아오고,

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

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦

soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨

이제 코딩을 통해 필요한 부분을 추출하면 된다.

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

#############################

(입맛에 맞게 코딩)

#############################

headers는 우리가 코드에서 콜을 날리는데 그게 마치 우리가 브라우저에서 콜을 날린 것처럼, 사람인 것 처럼 해주려고 쓰는 것.
✔️url만 필요할 때마다 바꿔서 사용한다.

#### 2. beautifulsoup을 사용하는 방법
- 태그 안의 텍스트를 찍고 싶을 때 → 태그.text
태그 안의 속성을 찍고 싶을 때 → 태그['속성']

선택자를 사용하는 방법 (copy selector)

soup.select('태그명') soup.select('.클래스명') soup.select('#아이디명')

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

태그와 속성값으로 찾는 방법

soup.select('태그명[속성="값"]')

한 개만 가져오고 싶은 경우

soup.select_one('위와 동일')

- chrome에서 영화 제목 부분에 오른쪽 버튼-검사-해당 부분 오른쪽 버튼-Copy > Copy selector (선택자 복사)
> 그린북☘️ : #old_content > table > tbody > tr:nth-child(3) > td.title > div > a
가버나움👊 : #old_content > table > tbody > tr:nth-child(4) > td.title > div > a

아하! 둘의 Copy selector에서 어떤 부분은 같고 어디는 다르구나!
- ![](https://velog.velcdn.com/images/ddabong-dochi/post/86fe2aaf-9ffd-43e4-b5d6-5505bf846347/image.png)

import requests from bs4 import BeautifulSoup

URL을 읽어서 HTML를 받아오고,

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

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦

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

select를 이용해서, tr들을 불러오기

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

movies (tr들) 의 반복문을 돌리기

for movie in movies: # movie 안에 a 가 있으면, a_tag = movie.select_one('td.title > div > a') if a_tag is not None: # a의 text를 찍어본다. print (a_tag.text)

#### 3. (연습) 웹스크래핑 더 해보기 (순위, 제목, 별점)
**😘 아래와 같이 보이면 완성!**
![](https://velog.velcdn.com/images/ddabong-dochi/post/e9628c74-1cd7-4b3e-beef-0ab260a2df95/image.png)
**✍️ 바로 영상 보지 않고 혼자 해보기**
- 스스로 해본 코드다. 하다가 어려웠던 부분이 img 태그에서 alt 속성만 나타내기.

import requests from bs4 import BeautifulSoup

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

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

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

for movie in movies : rank = movie.select_one('img') title = movie.select_one('td.title > div > a') score = movie.select_one('td.point')

# 중간에 영화제목 구분선으로 '가로선'이 있어서 none으로 나오기 때문에 if문을 한번 거침
if rank != None :
    print(rank['alt'], title.text,score.text)

``` 위 코드 중에서 img로만 선택자 했는데 그거 보다는 rank = movie.select_one('td:nth-child(1) > img') 이렇게 하는게 더 정확한 것 같다.(Copy selector 사용)

• 변수&기본연산
• 자료형

  is_number = True # True 또는 False -> "Boolean"형이 들어갈 수도 있습니다.
  

a_list = [] a_list.append(1) # 리스트에 값을 넣는다 a_list.append([2,3]) # 리스트에 [2,3]이라는 리스트를 다시 넣는다

a_list의 값은? [1,[2,3]]

a_list[0]의 값은? 1

a_list[1]의 값은? [2,3]

a_list[1][0]의 값은? 2

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

people = [{'name':'bob','age':20},{'name':'carry','age':38}]

people[0]['name']의 값은? 'bob'

people[1]['name']의 값은? 'carry'

- 함수 : 이름은 마음대로 정할 수 있음!

수학문제에서

f(x) = 2*x+3 y = f(2) y의 값은? 7

참고: 자바스크립트에서는

function f(x) { return 2*x+3 }

파이썬에서

def f(x): return 2*x+3

y = f(2) y의 값은? 7

- 조건문 : if/else로 구성!

def is_adult(age): if age > 20: print('성인입니다') # 조건이 참이면 성인입니다를 출력 else: print('청소년이에요') # 조건이 거짓이면 청소년이에요를 출력

is_adult(30)

무엇이 출력될까요?

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

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

count = 0 for fruit in fruits: if fruit == '사과': count += 1

print(count)

사과의 갯수를 세어 보여줍니다.

#### 2. 파이썬 크롤링하기
- 파이썬 패키지 설치하기
> ✔️ 남들이 만들어 놓은 라이브러리를 사용해야 하며, 이걸 패키지라고 부름(일종의 기능 묶음)
✔️ 가상환경(virtual environmenet)란? 프로젝트별로 패키지들을 담을 공구함. 라이브러리를 모아두는 곳!
✔️ 패키지 설치 = 외부 라이브러리 설치
- requests 라이브러리 설치하기(일종의 Ajax 같은 역할을 함)
> 파이참 - 파일 - 설정에서 project interpreter 화면에서 + 버튼을 눌러 패키지 설치하기

#### 3. 파이썬 requests 패키지 써보기
- 미세먼지 OpenAPI로 60 이상인 구와 수치 나타내기(확실히 Ajax 때 썼던 것보다 쉬움)

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

r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair') rjson = r.json()

rows = rjson['RealtimeCityAir']['row']

for row in rows: gu_name=row['MSRSTE_NM'] gu_mise=row['IDEX_MVL']

if gu_mise < 50 :
    print(gu_name, gu_mise)

• javascript 로딩 후 바로 실행

  $(document).ready(function(){
    listing();
  });
  

function listing() { console.log('화면 로딩 후 잘 실행되었습니다'); }

```

• API 데이터를 각각 가져오는 변수까지는 만들었는데 그 이후부터 카드에 어떻게 적용할 지를 잘 모르겠다. 현재 막힌 부분임. (1)div 태그 어디에 id 선택자를 넣어 지정할 지 이 부분이 ?? 상태 (2)받아오는 숫자 데이터에 따라 별을 표시해야 하는데 어떻게 할 지.

  ✍️ 위 질문에 관한 고찰 사항 (1) div 태그가 어디 범위를 나타내고 있는지 console로 확인하고 선택자를 지정하는게 좋을 것 같다. (2) let star = rows[i]['star'] star 변수를 만들어 데이터 값을 받아온 후 let star_image = '⭐️'.repeat(star) 위 처럼 image 관련 변수를 생성하여 처리함.

• 아래 사진은 '스파르타피디아' 화면에서 div 보는 모습이다.

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

• 웹개발 종합반 2주차 숙제를 마무리하며 복습의 시간으로 배운 것 정리 및 궁금한 점 기록하기

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

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

<title>국내가수 팬명록 전문 사이트</title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap" rel="stylesheet">

<style>
    * {
        font-family: 'Nanum Myeongjo', serif;
    }
    .mytitle {
        height: 250px;
        width: 100%;
        background-image : linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://thepublic.kr/news/data/20211211/p1065572405381876_990_thum.jpg");
        background-position: center 10%;
        background-size: cover;

        color: white;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mypost {
        max-width: 500px;
        width: 95%;
        margin: 20px auto 0px auto;
        box-shadow: 0px 0px 3px 0px gray;
        padding: 20px;
    }
    .last-button {
        margin-top: 15px;
    }
    .card{
        max-width: 500px;
        width: 95%;
        margin: 20px auto 0px auto;
    }
</style>
<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
            data: {},
            success: function (response) {
                let temp = response['temp']
                $('#temp').text(temp);
            }
        })
    });
</script>

☘️Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

✍️** 위 코드 중 "현재 기온" 글자에서 사용된 span 태그는 무엇일까?** div, p 태그는 block level element고, span 태그는 inline level elemenet이다. p 태그는 문단을 이뤄서 줄바꿈+문단을 이루는 줄이 통째로 선택된다. span 태그는 설정한 span 태그마다 다른 기능을 지정해 줄 수 있다.

💕 웹개발 종합반 2주차 마무리 후기

현재까지는 코딩이 매우 재밌다! 쉬운 것만 해서 그런지 아직까지는 흥미있게 하고 있음. 항상 코딩 공부하면서 이걸 다 외워야 하나, 다 이해해야 하나 하는 생각이 있어서 '완벽'을 추구했다. 막상 영상 보니 정리만 잘 해둔 후 가져다만 쓰면 OK인 것 같다. 짜깁기는 또 내가 잘 하지..😎 html, css, bootstrap 등 개념 정리하며 복습 마무리 끝!

• Ajax 퀴즈(1) 실시간 따릉이 현황 업데이트
• Ajax 퀴즈(2) 따릉이 대수가 5대 미만인 곳은 빨갛게 표시하자!

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

<style type="text/css">
    div.question-box {
        margin: 10px 0 20px 0;
    }

    table {
        border: 1px solid;
        border-collapse: collapse;
    }

    td,
    th {
        padding: 10px;
        border: 1px solid;
    }

    .urgent {
        color: red;
        font-weight: bold;
    }
</style>

<script>
    function q1() {
        $('#names-q1').empty();
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulbike",
            data: {},
            success: function (response) {
                let rows = response["getStationList"]["row"];
                for (let i = 0; i < rows.length; i++) {
                    let rack_name = rows[i]['stationName'];
                    let rack_cnt = rows[i]['rackTotCnt'];
                    let bike_cnt = rows[i]['parkingBikeTotCnt'];
                    let temp_html = '';
                    if (bike_cnt < 5) {
                        temp_html = `<tr class="urgent">
                            <td>${rack_name}</td>
                            <td>${rack_cnt}</td>
                            <td>${bike_cnt}</td>
                          </tr>`
                    } else {
                        temp_html = `<tr>
                            <td>${rack_name}</td>
                            <td>${rack_cnt}</td>
                            <td>${bike_cnt}</td>
                          </tr>`
                    }
                    $('#names-q1').append(temp_html);
                }
            }
        })
    }
</script>

jQuery+Ajax의 조합을 연습하자!

<hr />

<div class="question-box">
    <h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
    <p>모든 위치의 따릉이 현황을 보여주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <table>
        <thead>
            <tr>
                <td>거치대 위치</td>
                <td>거치대 수</td>
                <td>현재 거치된 따릉이 수</td>
            </tr>
        </thead>
        <tbody id="names-q1">
        </tbody>
    </table>
</div>

<style type="text/css">
  div.question-box {
    margin: 10px 0 20px 0;
  }
  div.question-box > div {
    margin-top: 30px;
  }

</style>

<script>
  function q1() {
    $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/rtan",
      data: {},
      success: function(response){
          let imgurl = response['url'];
          $("#img-rtan").attr("src", imgurl);

          let msg = response['msg'];
          $("#text-rtan").text(msg);
        }
      })
  }
</script>

JQuery+Ajax의 조합을 연습하자!

<hr/>

<div class="question-box">
  <h2>3. 르탄이 API를 이용하기!</h2>
  <p>아래를 르탄이 사진으로 바꿔주세요</p>
  <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
  <button onclick="q1()">르탄이 나와</button>
  <div>
    <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
    <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
  </div>
</div>