[솔로프로젝트] My small trip(2) - 라우팅과 환율 api

 

라우팅

 

라우팅이랑 간단히 말해 네트워크에서 경로를 설정하는 작업이다. 

위 주소창을 보면 마지막에 #starred, #inbox로 끝나는 것을 볼수 있는데 이처럼 다른 경로를 설정해 유저에게 보여질 요소를 정하는 것을 라우팅이라고 생각하면 된다. 라우터는 이 작업을 위한 장치라고 생각하면 된다. 

 

 

React를 사용하여 프로젝트를 만들면 라우팅을 위해 react-router-dom을 설치하고 <Route>태그로 컴포넌트와 경로를 설정해주어야 한다. 

리액트 버전에 따라 조금씩 차이가 있을수 있지만 이렇게 경로 설정하는게 리액트에서의 라우팅 작업이다. 위 코드에서 보면 path와 component를 이용해 경로와 해당 경로에서 보여질 컴포넌트를 설정해 준 것을 확인 할 수 있다. 

 

 

 NEXT.JS에서의 라우팅

 

next.js를 이용하면 react-router-dom없이 바로 라우팅을 할 수 있다. 방법도 굉장히 간단하다. 원하는 경로의 이름으로 폴더를 app폴더(src폴더)하위에 만들어주고 그 안에 page파일을 만들어 그 안에 코드를 작성해주면 된다. 

만약 /detail로 경로를 만들고 싶으면 detail이라는 이름으로 폴더를 만들고 그 안에 page.tsx를 작성하면 된다. 

별다른 라우팅 작업이 없이 /detail페이지가 만들어 진것을 확인 할 수 있다.

(주소창 아래 화면은 미리 만들어둔 헤더와 /detail폴더 내의 page.tsx의 내용이다. )

 

참고 : 만약 /detail/user 로 경로를 설정하고 싶다면 detail폴더 내에 /user폴더를 만들고 그 안에 page.tsx를 작성하면 된다.

 

환율 표기하기

 

여행지의 정보들 중에 환율을 먼저 표기해주려 한다. 

https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/thb/krw.min.json

 

매일 업데이트 되는 무료 환율 api를 찾았고 이를 이용해 환율을 계산했다. 주소의 currencies/ 뒤에 계산을 위한 화폐명을 2개 적어주면 된다. 나의 경우 태국 화폐 바트(THB)와 한국 화폐 원(KRW)을 이용해 계산을 했고 값을 json으로 받을 수 있었다. 

{"date":"2023-12-07","krw":37.49188448}

 

값이 위처럼 오는데 나는 toFixed(2)메서드를 이용해 반올림하여 소수점 2자리까지 잘라주었다. 그리고 유저에게 태국 환율이란 것을 알려주기 위해 이모지를 크기에 맞춰 환율 앞에 넣어주었다. 

위와 같이 환율과 국기가 잘 표시되는 것을 볼 수 있다. 원하는 국가의 화폐단위만 넣어주면 되기 때문에 이를 이용해 유저가 원하는 나라를 선택할 수 있게 하는 것도 구현 가능 할것 같다.