갓생을 위한 코딩 성장일기

항해에 들어온지 약 2주..? 만에 처음 해보는 토이 프로젝트!

과연 할줄아는 것도 1도 없는 내가.. 만들 수 있을지, 그리고 섹션을 나누어서 진행하는데 너무 몰라서 민폐만 되는게 아닌지 처음부터 너무 떨리고 걱정되었다ㅜㅜ

우리조는 "X늘의 집"에서 사보고 좋았던 아이템들을 모아주는 사이트를 만들기로 했다.

사이트 이름은 "오늘의 꿀"

위 사진과 같이 상단에 오늘의 꿀 이미지가 나오고 그 밑에 금액별, 분류별로 URL을 넣고 간단한 리뷰를 등록할 수 있고 금액별, 분류별로 검색도 가능하게 만들기로 했다.

그 밑에 이미지 사진과 og 태그로 상품설명, 가격 등 다 불러올 수 있게 하고 좋아요 버튼과 구매버튼을 활성화 하여 구매버트을 클릭하면 해당 링크로 넘어갈 수 있게 하자고 이야기나누었다.

섹션은 총 5명인데 서버 2명 프론트3명 이렇게 진행했다!

사다리타기로 진행했는데 서버 당첨 두둥ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

일단 처음에는 정말 뭘 해야할지 감이 안잡혀서 팀원들이 하는대로 흘러 따라 갔던것 같다ㅜㅜ

그러다가 차차 나도 개입하여 이거 저거 손을 대기 시작했고

우리 모두 팀프로젝트는 처음이었기에 섹션을 저렇게 나누어 놨지만 무쓸모였다 ㅋㅋㅋㅋㅋㅋ

거의 모두가 풀스텍으로 참여하게 될 수 밖에 없었고 스텍 구분이 아닌 정말 섹션을 나누어 진행하는 식으로 가게 되었다 

일단 팀원1이 오늘의 꿀 그림을 너무너무 잘 구현해 주셔서 감탄,,

그리고 또한 우리 모두 git과 sourcetree 강의를 들었지만 실제로 웹을 개발하면서 풀하고 푸쉬하는 것이 쉽지만은 않앗다.. 계속 꼬이고 버전새로 깔고를 반복 ㅠㅠㅠㅠ

결국 우리가 선택한 것은 코드 보내주깈ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

발표시간에 들어보니 우리조만 그런게 아니라 모두가 처음이라 다른 조들도 마찬가지인 상황이엇다 ㅋㅋㅋㅋㅋ

또 발생한 문제점은 

이렇게 구매하기 버튼이 제멋대로 춤을 추는 것,,

다들 새벽까지 지쳐있었고 각자 할일을 하고 있었기에 내가 해보겠다고 나섰쥐!!!!

구글링을 통해 absolute를 쓰면 해결 할 수 있는 것을 발견! 바로 해결 했당 뀨

오늘의 꿀을 만들면서 문제발생 및 구현 한 내용 정리

1. 동적쿼리를 구현해내기 -팀원 해결!
2. 구매 링크 버튼 실현 - 내가 해결!!!
3. 조회수 숫자로 노출 하는 방법  - 노해결.. 대신 하트 깐지나게 해
4. 동적 쿼리 구현 에서 get,post 방식으로 루트 변경+입력값 누락 (null) 일 때 알림 설정 및 등록하기가 되지 않는 기능 으로 대체 - 시간 없음..
5. title image 클릭시 처음 화면으로 돌아오게 구현 (location.href=) - 내가 해결!!
6. 구매하기 버튼을 포스트 카드에 위치 고정! (absolute) - 내가 해결!!
7. 정보 입력창의 크기 조절 cards-box크기에 맞춰서  - 내가 해결!!!
8. 조회수를 표현 해 정말 꿀템은 무엇인가를 가리는 방식을 구현 하려고 하는중 - 시간 없음..
9. git과 Sourcetree 사용법 미숙 - 익숙해지기 위해 노력함

처음해보는 토이 프로젝트였고 아직 개념이나 많은 것을 아는 상태가 아니었는데도 불구하고

좋은 팀원분들을 만나 너무 팀웍이 잘맞아서 새벽까지 작업을 해도 너무 즐겁고 기분좋게 진행할 수 있었던 것같다.

서로 모르는 것을 잘 이끌어주고 알려준 덕분에 오늘의 꿀이 이렇게 깐지나게 완성된게 아닌가 싶다ㅠㅠㅠㅠ

감격 또 감격,,,

https://youtu.be/KpvabVbohY4

팬명록 만들기

[POST 연습-응원등록하기]

1. 데이터명세

● 요청정보 : URL = /guestbook, 요청방식 = POST

● 클라(fetch) → 서버(flask) : name, comment

● 서버(flask) → 클라(fetch) : 메시지를 보냄 (응원 완료!)

우선 서버는 닉네임(name)과 댓글(comment)을 받아서 데이터를 저장해야 하므로

2. 클라이언트와 서버 연결 확인하기

서버코드 - app.py

클라이언트 코드 - index.html

3. 서버부터 만들기

from pymongo import MongoClient

client = MongoClient('내 URL')
db = client.dbsparta

기본 세팅되어있는 서버코드(app.py) 값에 name과 comment를 각각 넣어준다.

@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']
    doc = {
        'name':name_receive,
        'comment':comment_receive
    }
    db.fan.insert_one(doc)

    return jsonify({'msg': '저장완료!'})

4. 클라이언트 만들기

두번째로 프론트엔드인 클라이언트 코드(index.html) 쪽을 살펴보기

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

       let formData = new FormData();
       formData.append("name_give", name);
       formData.append("comment_give", comment);

       fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
           alert(data["msg"]);
       });
}

formData에 (name,comment)를 쫙 태워서 fetch로  /guestbook을 날리면

alrert로 msg를 띄워주는 형식.

새로고침 후 mongoDB에 들어가서 확인하면 dbsparta에 fan 폴더가 생기고 오른쪽에 잘 나온걸 확인할 수 있다!

저장되면, 새로고침을 자동으로 하기 위해 window.location을 하기

fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
   alert(data["msg"]);
   window.lacation.reload()
});

댓글남기는 버튼 활성화 완료!

[GET연습-응원보여주기]

1. 데이터명세

● 요청정보 : URL = /guestbook, 요청방식 = GET

● 클라(fetch) → 서버(flask) : 없음

● 서버(flask) → 클라(fetch) : 전체응원 목록 보여주기

2. 클라이언트와 서버 연결 확인하기

3. 서버부터 만들기

모두 찾기

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    all_comments = list(db.fan.find({},{'_id':False}))
    return jsonify({'result': all_comments})

4. 클라이언트 만들기

프론트엔드에서는 받은데이터들을 착착착 붙여주기

        function show_comment() {
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                let rows = data['result']
                console.log(rows)
            })

우선 console.log로 확인하기

우리는 name과 comment가 따로따로 필요하다.

그래야 temp_html을 만들때 거기에 넣어야하니까!

그러기 위해서는 rows를 돌려야한다.

        function show_comment() {
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                let rows = data['result']
                rows.forEach((a)=> {
                    let name = a['name']
                    let comment = a['comment']
                })

이것도 위와 같이 console.log(name,comment)로 한번 확인하기

마지막으로 temp_html 넣어주고 append로 붙여줄 곳 지정하기!

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)

+ result 값 밑에

$('#comment-list).empty()

코드로 깔끔하게 지워주는 것 까지 완-

[og태그]

내 프로젝트를 서버에 올리기-인터넷에 배포!

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

http://myweb.eba-jz3mhczk.ap-northeast-2.elasticbeanstalk.com/

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ홍기찡 팬명록 잘나온당 깔깔(사이트는 삭제예정)

수업들을 때 선생님께서 console로 매번 확인하셔서 귀찮지않나? 라고 생각했는데

이번 수업으로 생각이 확 바뀌었다 ㅋㅋㅋ

급할수록 돌아가라는 말이 있듯 버그를 안먹기위해서는 꼼꼼히 다시 한번 돌다리도 두들겨보고 가야겠다는 생각이 들었다.

절대절대 잊지말자 console.log!!!!!!

[Flask - 서버만들기]

1. 원하는 폴더로 이동 한다.

2. app.py를 만든다.

3.터미널을 켠다.

4. 가상환경을 잡는다.

python -m venv venv

3.8.6 64bit를 클릭 한 다음

venv 클릑!

app.py의 터미널을 껐다가 다시 새 터미널을 켜주면

(venv)로 잡히게된다.

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

기본적인 flask의 사용법을 익혀보았다.

이렇게 파일을 만들고 (오타없이 만드는 것이 중요!!)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>

    <script>
        function hey(){
            alert('안녕!')
        }
    </script>
</head>
<body>
    <h1>제목을 입력합니다</h1>
    <button onclick="hey()">나는 버튼!</button>
</body>
</html>

index.html 파일에 코드를 입력한 후

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

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

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

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

app.py에 코드를 적어주는데

이부분을 적어주어야 index.html에 쓴 코드가 app.py에 적용이 된다.

[API만들기]

* GET 요청 : 통상적으로 데이터 조회(Read)를 요청할 때, 사용

ex) 영화 목록 조회 → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달

* POST 요청 : 통상적으로 데이터 생성(Create),변경(Update),삭제(Delete) 요청 할 때 사용

ex) 회원가입, 회원탈퇴, 비밀번호 수정 → 데이터 전달 : 바로 보이지 않는 HTML

<화성에 땅 사놓기 웹 만들기> ------POST연습(주문 저장하기)

1. 데이터 명세

: 어떤 데이터를 보내야하는지 목록 정하기!

● URL=/mars, 요청방식 = POST

● 클라(fetch)  → 서버(flask) : name, address, size

● 서버(flask) → 클라(fetch) : 메시지를 보냄(주문완료!)

2. 클라이언트와 서버 연결 확인하기

: 서버 코드 인 app.py와 클라이언트 코드 인 index.html 만들기

3. 서버부터 만들기

: 받을 곳을 만드는것

- dbmongo와 연결시켜라

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

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

flask 코드 밑에 pymongo 코드 넣어주기

4. 클라이언트 만들기

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

        let formData = new FormData();
        formData.append("name_give", name);
        formData.append("address_give", address);
        formData.append("size_give", size);

        fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
            alert(data["msg"]);
            window.location.reload()
          });
       }

<화성에 땅 사놓기 웹 만들기> ------GET연습(주문 보여주기)

데이터베이스까지 완성했으니 이제 이름, 주소, 평수를 기입하면 저장하여 화면에 띄우기를 할 것이다.

이번에도 순서는 위와 동일.

1.데이터 명세

● URL=/mars, 요청방식 = GET

● 클라(fetch)  → 서버(flask) : 없음

● 서버(flask) → 클라(fetch) : 전체 주문을 보내주기

2. 클라이언트와 서버 연결 확인하기

[서버 코드 - app.py]

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

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

$(document).ready(function() {
	show_order()
})
function show_order() {
    fetch('/mars').then((res) => res.json()).then((data) => {
            console.log(data);
            alert(data["msg"]);
          });
}

3. 서버부터 만들기

result에 주문정보를 담아서 내려주기

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

4. 클라이언트 만들기

-  주문정보는 리스트 형식이기때문에 forEach문으로 반복하여 데이터 내보내기

- 뽑아낸 데이터는 temp_html에 담아주기

- 담아준 temp_html을 넣을 자리를 찾아 jQuery로 aapend 

function show_order() {
        $("#order-box").empty();
        fetch('/mars').then((res) => res.json()).then((data) => {
            let rows = data['result']
	            rows.forEach((a) => {
              let name = a["name"];
              let address = a["address"];
              let size = a["size"];

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

오늘도 어찌저찌 따라 가기는 했다.

오늘 숙제는 답안을 보지 않고 혼자 뚝딱 하긴 했는데, 아직까지는 100%이해된 상태가 아니라서 어리둥절하게 완성한 숙제..ㅋㅋㅋㅋㅋ

계속 반복하며 들으면서 따라하면 이해가 되는 것일지,,

[파이썬]

def : 함수를 선언할게!

javascript 에서는

function hey() {
alert
}

로 표현했던 것이 파이썬에 오니까 아주  간결해졌다.

[조건문과 반복문]

1. 조건문

2. 반복문

3. 조건문과 반복문 활용

하다보니 마치 컴활을 하는 듯한 느낌을 계속 받는다 ㅋㅋㅋㅋ

[크롤링]

: 웹에 접속해서 데이터를 솎아내어 가지고 오는 것

그러기 위해서는 라이브러리가 2개 필요함

1. 웹에 접속(요청)하는 라이브러리 -> request

2. 솎아내는 라이브러리 -> beautifulsoup

네이버 영화 평점의 링크를 이용하여 bs4를 진행했다.

아래 화면에서 영화명만 텍스트로 가져오는 것

1 > requests로 요청

2 > beautifulsoup의 틀을 가져다

7 > soup안에서 tr들을 먼저 찾은 다음

9 > 그 tr들을 하나씩 돌려가면 그 안에서 제목들을 찾기

But 제목이 없는 것도 있음(none(중간 절취선같은))

11 > 영화페이지에서 우클릭으로 검사 를 들어가면

이렇게 <tr></tr>로 묶인 것들을 copy>copy select 해줌

그런다음 공통인자인 것들을 묶어서 

trs = soup.select('여기에 넣어준다')

14 > a가 none이 아닐때만 제목을 출력해라

같은 방법으로 순위, 평점도 한번에 가져와보았다.

[mongoDB]

딕셔너리 형태로 데이터를 저장해두는 DB

DB에는 Index 라는 순서로 데이터들이 정렬되어 있어서 잘 정리되어 있고 찾아 쓰기 편함

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

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

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

-'가버나움'의 평점과 같은 평점의 영화 제목들을 가져오기

8 > {'star':target_star}으로 조건 붙여주기

오늘은 현타가 좀 씨게 오는 하루였다.

강의를 듣고 따라는 하는데 혼자 하라고 하실때 혼자 하지도 못하겠고,

내가 이해하고 있는건지 그냥 따라만 하고 있는건지도 모르겠고

이게 맞는지도 모르겠고,, 나는 이쪽길에는 재능이 없나 싶고 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

그래도 같이 하는 팀원분들께서 자기들도 똑같다며 응원하고 격려해주신 덕분에 조금 위로는 됐지만,,

어떻게 공부해나가야하는지 조금 막막하긴 하다

그래도 퐈이팅해야지

* javascript : 웹을 움직이게 하는 코드

* jQuery : html 뼈대를 선택해서 쉽게 조작

* fetch : 짧은 코드로 요청을 보내고 받을 수 있음

javascript에서 class로 쓰이던 것이 jQuery에서는 id 이다.

리스트 = [ ] 컴퓨터의 첫번째 값은 0이다.

ex) let a  = ['사과','수박','딸기','감'] 이면

console.log(a[1]) 은 수박

console.log(a[0]) 은 사과

리스트의 길이(총 갯수) 를 나타내는 값은 console.log(a.length) 는 4

* 딕셔너리 : 키(key)와 벨류(value) 값의 묶음

딕셔너리 = { }

let a = {'name':'영수','age':27} 으로 선언

console.log(a)

console.log(a['name']) 하면 영수 로 나오고

console.log(b_dict['age']) 하면 27 로  나옴

*  API는 은행창구와 같은것!

fetch는 데이터를 주는 URL이 있으면 그 URL에서 데이터를 가져오는 역할을 한다.

조건문과 JSON을 활용하여 가져온 현재 서울의 날씨 표시 하기

아직까지는 혼자 뭔가 해쳐나갈 능력이 부족한거같다.........................