간단한 API를 사용해 페이지를 구현하는 연습을 했다.

와이어 프레임

기능 목록

1. 통화 선택 기능
   • 바꾸기 전 통화와 바꾼 후 통화 두 가지 선택
2. 선택한 통화 순서 교환(swap) 기능
3. 금액 입력 기능
   • number 타입의 input으로 구현
4. 환율 계산 기능
   • API로 필요한 통화 가져오기
   • 바꾸기 전 통화를 바꾼 후 통화의 환율로 계산하기

완성본

완성본(Github) 바로가기

배운점

media 쿼리로 width 조정하기

뷰포트의 너비가 특정 값 이하(max-width)거나 특정 값 이상(min-width)일 때, 요소의 스타일을 변경하고 싶다면 미디어 쿼리를 사용하면 된다.

미디어 쿼리는 특성의 존재 여부와 값을 판별한 다음, 참이면 스타일을 적용한다.

@media (특성) {
	셀렉터 {
		/* 적용할 스타일 */
	}
}
 

뷰포트 너비가 0~600px인 동안에는 input 요소의 너비를 200px로 한다. 뷰포트 너비가 600px을 넘으면 input 요소는 원래 너비를 갖도록 한다.

@media (max-width: 600px) {
  .currency input {
    width: 200px;
  }
}

커스텀 select 만들기

브라우저마다 다른 select 디자인을 일치시키는 작업을 했다.

크로스 브라우징: 웹 페이지 제작 시 모든 브라우저에서 깨짐 없이 동일하게 나타나도록 하기 위한 호환성 작업

다음은 크롬의 기본 select 디자인이다.

먼저 기본적인 디자인을 없애기 위해 appearance를 none으로 설정한다. 화살표 표시가 없어진다.

-moz-appearance: none; /* firefox */
-webkit-appearance: none; /* safari, chrome */
appearance: none;

텍스트와 select 사이에 여백을 주기 위해 패딩을 적용한 다음, select의 background에 아래 방향 화살표 이미지를 넣고자 했다.

배경을 투명하게 만든 다음, 이미지를 넣고 적당한 크기로 설정해 주었다.

padding: 10px 20px 10px 10px;
background: transparent;
background-image: url('넣을/이미지/url');
background-size: 12px auto, 100%;

이미지가 공간 크기만큼 반복돼서 나타났다. 반복되지 않고 딱 하나만 나타나도록 background-repeat 속성에 no-repeat을 적용했다.

background-repeat: no-repeat;

이제 화살표의 위치를 잡아줘야 한다.

화살표의 위치를 잡아주기 위해 background-position 속성을 사용했다.

맨 오른쪽에서 10px 떨어져있고 세로축의 가운데 지점에 위치시키기 위해 다음처럼 속성값을 줬다.

background-position: right 10px top 50%

[참고] background-position

이 속성은 배경 이미지의 위치를 조정할 수 있는 속성이다. 이 속성을 적용하지 않으면 이미지는 기본적으로 좌측 상단에 나타나며, 총 4가지 값을 줄 수 있다.

기본값은 left top(0% 0%)이다.

기본적으로, 앞에 오는 값이 가로축에 관한 속성(left/right)이고 뒤에 오는 값이 세로축에 관한 속성(top/bottom)이다.

1. 1가지 값

   가로(또는 세로)만 변경하고 세로(또는 가로)는 기본값에서 50% 떨어진 위치로 한다.

   • 값이 오는 경우 left에서 값만큼 떨어져 있고, top에서 50% 떨어진 자리에 위치한다.

     /* background-position: {left로부터 멀어질 값} */
     background-position: 70% /* 왼쪽에서부터 70% 위에서부터 50% 떨어진 곳(세로축의 가운데)에 위치 */

     
     
   • 키워드가 오는 경우 키워드에서 가운데에 위치한다.

     /* background-position: {맨 left|right|top|bottom 쪽의 가운데} */
     background-position: right /* 맨 오른쪽 + 세로 축의 가운데에 위치 */

     
     

2. 2가지 값

   가로와 세로 모두 변경 사항을 적용한다.

   • 값1 + 값2 먼저 오는 값1을 왼쪽으로부터(오른쪽 방향으로) 이동할 값, 나중에 오는 값2를 위로부터(아래 방향으로) 이동할 값으로 인식해 값만큼 떨어진 곳에 위치한다.

     /* background-position: {left로부터 멀어질 값} {top으로부터 멀어질 값} */
     background-position: 30% 30% /* 왼쪽에서부터 30% + 위에서부터 30% 떨어진 곳에 위치 */

     
     
   • 키워드1 + 키워드2 기준점을 키워드로 잡는다. 키워드의 순서는 상관 없다.

     /* background-position: {가로축(left|right) 기준점} {세로축(top|bottom) 기준점} */
     /* background-position: {세로축(top|bottom) 기준점} {가로축(left|right) 기준점} */
     background-position: right top /* 맨 오른쪽 최상단에 위치 */

     
     
   • 키워드 + 값 가로축 키워드(left/right)와 세로축에서 이동할 값이 와야한다. 가로축에서 키워드에 해당하는 쪽과, 위에서 값만큼 떨어진 곳에 위치한다. 세로축에 해당하는 키워드(top/bottom)가 먼저 오면 속성값이 적용되지 않는다.

     /* background-position: {left|right} {top으로부터 멀어질 값} */
     background-position: right 30% /* 맨 오른쪽 + 위에서 30% 떨어진 곳에 위치 */

     
     
   • 값 + 키워드 가로축에서 이동할 값과 세로축 키워드(top/bottom)이 와야 한다. 왼쪽에서부터 값만큼 떨어진 곳과, 세로축에서 키워드에 해당하는 쪽에 위치한다. 뒤에 오는 값에 가로축에 해당하는 키워드(left/right)가 오면 속성값이 적용되지 않는다.

     /* background-position: {left로부터 멀어질 값} {세로축(top|bottom) 기준점} */
     background-position: 30% bottom /* 맨 왼쪽에서 30% 떨어진 곳 + 맨 아래쪽 */

     
     

3. 3가지 값

   특정 축에서만 이동시킨다.

   • 키워드1(left|right) + 값 + 키워드2(top|bottom) 키워드1에서 값만큼 떨어져있고 세로축의 위치는 키워드2로 정해 위치시킨다.

     /* background-position: {left|right} {멀어질 값} {top|bottom} */
     background-position: left 30% bottom; /* 왼쪽에서 30% 떨어진 곳 + 맨 아래쪽 */

     
     
   • 키워드1(left|right) + 키워드2(top|bottom) + 값 가로축의 위치는 키워드1로 정하고, 키워드2에서 값만큼 떨어진 곳에 위치시킨다.

     /* background-position: {left|right} {top|bottom} {멀어질 값} */
     background-position: left bottom 70%; /* 맨 왼쪽 + 맨 아래쪽에서 70% 떨어진 곳 */

     
     

4. 4가지 값

   가로 세로 축 모두 이동시킨다.

   • 키워드1 + 값 + 키워드2 + 값 키워드1에서 값만큼 떨어진 곳, 키워드2에서 값만큼 떨어진 곳에 위치시킨다.

     /* background-position: {left|right} {멀어질 값} {top|bottom} {멀어질 값} */
     /* background-position: {top|bottom} {멀어질 값} {left|right} {멀어질 값} */
     background-position: right 30% bottom 70%;

     
     

크롬의 blur 버그

body에 background-image를 설정한 다음 div를 만들어 백그라운드 이미지에 blur를 씌워줬는데, 브라우저 창 크기 변경 시 블러가 사라지는 이슈가 있었다.

스택 오버플로우에 나랑 똑같은 현상에 대한 질문이 있었는데 크롬 브라우저의 버그라고 한다(그래서 사파리로 옮겨서 테스트해보니 아무 문제 없었다).

임시 방편으로 위 이슈를 해결하려면 filter 속성에 blur(0)을 주면 된다.

background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
filter: blur(0); /* 추가할 것 */

Exchange Rate API 사용하기

Exchange Rate API에서 환율 정보를 가져오기 위해 fetch 메서드를 사용했다.

fetch 메서드는 Response 타입의 프로미스를 반환하기 때문에 자바스크립트에서 다룰 수 있는 형식인 JSON으로 변형해줘야 한다. 이 작업은 then 메서드 내부에서 처리한다.

fetch(`https://api.exchangerate-api.com/v4/latest/${from}`)
	.then((response) => response.json())

JSON 형식으로 파싱한 응답에서 필요한 정보인 환율 정보를 찾아야 했다.

이어서 then 메서드를 작성해 JSON 형식의 데이터를 받은 다음, data가 어떻게 이뤄졌는지 확인해 봤다.

fetch(`https://api.exchangerate-api.com/v4/latest/${from}`)
	.then((response) => response.json())
	.then((data) => {
		console.log(data);
		// ...

API v4에서 우리가 필요한 정보인 환율은 rates 프로퍼티에 들어있었다. 따라서 ‘통화’를 key로 하여 rates 프로퍼티 객체에 접근해 원하는 정보를 가져올 수 있었다.

const rateOfTo = data.rates[to];

---

API를 사용해야해서 쫄았지만 fetch와 함께하니 어려울 것이 없었다!