2장 개인프로젝트 :날씨에맞는 음식추천해주는 웹앱만들어보기

1장에서의 문제점 발견

이전 코드에서는 현재 온도정보를 저장해둘 전역변수를 선언해둔뒤

// 현재 온도 상태를 저장해둘 변수 now_temp
let now_temp = 0;

function callWeather() {
~~~
now_temp = Math.round(data.main.temp - 273.15);

}

openweather Api를 통해 날씨정보를 받아올때 변수에 온도를 저장해두고 온도에대한 정수데이터를 담고있는 now_temp 변수를 활용

현재 온도를 숫자 범위별로 다른 식당정보를 보여주도록 처리해놓았음.

// 온도가 10도미만일때
      if (now_temp < 10) {
        $food_image.src = data.food[0].image;
        $food_name.textContent = data.food[0].name;
        $food_description.textContent = data.food[0].description;
        // 온도가 10도 ~ 15도 사이일때
      } else if (now_temp >= 10 && now_temp <= 15) {
        $food_image.src = data.food[2].image;
        $food_name.textContent = data.food[2].name;
        $food_description.textContent = data.food[2].description;
        // 온도가 15도 ~ 20도 사이일때
      } else if (now_temp >= 15 && now_temp <= 20) {
        $food_image.src = data.food[3].image;
        $food_name.textContent = data.food[3].name;
        $food_description.textContent = data.food[3].description;
      }

 

변경 사항

openweather Api를통해 날씨를 받아오고 받아와 가공된 온도정보를 음식정보를 표시해주는 showfood()함수의 파라미터로 보냄

function callWeather() {
~~~
let now_temp = Math.round(data.main.temp - 273.15);

      // 날씨 정보를 가져온 후에 음식 정보를 표시
      showfood(now_temp);
~~~
}

 

showfood 함수

이전의 반복되는 if문을 통해 온도범위를 지정해두고 각 온도마다 다른 식당정보를 보여주도록 했던 로직을 다음과같이 바꿈

// 음식 정보를 받아오기.
function showfood(now_temp) {
  fetch("../before/food.json")
    .then((response) => response.json())
    .then((data) => {

       // 각 온도 범위에 해당하는 음식을 선택하는 객체 배열
      const temperatureRange = [
        { min: -Infinity, max: 9, foodIndex: 0 , season : "winter"}, // 10도 미만
        { min: 10, max: 15, foodIndex: 2 , season : "autumn"},      // 10도 ~ 15도
        { min: 16, max: 20, foodIndex: 3 , season : "spring"},      // 15도 ~ 20도
        { min: 21, max: 25, foodIndex: 4 , season : "early_summer"},      // 20도 ~ 25도
        { min: 26, max: 30, foodIndex: 5 , season : "high_summer"},      // 25도 ~ 30도
      ];

       // 현재 온도에 해당하는 온도 범위를 찾음
      const selectedRange = temperatureRange.find((range) => {
        return now_temp >= range.min && now_temp <= range.max;
      });

      console.log(selectedRange)

      // 선택된 온도 범위에 해당하는 음식 정보를 가져옴
      const selectedFood = data.food[selectedRange.foodIndex];
      
      // 음식 정보를 UI에 표시
      $food_image.src = selectedFood.image;
      $food_name.textContent = selectedFood.name;
      $food_description.textContent = selectedFood.description;

    //   // 날씨 타이틀을 얻어내고자 weather_title_generator 함수에 현재 온도 전달
      document.querySelector("#weather_title").innerHTML = weather_title_generator(selectedRange)
    })

    .catch((error) => {
      console.error("Error fetching data:", error);
    });
}

 

각각의 온도 범위를 지정해두고 그에맞는 food.json 배열로 구성된 더미데이터들의 index값을 정해두고 계절타이틀을 부여해놓음으로써

현재 온도범위와 맞는 음식정보를 가져올수 있을뿐만아니라

온도 범위에 맞는 날씨에 어울리는 타이틀을 지어주는 weather_title_generator 함수의 파라미터로 온도범위값을 넘겨 타이틀을 얻고
카드에 타이틀을 띄울수 있게되었다

// 온도 범위에따라 날씨 타이틀 지정해주는 함수
function weather_title_generator(selectedRange) {
  console.log(selectedRange.season)

  if(selectedRange.season === "winter"){
    return "따뜻한 스튜와 함께하는 겨울의 감성"
  } else if (selectedRange.season === "autumn") {
    return "포근한 차와 함께하는 가을의 맛"
  }  else if (selectedRange.season === "spring") {
    return  "상쾌한 샐러드로 화창한 봄을 맞이하세요" 
  }
   else if (selectedRange.season === "early_summer") {
    return "시원한 아이스크림과 함께하는 여름의 상쾌함"
  } // 온도가 25도 ~ 30도 사이일때
    else if (selectedRange.season === "high_summer") {
    return "뜨거운 여름엔 시원한 맥주를 마셔보세요"
    }
}

 

 

 

대략 저런 느낌인데 css로 나중에 이쁘게 잡아줘야할듯 

 

또 문제점 발견 

1. 다시 if 문의 반복이라는 문제점을 발견해냈는데 서칭을 조금하다보니 if/else의 대체로 객체 리터럴을 사용한다는 글을 보게되었음

이를 활용해볼 예정

2. 온도범위에맞게 식당정보를 찾아올때 더미데이터로 아무런 의미없이 나열해둔 데이터들을 그냥 가져오도록 했는데
실제 날씨와어울리는 음식정보를 추천해주기위해 어떻게해야할지 조금더 고민해볼 필요가있을듯

이는 1장에서의 문제점 중 하나였던 더미데이터가아닌 실제 DB를 구축해보면서 혹은 더미데이터안에서 음식정보에 어울리는 계절정보를 매칭할수있도록 계절에 대한 속성을 추가해주는 방안으로 가보는것도 괜찮지않을까 생각이듬 

 

food.json파일

{
 "food": [
  {
    "name": "김치찌개",
    "description": "한국의 전통적인 김치를 이용한 찌개 요리",
    "image": "http://www.lampcook.com/wi_files/food_top100/top12/12_1_1.jpg"
    
  },
  {
    "name": "된장찌개",
    "description": "된장을 주재료로 한 대표적인 한국의 찌개",
    "image": "http://www.lampcook.com/wi_files/food_top100/top12/12_1_2.jpg"

  },
  {
    "name": "불고기",
    "description": "양념에 재운 소고기를 구워 먹는 한국 음식",
    "image": "http://www.lampcook.com/wi_files/food_top100/top12/12_1_3.jpg"
  },
  {
    "name": "비빔밥",
    "description": "쌀밥에 고기나 나물 등과 여러 가지 양념을 넣어 비벼 먹는 음식",
    "image": "http://www.lampcook.com/wi_files/food_top100/top12/12_1_5.jpg"
  },
  {
    "name": "잡채",
    "description": "고기와 여러 가지 채소를 가늘게 썰어 볶아서 섞은 음식",
    "image": "http://www.lampcook.com/wi_files/food_top100/top12/12_1_6.jpg"
  },
  {
    "name": "삼겹살",
    "description": "살코기와 비계가 각각 세 겹씩 교차해 있는 돼지고기의 갈비-뱃살 부위를 구워먹는 음식", 
    "image": "http://www.lampcook.com/wi_files/food_top100/top12/12_1_7.jpg"
  },
  {
    "name": "갈비",
    "description": "돼지의 갈비뼈에 붙은 살 또는 그 살을 먹기 좋게 요리한 음식",
    "image": "http://www.lampcook.com/wi_files/food_top100/top12/12_1_8.jpg"
  }
  ]
}