$$config title: 투자 커뮤니티 사이트 team 프로젝트 FrontEnd 구현(외부 API를 이용한 데이터표시 - 코인 - BTC, ETH, XRP) keywords: - IT - React - Springboot $$ # [팀프로젝트 메인 페이지](https://slog.gg/b/11146/11146) # 팀원 / 담당(주요 기술스택) 1. 이용민 / 프론트엔드(React, JS, Node.js, CSS/HTML) 2. 염현섭 / 프론트엔드(React, JS, Node.js, CSS/HTML) 3. 박종범 / 백엔드(SpringBoot, JAVA, MySQL) 4. 노상운(본인) / 백엔드(SpringBoot, JAVA, MySQL) # 깃허브 링크 [FrontEnd](https://github.com/kei781/CoinSite_FrontEnd_Lee) [BackEnd](https://github.com/kei781/CoinSite_BackEnd_Noh) # FrontEnd, 외부 API를 이용한 데이터표시 - 코인 - BTC, ETH, XRP(src/layout/sidbar.jsx) - UI ![https://cdn.discordapp.com/attachments/1052094512140394588/1052868560038395955/1.PNG]() - JavaScript ```jsx const fetchUsers = async () => { try { // 요청이 시작 할 때에는 error 와 users 를 초기화하고 setError(null); setTest(null); // loading 상태를 true 로 바꿉니다. setLoading(true); const data = await axios.get(`${BACK_URL}board/notice/n/get3`); setBoardList(data.data); const response = await axios.get( "https://api.upbit.com/v1/ticker?markets=KRW-BTC%2C%20KRW-ETH%2C%20KRW-XRP" ); setTest(response.data); // 데이터는 response.data 안에 들어있습니다. } catch (e) { setError(e); } setLoading(false); }; ``` - Markup(HTML) ```jsx

BTC

{test[0].opening_price .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "} 원{" "}

0 ? { color: "red" } : { color: "blue" } } > {test[0].signed_change_price .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "} 원{" "} 0 ? { color: "red" } : { color: "blue" } } > {(test[0].signed_change_rate.toFixed(3) * 100).toFixed(2)} %

ETH

{test[1].opening_price .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 원

0 ? { color: "red" } : { color: "blue" } } > {test[1].signed_change_price .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 원 0 ? { color: "red" } : { color: "blue" } } > {(test[1].signed_change_rate.toFixed(3) * 100).toFixed( 2 )} %

XRP

{test[2].opening_price .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 원

0 ? { color: "red" } : { color: "blue" } } > {test[2].signed_change_price .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 원 0 ? { color: "red" } : { color: "blue" } } > {(test[2].signed_change_rate.toFixed(3) * 100).toFixed(2)} %

```