랜덤 음식 추천 계산기

랜덤 음식 추천 계산기

---

( 사실 계산기는 아니지만 그렇다고 하자 )

역시나 디자인을 모른다면 일단 그라데이션부터,,

구조 잡기

---

이 계산기는 처음 멘토님에게 과제를 받았을 때 머리 속에 띵하고 생각났던 아이디어이다. 한 때 유행했었던 랜덤 음식 추천기로, 그 시절에는 신기해하기만 했던 내가 이것을 만들게 된다니깐 내심 설레기도 하였다.

먼저 음식의 종류를 나눌 수 있는 큼지막한 기준을 세웠다

• 음식의 문화 -> 한식 / 일식 / 중식 / 양식

( 만들면서 생각한 건데 그러면 미국은 캐나다식, 멕시코식, 동양 음식 이런식으로 나누려나..? )

• 음식의 종류 -> 면 / 식사(meal) / 탕·스프

[음식의 문화] * [음식의 종류] 별로 각각의 배열을 만들어 음식 5가지씩 추가한다.

사용자가 두 가지 선택지를 고르고 밑에 '음식을 고르자!' 버튼을 클릭하면 두 선택지에 해당하는 배열에서 랜덤으로 음식이 가운데 html에 나타나게 된다.

JavaScript

---

const koreanNoodle = ['비빔국수', '라면', '잔치국수', '콩국수', '냉면']
const koreanMeal = ['제육볶음', '낙지 볶음', '불고기', '삼겹살', '한우']
const koreanSoup = ['김치찌개', '된장찌개', '부대찌개', '갈비탕', '순두부찌개']
const chineseNoodle = ['짜장면', '짬뽕', '볶음면', '고추잡채', '탄탄면']
const chineseMeal = ['새우볶음밥', '마파두부', '탕수육', '라조기', '난자완스']
const chineseSoup = ['계란탕', '유산슬', '누룽지탕', '마라탕', '짬뽕']
const japaneseNoodle = ['모밀', '우동', '야끼소바', '라멘', '나베야키']
const japaneseMeal = ['초밥', '알밥', '사시미', '텐동', '사케동']
const japaneseSoup = ['미소된장국', '스키야키', '나베야키', '라멘', '샤브샤브']
const westernNoodle = ['까르보나라','투움바파스타','알리오 올리오','쉬림프 아라비아따','로제 파스타']
const westernMeal = ['돈까스', '햄버거', '바베큐', '스테이크', ' 샐러드']
const westernSoup = ['양송이 스프','옥수수 스프','토마토 스프','치킨누들스프','비프스튜']

랜던 음식 계산기를 만들면서 이 부분이 가장 힘들었다.
각 나라 별 음식을 열심히 구글링하면서 찾아보며서 하나하나 집어넣었다.
그 와중에 넣을 음식이 없어서 중복된 음식을 넣기도 하였고
분명 그 나라 음식이 아닌 음식도 넣어져있을 것이다..

function getFood() {
    const spanFood = document.getElementById('food')

    const countryArray = document.getElementsByName('country')
    const foodTypeArray = document.getElementsByName('foodType')

spanFood 는 내가 선택을 하고 버튼을 눌렀을 때 음식이 나타나는 span태그이다.

countryArray 는 음식의 문화(나라)에 대한 input ( radio ) 배열이다.

foodTypeArray 는 음식의 종류에 대한 input ( radio ) 배열이다.

*NOTE : 위 배열은 countryArray, 아래 배열은 foodTypeArray이다.

    let randomNumber = Math.ceil(Math.random() * 10) % 5
    //0~4만 랜덤으로 나오게 설정
    
    const country = []
    const foodType = []

    for (let i = 0; i < countryArray.length; i++) {
        let num = country.push(countryArray[i].checked)
    }
    for (let i = 0; i < foodTypeArray.length; i++) {
        let num = foodType.push(foodTypeArray[i].checked)
    }

randomNumber 변수는 0부터 4까지 5가지의 숫자 중 랜덤으로 추출하여 담는다.

• Math.random() 은 0부터 1사이 난수를 생성한다.

• 나는 0부터 5까지만 필요하기에 10을 곱해 'x . yyy..' 형태를 만든 후
  Math.ceil로 소수를 올림하여 'x' 정수 형태로 만든다.
  

• 그렇게 나온 수는 0~9일 것이고, 여기서 %5를 통해 나머지인 0~4값을 얻는다.

country 와 foodType 변수는 아까 만들었던 countryArray 와 foodTypeArray 의 값들 중 check 여부를 boolean type으로 반환하여 새로운 배열을 담는다.

*NOTE : 체크가 된다면 true를 반환하고, 체크가 안된 값들은 false를 반환한다.

    if (country[0] === true && foodType[0] === true) {
        spanFood.innerText = koreanNoodle[randomNumber]
    } else if (country[0] === true && foodType[1] === true) {
        spanFood.innerText = koreanMeal[randomNumber]
    } else if (country[0] === true && foodType[2] === true) {
        spanFood.innerText = koreanSoup[randomNumber]
    } else if (country[1] === true && foodType[0] === true) {
        spanFood.innerText = japaneseNoodle[randomNumber]
    } else if (country[1] === true && foodType[1] === true) {
        spanFood.innerText = japaneseMeal[randomNumber]
    } else if (country[1] === true && foodType[2] === true) {
        spanFood.innerText = japaneseSoup[randomNumber]
    } else if (country[2] === true && foodType[0] === true) {
        spanFood.innerText = chineseNoodle[randomNumber]
    } else if (country[2] === true && foodType[1] === true) {
        spanFood.innerText = chineseMeal[randomNumber]
    } else if (country[2] === true && foodType[2] === true) {
        spanFood.innerText = chineseSoup[randomNumber]
    } else if (country[3] === true && foodType[0] === true) {
        spanFood.innerText = westernNoodle[randomNumber]
    } else if (country[3] === true && foodType[1] === true) {
        spanFood.innerText = westernMeal[randomNumber]
    } else if (country[3] === true && foodType[2] === true) {
        spanFood.innerText = westernSoup[randomNumber]
    }
}

매우 난잡하게 보이지만 결국 country 와 foodType 배열에서 true 값을 반환하면, 그 값에 해당하는 음식 [ 난수 ] 를 통해 spanFood 에 삽입한다.

Review

---

가장 설레하면서 만들었던 계산기였기에 더욱더 완성도가 높은 함수를 만들고 싶었다. 내가 현재 갖고 있는 이 코딩 도구들로 내가 생각했던 창작물을 만들어냈다는 게 나 자신으로도 뿌듯하고 성취감을 갖게 하였다. 무엇보다 내가 더 자랑스러운 것은 내가 머리 속으로 생각했던 구조와 로직이 그대로 구현되어 실행된다는 것이었고, 만들어내고 싶다는 욕망과 열정으로 완성했다는 것에 성취감을 느꼈다.

그럼에도 불구하고 만족도가 높지 못했던 것은 아직 부족한 나의 코딩 실력 탓일 것이다.

1. 데이터 처리
   각 국 종류별 음식이 수도 없이 많을텐데 그 것을 다 담아내기 부족했다는 것과 데이터를 집어넣는 과정에서 수작업으로 하였기에 굉장히 안 이쁘게 들어갔다는 점이 마음에 걸린다.

2. 함수 처리
   저번 게시글과 동일하게 이번 로직도 하나의 큰 함수로만 이루어져 있다. 하나의 함수는 특정 하나의 기능만 수행할 수 있는 것이 가장 심플하고 보기 편할 것 같기에, 짧은 함수를 여러 개 만들어 수행시키는 로직을 연습해야 겠다.

3. if 문
   마지막에 저렇게 반복되는 형태가 20줄 가량 반복되었다는 게 너무 자존심이 상한다. 분명 저것도 간단한 몇 줄로 줄어들 수 있을 것 같은데 계속 생각해도 지금에서는 생각나지가 않는다. 미래의 내가 다시 발견하였을 때 짧은 한숨과 함께 간단히 고칠 수 있길 바란다..