하나씩 문제를 해결해나가기 위한 제일 첫 걸음!
가장 처음에 나와 있는 팁 계산기를 만들어보았다.
한창 React를 사용하다보니 Javascript가 전체적으로 가물가물해졌다.
이게 라이브러리에 종속되는 개발자가 되는 길인가... 싶은 생각이 들었다.
그래서 Javascript의 기반을 조금 더 다지고, 생각하고 디버깅 하는 힘을 기르고자 Javascript를 이용하여 구현해보고자 한다.
이는 "코딩트레이닝" 이라는 책을 기준으로 한다
그 책을 보면 기본적인 것들은 사실 어느정도 제공을 해줬다.
특히 첫 번째 문제이기 때문에 더 다양한 정보들을 제공해줬는데 필요한 것들을 요약하자면 아래와 같다.
**1. Display section.**
Inputs:
- billAmount:
- Tip Rate:
Expected result
- Tip
- Total
**2. calculate**
Prompt for billAmount with "What is the bill amount?"
Prompt for tipRate with "What is the tip rate?"
convert billAmount to a number
convert tipRate to a number
tip = billAmount * (tipRate / 100)
round tip up to nearest cent
total = billAmount + tip내 생각에도 이건 그리 어려울만한 문제가 아닌 것처럼 생각되었다.
Input에 들어가는 billAmount, TipRate만 잘 작성하면 나머지는 계산 방식만 넣으면 되기 때문이다.
물론 그 생각은 맞았지만, React에 너무 길들여져서일까... 각각의 input창을 누르면 숫자가 찍히도록 하는 것까지는 잘 만들었는데, 그 숫자를 밖에서 사용하는 방법이 헷갈렸다.
inputBillAmount.addEventListener("click", updateBillAmountValue);
inputTipRate.addEventListener("click", updateTipRateValue);
let bill;
let tip;
function updateBillAmountValue() {
let promptNum = prompt("What is the bill amount?");
inputBillAmount.value = promptNum;
bill = Number(promptNum);
updateTotalTip(bill);
}
function updateTipRateValue() {
let promptNum = prompt("What is the tip rate?");
inputTipRate.value = promptNum;
tip = Number(promptNum);
updateTotalBill(tip);
}
billButton.addEventListener("click", () => {
inputBillAmount.value = 0;
});
rateButton.addEventListener("click", () => {
inputTipRate.value = 0;
});최종적으로 내가 사용한 방법은 React의 useState처럼 전역 변수로 bill과 tip을 정해주고, 그 안에 넣은 숫자를 사용하는 것이다.
function updateTotalBill(tipTarget) {
globalTipRate = tipTarget;
resultTip.textContent = Math.round(globalBillAmount * (globalTipRate / 100));
resultTotal.textContent = globalBillAmount + resultTip.textContent;
}그리고 updateTotalTip이라는 함수에 그 전역변수를 넣어서 파라미터로 사용한다.
그리고 또다른 전역변수를 만들어서 넣었는데(지금보니 쓸데없어 보인다..) 그것을 가지고 나와있는 공식만 만들면 끝나는 것이다!
나의 Javascript의 지식 수준 한계로 그리 예쁘지 않은 코드로 끝났지만 우선은 Javascript를 이용해서 어떤 문제를 고민해보고 해결하려고 하는데 목적을 두고 공부하기 때문에 우선은 내 목적에 맞춰서 공부하도록 하고, 나중에 기회가 될 때 리팩토링에 대해서 자문을 구해보려고 한다.
.jpg)