[TIL] 21.11.02 항해 2일차

Today I Learned

항해 2일차 TIL

(2021.11.20)

---

 

오늘 일정 / 계획

1. 19:00 리엑트 Q&n
2. 메인화면, 상세페이지 화면 초안 만들기
3. 태그연결하기
4. JWT 인증 방식으로 로그인 구현하는 방법 공부하기!

 

새로 학습한 내용

• 부트스트랩을 이용해 캐러셀을 만들었다! 처음엔 부트스트랩은 그냥 복붙하면 되는것인 줄 알았는데 캐러셀 같은경우는 스크립트도 직접 만들어 붙여야 한다. 물론 참고 가능! =>https://getbootstrap.kr/docs/5.0/components/carousel/

넘어가고 있는 중에 캡쳐!

 

    // 캐러셀
    $('.carousel').carousel({
        interval: 2000,   //시간
        wrap: true        // 자동으로 넘어가는지
    })

 

• 키워드는 임시로 넣어놨는데 저번 프로젝트 때 했던 코드를 이용해 금방 구현할 수 있었다. 키워드를 클릭하면 db에서 재료를 검색해 해당 카드를 출력한다. db는 아직 연결되지 않아 임시로 한줄 입력해서 담았다. 

# db에서 재료 가져오기
# get으로 데이터 받기
@app.route('/main', methods=['GET'])
def show_menu():
    keywordData = request.args.get('ingredients')
    menu_card = list(db.project1.find({'ingredients': {'$regex': keywordData}}, {'_id': 0}))
    return jsonify({'menu_card': menu_card})

<!-- 곤약을 데이터로 넣어주기 -->
<button onclick="keyword('곤약')" type="button" class="btn btn-success">곤약</button>

 function keyword(data) {
        $('#cards').empty();
        $.ajax({
            type: "GET",
            url: "/main",
            data: {"ingredients": data},
            success: function (response) {
                let keyword = response['menu_card']
                console.log(keyword)
                for (let i = 0; i < keyword.length; i++) {
                    let img = keyword[i]['img_url']
                    let title = keyword[i]['title']
                    let temp_html = `<div class="card" style="width: 18rem;">
                                        <a href="/detail"><img src="${img}" class="card-img-top" alt="..."></a>
                                        <div class="card-body">
                                            <p class="card-text">${title}</p>
                                        </div>
                                    </div>`
                    $('#cards').append(temp_html)
                }
            }
        })

    }

 

 

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

• 메인페이지는 초안이기도하고 구현해야하는 기능이 많지 않아 빨리 만들 수 있었다. 다만 오전 내내 매달렸던 크롤링이 마음처럼 되지않았다. 다행히 오늘 두분이 우리조에 참여하게 되어 DB를 맡아주셨다. 내가 맡은 역할을 얼른 끝내고 프로젝트가 끝나기 전 새로오신분들에게 물어보며  크롤링과 DB를 좀 더 공부해야겠다. 
• 오늘 가장 아쉬운 점은 체력관리가 안된점이다. 어제 2시 쯤 컴퓨터를 끄고 바로잤는데 아침에 너무 피곤하고, 저녁에 리엑트 QnA이후에는 완전 체력방전..... 공부를 더 해야하는데 머리가 너무 안돌아가서 내일 아침 일찍 시작하는걸로 하고 오늘은 11시에 OUT