DAY17 : TIL [로딩 페이지]

안휘원·2021년 9월 29일

TIL 스파르타코딩클럽 헤얿마이메뉴

spartacodingclub

목록 보기

12/39

TROUBLE SHOOTING 🧨

▶ 데이터(DB) 문제 : 드디어 해결 완료! ༼;´༎ຶ ۝༎ຶ`༽

from bson.objectid import ObjectId 문구
- 삭제해도 무관한 거였는데, github에서 pull할 때 제외되지 않고 딸려온 것였다. 삭제 완료.
그리고 대망의 localhost:5000! 이제 드디어 방법을 찾았다! (항상 감사한 마이 에인졀👼) index.html 먼저 실행하면 안 됐던 거였다.
1) app.py를 flask로 먼저 실행

2) index.html 실행

3) localhost:5000 접속하면 퍼풱-ㅌ 💯

▶ SELECT BOX 스크롤 문제

검색창 추가 완료
- 검색창은 만들었지만 아직 완성이 안 돼서 검색이 안 된다 크크 XD 내일 안으로 해결 가능할 듯.

LOADING PAGE

▶ 레시피 로딩 시간

데이터가 워낙 많다보니, 고른 재료를 포함한 레시피를 불러오는 데에 시간이 1-2초 정도 걸린다. (레시피가 많을 수록 더 걸림) 그래서 레시피 창으로 넘어가는 사이에 로딩 페이지가 필요하다는 결론이 나왔다. 나를 괴롭혔던 데이터 문제도 해결이 되었으니, 드디어 나도 몫을 할 수 있겠다 싶어 내가 맡기로 했다.
아래처럼 창에 구현하는 것까진 했는데, 이걸 팀의 main index.html에 적용이 어렵다. 검색해서 나오는 방법들 하나하나 다 따라해봤는데도 안 된다 😭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LOADING TEST2</title>

    <script>
        $(document).ready(function () {
            $('#loading').hide();

            $('#next').submit(function () {
                $('#loading').show();
                return true;
            });
        });
    </script>

    <style>
        /* page-loading */
        #loading {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: fixed;
            display: block;
            opacity: 0.8;
            background: white;
            z-index: 99;
            text-align: center;
        }

        #loading > img {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 100;
        }
    </style>
</head>
<body>
<div id="loading">
    <img src="LoadingImg.gif" alt="loading">
    <p>레시피 가져오는 중...🔍</p>
</div>

<form action="next" method="post" id="next">
    <input type="hidden" value="test" name="test">
    <input type="submit" value="레시피 보기">
</form>
</body>
</html>

그리고 다른 테스트용에서는 잘만 적용되는 gif 이미지가, project용에서는 적용이 안 되고 빨갛게 뜬다. 답답쓰. 다른 이미지로도 안 되는지 확인해봐야겠다.

FEEDBACK 📑

▼ TODAY'S MEMO :

각오는 하고 있었지만, 생각보다 더 나는 용감했던 거였다. Python의 P도 모르는 상태에서 교육을 시작하고 일주일만에 프로젝트를 들어가니 내가 각오했던 것보다 훨씬 숨가쁘게 지나간다. (물론 2주 있던 시간 동안 유튜브 강의 검색해서 이것저것 주워들은 건 전혀 도움이 되지 않았으니 없는 셈 치고!)
나도... 나도 팀원분들 회의에 끼고 싶다...! 무지식인 상태에서 최대한 도움이 되고자 맷돌을 굴리고 있지만, 점점 더 깊고 많은 기능(기술)들이 필요로 될수록 밑천이 드러나고 있다...!
코치님들께 상담이든, 유튜브 강의든, 책이든, 뭐든 비전공자인 내가 단시간에 최대한의 지식을 습득할 수 있는 방법을 찾아봐야겠다. 이대로는 아니 된다 이대로 이 완벽한 버스에서 무임탑승자가 될 순 없다.
어떤 식으로든 도움이 되고 말겠어🔥
하지만 일단 오늘의 심정을 말해보자면...

┈┈┈┈╯ ╰┈┈┈╮

╰┳┳╯ ╰┳┳╯
도 　 죄

움 　　  송
            ╰┈┈╯
못     ╭━━━━━╮　 해
           ┈┈┈┈
돼 　　     요

따흑

안휘원

우당탕탕 개발자 성장일지

이전 포스트