[도쿄의 사계] #2021/1/19 개발일지

What I did

<메인페이지>

・ 가장 어려웠고 여전히 아리송하고 혼자서는 도저히 무려여서 현직 엔지니어인 지인의 도움으로 겨우 만든 파이썬 코드..

🎈 app.py

 @app.route('/hello', methods=['GET'])
def hello():
    category_id = request.args.get('category_id')
    spots = list(db.spots.find({'id': category_id}, {'_id': False}))
    return jsonify({'result': 'success', 'spots': spots})

• 새로 만든 category_id라는 변수를 클라이언트와 연결시켜 준다.
• get요청이기 때문에 request.args.get 을 사용..
• 데이터 베이스에 저장된 정보들을 불러오기 위해 {'id': category_id}를 추가
• spots의 키와 값은 클라이언트 response의 값으로 지정해주고, 새로운 변수 안에 이 값을 넣어서 조건문을 작성

let all_spots = response['spots'];

・ 역시 현직 엔지니어의 큰 도움을 받아 겨우 완성한 ajax의 GET요청하기 코드.. 나 혼자서는 절대 절대 못할 레벨이라서 튜터님의 도움을 빌릴 수 있을까 내심 기대하고 이것 저것 물어봤지만 결국은 나혼자 구상해서 짜봐야 한다는 답변에 포기하고 있다가 염치 불구 하고 지인한테 물어봐서 문제 해결 및 대신 작성해줌...
(대신 작성까진 바라지 않아도 어떤 부분을 수정하고 추가해야 할지 조언이나 적극적인 서포트를 기대했어서 인지 지금 등록한 학원 강의의 서포트가 생각했던 것보다 약한 것 같아 뭔가 되게 돈이 아깝다는 생각이 스물스물.....)

🎈 HTML

 function resultspots($category_id) {
                $.ajax({
                    type: "GET",
                    url: "/hello?category_id=" + $category_id,
                    data: {},
                    success: function (response) {
                        if (response["result"] == "success") {
                            let all_spots = response['spots'];
                            console.log(all_spots);
                            for (let i = 0; i < all_spots.length; i++) {
                                let name = all_spots[i]['name'];
                                let image_name = all_spots[i]['image_name'];
                                let description = all_spots[i]['description'];
                                let url = all_spots[i]['url'];
                                let id = all_spots[i]['id'];

                            let temp_html = `<div class="match">
                                    <div class="match-body">
                                    <h5 class="card-name" style="font-size:25px;">${name}</h5>
                                    <img src="/static/${image_name} "width=300px;" style="margin-top: 20px">
                                    <p class="card-text" style="font-size: 20px; margin-top: 20px">${description}</p>
                                    <a href="${url}"target="_blank" class="button is-danger is-light is-medium" style="margin-top: 20px">more</a>
                                      </div>
                                    </div>`
                            $('#result').append(temp_html);
                        }

                    }
                }
            })
        }
    });

• 가장 중요하고 내가 이해하지 못하고 있던 포인트는 이 함수와 function resultspots() 그 안에 넣을 서버에서 보내 온 키 값이 $category_id 가장 중요한 역할을 하고 있다. 나는 이런식으로 짜야 한다는 개념조차 없었다...하.
  내 혼자 힘으로는 할 수 없었다는 걸 알기에 해결이 됐어도 뭔가 찜찜하고 기분이 안좋다.

・ 이 아이들의 아이디와 클래스를 밑의 div에 먹이고, 카드 전체의 스타일을 줘서 위치 조정, 가운데 정렬을 해 보았다. (세세한 스타일은 코드 한 줄 한줄에 스타일 먹임...)

🎈 HTML

 <div id="result" class="match">
</div>

    .match {
        padding: 2.5% 0;
        display: flex;
        flex-direction: row;
        text-align: center;
        justify-content: space-evenly;
        {#border: 4px double oldlace;#}
    }

• 가로 정렬과 가운데 정렬하는 코드는 따로 검색해서 넣어 봤다.

🎈 참고 사이트
https://xn--web-oi9du9bc8tgu2a.com/css-basis-flex/

・ 시즌 페이지 봄 여름 가을 겨울 글귀를 완성시켰다. 그럴싸 함.

Doing...

・　시즌페이지 완성 시키기 (자동 로그 후, 스크롤이 길게 생기는 이유 알아보기)

What to do

・　 Mytripbox 페이지에 slick cdn 적용 시키기 (코드 알아보기)
🎈
http://ninodezign.com/20-best-free-fantastic-jquery-gallery-and-slideshow-plugins/
・　 좋아요 기능 알아보기
・　 Mytripbox 꾸미기
・　 매칭 결과 페이지랑 Mytripbox 페이지를 연동시키기

Comment ＆ Thought

-백 엔드는 내 적성이 아닌 걸 알았다.
-혼자 사는 인생, 혼자 하는 프로젝트, 혼자 잘 해보자!
-다시는 학원 등록 안할테다....