inwoo

220221 웹개발종합반 - 5주차

Mon, 21 Feb 2022 11:28:26 GMT

5주차 1회독 회고

오늘 수업이 제일 재밌었당 ㅎ.ㅎ 얼른 2회독 빠르게 돌리자! siro-haku.shop

오늘 수업에서 설치한 것

Filezilla

버킷리스트

프로젝트 세팅

flask 폴더 구조 만들기 : static, templates 폴더, app.py 만들기
패키지 설치하기 : flask, pymongo, dnspython
버킷리스트 - 뼈대 준비
app.py, index.html 준비
mongoDB Atlas 창 띄어놓기
POST (기록하기)

API 만들고 사용하기 - 버킷리스트 기록 API (Create -> POST)
요청정보 : URL=/bucket, 요청 방식 = POST
클라이언트(ajax) -> 서버(flask) : bucket
서버(flask) -> 클라이언트(ajax) : 기록 완료되었다는 메세지 전송

버킷리스트 업데이트를 위해 서버에서 번호를 만들어 함께 넣어주어야 함

클라이언트와 서버 연결 확인

서버 만들기 : bucket 정보를 받아서 저장 + 버킷 번호, 완료여부를 함께 넣어주어야 함

@app.route("/bucket", methods=["POST"])
def bucket_post():
 bucket_receive = request.form["bucket_give"]

 count = db.bucket.find({},{'_id':False}).count()
 num = count + 1

 doc = {
     'num':num,
     'bucket': bucket_receive,
     'done':0
 }

 db.bucket.insert_one(doc)
 return jsonify({'msg':'등록 완료!'})

클라이언트 만들기 : bucket 정보를 보내주면 됨

function save_bucket(){
 let bucket = $('#bucket').val()
 $.ajax({
     type: "POST",
     url: "/bucket",
     data: {bucket_give:bucket},
     success: function (response) {
         alert(response["msg"])
         window.location.reload() #새로고침
     }
 });
}

완성 확인하기 : DB에 num, bucket, done 잘 들어갔는지 확인

GET연습 (보여주기)

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

요청 정보 : URL= /bucket, 요청 방식 = GET
클라이언트(ajax) → 서버(flask) : X
서버(flask) → 클라이언트(ajax) : 전체 버킷리스트를 보여주기
클라이언트와 서버 연결 확인
서버 만들기 : 받을 것 없이 buckets에 주문정보를 담아서 내려주면 끝
클라이언트 만들기 : 응답을 잘 받아서 for문으로 붙여주면 끝
완성 확인하기 : 버킷리스트가 잘 붙었는지 확인

POST (완료하기)

API 만들고 사용하기 - 버킷리스트 완료 API (Update→ POST)
요청 정보 : URL= /bucket/done, 요청 방식 = POST
클라(ajax) → 서버(flask) : num (버킷 넘버)
서버(flask) → 클라(ajax) : 메시지를 보냄 (버킷 완료!)
클라이언트와 서버 연결 확인
서버 만들기 : 버킷 번호를 받아서, 업데이트 (주의 : num_receive는 문자열로 들어오기 때문에, 숫자로 바꿔줘야 함!)
클라이언트 만들기 : 버킷 넘버를 보여주면 된다. (버킷 넘버는 HTML이 만들어질 때 적히게 된다)
완성 확인하기 : 버킷리스트 항목에 취소선 그어졌는지 확인

내 프로젝트를 서버에 올리기

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

리눅스 명령어 몇 가지

mkdir : 내 위치 아래에 폴더를 하나 만든다. sudo [실행 할 명령어] : 명령어를 관리자 권한으로 실행한다. sudo su : 관리가 권한으로 들어간다.

서버 세팅하기

서버 환경 통일하기
filezilla 이용하여 간단한 python 파일 올려보기
파이썬 파일 실행해보기
```
python test.py
```
서버 환경 세팅 (맥락만 이해하기) 1) 파이썬 (python3 -> python) : python3 명령어를 python으로 사용할 수 있게 하는 명령어 2) pip (pip3 -> pip) : pip3 설치
```
 sudo apt-get update
 sudo apt-get install -y python3-pip
```
: pip3명령어를 pip으로 사용할 수 있게 하는 명령어
```
 sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1
```
3) 포트포워딩 (80포트 -> 5000포트) : 80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어
```
 sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
```

flask 서버 실행

팬명록 완성본을 filezilla로 EC2에 업로드
pip로 패키지 설치
```
pip install flask
```
```
pip install flask
```
다시 flask 서버 실행 python app.py 명령어 사용하여 flask 서버 실행 > 서버 실행이 되면, 크롬에서 접속 (http://[내 EC2 IP]:5000/)
AWS 에서 5000포트 열어주기 : 80포트 = HTTP 접속을 위한 기본 포트/ 5000포트 = flask 기본 포트
포트포워딩 사용하여 포트번호 없애기 > 재접속(http://내아이피)

nohup 설정

SSH 접속을 끊어도 서버가 계속 돌게 하기
```
nohup python app.py &
```

서버 종료하기 - 강제 종료

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

SSH 접속을 종료한 뒤, 브라우저에서 접속하기 (http://내AWS아이피/)

og 태그

og 태그 만들기

static 폴더 아래에 이미지 파일을 넣고, 프로젝트 HTML의 ~ 사이에 코드를 작성

이미지 변경 후, 이전 ogimage가 그대로 나올 경우

카카오톡에서 처음 것을 한동안 저장해놓기 때문

카카오톡 og 태그 초기화 : https://developers.kakao.com/tool/clear/og

220217 웹개발종합반 - 4주차

Thu, 17 Feb 2022 13:31:23 GMT

4주차 1회독 회고

오늘은 HTML과 mongoDB Atlas 클라우드 서비스를 연동해서 서버를 사용해봤다! 헷갈리는 게 많았는데 예제를 반복하니까 좀 친근해졌다! 그동안 들었던 주차 중에서 제일 재밌었다 ㅎㅎ

로컬 개발 환경

같은 컴퓨터에 서버도 만들고, 요청도 함! 즉, 클라이언트 = 서버

Flask 프레임워크

서버를 구동시켜주는 편한 코드 모음 서버를 구동하려면 필요한 복잡한 것들을 쉽게 가져다 사용할 수 있음

Flask 시작 코드

통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름을 지음

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)

Flask : URL 나누기

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

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)

Flask : HTML 파일 불러오기

Flask 서버를 만들 때 기본 폴더 구조 프로젝트 폴더 안에 ㄴ static 폴더 (이미지, css 파일) ㄴ templates 폴더 (html 파일) ㄴ app.py 파일

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)

Flask : API 만들기

GET, POST 방식 복습

GET : 데이터 조회(Read) 요청 시 사용 : 데이터 전달 시, URL 뒤에 물음표를 붙여 key=value로 전달 (예 : google.com?q=북극곰)
POST : 데이터 생성, 변경, 삭제 요청 시 사용 : 데이터 전달 시, 바로 보이지 않는 HTML body에 key:value 형태로 전달

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

예) 클라이언트에서 서버에 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!'})

GET 요청 확인 Ajax코드

$.ajax({
  type: "GET",
  url: "/test?title_give=봄날은간다",
  data: {},
  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!'})

POST 요청 확인 Ajax코드

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

프로젝트 세팅

패키지 설치 : flask, pymongo, dnspython (bs4, requests)

app.py 준비
index.html 준비
mongoDB Atlas 창 띄워두기

POST 연습 (주문 저장)

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

요청정보 = URL(/mars), 요청 방식 = POST

클라이언트(ajaxk) -> 서버(flask) : name, address, size

서버(flask) -> 클라이언트(ajax) : '주문 완료!' 메세지를 보냄

1) 클라이언트와 서버 연결 확인 [서버 코드 : 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'])
        }
    });
}

2) 서버 만들기

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': '주문 완료!'})

3) 클라이언트 만들기

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()
        }
    });
}

4) 완성 확인 (DB에 잘들어갔는지 확인)

GET 연습(주문 보여주기)

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

요청정보 = URL(/mars), 요청 방식 = GET 클라이언트(ajaxk) -> 서버(flask) : 없음 서버(flask) -> 클라이언트(ajax) : 전체 주문을 보내주기

1) 클라이언트와 서버 확인 [서버 코드 : app.py]

@app.route("/mars", methods=["GET"])
def mars_get():
    return jsonify({'msg': 'GET 연결 완료!'})

[클라이언트 코드 : index.html]

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

2) 서버 만들기

받을 것 없이 order에 주문 정보를 담아서 내려주기

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

3) 클라이언트 만들기

응답을 잘 받아서 for문으로 붙여주기

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 = `
                                    ${name}
                                    ${address}
                                    ${size}
                                  `
                $('#order-box').append(temp_html)
            }

        }
    });
}

4) 완성 확인 화면 새로고침 시, DB에 저장된 리뷰가 화면에 표시되는지 확인

조각 기능 구현

API에서 수행해야하는 작업 중 익숙하지 않은 것들은 따로 파이썬 파일을 만들어 실행해보고 잘 되었을 때 코드를 붙여넣을 것

meta 태그 스크래핑 (URL 에서 페이지 정보(제목, 썸네일 이미지, 내용) 가져오기)

: 메타 태그 = 부분에 들어가며, 눈으로 보이는 body외에 사이트의 속성을 설명해주는 태그 (예 : 구글 검색 시 표시될 설명문, 사이트 제목, 카톡 공유 시 표시될 이미지) 크롤링 기본 코드

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')

select_one을 이용해 meta tag를 먼저 가져온다.

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"]')

print(og_image)
print(og_title)
print(og_description)

가져온 meta tag의 content를 가져온다.

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

print(image)
print(title)
print(description)

4주차 숙제

comment랑 comments를 헷갈려서 엄청 헤맸당,,

app.py

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

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.o5gjy.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.homework.insert_one(doc)

    return jsonify({'msg':'응원 메세지 등록 완료!'})

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

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

index.html




    
    
    

    
    
    

    초미니홈피 - 팬명록

    
    
    


    
        백예린 팬명록
        현재기온: 36도
    
    
        
            
            닉네임
        
        
            
            응원댓글

220215 웹개발종합반 - 3주차

Tue, 15 Feb 2022 13:40:49 GMT

3주차 1회독 회고

오늘 수업은 2주차 보다 훨씬 괜찮았지만 파이썬의 반복문이 많이 낯설었고, 웹스크래핑 할 때 뭔가 옵션이 붙는다던지 불러올 친구들을 지정해야하는 게 쉽지않았던 것 같당,,, 이번주에 무조건 5주차 1회독 하고, 담주 2회독까지 열심히 해야겠당!

Python

Python 기본 문법

자료형 - 리스트 형

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

* 자료형 - Dictionary 형

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

a_dict의 값은? {'name':'bob','age':21, 'height':178}

a_dict['name']의 값은? 'bob'

a_dict['age']의 값은? 21

a_dict['height']의 값은? 178

* 반복문

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

for fruit in fruits: print(fruit)

사과, 배, 감, 귤 하나씩 꺼내어 찍힙니다.

* 반복문 - 리스트 예제

def count_fruits(target): count = 0 for fruit in fruits: if fruit == target: count += 1 return count

subak_count = count_fruits('수박') print(subak_count) #수박의 갯수

gam_count = count_fruits('감') print(gam_count) #감의 갯수

* 반복문 - 딕셔너리 예제

people = [{'name': 'bob', 'age': 20}, {'name': 'carry', 'age': 38}, {'name': 'john', 'age': 7}, {'name': 'smith', 'age': 17}, {'name': 'ben', 'age': 27}]

모든 사람의 이름과 나이를 출력해봅시다.

for person in people: print(person['name'], person['age'])

이번엔, 반복문과 조건문을 응용한 함수를 만들어봅시다.

이름을 받으면, age를 리턴해주는 함수

def get_age(myname): for person in people: if person['name'] == myname: return person['age'] return '해당하는 이름이 없습니다'

print(get_age('bob')) print(get_age('kay'))

---
## 웹스크래핑(크롤링)
### select/ select_one 사용법
>태그 안의 텍스트를 찍고 싶을 경우 -> 태그.text
태그 안의 속성을 찍고 싶을 경우 -> 태그['속성']

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)

### beautifulsoup 내 select 참고

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

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

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

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

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

한 개만 가져오고 싶은 경우

soup.select_one('위와 동일')

---
## DB의 두가지 종류
>RDBMS(SQL) : 행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사
No-SQL : 딕셔너리 형태로 데이터를 저장해두는 DB

---
## pymongo로 DB 조작하기
#### 1) DB연결하기 & 데이터 넣기

'users'라는 collection에 {'name':'bobby','age':21}를 넣습니다.

db.users.insert_one({'name':'bobby','age':21}) db.users.insert_one({'name':'kay','age':27}) db.users.insert_one({'name':'john','age':30})

#### 2) 모든 결과 값 보기

모든 데이터 뽑아보기(_id 값은 제외하고 출력)

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

print(all_users[0]) # 0번째 결과값을 보기 print(all_users[0]['name']) # 0번째 결과값의 'name'을 보기

for user in all_users: # 반복문을 돌며 모든 결과값을 보기 print(user)

#### 3) 특정 결과 값을 뽑아 보기

user = db.users.find_one({'name':'bobby'}) print(user)

#### 4) 수정하기

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

user = db.users.find_one({'name':'bobby'}) print(user)

#### 5) 삭제하기

db.users.delete_one({'name':'bobby'})

user = db.users.find_one({'name':'bobby'}) print(user)

---
## 웹스크래핑 결과 저장
>도큐먼트 만들어서 하나씩 insert 할 것

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를 받아오고,

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 태그 사이의 텍스트를 가져오기 doc = { 'rank': rank, 'title': title, 'star': star } db.movies.insert_one(doc)

---
## 웹스크래핑 퀴즈
#### '가버나움'의 평점과 같은 평점의 영화 제목들을 가져오기

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'])

---
## 숙제 참고했던 친구들
> text[0:2] : 앞에서 두글자만 끊기
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')

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) ```

220214_웹개발 종합반 - 2주차

Mon, 14 Feb 2022 10:52:38 GMT

2주차 1회독 회고

오늘 배운 것 : HTML 파일을 받았다는 가정하에, JavaScript로 서버에 데이터를 요청하고 받는 방법/ jQuery를 이용해 JavaScript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보았다! 2주차 수업들어봤는데 익숙하지 않아서 잘 못했던 느낌. 뭔가 계속 돌리고 있긴 한데 처음 접하는 느낌이었고 쉽지 않았다.. 이번주에 5주차 수업까지 1회독 하고 다음주에 2회독 예정,, 얼른 복습하자잉!

Javascript 문법

.includes('') : 괄호안의 문자열이 있으면 True, 없으면 False를 return. .empty(): 내부 태그를 모두 비운다.

jQuery

자주쓰는 jQuery

버튼의 색깔을 바꾼다던가, div 박스를 하나 감추고 싶을 때! 이런 것들을 쉽게 해주는 것 JavaScript와 다른 소프트웨어가 아니라 미리 작성된 JavaScript 코드 사용하기 전에 임포트가 필요(와 사이에 임포트) HTML의 요소들을 조작하는, 편리한 JacaScript를 미리 작성해둔 것 -> 라이브러리 복잡한 코드, 브라우저간의 호환성을 극복 $ : 제이쿼리의 시작

CSS와 마찬가지로, 가리켜야 조작을 할 수 있는데 CSS 선택자 = class 이지만, jQuery는 id 값을 사용한다.
1. input 박스의 값 가져오기
```
  
  영화URL
```
```
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
```

// 입력할때는? $('#url').val('이렇게 하면 입력이 가능');

#### 2. div 보이기/ 숨기기
: id 값을 가리킨 후 .hide()/ .show() 사용

// id 값은 post-box $('#post-box').hide(); $('#post-box').show();

#### 3. 태그 내 html 입력하기
:  ~ 
 내에, 동적으로 html을 넣고 싶을 때 (예 : 포스팅 되면 카드 추가) 카드가 붙는 div에 id를 추가해주어야 함

영화 제목이 들어갑니다

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

⭐⭐⭐

나의 한줄 평을 씁니다

``` #### 3-1. 버튼을 넣어보자! ``` // id 값은 cards-box // .append : 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가 // temp_html : let 으로 내용을 정의 (html코드를 텍스트로 넣을 때 따옴표가 아닌, 백틱 사용) // 이걸 html로 바꾸려면, $(‘#cards-box’).append(temp_html) 사용

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

#### 3-2. 카드를 넣어보자!

// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있음 let title = '영화 제목이 들어갑니다';

let temp_html =


                            
                                
                                
                                    ${title}
                                    여기에 영화에 대한 설명이 들어갑니다.
                                    ⭐⭐⭐
                                    나의 한줄 평을 씁니다

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

---
### jQuery 적용 (포스팅 박스)
#### 포스팅 박스 제어

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

* post-box를 시작부터 감춰두기 
: CSS의 display : none 속성
---
## jQuery 퀴즈에서 몰랐던 친구들
#### 1. input-q1 입력값 가져오기

let email = $('#input-q2').val();

#### 2. 가져온 값에 @가 있으면 info@gmail.com 에서 gamil만 추출한 후, alert(도메인 값); 으로 띄우기

if (email.includes('@')){ let domainWithDot = email.split('@')[1]; let onlyDomain = domainWithDot.split('.')[0]; alert(onlyDomain); }

#### 난 이렇게 써보았당

if(email.includes('@') == true){ alert(email.split('@')[1].split('.'[0]);

#### 3. HTML 붙이기/ 지우기 연습
3-1. 이름을 입력하면 아래 나오게 하기
3-2. 다 지우기 버튼 만들기

function q3() { // 1. input-q3 값을 가져온다. let newName = $('#input-q3').val(); if (newName == '') { alert('이름을 입력하세요'); return; } // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html =

${가져온 값}

) let temp_html = ${newName}; // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!) $('#names-q3').append(temp_html); }

function q3_remove() {

// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용) $('#names-q3').empty(); }

---
## 서버-클라이언트
#### 1. 서버 -> 클라이언트 : JSON 이해하기
* JSON은 Key : Value로 이루어져 있다.
#### 2. 클라이언트 -> 서버 : GET 요청 이해하기
* GET : 데이터 조회를 요청할 때
* POST : 데이터 생성, 변경, 삭제 요청할 때
* ? : 여기서부터 전달할 데이터가 작성된다는 의미
* & : 전달할 데이터가 더 있다는 뜻
---
## Ajax
> Ajax는 jQuery를 임포트한 페이지에서만 동작 가능함

#### Ajax 기본 골격

$.ajax({ type: "GET", // GET 방식으로 요청 url: "여기에URL을입력", // 요청할 url data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 공란) success: function(response){ // 성공하면, 서버에서 준 결과를 response라는 변수에 담아 함수를 실행함 console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 } })

> GET 요청 
: url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2 
POST 요청 
: data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },

#### 개발자도구 콘솔에 찍어보기

$.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulair", data: {}, success: function(response){ // 값 중 도봉구의 미세먼지 값만 가져와보기 let dobong = response["RealtimeCityAir"]["row"][11]; let gu_name = dobong['MSRSTE_NM']; let gu_mise = dobong['IDEX_MVL']; console.log(gu_name, gu_mise); } })

#### 모든 구의 미세먼지 값을 찍어보기

// 1. 미세먼지 데이터가 어디에 있는지 찾기 -> RealtimeCityAir > row 에 있는 미세먼지 데이터를 꺼내기 // 2. 반복문으로 구 데이터 출력해보기 // 3. 구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력하기 $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulair", data: {}, success: function (response) { let mise_list = response["RealtimeCityAir"]["row"]; // row의 값을 mise_list에 담음 for (let i = 0; i < mise_list.length; i++) { let mise = mise_list[i]; // 구 이름, 미세먼지 수치 Key 값의 Value 출력 let gu_name = mise["MSRSTE_NM"]; let gu_mise = mise["IDEX_MVL"]; console.log(gu_name, gu_mise); } } });

---
## jQuery + Ajax 조합 연습
#### 1. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기 (id = names-q1)

#### + 따릉이 대수가 5대 미만인 곳은 빨갛게 표시!

---
## Ajax 연습_이미지, 텍스트 바꾸기
>이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

---
## 2주차 숙제
> 참고) 로딩 후 호출하기

$(document).ready(function(){ alert('다 로딩됐다!') });

220201_웹개발 종합반 - 1주차

Tue, 01 Feb 2022 14:20:35 GMT

웹은 처음만들어보는데요,,,

웹개발종합반 1주차 강의 1회독했다!-! HTML이 가물가물해서 오늘 좀 얼레벌레 따라간 것 같다,, 오늘부터 노션말구 벨로그에 공부한 거 정리해봅시당

HTML, CSS

HTML = 큰 틀, CSS = 꾸미기

HTML : head 안에는 페이지의 속성 정보(눈에 안 보이는 필요한 것들을 담는 것), body 안에는 페이지의 내용을 담는다.

CSS에서 mytitle라는 클래스 가리킬 때 이 칭구를 써줘야 한다.

.mytitle {
...
}

CSS 태그

background-color : 영역 확인할 때 사용하니까 편했다. background-image background-size background-position border-radius margin : 바깥 여백 padding : 안쪽 여백

margin 참고 (만들어둔 화면을 가운데로 가져올 때) : width 주고 margin : auto 사용

배경 넣을 때 참고

/*이미지 URL 앞에 사용된 코드 = 이미지를 어둡게 할 때 사용*/
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("이미지 URL");
background-position: center;
background-size: cover;

정렬할 때 참고

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

폰트 넣기

link 태그 복사 > head 영역에

CSS 복사해서 style 영역 내에 ```

{ font-family: 'Gowun Dodum', sans-serif; }

### 모바일 처리
개인적으로 처음 생각해보게 된 것이라 신기했다,,,!
모바일에서는 가로 사이즈를 잘 해줘야 한다고 한다.
어디서나 500px로 (width: 500px)
> 신기한 거 
: max 값 전까지 % 지정, 넘으면 max 값으로 표시

max-width: 500px
width: 95%

JavaScript

크롬 개발자도구 열어서 콘솔 탭에서 작성해보았다. 띄어놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있다는 게 신기했던 것 같다.... console.log(변수) : 개발자가 결과값을 보기 편하도록 콘솔 창에 괄호 안의 값을 출력해준다. let : 변수 선언 리스트 : ArrayList 같이 순서를 지켜서 가지고 있는 형태 딕셔너리 : HashMap 같이 Key-Value 값의 묶음

prac.html





    
    
    스파르타코딩클럽 | HTML 기초



    
    나는 구역을 나누죠
    나는 문단이에요
    
         bullet point!1 
         bullet point!2 
    

    
    h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.
    h2는 소제목입니다.
    h3~h6도 각자의 역할이 있죠. 비중은 작지만..
    
    span 태그입니다: 특정 글자를 꾸밀 때 써요
    
    a 태그입니다:  하이퍼링크 
    
    img 태그입니다: 
    
    input 태그입니다: 
    
    button 태그입니다: 
    
    textarea 태그입니다: 나는 무엇일까요?

login.html




    
    로그인 페이지
    
    


    
        
            로그인 페이지
            아이디, 비밀번호를 입력해주세요
        
        ID: 
        PW:

index.html





    
    

    
    
    

    스파르타코딩클럽 | 부트스트랩 연습하기
    
    




    내 생애 최고의 영화들
    



    
        
        영화 URL
    

    
        별점
        
    

    
            
        코멘트
    

    
        
        
    


    
        
            
                
                
                    여기에 제목이 들어갑니다.
                    여기에 내용이 들어가지렁
                    💗
                    여기에 코멘트 들어갑니당
                
            
        
        
            
                
                
                    여기에 제목이 들어갑니다.
                    여기에 내용이 들어가지렁
                    ⭐⭐⭐
                    여기에 코멘트 들어갑니당
                
            
        
        
            
                
                
                    여기에 제목이 들어갑니다.
                    여기에 내용이 들어가지렁
                    ⭐⭐⭐
                    여기에 코멘트 들어갑니당
                
            
        
        
            
                
                
                    여기에 제목이 들어갑니다.
                    여기에 내용이 들어가지렁
                    ⭐⭐⭐
                    여기에 코멘트 들어갑니당

homework.html





    
    

    
    
    

    스파르타코딩클럽 | 부트스트랩 연습하기
    

    



    
        백예린 팬명록
    
    
        
            
            닉네임
        
        
                        
            응원 댓글
        
        
            
        
    
    
        
            
                백예린 앨범 많관부
                메론빵 
                
            
        
    
    
        
            
                백예린 앨범 많관부
                메론빵 
                
            
        
    
    
        
            
                백예린 앨범 많관부
                메론빵

inwoo

220221 웹개발종합반 - 5주차

5주차 1회독 회고

오늘 수업에서 설치한 것

버킷리스트

프로젝트 세팅

버킷리스트 - 뼈대 준비

POST (기록하기)

GET연습 (보여주기)

POST (완료하기)

내 프로젝트를 서버에 올리기

리눅스 명령어 몇 가지

서버 세팅하기

flask 서버 실행

nohup 설정

og 태그

220217 웹개발종합반 - 4주차

4주차 1회독 회고

로컬 개발 환경

Flask 프레임워크

Flask 시작 코드

Flask : URL 나누기

Flask : HTML 파일 불러오기

Flask : API 만들기

프로젝트 세팅

POST 연습 (주문 저장)

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

GET 연습(주문 보여주기)

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

조각 기능 구현

meta 태그 스크래핑 (URL 에서 페이지 정보(제목, 썸네일 이미지, 내용) 가져오기)

4주차 숙제

app.py

index.html

백예린 팬명록

220215 웹개발종합반 - 3주차

3주차 1회독 회고

Python

Python 기본 문법

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

a_list[0]의 값은? 1

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

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

a_dict의 값은? {'name':'bob','age':21, 'height':178}

a_dict['name']의 값은? 'bob'

a_dict['age']의 값은? 21

a_dict['height']의 값은? 178

사과, 배, 감, 귤 하나씩 꺼내어 찍힙니다.

모든 사람의 이름과 나이를 출력해봅시다.

이번엔, 반복문과 조건문을 응용한 함수를 만들어봅시다.

이름을 받으면, age를 리턴해주는 함수

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

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

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

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

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

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

한 개만 가져오고 싶은 경우

'users'라는 collection에 {'name':'bobby','age':21}를 넣습니다.

모든 데이터 뽑아보기(_id 값은 제외하고 출력)

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

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

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

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

220214_웹개발 종합반 - 2주차

2주차 1회독 회고

Javascript 문법

jQuery

자주쓰는 jQuery

1. input 박스의 값 가져오기

영화 제목이 들어갑니다

${title}

220201_웹개발 종합반 - 1주차

웹은 처음만들어보는데요,,,

HTML, CSS

CSS 태그

배경 넣을 때 참고

정렬할 때 참고

폰트 넣기

JavaScript