페스토 파스타는 신이 존재한다는 증거이다

인생에서 직접 만든 카펠리니(엔젤 헤어) 위에 신선한 페스토를 듬뿍 얹은 것보다 나에게 더 큰 즐거움을 주는 것은 거의 없습니다. 저는 진정한 미식가입니다. 특히 이탈리아 요리에 있어서는 항상 더 복잡한 요리법을 시도하고 있지만 이러한 미니멀리스트 요리의 단순함과 즐거움은 결코 만족스럽지 않습니다. 마지막 식사를 선택하는 (불행) 운이 있었다면 파스타 대신 스시와 페스토 사이에서 어려운 결정을 내리겠지만, 그래도 결국에는 페스토 파스타가 승리한다고 생각합니다.

페스토 얘기가 날 배고프게 만드네

어떻게 해야 하나요? 물론 페스토 파스타도 만들어 보세요. 가끔은 "Quando a Roma!"라고 말해야 할 때도 있습니다.

우리의 친근한 이탈리아 시장인 "Il Mercato di Giovanni"에서 구입할 재료 목록을 만드는 것부터 시작하겠습니다. 불변 객체 배열과 가변 객체 배열을 모두 사용하여 두 가지 레시피로 쇼핑 목록을 만듭니다. 필요한 것을 간단히 작성하는 것이 더 효율적이겠지만, 이것이 훨씬 더 재미있다는 것을 알고 계실 것입니다. 페스토 파스타를 만드는 방법을 프로그래밍하는 방법에 대해 자세히 알아보려면 배가 고프고 바로 자세히 살펴보겠습니다. "Mangia Mangia!"

별도의 파스타와 페스토 조리법 배열 만들기

pastaRecipeArray 및 pestoRecipeArray에 대한 변수를 선언하는 것부터 시작하겠습니다. 각 변수는 개체 배열에 할당됩니다. 여기서 각 개체는 개별 재료를 나타냅니다.

각 변수에 배열 값을 할당할 때 Object.freeze() 메서드를 사용하여 변수가 불변인지 확인합니다. (나중에 자세히 설명)

각 레시피 객체에는 다음과 같은 키-값 쌍이 포함된 세 가지 속성이 있습니다.

• 'name' = '문자열' 형식의 성분 이름
• 'recipe' = 파스타, 페스토 또는 둘 다에 재료가 필요한 레시피를 나타내는 '배열' 형식의 값입니다.
• 'price' = 상당히 비현실적인 더미 콘텐츠를 사용하여 '숫자' 형식의 USD 단위 성분 가격

(참고: 이 게시물에서는 내용을 간단하고 상대적으로 단순하게 유지하기 위해 수량 및 기타 세부 정보를 생략했습니다. JSON을 사용하여 이러한 개체를 구현할 수도 있지만 요약 여기.)

이러한 배열을 설정하는 코드는 다음과 같습니다.

const pastaRecipeArray = Object.freeze([
  { "name": "Eggs", "recipe": ["pasta"], "price": 6.99 },
  { "name": "Extra Virgin Olive Oil", "recipe": ["pasta", "pesto"], "price": 12.59 },
  { "name": "Kosher Salt", "recipe": ["pasta", "pesto"], "price": 7.89 },
  { "name": "Semolina Flour", "recipe": ["pasta"], "price": 12.95 }
])

const pestoRecipeArray = Object.freeze([
  { "name": "Basil", "recipe": ["pesto"], "price": 6.99 },
  { "name": "Black Pepper", "recipe": ["pesto"], "price": 9.99 },
  { "name": "Extra Virgin Olive Oil", "recipe": ["pasta", "pesto"], "price": 12.59 },
  { "name": "Kosher Salt", "recipe": ["pasta", "pesto"], "price": 7.89 },
  { "name": "Parmesan", "recipe": ["pesto"], "price": 15.99 },
  { "name": "Pine Nuts", "recipe": ["pesto"], "price": 13.98 }
])

recipe 키가 배열 형식의 값을 가리키는 것을 다시 한 번 알 수 있습니다. 두 레시피 모두 일부 재료가 사용되기 때문에 이렇게 설정했습니다.

pastaRecipeArray가 올바르게 설정되었는지 테스트하기 위해 배열의 각 개체를 반복하는 데 사용되는 콜백 함수인 .forEach() 메서드를 활용할 수 있습니다. 성분을 매개변수로 사용하여 다음과 같이 콘솔에 로그인할 수 있습니다:

pastaRecipeArray.forEach((ingredient) => {
  console.log(ingredient)
})

콘솔을 검사하면 다음과 같은 출력이 표시됩니다.

Object {name: "Eggs", recipe: Array(1), price: 6.99}
Object {name: "Extra Virgin Olive Oil", recipe: Array(2), price: 12.59}
Object {name: "Kosher Salt", recipe: Array(2), price: 7.89}
Object {name: "Semolina Flour", recipe: Array(1), price: 12.95}

마찬가지로 pestoRecipeArray를 다음과 같이 기록할 수 있습니다.

pestoRecipeArray.forEach((ingredient) => {
  console.log(ingredient)
})

결과는 다음과 같습니다.

Object {name: "Basil", recipe: Array(1), price: 6.99}
Object {name: "Black Pepper", recipe: Array(1), price: 9.99}
Object {name: "Extra Virgin Olive Oil", recipe: Array(2), price: 12.59}
Object {name: "Kosher Salt", recipe: Array(2), price: 7.89}
Object {name: "Parmesan", recipe: Array(1), price: 15.99}
Object {name: "Pine Nuts", recipe: Array(1), price: 13.98}

(참고: Array(1) 및 Array(2)와 같은 출력이 표시되면 해당 키를 선택하도록 함수를 다시 작성하거나 콘솔에서 배열을 클릭하여 세부 정보를 볼 수 있습니다. 포함된 내용입니다.)

쇼핑 목록 배열 만들기

레시피 배열을 설정했으므로 이제 다음 단계인 쇼핑 목록 배열을 생성해 보겠습니다. 이를 위해 우리는 객체 배열인 파스타RecipeArray와 pestoRecipeArray를 shoppingListArray라는 새로운 변경 가능한 변수로 결합하려고 합니다. 스프레드 연산자를 사용하여 이 작업을 수행합니다. 다음과 같습니다:

const shoppingListArray = [...pastaRecipeArray, ...pestoRecipeArray]

이제 다음 console.log()를 사용하여 새 목록이 어떻게 보이는지 살펴보겠습니다. 앞으로는 혼란스러운 부분을 제거하기 위해 전체 객체가 아닌 객체 내의 속성 값을 기록할 것입니다. 이 코드를 사용하여 프로세스의 각 단계 후에 목록이 어떻게 변경되는지 확인하고 싶을 것입니다.

shoppingListArray.forEach((ingredient) => {
      console.log(ingredient.name)
})

콘솔에서 목록이 하나로 합쳐진 것을 볼 수 있습니다. 이번에는 각 성분 이름만 기록합니다.

Eggs
Extra Virgin Olive Oil
Kosher Salt
Semolina Flour
Basil
Black Pepper
Extra Virgin Olive Oil
Kosher Salt
Parmesan
Pine Nuts

불변 배열과 가변 배열

pastaRecipeArray와 pestoRecipeArray를 불변으로 만들어야 하는 이유는 무엇입니까? 불변으로 만들면 할당된 후에 값을 변경할 수 없습니다. 우리는 이 레시피를 그냥 찢어버리고 싶지 않습니다. 우리는 또 다른 영광스러운 날을 위해 그들을 구하고 싶습니다. 우리가 임시적이고 변경 가능한 쇼핑 목록에 무엇을 쓰려고 하는지에 관계없이 이러한 불변의 가족 요리법은 계속 유지되어야 합니다.

또한 새로 생성된 shoppingListArray에서 재료를 추가하거나 빼서 원래 레시피에 영향을 주지 않고 특정 취향에 맞게 이 요리를 만들 수 있기를 원합니다.

재료 추가, 교체, 삭제

알다시피 파스타와 페스토 요리법을 쇼핑 목록에 결합했을 때 "엑스트라 버진 올리브 오일"과 "코셔 소금"에 대한 중복 항목이 생겼습니다. 이걸 두 번 살 필요는 없으니 없애자. 중복을 제거하는 더 멋진 방법이 있지만 지금은 .splice()를 사용하여 첫 번째 엑스트라 버진 올리브 오일 개체를 제거하겠습니다.

.splice() 메서드는 배열의 요소를 파괴적으로 삭제하거나 교체합니다. 첫 번째 매개변수는 삭제할 첫 번째 요소를 나타내고 두 번째 매개변수는 해당 시작점에서 삭제하려는 요소 수를 나타냅니다. "엑스트라 버진 올리브 오일"은 배열의 두 번째 개체이지만 배열은 '0'에서 시작하므로 기술적으로 두 번째 개체는 '1'로 표시됩니다. 다음을 실행해 보겠습니다.

shoppingListArray.splice(1, 1)

콘솔에는 이제 "엑스트라 버진 올리브 오일" 개체가 하나만 있는 것을 볼 수 있습니다. (참고: 원본 레시피 배열 중 하나에서 .splice() 또는 이와 유사한 메서드를 사용하려고 하면 TypeError가 발생합니다. 왜냐하면 Object.freeze()를 사용하여 이를 변경할 수 없게 만들었기 때문입니다.)

아직 여분의 "Kosher Salt"가 있으며 이제 .splice()를 최대한 활용하겠습니다. 처음 두 매개변수 외에도 배열의 요소를 새 요소로 대체할 수 있는 세 번째 매개변수가 있습니다. 저는 페스토에 약간의 레몬을 추가하는 것을 좋아하고 너무 짠 음식은 좋아하지 않습니다. 그러니 여분의 "코셔 소금"을 새로운 "레몬" 개체로 교체해 보겠습니다. 더 나은 가독성을 위해 레몬 객체를 변수로 선언하고 이를 세 번째 .splice() 매개변수로 포함하겠습니다.

const lemon = { "name": "Lemon", "recipe": ["pesto"], "price": 2.04 }

shoppingListArray.splice(6, 1, lemon)

오늘은 기분이 좀 짜증이 나네요 상황을 조금 바꿔서 .push()를 사용하여 구운 토마토를 추가해 보겠습니다. .push()를 사용하면 배열 끝에 요소를 추가할 수 있으며 각 매개변수는 새 요소를 나타냅니다. 이제 목록에 "체리 토마토"를 추가해 보겠습니다. 그러고 보니 "마늘"도 깜빡했네요!

const tomatoes = { "name": "Cherry Tomatoes", "recipe": ["pesto"], "price": 5.99 }

const garlic = { "name": "Garlic", "recipe": ["pesto"], "price": 2.99 }

shoppingListArray.push(tomatoes, garlic)

쇼핑 목록 정리하기

이제 모든 재료가 잘 구성되었으므로 쇼핑 경험을 원활하게 할 수 있는 방식으로 구성해 보겠습니다.

.sort()를 사용하여 목록을 알파벳순으로 정리하겠습니다.

shoppingListArray.sort((a, b) => {
  const nameA = a.name
  const nameB = b.name

  if (nameA  nameB) {
    1
  }
  return 0
})

이제 쇼핑 목록이 콘솔에 다음과 같이 표시됩니다.

Basil
Black Pepper
Cherry Tomatoes
Eggs
Extra Virgin Olive Oil
Garlic
Kosher Salt
Lemon
Parmesan
Pine Nuts
Semolina Flour

예상 비용을 미리 계획하기

이제 시장에 진출할 준비가 되었습니다. 하지만 먼저 .reduce()를 사용하여 얼마나 많은 돈이 필요한지 확인하겠습니다. .reduce()로 처리할 내용도 많고, 배도 고파지므로 자세한 내용은 생략하도록 하겠습니다.

const ingredientsPrice = shoppingListArray.reduce((accumulator, ingredient) => {
  return accumulator   ingredient.price
}, 0)

console.log("You will need $"   ingredientsPrice   " to make pesto pasta. Man is life is expensive.")
// You will need $98.39 to make pesto pasta. Wow, life is expensive.

새로운 레시피 목록 배열 생성

그래서 우리는 가게에 가서 재료를 얻었지만 이제 재료를 다시 각각의 레시피로 분리하여 테이블 위에 모든 것을 정리하고 정리하고 싶습니다. .filter(), .includes() 및 물론 .forEach()를 사용하여 파스타Ingredients 및 pestoIngredients라는 두 개의 새로운 배열을 만들어 콘솔에 기록해 보겠습니다.

const pastaIngredients = shoppingListArray.filter((ingredient) => {
  return ingredient.recipe.includes('pasta')
})

pastaIngredients.forEach((ingredient) => {
  console.log(ingredient.name)
})

const pestoIngredients = shoppingListArray.filter((ingredient) => {
  return ingredient.recipe.includes('pesto')
})

pestoIngredients.forEach((ingredient) => {
  console.log(ingredient.name)
})

"포장"

이를 콘솔에 기록하여 볼 수 있듯이 원래의 불변 레시피 배열인 파스타RecipeArray 및 pestoRecipeArray를 수정하지 않은 shoppingListArray를 성공적으로 생성했습니다. 그런 다음 파괴적인 방식으로 shoppingListArray를 변경 가능하게 수정하여 원하는 대로 재료를 추가, 삭제 및 교체할 수 있었습니다. 우리는 또한 가게에 가기 전에 지출해야 할 금액도 계산했습니다. 마지막으로, 우리는 훌륭한 식사를 준비하기 위해 이러한 재료들을 각각의 레시피인 파스타 성분과 페스토 성분으로 다시 분리할 수 있었습니다.

글쎄, 정말 맛있는 요리였습니다. 여러분도 저처럼 재미있게 즐기셨기를 바랍니다. 또, Mangia Mangia!