[TIL] 0824 개발일지

예짱·2020년 8월 24일
0
post-thumbnail

거의 일주일가까이 안했더니..이제 큰일났다!🤨
이번 주도 학원에 있는 시간아니면 거의 시간없을 것 같은데 밤샘. 예정인가 혹쉬

지도

✅ geolocation 오류

  • 계속 내 위치가 서울시청 아니면 무주군(..)으로 잡혀서 이상했는데 geolocation을 이용하면 자주 이렇게 위치 오류가 뜨기도 하나보다. 오류를 검색하다가 카카오 지도 개발 포럼같은 곳에 들어가게 되었는데, geolocation을 사용할 경우 위치 오차가 생기는 경우가 많아서 또 다른 보정방법을 추가해 사용한다고 봤다.
  • 아무튼, 지금은 또 잘 되는데 이건 내가 다시 하기에는... 그냥 접을 거 같아서 조금 아쉬워도 이대로 두련다!

✅ Kakao 지도 API

  • 카카오 지도의 경우 다양한 library가 있고 안내가 잘 되어있어서 사용하기 편하겠다는 생각을 했다.
  • 그런데.. 지금은 다 바꾸기가 너무 어렵다.
  • 다음주가 되기 전에 (만에 하나..!) 기능들을 어느정도 완성했다면 네이버지도 대신에 카카오로 다시 만들어보고 싶....다...!

주변 핫플레이스 불러오기

✅ 구글 스프레드시트 활용하기 (gspread)

  • 원래 네이버 플레이스에서 가져오려고 했는데, 웹 스크래핑하기가 쉽지 않기도 하고 보다 더 객관적인 정보를 위해서 네이버 플레이스 / 카카오 장소 평점 / 망고플레이트 평점 등 다양한 것들을 활용하고 싶었다.
  • 그래서 구글 스프레드시트에 정보들을 입력해두고 그 스프레드시트를 불러올 수 있으면 좋겠다고 생각했다. (SCC 노션 한 걸음 더 참고)

1) 터미널에서 pip 설치하기

  • 터미널에 해당 명령어를 입력하면 homebrew가 설치된다.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • brew -v : 버전 확인 / brew update : 최신 버전으로 업데이트
  • get-pip.py 를 다운로드하고 설치한다.
curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
sudo python3 get-pip.py
  • pip 설치
sudo easy_install pip

2) gspread

  • google spread를 사용해 작업할 수 있는 simple interface로 다음과 같은 특징들을 가지고 있다.
    Open a spreadsheet by title, key or url.
    Read, write, and format cell ranges.
    Sharing and access control.
    Batching updates.
pip install gspread
import gspread
from oauth2client.service_account import ServiceAccountCredentials

scope = [
'https://spreadsheets.google.com/feeds',
'https://www.googleapis.com/auth/drive',
]

json_file_name = 'lego-hangang-2020-e30ccd2df9c8.json'

credentials = ServiceAccountCredentials.from_json_keyfile_name(json_file_name, scope)
gc = gspread.authorize(credentials)


spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1RjMijAbTt2K1WIQlTPX5_hxu2xS6qNQQx0EXtTgc6gg/edit#gid=0'

# 스프레스시트 문서 가져오기
doc = gc.open_by_url(spreadsheet_url)

# 시트 선택하기
worksheet = doc.worksheet('여의도')
  • 이런 식으로 하면 장소별로 데이터를 저장해서 불러올 수 있지 않을까..?
    (그냥 내 생각일 뿐..약간 이상하게 일만 더 만든 느낌..)

3) 대충 별 거 다 해봤는데 모르겠다는 내용

😩🤨😫

아니 어떻게 혼자 스스로 찾냐구... ... 쒸익쉬익🤨

리뷰

  • 전에 나홀로 메모장했던 것과 구글링을 통해서,, 여기까지는 만들고 api 작성도 제대로 한 거 같은데 뭔가 실행이 안된다.
  • 내 생각에는 저 첨부파일 받아와서 보여주고 하는? 그런 부분에서 내가 뭔가 잘 하지 못하고 있는 듯...?
  • app.py 코드
@app.route('/date', methods=['POST'])
def post_article():
    # 1. 클라이언트로부터 데이터를 받기
    name_receive = request.form['nickname']
    title_receive = request.form['title']
    loc_receive = request.form['parkLoc'] 
    img_receive = request.form['img']
    comment_receive = request.form['comment']


    review = {'nickname': name_receive, 'title': title_receive, 'parkLoc': loc_receive, 'img': img_receive, 'comment': comment_receive}

    # 3. mongoDB에 데이터를 넣기
    db.reviews.insert_one(review)

    return jsonify({'result': 'success', 'data': review})


@app.route('/date', methods=['GET'])
def read_reviews():
    result = list(db.reviews.find({}, {'_id': 0}))

    return jsonify({'result': 'success', 'reviews': result})
  • review.html 코드
<script>
function postArticle() {
            let nickname = $("#post-nickname").val();
            let title = $("#post-title").val();
            let parkLoc = $("#post-location").val();
            let img = $("#post-img").val()
            let comment = $("#post-comment").val();


            // 2. memo에 POST 방식으로 메모 생성 요청하기
            $.ajax({
                type: "POST",
                url: "/date",
                data: {nickname, title, parkLoc, img, comment}, // 데이터를 주는 방법
                success: function (response) { // 성공하면
                    if (response["result"] == "success") {
                        alert("포스팅 성공!");
                        // 3. 성공 시 페이지 새로고침하기
                        window.location.reload();
                    } else {
                        alert("서버 오류!")
                    }
                }
            })
        }

        function showArticles() {
            $.ajax({
                type: "GET",
                url: "/date",
                data: {},
                success: function (response) {
                    let reviews = response["reviews"];
                    console.log(reviews);
                    for (let i = 0; i < reviews.length; i++) {
                        makeCard(reviews[i]["title"], reviews[i]["nickname"], reviews[i]["parkLoc"], reviews[i]["img"], reviews[i]["comment"]);
                    }
                }
            })
        }

        function makeCard(title, nickname, parkLoc, img, comment) {
            let tempHtml = `<div class="card">
                        <div class="card-body">
                        <a class="card-title">${title}</a>
                        <p class="card-text nickname">${nickname}</p>
                        <p class="card-text">${parkLoc}</p>
                        <p class="card-img">${img}</p>
                        <p class="card-text comment">${comment}</p>
                        </div>
                    </div>`;
            $("#cards-box").append(tempHtml);

        }
</script>
  • 뭔가 여기 어딘가가 잘못되었을 것만 같은데🤨
profile
코딩 천재만재가 되고 싶은 코린이💻🍎 EWHA BCS & SW

0개의 댓글