[TIL] 21.11.04 항해 4일차

Today I Learned

항해 4일차 TIL

(2021.11.04)

---

 

오늘 일정 / 계획

1. 14:00 개인 멘토링
2. 메인페이지-상세페이지 연결하기
3. 상세페이지 API 연결하기
4. git commit 자주하기

 

새로 학습한 내용

• 메인페이지에서 -상세페이지 넘어가는 부분을 해결했다!!!! 아침부터 오후 2시까지 삽질만해댔는데 조원분들도 잘 모른다길래 알고리즘 스터디방에 물어봤더니 한분이 자기조도 이렇게 했다면서 가르쳐 주셨다!! 거의 1:1과외수준
• python을 먼저 보면 show_card함수는 내가 키워드로 카드를 띄울 때 사용하던 함수인데 여기서 아이디값을 가져다가 상세페이지의 url 파라미터로 주어 레시피 별로 상세페이지를 구분한다.
• 아이디 값을 가져오기 위해 list(db.recipe.find({'type': {'$regex': keywordData}}, {'_id':0}))에서 아이디를 가져오지 않는다는 _id : 0을 제거했다. 그랬더니 오류가 생겨 구글링 해보니 변수값을 dumps()로 감싸면 된다고해서 시도해봤다. dumps()함수는 Python 객체를 JSON 문자열로 변환하는 함수이다.

from bson import ObjectId

# 메인페이지
# db에서 재료 가져오기/ 키워트 클릭 시 카드출력
@app.route('/main/type', methods=['GET'])
def show_card():
    keywordData = request.args.get('type')
    menu_card = list(db.recipe.find({'type': {'$regex': keywordData}}))
    return jsonify({'menu_card': dumps(menu_card)}) #dumps로 ID값 가져오기


# 상세페이지
#상세페이지 요소 삽입(jinja2)
@app.route('/detail')
def title():
    id_address = request.args.get('id') #url에서 파라미터값 가져오기
    recipeData = db.recipe.find_one({'_id':ObjectId(id_address)}) #상단에 ObjectId 임포트 필수!
    return render_template("detail.html", recipeData=recipeData) #recipeData를 jinja2로 활용

 

//키워드 클릭 시 카드 띄우기
function keyword(data) {
    $('#cards').empty();
    $.ajax({
        type: "GET",
        url: "/main/type",
        data: {"type": data},
        success: function (response) {
            let keyword = JSON.parse(response['menu_card'])
            for (let i = 0; i < keyword.length; i++) {
                let img = keyword[i]['image']
                let title = keyword[i]['title']
                let id = keyword[i]['_id']['$oid']
                let temp_html = `<div class="card" style="width: 18rem;">
                		// a태그로 상세페이지 url 가져오고 id변수로 파라미터 가져오기
                                <a href="/detail?id=${id}"><img src="${img}" class="card-img-top" alt="..."></a>
                                <div class="card-body">
                                    <p class="card-text" id="tile_name">${title}</p>
                                </div>
                            </div>`
                $('#cards').append(temp_html)
            }
        }
    })
}

 

 <div class="group tag">
      <button onclick="keyword('쌀')" type="button" class="btn btn-success">쌀</button>
      <button onclick="keyword('밀가루')" type="button" class="btn btn-success">밀가루</button>
      <button onclick="keyword('건어물')" type="button" class="btn btn-success">건어물류</button>
      <button onclick="keyword('버섯')" type="button" class="btn btn-success">버섯류</button>
      <button onclick="keyword('과일')" type="button" class="btn btn-success">과일류</button>
      <button onclick="keyword('콩')" type="button" class="btn btn-success">콩/견과류</button>
      <button onclick="keyword('곡류')" type="button" class="btn btn-success">곡류</button>
      <button onclick="keyword('기타')" type="button" class="btn btn-success">기타</button>
  </div>

<div class="cards" id="cards">
    <div class="card" style="width: 18rem;">
   		<!--다른 API로 가져온 첫화면에 뜨는 카드 jinja2사용-->
        {% for recipe in recipe_list %}
            <a href="/detail?id={{ recipe._id }}"><img src="{{ recipe.image }}" class="card-img-top" alt="..."></a>
            <div class="card-body">
                <p class="card-text">{{ recipe.title }}</p>
            </div>
        {% endfor %}
    </div>
</div>

 

• 자잘하게 수정하고 버그를 잡아가며 구색을 갖춰가고 있다. 댓글기능과 css부분만 하면 거의 완성!!

잘한 점 / 아쉬운 점 / 느낀점

• 오랜시간 상세페이지 넘어가는 방법을 고민했는데 진작 물어볼걸 그랬다. 그래도 친절한 분이 상세하게 알려주시고 돌아가는것 까지 확인해주셔서 금방 고민했던 시간이 무색하게 금방해결할 수 있었다. 상세페이지 연결과 함께 뭔가 속도가 붙는 느낌이 들어 뿌듯하다
• git으로 commit하고 merge하는 부분이 여러가지로 복병이었다. commit만 하는데도 오류도 많이나고 merge할 때는 버그도 생겨 팀원들과 소통하며 하나하나 잡아나갔다. 개인적으로 git은 공부를 좀더 해야겠다.
• 다른 조원분들과 DB며, 로그인 페이지, 댓글기능까지 분업이 잘 되어 많은 진전이 있었다. 진전이 보이니 피곤함도 덜어지는 것 같다.