[내일배움캠프] 사전캠프 - 미니팀과제 TIL 1~2일차

1일차

사전캠프 강의로 들었던 웹개발종합반을 복습하는 느낌으로 간단하게 하는 팀 과제.

늦게 완강해서 나중에 만들어진 팀이라 시간이 조금 부족하긴 하다.

15시 시작인데 14시30분에 팀 편성 공지가 떴다. 따끈따끈하게 완성된 팀이다.

팀 주제 정하기

맛집 소개하는 페이지 하기로 했다.

유저들이 소개하고 싶은 맛집의 사진, 주소, 가게 이름, 리뷰를 올리고 서로 공유하는 사이트

시간, 능력 여건이 되면 지도 api도 가져와서, 유저가 올린 주소를 지도에 찍어서 글에 추가할 수 있도록 할 계획

팀 이름 정하기

팀장님이 super team 하자고 하셨당 뭔가 슈퍼맨 같아서 별로였당.

다른 분이 그럼 슈퍼 울트라 팀 하자고 하셨다. 기왕 이상할 거 최선을 다해서 이상한 게 좋을 것 같았다.

그래서 Super Ultra Sexy 줄여서 SUS가 됐다.

 

조금 있다가 생각해보니까 앞에 A를 붙이면 좀 간지나지 않을까 싶었다. 그럼 ASUS

그래서 A를 붙이자는 의견을 냈는데 Awesome Super Ultra Sexy가 됐다. 

 

다들 나 빼고 센스가 넘치네

파트 분배하기

어쩌다보니 백엔드는 나 혼자가 됐다. 내용이 많지 않다보니 혼자 맡게 된 거다.

공부하는 시간인 만큼 안 해봤던 걸 좀 해 보고 싶어서 백엔드 하고 싶다고 했는데, 혼자가 되니 사실 좀 겁났다.

다른 분들이 빨리 끝나면 도와주신다고 하셨다. 갑자기 든든해졌다.

S.A.

https://fascinated-nightshade-36f.notion.site/ASUS-s-S-A-298957794c8e4b35998216b9598fbb6b

ASUS 팀’s S.A.

회의가 끝나니까 6시였다. 저녁시간 빼면 두 시간 남아서 많이는 못 했다.

큰 틀만 잡는데 아무래도 프론트엔드 분들 틀 짠 거를 보고 해야될 것 같아서 내일로 미루기로 했다.

2일차

15:00

대충 짠 코드를 서로 공유하기로 했다. 깃허브로 공동 작업자 초대해서 하기로 했는데, 나도 팀 프로젝트는 처음이다보니 브랜치 만드는 것 부터가 조금 헷갈렸다.

그래도 우리 모두의 위대한 선생님 구글이 다 알려줘서 해냈다.

우리 팀장님 잘 뽑은 것 같다. 글 입력 폼 짠 걸 공유해주셨는데 깔끔하고 완벽하다. 최고

개인 코딩 시간

그걸 기반으로 폼에 입력한 글 내용을 DB로 보내는 코드를 먼저 짰다. 나중에 불러올 때 필요하기 때문에 폼별로 다 분류해서 넣었다.

# ============================= 글 작성 =============================

# ""글작성 버튼"" 눌렀을 때 ---> 작성하기 페이지로 넘어가는 코드 
@app.route("/write") 
def write_func():
    return render_template("posting.html", title="글쓰기")

# 작성한 글 저장하기 --> POST id="submitBtn" event
@app.route("/save-review", methods=["POST"])
def save_review():
    restaurant_name_receive = request.form['restaurant_name_give'] # 가게이름
    image_url_receive = request.form['image_url_give']
    postcode_receive = request.form['postcode_give'] # 우편번호 
    road_address_receive = request.form['road_address_give'] #도로명주소
    jibun_address_receive = request.form['jibun_address_give'] #지번주소
    detail_address_receive = request.form['detail_address_give'] #상세주소
    extra_address_receive = request.form['extra_address_give']  #참고항목
    nickname_receive = request.form['nickname_give'] #닉네임
    comment_receive = request.form['comment_give']  #코멘트
    rating_receive = request.form['rating_give'] #별점
    
    # 카테고리 검색 위한 태그
    address_spl = road_address_receive.split() # 도로명주소 단어로 나누기
    address_tag = address_spl[0] # 나눈 리스트의 첫번째
    
    #DB저장
    doc = {
        'restaurant_name' : restaurant_name_receive,
        'image_url': image_url_receive,
        'postcode' : postcode_receive,
        'road_address' : road_address_receive,
        'jibun_address' : jibun_address_receive,
        'detail_address' : detail_address_receive,
        'extra_address' : extra_address_receive,
        'nickname' : nickname_receive,
        'comment' : comment_receive,
        'rating' : rating_receive,
        'tag' : address_tag 
    }
    db.restaurant.insert_one(doc)
    return jsonify({'msg': '저장되었습니다.'})

posting.html은 글 작성하는 폼 파일 이름이다. 클릭하면 그 html로 넘어가게 작성했다.

 

카테고리를 지역별로 나누기로 했는데, 주소 맨 앞이 지역이니까 그걸 사용하는 게 어떻냐는 의견이 나왔다. 천잰가?

주소를 받아서 문자열 공백을 기준으로 자르는 split() 함수를 사용했다. 그 후 리스트의 0번지 값을 불러와서 도시만 잘라냈다.

'tag'속성에 지역 이름만 잘 잘린 게 확인된다. 야호!

 

다음은 카테고리별로 데이터를 불러오는 코드를 짜려고 했다.

루트값에 변수를 넣고 html에서 변수를 받아서 불러오고 싶었는데, flask 태어나서 처음 하다 보니까 어떻게 해야할지를 모르겠다.

@app.route("/루트이름/<변수>") 라고 하면 변수를 받아올 수 있게 하는 건 알겠는데, 받은 변수를 어떻게 써야할지, 그리고 html에서 어떻게 보내줘야할지도 잘 모르겠다. 검색을 많이 해봤는데도 나한테 필요한 정보가 나오지 않아서 한참을 애먹은 것 같다. 이것 때문에 두 시간은 낭비한 듯....

그래서 일단은 카테고리에 있는 모든 도시를 하나씩 함수로 만들었다. 일단 완성한 후에 방법을 찾아내서 업그레이드 시킬 계획이다.

# 1 카테고리 - 서울
@app.route("/popular/seoul", methods=["GET"])
def review_seoul_get():
    reviews_category = list(db.restaurant.find({'tag':'서울'},{'_id':False})) # DB에서 해당 카테고리의 파일 가져오기
    return jsonify({'result':reviews_category})

html에 넣을 script 함수도 몇 개 만들었다.

홈에서 글쓰기 누르면 넘어가는 script, 글쓰기 폼에서 등록을 눌렀을 때 서버에 입력값을 전달하는 script .

두 개네

 

# ============================= 글 목록 =============================
# 홈 화면에서는 식당 이름,사진,코멘트,닉네임

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

@app.route("/popular/", methods=["GET"])
def review_get():
    all_reviews = list(db.restaurant.find({},{'_id':False})) # DB에서 파일 전부 가져오기
    return jsonify({'result':all_reviews})

// ============================ 홈 화면 전체 리스트 ============================

function listing() {
  fetch("/popular/")
    .then((res) => res.json())
    .then((data) => {
      let rows = data["result"];
      $("#cards-box").empty();
      rows.forEach((a) => {
        let restaurant_name = a["restaurant_name"]; //제목
        let image_url = a["image_url"];
        if (!image_url) {
          image_url =
            "https://placehold.co/250x250/white/e9ecef/?text=Image&?font=Open+Sans";
        }
        let comment = a["comment"]; //내용
        let road_address = a["road_address"];
        let nickname = a["nickname"];
        let temp_html = `
                      <div class="col">
                        <div class="card h-100">
                          <a href='javascript:void(0);' onclick="click_card('${restaurant_name}','${road_address}');">
                            <img src="${image_url}" class="card-img-top" alt="image"/>
                              <div class="card-body">
                                  <h5 class="card-title">${restaurant_name}</h5>
                                  <p class="card-text"> ${comment}</p>
                                  <p>글쓴이: ${nickname}</p>
                              </div>
                          </a>
                        </div>
                      </div>
                                `;

        $("#cards-box").append(temp_html);
      });
    });
}

회의하면서 얘기한 것

- 홈에서 글 카드 눌렀을 때, 글 상세 보기로 어떻게 넘어갈 것인지. 나는 db에 저장되는 고유 id 값을 사용하면 될 것 같긴 한데, 문제는 html에 어떻게 링크를 거느냐

- 입력폼에 입력한 정보 db로 넘기는 건 했는데, 사진은 어떻게 넘겨야할지 모르겠다. string이 아니라서... 팀장님이 코드 취합해서 방법을 찾아보신다고 했다. 역시멋져

 

오늘 하루 요약

뭔가 오래 걸리는 기분도 들고, 나 혼자만 한 게 거의 없는 기분도 들고... 그래도 열심히 하는 중인데 티가 안 난다. 속상하다.

그러고보니 우리 17시에 생존신고 하기로 했는데 아무도 안 했다. 각자 맡은 일을 너무 열심히 한 탓이겠지