[tip-calculator-app] kermit(이윤성) 미션 제출합니다. #3
[tip-calculator-app] kermit(이윤성) 미션 제출합니다. #32yunseong wants to merge 10 commits intoJS-GreenTea:mainfrom
Conversation
- 5%, 10%, 15%, 25%, 50%
loopy-lim
left a comment
loopy-lim
left a comment
There was a problem hiding this comment.
바쁘셨을 텐데 이번 미션하시느라 수고하셨습니다!
calc함수, render함수 event함수를 명확하게 나누셔서 보기 수월한 코드였습니다.
최근에 알았는데 function은 호이스팅이 되기 때문에 const 이름 = () => {} 이 좋다고 하더라구요. prototype이 선언 안되기도 하고요. 이번에 쓰신 모든 코드도 arrow function으로 처리하셔서 저도 다음에 보고 진행해보겠습니다!
| let bill = 0; | ||
| let people = 0; | ||
| let tipPercent = 0; | ||
| let tipPerPeople = 0; | ||
| let total = 0; |
There was a problem hiding this comment.
이 미션에서는 페이지에서만 위와 같은 정보를 다루지만, 추후 다른 데이터와 명칭 등 다양하게 겹칠 수 있어 이 bill 데이터를 다루는 DTO같은 객체를 만들어 관리하면 더 좋을 것 같습니다.
| const renderWarningStatus = () => { | ||
| // some logic... | ||
| }; |
There was a problem hiding this comment.
저는 이런 습관 정말 좋은 것 같습니다...분명 대부분의 IDE에서도 TODO: 같은 기능을 제공해주기도 하고, 실제로 저렇게 써 놓으면 다음날이 되어도 무슨 코드를 작성하려고 했는지 기억날것 같습니다.
저도 너무 주석을 경계하지 말고 다음번에는 이런식으로 작성해보도록 하겠습니다.
| const isVaildInput = (target) => { | ||
| return !isNaN(target); | ||
| }; |
There was a problem hiding this comment.
airbnb에서도 이렇게 컨벤션을 지키라고 하더라고요!
| const printState = () => { | ||
| console.log("bill:", bill); | ||
| console.log("people:", people); | ||
| console.log("tip:", tipPercent); | ||
| }; |
There was a problem hiding this comment.
git에 올릴때는 console.log를 빼주시는 것이 더 깔끔한 코드가 될 것 같습니다.
There was a problem hiding this comment.
맞네요 좋은 피드백 감사드립니다 👍 👍 👍
| - 인원의 입력이 유효한지 판단하는 기능 | ||
| - 인당 팁 금액을 계산해 보여주는 기능 | ||
| - 인당 총 지불액을 계산해 보여주는 기능 | ||
| - 내용을 모두 초기화 하는 기능 |
| return !isNaN(target); | ||
| }; | ||
|
|
||
| const render = () => { |
There was a problem hiding this comment.
저도 이 부분에 대한 고민이 많았는데 이런 식으로 로직을 분리하셨군요!! 이게 더 가독성도 좋은 것 같네요
There was a problem hiding this comment.
정확히 맞는 건 아니지만, 리액트에서 상태가 변경되면 render() 함수가 호출되는 걸 모방했습니다 ~!
| <div id="total-result">0.00</div> | ||
| <input type="button" value="Reset"/> | ||
| </body> | ||
| <script src="./src/index.js"></script> |
There was a problem hiding this comment.
윤성님은 원래 html -> js -> css 순으로 코드를 작성하나요? 혹시 이런 경우 평소 css를 작성할 때 불편한 점은 없었는지 궁금합니다
There was a problem hiding this comment.
변동이 필요없는 부분이나 변동이 일어나는 상위 태그는 미리 작성한 이후, 자바스크립트를 작성하는 편입니다. css의 개입이 필요하다면 중간중간 넣는 편인데, 이번에는 급하게 하느라 js에만 신경을 썼네요 .. (거기에 아직 미완입니다.)
| </label> | ||
| <label> | ||
| <input id="custom-tip-input" type="text" ><input class="percent-radio-btn" type="radio" name="percent" value=""/> | ||
| </label> |
There was a problem hiding this comment.
label에 대해 알아갑니다! label을 사용하는 건 생각하지 못한 방법이었네요..
There was a problem hiding this comment.
radio 버튼이나 check 버튼등에 label을 사용하면, label안에 있는 요소를 클릭해도 선택이 됩니다.
|
|
||
| const render = () => { | ||
| const vaildCheckList = [bill, people]; | ||
| if (!vaildCheckList.every((element) => isVaildInput(element))) { |
4 participants
사실 이번 미션을 온전히 진행하지는 못했습니다. 하지만 기한이 다되어 지금까지 구현해놓은 것이라도 제출합니다.
먼저 기능 요구사항을 작성하고, 기능 요구사항에 따라 구현을 진행하였습니다.
고민되었던 것은 css등에 대한 요구사항은 어떻게 작성해야할지 감이 안잡혔습니다.
옵저버 패턴을 사용하고 싶었는데, 그 대신 어떤 변경 이벤트가 발생하였을 때 onchange 이벤트가 발생하는데,
이 때 이벤트 리스너에서 render() 를 통해 숫자 계산 결과를 즉각적으로 렌더링 할 수 있도록 하였습니다.