0. TIL

  • 객체에 아무리 width, margin 줘도 가운데 정렬이 안될 때는, div를 한 번 더 씌워서 style 입히면 된다
  • 색상 코드 rgba로 투명도를 조절할 수 있음
  • .addClass / .removeClass 함수와 2중class(?)를 이용하면 탭을 옮길 수 있다! 야호
if (i_status == 'none') {
  $('#i_tab').addClass('active')
  $('#s_tab').removeClass('active')
  }
  • "다중체크박스 선택값 받아오기"로 검색해서 적용해봤음
function selected() {
  $("input[name=box]:checked").each(function() {
      let item = $(this).val()
      }
  console.log(item)
  })

저 함수 안에 ajax도 넣을 수 있다! 근데 API를 매끄럽게 만들지는 못했다. 속상해. 이걸로 뭔가 어찌어찌 해보면 될 것 같은데!

  • 다른 할 일들이 다 끝나고(혹은 미뤄지고), 하루종일 집에 처박혀서 프로젝트만 했다. 적성에 맞는 것 같아..! 개발 더 배워서 프리랜서하면서 여행다니고 살아도 좋겠다. 칼럼도 쓰고, 사진도 찍고.

1. 한 것

  • db 수집. 정제된 데이터. 뿌듯.
  • db 기반으로 체크박스 만들어주는 API
@app.route('/home', methods=['GET'])
def listing():
    ingredients = list(db.ingredients.find({'type':'ingredient'},{'_id':0}))
    spices = list(db.ingredients.find({'type':'spice'},{'_id':0}))
    return jsonify({'result':'success', 'ingredients':ingredients, 'spices':spices})
    $(document).ready(function() {
      $.ajax({
        type: "GET",
        url: "/home",
        data: {},
        success: function(response){
          let ingredients = response['ingredients']
          for (let i = 0; i < ingredients.length; i++) {
            let ingredient = ingredients[i]['name']
            let temp_html = '<div class="form-check form-check-inline">\
            <input class="form-check-input" name="box" onclick="selected()" type="checkbox" value="'+ingredient+'">'+ingredient+'</input>\
            </div>'
            $('#ingredient').append(temp_html)

            let spices = response['spices']
            for (let i = 0; i < spices.length; i++) {
              let spice = spices[i]['name']
              let temp_html = '<div class="form-check form-check-inline">\
              <input class="form-check-input" name="box" onclick="selected()" type="checkbox" value="'+spice+'">'+spice+'</input>\
              </div>'
              $('#spice').append(temp_html)
            }
          }
        }
      })
    })
  • 주재료/조미료 탭 넘길 수 있도록 JQuery 및 css
    function i_click() {
      let i_status = $('#ingredient').css('display')
      let s_status = $('#spice').css('display')
      if (i_status == 'none') {
        $('#ingredient').show()
        $('#i_tab').addClass('active')
        $('#spice').hide()
        $('#s_tab').removeClass('active')
      }
    }
  • 선택한 재료 밑에 버튼형식으로 볼 수 있도록 API를 일단.. 짜긴 짰음
    function selected() {
      $('#std_items').empty()
      $("input[name=box]:checked").each(function() {
        let item = $(this).val()
        $.ajax({
          type: "GET",
          url: "/selected?item="+item,
          data: {},
          success: function(response){
            temp_html = '<button type="button" class="std_item">'+response+'</button>'
            $('#std_items').append(temp_html)
          }
        })
      })
    }

  • 하다보니 class, id, name 전부 뒤죽박죽 되어서 다시 다 정리하고 코드 업데이트 했다. 이름 붙이면서 기억할 수 있을거야! 하고 바로 시작했더니, 기능 추가할 때 마다 selectedbox, selectbox, selecteditem, selectie...fd... 잘 되던 것까지 오류나고 난장판이 되었음. 다음부터는 디자인 잡자마자 정리해두기. 꼭.

2. 고민

  • 아직도 완벽한 db를 꿈꾸는 땅언.. menus db도 정제된 재료명만 가진 애들로 추리고싶다. 시간만 있으면 할 수는 있을 것 같은데, 지금 나 시간 없는거지..
  • std_items 보여주는 부분이 체크박스 하나 누를 때 마다 새로고침되기 때문에, 페이지가 매끄럽지 않고 버튼 순서도 계속 바뀐다. API 잘못 짠거지.. ..도움! 도움!
  • 하나만 선택할 때는 이렇게도 해봤다. 근데 여러개 해도 item 값이 안바뀌고 처음걸로 계속 붙음
    function selected() {
      let item = $("input:checkbox[name=box]:checked").val()
      $.ajax({
        type: "GET",
        url: "/selected?item="+item,
        data: {},
        success: function(response){
          temp_html = '<button type="button" class="std_item">'+response+'</button>'
          $('#std_items').append(temp_html)
        }
      })
  • 모아서 레시피 보기 버튼 눌렀을 때. 도대체 어떻게 넘겨줄 것인지?! 일단은 또 위에서 배운 :checked 어쩌고 써보긴 했는데, 도무지 모르겠음. 문법이 이해가 안가서 어떻게 고칠줄도 모르겠음! 큰일!

3. 내일 할 것?

  • 가능한 레시피 보여주기는 고사하고, 일단 선택값 서버로 넘기는 것 부터 해결하기
profile
배울게 많은 햇병아리 개발자

0개의 댓글