html/css/js

2021-06-28 (모바일 OG변경)

ParkStelth — Mon, 28 Jun 2021 16:00:50 +0900

모바일 OG 변경

2021-06-28 (AWS로 서버 구축)

ParkStelth — Mon, 28 Jun 2021 11:43:58 +0900

AWS에서 인스턴스 생성 - 우분투 18.04 - 새 키페어 생성

#1. 인스턴스 종료시 내 인스턴스 완전종료

AWS서버에 리눅스접속 : git bash - [ssh -i 키페어드랍 ubuntu@인스턴스 퍼블릭 주소] - YES

AWS서버에 파일 올리기 : 파일질라 - SFTP[인스턴스퍼블리주소:22] - 파일 드랍

AWS서버에 공통 EC2환경 세팅 : 파일 initial_ec2.sh 다운 후 sudo chmod 755로 권한 상승 - ./initial_ec2.sh 설치

initial_ec2.sh

0.00MB

AWS의 리눅스환경 파이썬 패키지 설치 : pip install 설치 할 패키지

AWS 서버 포트 열어주기 : 보안그룹-인바운드 규칙 - 5000포트 파이썬 27017 몽고DB 80 http 기본포트

AWS-ROBO 3T 연결 : CREAT - 이름설정,AWS주소설정,아이디비밀번호설정

AWS-ROBO 3T 패스워드 변경 : initial_ec2.sh 파일 열고 ID,PW변경

올릴 .PY파일 client = MongoClient('mongodb://test:test@localhost', 27017) 부분 아이디,비번 변경

#2. 포트포워딩을 통해 5000으로 들어오는 요청을 기본 포트 80으로 보내어 포트 생략하도록함

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

git bash 종료후 계속 서버 작동: nohup python 파일.py &

git bash 종료후 계속 서버 작동 종료 : ps -ef | grep '파일.py' 하여 파일 번호 확인후 kill -9 파일번호

localhost를 쓸지 mongo 27017를 쓸지 잘 설정해야함.

2021-06-26 (Mystar 만들기)

ParkStelth — Sat, 26 Jun 2021 15:37:58 +0900

pymongo DB에서 특정값 내림차순/오름차순 정리하여 FIND하는법

find().sort("name",1) //name을 기준으로 오름차순정리

find().sort("name",-1) //name을 기준으로 내림차순정리

db.mystar.update_one({'name': name_receive}, {'$set': {'like': newlike}})

//mystar DB에서 'name'이 name_receive인 것을 찾아 'like'값을 newlike로 변경한다

db.mystar.delete_one({'name': name_receive})

//mystar DB에서 'name'이 name_receive인것을찾아 삭제한다.

2021-06-24 (Meta 크롤링과 일반 Soup 크롤링)

ParkStelth — Thu, 24 Jun 2021 13:56:15 +0900

flask = ajax api 콜 등을 위한 패키지

pymongo = DB사용을 위한 패키지

requests , bs4 = 크롤링을 위한 패키지

window.location.reload() // 새로고침을 할 수 있는 구문

[크롤링하기]

1. title = soup.select_one('meta[property="og:title"]')['content'] 메타를 가져올때 안쪽에 'meta~[가져올컨텐츠""]'

2. title = soup.select_one('#content > div.article > div.mv_info_area > div.mv_info > h3 > a).text

2021-06-23 (POST와GET 사용하기)

ParkStelth — Wed, 23 Jun 2021 15:27:52 +0900

자료입력받아 DB에 저장하기

API부분

@app.route('/review', methods=['POST'])
def write_review():
title_receive = request.form['title_give'] #html에서 request.form을써서 title_give를 받아와서 title_receive에 저장
author_receive = request.form['author_give'] #html에서 request.form을써서 author_give를 받아와서 author_receive에 저장
review_receive = request.form['review_give'] #html에서 request.form을써서 review_give를 받아와서 review_receive에 저장

doc = {'title':title_receive,'author':author_receive, 'review': review_receive} #DB용 딕셔너리를 만든다.
db.bookreview.insert_one(doc) #bookreview라는 컬럼DB를 생성시킨다.

return jsonify({'msg': '이 요청은 POST!'}) #MSG에 해당 메세지가 들어가있는 MSG를 반환한다.

자료입력받아 DB에 저장하기

HTML부분

--------------------------------------------------------------------------------------------

DB에 저장된 자료를 GET으로 가져와 HTML에 추가하기

API부분

@app.route('/review', methods=['GET'])
def read_reviews():
reviews = list(db.bookreview.find({}, {'_id': False})) #bookreview로만든DB에서 {}전체값을 찾아서 reviews에 넣는다
return jsonify({'all_reviews': reviews}) #reviews를 reviews_all로 만들어전송한다.

HTML부분

function showReview() {
$.ajax({
type: "GET",
url: "/review",
data: {},
success: function (response) {
let reviews = response['all_reviews'] /* api에서 보낸 reviews_all을 review에 저장*/
for(let i=0; i<reviews.length;i++)
{
let title = reviews[i]['title']
let author = reviews[i]['author']
let review = reviews[i]['review']
let temp_html = `<tr>
<td>${title}</td>
<td>${author}</td>
<td>${review}</td>
</tr>`
$('#reviews-box').append(temp_html)
}
}
})
}

2021-06-22 (flask,venv,GET,POST)

ParkStelth — Tue, 22 Jun 2021 14:51:37 +0900

flask 사용법

[venv 의 app.py]

from flask import Flask, render_template <<렌덜 템플릿을 임포트
app = Flask(__name__)

@app.route('/')
def home():
return render_template('index.html') <<메인페이지('/')에서 index.html 가져오기

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

[prac 전체 프로젝트]

static 폴더 = css나 이미지파일 저장

templates 폴더 = html 저장

[GET]

APP => title_receive = request.args.get('title_give') 사용

요청 => type: "GET",
url: "/test?title_give=봄날은간다",
data: {},

[POST]

APP => title_receive = request.form['title_give']

요청 => type: "POST",
url: "/test",
data: { title_give:'봄날은간다' },

2021-06-21 (Pymongo DB 명령어)

ParkStelth — Mon, 21 Jun 2021 11:10:07 +0900

몽고DB 파이썬에서 사용가능하도록 IMPORT

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta #스파르티 DB생성

doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

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

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
same_ages = list(db.users.find({'age':21},{'_id':False})) #여러개있어도 제일위에 있는것만 가져옴 #_id:false는 출력에 나타내지 말아라

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}}) #여러명 있을시 update_many로 모든사람 변경

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

퀴즈문제

score = db.movies.find_one({'title':'매트릭스'})
# print(score['star')
score2=score['star']
score3=list(db.movies.find({'star':score2},{'_id':False}))

print score3['title'] // 오류가 나는 이유는 score3안에는 많은 딕셔너리값 title이 여러개 있는데 이중 어떤것을 출력할것인가. 오류나지만 for을 돌려 하나씩 title을 출력하면 가능하다

숙제문제

파이썬에서 문자열나누기 split을 이용해 공백으로 나오는값도 나누어 [0]으로 문자만 출력되게 가능함

또는 공백제거는 .strip();해주면 공백이 사라짐.

질문 :

trs = soup.select('#old_content > table > tbody > tr') #여러개 가져오기 select
for tr in trs:
a_tag=tr.select_one('td.title > div > a')
if (a_tag is not None):
rank=tr.select_one('td:nth-child(1) > img')['alt']
title=a_tag.text
star=tr.select_one('td.point').text
doc={'rank':rank,'title':title,'star':star}
db.movies.insert_one(doc)

score = db.movies.find_one({'title':'매트릭스'})
# print(score['star')
score2=score['star']
score3=list(db.movies.find({'star':score2},{'_id':False}))

print(score3['title'] 오류가 나는데 print(score3['title'] 대신

for i in score3:
print(i['title']) 을 돌리면 오류가 안납니다. 혹시 이유가 print(score3['title'] 을 해버리면 score3안에 여러 title이 존재해서 어떤것을 출력해야할지 몰라서 오류가 나는것인가요?

2021-06-19 (Soup 일반 크롤링과 For문으로 풀기)

ParkStelth — Sat, 19 Jun 2021 13:38:41 +0900

파이썬 requests 패키지 설치 후 requests 사용구문

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
rjson = r.json()

//requests한 api주소를 r에 넣고 r을 json하여 rjson으로 변수 선언

크롤링

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

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

title = soup.select_one('#old_content > table > tbody > tr:nth-child(2) > td.title > div > a') #하나가져오기 select_one
# print(title['href']) 속성 가져오기
# print(title.text) href a 태그사이 문자가져오기
#old_content > table > tbody > tr:nth-child(2) > td.title > div > a

#old_content > table > tbody > tr
trs = soup.select('#old_content > table > tbody > tr') #여러개 가져오기 select
for tr in trs:
a_tag=tr.select_one('td.title > div > a')
if a_tag is not None:
print(a_tag)

-------------------------------------------------------------------------------------------------------

//bs4와 requests 사용 선언

soup = BeautifulSoup(data.text, 'html.parser')
//soup에 html문서를 편한 text로 넣음

title = soup.select_one('#old_content > table > tbody > tr:nth-child(2) > td.title > div > a') #하나가져오기 select_one
# print(title['href']) 속성 가져오기
# print(title.text) href a 태그사이 문자가져오기
#old_content > table > tbody > tr:nth-child(2) > td.title > div > a

#old_content > table > tbody > tr
trs = soup.select('#old_content > table > tbody > tr') #여러개 가져오기 select
for tr in trs:
a_tag=tr.select_one('td.title > div > a')
b_tag=tr.select_one('td:nth-child(1) > img')
c_tag=tr.select_one('td.point')
if (a_tag is not None) :
print(b_tag['alt'],a_tag.text,c_tag.text) #img='~' 안 속성 전체 안가져오고 ['alt=']특정 속성만 가져옴

2021-06-16 ($.Ajax 사용하기)

ParkStelth — Wed, 16 Jun 2021 15:17:40 +0900

<style>

.color{
color:red;
}
</style> => 자전거가 모여있는 갯수 5개이하시 전체 red컬러를 주기위한 클래스선언

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 sn = rows[i]['stationName'];
let rtc = rows[i]['rackTotCnt'];
let pbtc = rows[i]['parkingBikeTotCnt'];

if(pbtc<5) {
let temp_html = `<tr>
<td class="color">${sn}</td>
<td class="color">${rtc}</td>
<td class="color">${pbtc}</td>
</tr>`; =>각 요소별로 ${}에 요소를 넣어 하나의 temp_html로 구성하여 append로 삽입.
$('#names-q1').append(temp_html);
}
else {
let temp_html = `<tr>
<td>${sn}</td>
<td>${rtc}</td>
<td>${pbtc}</td>
</tr>`;
$('#names-q1').append(temp_html);
}
}
}
})
}

-----------------------------------------------------------------------------------------------------------

제이쿼리에서 $("#id_img").attr("src", "이미지 경로"); 사용

처음 딕셔너리에서 url이 될 곳을 주소를 추출하고 해당주소를 제이쿼리 문에서 경로 부분에 추가.

질문:

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

ajax기본골격에서 success: function(~)를 써야하는 이유와

success: function(response)를 써도

function q1() {
            $('#names-q1').empty();
                            $.ajax({
                  type: "GET",
                  url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                  data: {},
                  success: function(response){
alert(['getStationList']['row'][0]['stationName']

를 하게 되면 윗줄 0이 정의되지않았다고 stationname이 출력안됨..

let rows = response["getStationList"]["row"][0]['stationName']

alert(rows) 해야 출력됨..

success: function(response)를 썼으니 아래도 response를 사용해야하는지.. 이 구문에 대해 잘모르겠음..

질문2:

</div>

<style>

.border1

{

width:180px;
height: 40px;
border:2px solid
text-align: center;

</style>

이렇게하면 div박스안에 달러환율글씨가 center를 줬는대도 불구하고 정가운데 배치안되고

left,right는 가운데 배치되는데 top과bottom은 가운데가 아니라 조금 위쪽으로 올라가게 글씨가 배치됩니다

이경우에 padding:7px정도 주면 div박스 가운데로 글씨가 배치되는데 padding안주고 중간에 배치할순없나요?

이렇게 보통하는건가요?

2021-06-14 (html의 split과 $('#~~~') 구문 사용하기)

ParkStelth — Mon, 14 Jun 2021 15:10:05 +0900

$('#~'). split('a')는 a를 기준으로 나누어 [0]~[n]까지 나타냄

$('#~').val()은 안에 해당하는 값

코드추가 ${a}로 작성하여 append로 추가가능

$('#~').empty()는 안에값 모두 삭제

ajax는 선언된 페이지에서만 작동된다.

ajax 기본 골격

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    console.log(response['RealtimeCityAir']['row'][0]) //특정 배열 찾는법
  }
})

질문 :

let a = (response['RealtimeCityAir']['row'][0]['IDEX_NM']) //특정 배열 찾는법
alert(a)

이런 코드에서 let을 써도 되고 let을 없앤

let a = (response['RealtimeCityAir']['row'][0]['IDEX_NM']) //특정 배열 찾는법
alert(a)

를 해도 결과가 같은데 꼭 let을 써야하나요?