10월 12일

자주 보지만 오랜만에 보는 벨로그 TIL ㅋㅋㅋㅋㅋㅋㅋㅋ

100프로 핑계밖에 안 되지만... 주말부터 몸이 너무 안 좋았다. 내 주말ㅠㅠㅠ 컨디션 안 좋으면 어김없이 찾아오는 고질병들이 이번주 스케쥴을 소화하는 내 상태에 영향을 주는중. 한 건 없지만 하루만 알람없이 푹 자고싶다^^~는 내 작은 희망~~

뭘 했나?

마우스 오버

주말에 회원 카드에 이미지 부분에 마우스를 올리면 마이페이지에서 짧게 쓴 자기소개 부분을 띄우는 마우스 오버를 했었다. (별 거 아니지만 그래도 뭔가 했다는 쥐똥만큼의 기쁨을 쓰고싶었다.)
1. css를 다뤄서 진행 해 보려 하였지만 우리 페이지는 카드를 정보를 받아와 뿌리는거라 그런지 한계를 느꼈고
2. javascript로 노선을 변경해 hide, show로 하려 했지만 그것마저 잘 되지 않았다. 그리고 하다보니 느낀점은 위 두 방법은 미관상 별로였다. 진짜로.
3. 마우스 오버 기능을 하기위해 이것저것 찾아보던중 봤던 텍스트에 마우스를 올리면 말풍선으로 띄워주는게 있었던걸 기억해서 그걸로 노선을 또 바꿨다. 진짜 별거아닌데 여기 까지 3시간 걸린 것 같다.

검색 (+count(13일TIL))

일단 검색창에 이름을 검색하면 띄워주는걸 이 전 1차 프로젝트때 진행 하였다. 그때 예외처리를 모조리 그냥 else로 했는데 왜인지 else가 절대 안돼... 왜... console로 찍어봐도 찍히지 않고 alert도 띄워봤지만 되지 않아서 팀원분에게 도움을 청했는데 찾아주셨다. null값 으로만 넘어와서 되지 않는거였다. app.py에서 none값으로 넘어오는걸 확인해서 이렇게 하면 된다! 라고 알려주셨는데 그 두줄을 그새 까먹음ㅋㅋㅋㅋㅋㅋ 보고 계신가요^^ 하하~ 절대 기억 안나는데 물어보기 죄송해서 혼자 끙끙 앓다가 친구와 구글의 도움을 받아 검색 기능 자체를 수정하였다!

수정 전 코드

js

function search() {
    let txt = $("#searchtxt").val()
    $.ajax({
        type: "GET",
        url: "/search?txt=" + txt,
        data: {},
        success: function (response) {
            $("#flush").empty();
            let tempHtml = ``
            if (txt == response.name) {
                let tempHtml = `<div class="card hotboxs">
                        <img class="card-img-top card-rows" height="200" src="${response['pic']}" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">${response['name']}</h5>
                            <p class="card-text">${response['url']}</p>
                            <div class="d-flex justify-content-center">
                            <a href="${response['url']}" class="btn btn-warning st">바로가기</a>
<!--                            <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-warning st">리뷰달기</button>-->
                        </div>
                        </div>
                    </div>
                    <button onclick="window.location.href = '/'" type="button" class="btn btn-primary ">메인으로</button>`
                $("#flush").append(tempHtml);
            } else {
                let tempHtml = `<button onclick="window.location.href = '/'" type="button" class="btn btn-primary">메인으로</button>`
                $("#flush").append(tempHtml);
            }
        }
    });
}

app.py

@app.route('/search', methods=['GET'])
def search():
    txt = request.args.get("txt")
    userdb = db.userInfo.find_one({'name': txt}, {'_id': False})
        return jsonify(userdb)

수정 후 코드

js

function search() {
    let txt = $("#searchtxt").val()

    $.ajax({
        type: "GET",
        url: "/search?txt=" + txt,
        data: {},
        success: function (response) {
            $("#flush").empty();
            console.log(response.name, txt);
            console.log(response.introduce);
            if (!response) {
                 alert ("올바른 값을 넣어주세요")
            }
            else {
                 let tempHtml = `<div class="card hotboxs">
                        <img class="card-img-top card-rows" height="200" src="${response['pic']}" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">${response['name']}</h5>
                             <p class="arrow_box">${response['introduce']}</p>
                            <p class="card-text">${response['url']}</p>
                            <div class="d-flex justify-content-center">
                            <a href="${response['url']}" class="btn btn-warning st">바로가기</a>
                            <button type="button" data-toggle="modal" data-target="#${response['name']}"  class="btn btn-warning st">리뷰달기</button>
                        </div>
                        </div>
                    </div>
                    <button onclick="window.location.href = '/'" type="button" class="btn btn-primary ">메인으로</button>`
                $("#flush").append(tempHtml);

                 var countt = response.countt + 1;

                console.log(response.countt);
            }
        }, error: function onError (){
            alert ("올바른 값을 넣어주세요");
        }
    });
}

app.py

@app.route('/search', methods=['GET'])
def search():
    txt = request.args.get("txt")
    userdb = db.userInfo.find_one({'name': txt}, {'_id': False})
    if userdb == None:
        return
    else:
        return jsonify(userdb)

수정하면 일부러 쓰레기값을 넣게 되어서 실행에는 문제가 없지만 오류가 뜨긴한다. 내 수정의 한계는 여기까지다..