[React] 환율계산기

https://github.com/manonkim/exchange_cal

GitHub - manonkim/exchange_cal

 

 

 

 

---

 

Exchange Rate Calculator

 

 

 

 

 

---

 

 

 

 

 

timestamp 변환

 

 

 Unix 타임 스탬프는 1970 년 1 월 1 일 00:00:00 UTC 이후 경과 된 시간이며 초 단위로 표시된다.

JavaScript Date 객체는 1970 년 1 월 1 일 00:00:00 UTC 이후 경과 된 시간을 밀리 초 단위로 표시합니다.

 

new Date()를 사용하여Date()클래스에서 새 객체를 생성하면 생성 된 시간을 밀리 초 단위로 반환한다.

 

let timestamp = 1607110465663
let date = new Date(timestamp);

console.log(date.getTime())
console.log(date)

//출력
1607110465663
2020-12-04T19:34:25.663Z

 

 

Date 클래스

1. getDate()는 해당 시간에1 ~ 31 월의 일을 반환
2. getMonth()는 해당 시점의 월 숫자0-11을 반환(0부터 시작하므로 1을 더해준다)
3. getFullYear()는 ‘4 자리’형식으로 연도를 반환
4. getHours()는 해당 시간의 정확한 시간을24 시간형식으로 반환
5. getMinutes()는 해당 시간의 정확한 분0 ~ 59를 반환
6. getSeconds()는 해당 시간의 정확한 초0에서 59를 반환

 

 

 

JavaScript Date타임 스탬프는 밀리 초 단위이고 Unix 타임 스탬프는 초 단위이므로 1000을 곱하여

Unix 타임 스탬프를 JavaScript 타임 스탬프로 변환 할 수 있다.

 

  const myDate = new Date(date * 1000);
  const calDate = myDate.getFullYear() + "-" + month + "-" + myDate.getDate();

 

 

---

 

 

 

month - string으로 표현

 

 

get month name from timestamp javascript

let date = new Date(2020, 05, 21); // 2020-06-21
let longMonth = date.toLocaleString('en-us', { month: 'long' }); /* June */
let shortMonth = date.toLocaleString('en-us', { month: 'short' }); /* Jun */
let narrowMonth = date.toLocaleString('en-us', { month: 'narrow' }); /* J */

 

 

 

 

---

 

 

 

 

 

NUM | 세자리 comma + 소수점 2자리까지 표시

 

 

 

- input창에 입력값 comma 찍기 : 정규식 활용

  const inputPriceFormat = (str) => {
    const comma = (str) => {
      str = String(str);
      return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,");
    };
    const uncomma = (str) => {
      str = String(str);
      return str.replace(/[^\d]+/g, "");
    };
    return comma(uncomma(str));
  };

      <input
        type="text"
        value={num}
        onChange={(e) => {
          setNum(inputPriceFormat(e.target.value));
        }}
      />

 

 

 

- input으로 입력값이 comma가 찍혀있어서 replace로 ,를 제거한다. 

   (replace만하면 첫번째 comma만 빠지므로 replaceAll 필요)

  const number = num.replaceAll(",", "");     //num에서 comma제거

  const currency = cal.toFixed(2);    //소수점2자리고정

 

 

 

---

 

 

 

 

React-select 

 

 

  const [selected, setSelected] = useState("");
  
  const selectList = ["USD", "CAD", "KRW", "HKD", "JPY", "CNY"];
  const handleSelect = (e) => {
    setSelected(e.target.value);
  };


return (
      <select onChange={handleSelect} value={selected}>
        {selectList.map((item) => (
          <option value={item} key={item}>
            {item}
          </option>
        ))}
      </select>
)