Ready.
기능을 세부적으로 나누고 천천히 생각을 정리하는 시간을 가졌다.
무작정 코드치는 습관은 나중에 코드의 흐름과 가독성 측면에도 좋지 못하는 코드를 짜게 되는 경험을 했던 터라 늘 먼저 생각을 하고 코드를 작성하는 습관을 들이려 연습하고 있다.
기능을 구현하기 전 컨벤션과 컴포넌트를 어떻게 정하고 나눌 것이며 git을 어떻게 활용할 것인지 등 첫 빌드를 쌓는 과정에 대해서 고민 할 필요가 있었다. 그 후 환율 계산기를 어떻게 작동 되는지 어떤 흐름으로 구현을 해야 할 것인지 정리하는 시간을 가졌다.
프로젝트 기능을 구현할 구성은 완성되었다! 기능을 구현해 보고 중간 점검을 통해 자신이 처음 기획하려던 방향으로 잘 가고 있는가를 점검하였다. 이렇게 자신의 코드를 점검하며 진행하니 내가 무얼 만들려고 하는지가 명확해지고 모르는 문제에 대해서 정확히 구글링 할 수 있었던 것 같다.
머릿속으로 정리가 되면 몰입은 자동적으로 따라오는 것 같다.
THE. difficult parts
쉬울 것 같으면서도 은근히 어려웠던 구현이 있는데 액수에 특정 길이가 되었을 때 소수점 그리고 콤마를 나타내는 것이었다.
환율과 수취 금액은 소수점 둘째 자리까지, 3자리 이상 되면 콤마를 가운데 찍어 보여줍니다. 예를 들어 1234라면 1,234.00으로 나타냅니다.
이 부분을 너무 쉽게 생각해서 생각 없이 손가락이 키보드로 앞서 나아갔다. 결과는 역시 쉽게 작동하지 않았다.
그저 빨리 구현하고 다른 것을 구현하려는 욕심이었던 것 같다.
실시간 환율 정보를 받아오는 currencylayer의 API를 사용하였다.
KRW 환율이 1,197.44 원이라고 가정할 때 100달러를 환전한다면 필요한 금액은 119,743.99 원이다.
이렇게 콤마(comma)와 소수점을 찍어줘야 하는데 currencylayer의 API를 그대로 받아오면 결괏값은 100달러를 환전했을 때의 필요한 KRW 금액이 119743.985 원으로 찍힌다.
- 환율과 수취 금액은 소수점 둘째 자리까지.
- 3자리 이상 되면 콤마를 가운데.
- 10 달러 환전에 대한 KRW 가격
| 기존 | 소수점 둘째 자리까지 |
|---|---|
| 11974.3985 | 11974.39 |
| 기존 | 3자리이상 콤마( , ) |
|---|---|
| 11974.3985 | 11,974.3985 |
| 기존 | 소수점 둘째 + 3자리이상 콤마 ( , ) |
|---|---|
| 11974.3985 | 11,974.39 |
위 기능을 담당하는 함수를 보기 전에 살펴봐야 할 JavaScript 내장 객체들이 있다 우선 알아보자!
- parseFloat( ) : "문자열" 및 숫자를 실수로 바꾸는 함수이다.
예시 )
parseFloat("10.24") --> 10.24
parseFloat("-10.24") --> -10.24
parseFloat("10.9abcd") --> 10.9
parseInt("10.24") --> 10
parseInt("-30.24") --> -30
parseInt("-30.24abd") --> -30
- Math.round( ) : 값을 가장 가까운 정수나 지정된 소수 자릿수로 반올림 한다.
예시 )
Math.round(32.8) --> 33
Math.round(32.39) --> 32
- toFixed( ) : 소수의 자릿수의 길이를 제한한다. 소수점을 기준으로 그 뒤로 얼마만큼의 길이의 숫자를 반환할 것인지를 다룬다.
getFloatNumber.js
// 소수점 둘째 자리까지 구하는 함수.
const getFloatNumber = (num) => {
return parseFloat(Math.round(num * 100) / 100).toFixed(2);
};
export default getFloatNumber;numberWithCommas.js
import { getFloatNumber } from "./getFloatNumber";
export const numberWithCommas = (num) => {
let parts = getFloatNumber(num);
parts = parts.toString().split(".");
return (
parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") +
(parts[1] ? "." + parts[1] : "")
);
};
//숫자를 넣으면 3자리마다 , 찍히고 소수점 2자리 까지 표현
