DAY12 : TIL [뼈대잡기]

업무 분담 : 첫 페이지 만들기

▶ GITHUB에 등록한 ISSUES 개수대로 각자 하나씩

• 아래 와이어 프레임 중 빨간 상자 부분을 내가 해보기로 했다. 처음엔 사실 간단한 부분같다는 생각에 얼추 끝내고 큰일난 인강 진도를 나가야겠다는 헛된 꿈도 꾸었었다. 앞날도 모르고 그런 적이 있었다.
  

작업물 현황

▶ 최소한으로 필요한 기능들

1. 제목, 소개, 이미지

2. 재료 및 양념 선택:
   ① SELECT BOX에 DB 불러오기
   ② 최소 선택 개수 지정 (3개 혹은 5개)
   ③ 선택한 옵션 TAG로 출력하기 (아래 이미지처럼)

(출처 : 스파르타코딩클럽 멤버카드)

3. 음식 분류: 한식, 양식, 중식, 일식, 동남아, 그 외...

4. 난이도: 상/중/하

5. 소요 시간: 30분~1시간/1~2시간/2~3시간

6. 레시피 보기 버튼: (레시피 상세보기 창을 출력할 수 있는)
   
   

▶ 작업 진행률

1. 제목, 소개, 이미지

   • ✅ 완료
   • 📝 폰트 및 이미지 변경, carousel 기능 수정 필요

2. 재료 및 양념 선택:
   ① SELECT BOX에 DB 불러오기
   ② 최소 선택 개수 지정 - 3개 혹은 5개
   ③ 선택한 옵션 TAG로 출력하기

   • ❌ 미완
   • 📝 select box와 DB 연동 방법 필요

3. 음식 분류: 한식, 양식, 중식, 일식, 동남아, 그 외...

   • ✅ 완료
   • 📝 DB의 중국, 이탈리아 등 나라 이름의 음식 분류명 수정 가능 여부 파악 필요

4. 난이도: 상/중/하

   • ✅ 완료

5. 소요 시간: 30분~1시간/1~2시간/2~3시간

   • ✅ 완료

6. 레시피 보기 버튼: (레시피 상세보기 창을 출력할 수 있는)

   • ✅ 완료
   • 📝 추후 레시피 상세보기 창과 연결 예정

▼ STATUS

TROUBLE SHOOTING

▶ 대용량 API 값

• 사용하려는 OPEN API 값이 너무 커서 요청 가능한 데이터에 한계가 있었다. 이에 팀 내의 자체적인 DB로 저장해서 사용하기로 했고, 멘토링(?)으로 괜찮다는 답도 받았다.
• 실제로 현업에서도 API보다는 DB 저장이 추후 극단적인 상황에서 컨트롤하기 쉽기 때문에 API와 DB 저장을 섞어서 사용한다고 한다.
  (극단적 상황 예: 갑자기 API 사용이 불가능해진 상황)
• data_init 파일로 사용 가능해짐! 팀원분들은 다들 천재야!
  
  

▶ SELECT BOX가 큰일났다. 완전 이멀젼씨🚨

• 재료 및 양념 선택 BOX에 크게 3가지 기능을 추가해야 하는데,
  ① SELECT BOX에 DB 불러오기 👈 여기부터 막혀버린 것...
  ② 최소 선택 개수 지정 (3개 혹은 5개)
  ③ 선택한 옵션 TAG로 출력하기 (아래 이미지처럼)
• 인강도 다시 봐보고, 인터넷 검색도 해보고, 이것저것 시도해봤는데 안 된다.

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

@app.route('/ingredient', methods=['GET'])
def listing():
    recipe_ingredient = list(db.recipe_ingredient.find({},{'_id':False}))
    return jsonify({'all_recipe_ingredient':recipe_ingredient})

GET으로 가지고 와서

재료들을 출력하고

<script>
        $(document).ready(function () {
            showRecipes();
        });

        //데이터 가져오기
        function showRecipes() {
            $.ajax({
                type: "GET",
                url: "/ingredient",
                data: {},
                success: function (response) {
                    let recipe_ingredient = response['all_recipe_ingredient']
                    for (let i = 0; i < recipe_ingredient.length; i++) {
                        let ingredient = recipe_ingredient[i]['ingredient']

                        let temp_html = `<select class="custom-select" id="inputGroupSelect01">
                                                <option selected>재료와 양념을 골라보세요!</option>
                                                <option value="1">${ingredient}</option>
                                        </select>`
                        $('#inputGroupSelect01').append(temp_html)
                    }
                }
            })
        }
    </script>

이렇게 가져오는 분명 이 단계에서 망한 것이 분명한데
마치 오답임을 알면서도 적어내리는 서술형 문제와 내 답안을 보는 기분이다
작성한 걸 DB에 업데이트 하는 것은 알지만 왜 그 반대는 못하는가 흑흑

부끄러워서 코드 올리기 싫었지만 이 잔인한 공개처형을 남겨두어야
두고두고 보면서 초심을 잃겠다 다짐할 것 같아서 올린다.

▼ 고로 CHECK LIST:

• ✅ lecture
• ❌ workout review

• SELECT BOX에 DB 불러오기
• 최소 선택 개수 지정 (3개 혹은 5개)
• 선택한 옵션 TAG로 출력하기