나홀로 메모장 PROJECT (feat. 웹기초 2주차 복습)
jQuery 사용
- jQuery 란 HTML의 요소들을 조작하는 편리한 javascript를 미리 작성해둔 것 , 라이브러리!
- jQuery 또한 조작할 때 조작 요소를 가리켜야함 ! jquery는 id 값을 통해 조작요소를 가리키게 된다.
기능
- 포스트박스 열기 버튼 click => 숨겨진 창이 나타나고 버튼 내용이 포스트박스 닫기로 바뀌어야함
- 포스트박스 닫기 버튼 click => 나타난 창이 숨겨지고 버튼 내용이 포스트박스 열기로 바뀌어야함
- 처음 페이지를 새로고침했을 땐 포스트박스가 숨겨져있어야함
- 포스팅 박스 열기 버튼에 function을 달기
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>- 포스팅박스에 div를 사용하여 id 값을 주기
- 포스팅박스 제어 (포스팅박스의 상태에 따라 )
<script>
function openclose() {
#id값 post-box의 display 값이 block이면
if($('#post-box)).css('display')=='block')
{
// post-box를 가리고
$('#post-box').hide();
$('#btn-posting-box").text('포스팅박스 열기')
} else {
// 아니면 post-box를 펴라
$('#post-box').show();
$('#btn-posting-box").text('포스팅박스 딛ㄱ;')
}
}
</script>
<button id="btn-posting-box" onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</a> //포스팅박스 열기 버튼에 id값 주기
- 포스팅박스를 처음부터 숨긴 채로 설정하기
- 이것을 인라인스타일이라고 함
<div class="form-post" id="post-box" style="display:none">
서버 - 클라이언트 통신 이해하기
API란 ?
- 프로그램들이 서로 상호작용하는 것을 도와주는 매개체
- 즉 개발자가 프로그램을 만드는데 필요한 기능을 직접 구현하지 않고 API제공자들이 제공하는 데이터와 모듈 등을 가져다 쓸 수 있도록 해주는 것이 API 와 API문서이다
(API 제작자들은 자신이 가진 데이터베이스나 기능을 다른 누군가가 쉽게 사용할 수 있도록 모듈화해서 가지고 있음)
클라이언트의 요청방식
- GET : 데이터 조회를 요청
- POST : 데이터 생성, 변경 , 삭제를 요청
Ajax
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", //서버에 있는 API
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})-
response는 api호출의 결과를 받아주는 매개변수!
위에서 response 부분이 처음에는 좀 헷갈렸는데 임의읭 변수일 뿐 response를 result 로 바꿔도 결과값은 똑같다고 한다 . -
서버에서 return jsonify() 로 반환시켜준 것을 response가 받는 것이다
서버에서 jsonify(response) 를 쓰는 이유는 데이터를 밑 그림과 같은 형식으로 만들어주기 때문! (질문방에서 도움받음)
웹 크롤링 (feat . 웹기초 3주차 복습)
- 우선 패키지를 설치해야하는데 나는 가상환경의 개념을 잘 알진 못했다. 인강을 들으며 패키지를 설치하고 프로그램을 만들어보니 내가 왜 이 커맨드를 치고 실행시키는지 좀 더 잘 알 수 있었다
가상환경
- 우선 파이썬은 기능들을 묶어놓은 패키지가 필요한데 이 패키지의 묶음을 라이브러리라고 한다.
- 프로젝트마다 필요한 기능이 다르기 때문에 설치해야할 라이브러리가 다른데 그 때마다 지우고 재설치를 할 순 없기 때문에 가상환경이란 것을 만든다
- 즉 , 가상환경은 프로젝트별로 패키지들을 담은 공구함이라고 볼 수 있다.
웹크롤링
- 크롤링한 정보를 저장하고 이용하려면 pymongo라는 데이터베이스도 필요하다
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
- pymongo에서 제공하는 사용법
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}))
# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
# 지우기 - 예시
db.users.delete_one({'name':'bobby'})모두의 책리뷰 (feat. 웹 4주차 복습)
기능
-
POST (REVIEW 저장)
: 클라이언트에서 주는 정보를 서버가 받아옴 => 디비에 저장해야함 => 저장 성공시 응답데이터보냄 -
GET (DB에 저장된 리뷰 보여주기)
: 서버가 DB로부터 리뷰를 찾아와 응답해줌 => 클라이언트는 이 응답을 서버로부터 받아 보여줌 -
서버 코드
@app.route('/review', methods=['POST'])
def write_review():
title_receive = request.form['title_give']
author_receive = request.form['author_give']
review_receive = request.form['review_give']
doc = {
'title': title_receive,
'author': author_receive,
'review': review_receive
}
db.bookreview.insert_one(doc)
return jsonify({'msg': '리뷰가 저장되었습니다'})
@app.route('/review', methods=['GET'])
def read_reviews():
reviews = list(db.bookreview.find({}, {'_id': False}))
return jsonify({'all_reviews': reviews})
- 클라이언트 코드
function makeReview() {
let title = $('#title').val()
let author = $('#author').val()
let review = $('#bookReview').val()
if (title == '' || author == '' || review == '') {
alert('다시 입력해주세요')
}
else {
$.ajax({
type: "POST",
url: "/review",
data: {title_give:title,author_give:author,review_give:review},
success: function (response)
{
alert(response["msg"]);
window.location.reload();
}
})
}
}
function showReview() {
$.ajax({
type: "GET",
url: "/review",
data: {},
success: function (response) {
let reviews=response['all_reviews']
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)
}
}
})
}
</script>
Hongik Univ 💻