Random User API를 사용해 유저와 재산을 랜덤하게 생성한 다음, 고차함수 메서드를 사용해 유저 리스트를 조작하는 연습을 했다.

와이어 프레임

기능 목록

1. 유저 추가 기능
   • Random User API로 유저 정보 fetch
     • 유저의 이름을 가져온다.
     • 유저의 재산은 Math.random 메서드로 랜덤하게 생성한다.
2. 돈 2배 불리기 기능
   • 추가된 유저들의 재산을 2배하여 보여준다.
3. 백만장자 유저만 보기 기능
   • 추가된 유저들 중 재산이 백만달러 이상인 유저만 필터링해 보여준다.
4. 유저를 부유한 순서대로 정렬해 보여주기 기능
   • 추가된 유저들의 재산을 내림차순으로 정렬해 보여준다.
5. 재산 총합 계산 기능
   • 추가된 유저들의 재산 총합을 보여준다.

완성본

완성본(Github) 바로가기

배운점

async & await

랜덤 유저 API를 이용해 유저 정보를 가져오는 작업에서

async function getRandomUser() {
  const response = await fetch('https://randomuser.me/api');
  const data = await response.json();
	
	// ...
}

fetch 같은 메서드 앞에는 await를 무조건 붙여야 되겠다는 생각이 드는데, json 형식으로 파싱하는 json 메서드 앞에는 필요 없을 줄 알고 await를 붙이지 않고 코드를 작성했더니 undefined라 읽을 수 없다는 에러가 나왔다.

-> 파싱 기다리지 않고 코드가 그냥 동기적으로 쭈욱 흘러간 것...

그래서 알게 된 사실,

await는 (반드시) 프로미스 앞에 사용하면(해야) 된다.

json() 메서드도 promise를 반환하는 메서드라 await를 작성해야 한다.

금액에 단위 쉼표 표시하기

유저의 재산은 랜덤 숫자이기에 좀 더 알아보기 쉽게 천 단위마다 쉼표를 찍고, (달러의 경우) 소수점 두 자리까지 표현해야 했다.

이 부분은 Number의 내장 메서드 toLocaleString으로 아주 손쉽게 작업할 수 있다.

toLocaleString([locales[, options]])

• locales: 기준이 될 로캘
• options: 결과값의 포맷을 조절할 수 있는 옵션들을 모은 객체 (option 모음)
  
  

다양한 옵션을 지원해서 별도 함수를 만들 필요 없이 정말 간편하게 원하는 포맷으로 변환할 수 있다.

이 프로젝트에서는 다음 3가지 조건

1. 숫자를 달러로 표시
2. 천 단위마다 쉼표를 찍기
3. 소수점 두 자리까지 표시하기

을 만족해야 했기 때문에 다음과 같은 옵션을 줬다.

locale: 'en-US',
options: {
  minimumFractionDigits: 2, // 소수점 두 자리수까지 표현
  style: 'currency', // 통화 형태로 하고
  currency: 'USD', // 통화 단위는 달러로 한다.
	// -> style: 'currency'와 currency 프로퍼티는 항상 쌍으로 와야 한다.
}

위 내용을 인수로 전달하면 다음과 같이 직접 $ 사인이나 쉼표를 표시하지 않아도 알아서 포맷팅해 준다.