$$config title: 투자 커뮤니티 사이트 team 프로젝트 FrontEnd 구현(외부 API를 이용한 데이터표시 - 주식, 증시 - 코스피, 코스닥, 삼성증권, 카카오) 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를 이용한 데이터표시 - 주식, 증시 - 코스피, 코스닥, 삼성증권, 카카오(src/layout/sidbar.jsx) - UI ![](https://cdn.discordapp.com/attachments/1052094512140394588/1052870040350892032/1.PNG) - JavaScript ```jsx const fetchUsers = async () => { try { const kospiGet = await axios.get( `${BACK_URL}chart/Market/get?name=코스피` ); setKospi(kospiGet.data); const kosdaqGet = await axios.get( `${BACK_URL}chart/Market/get?name=코스닥` ); setKosdaq(kosdaqGet.data); const samsungGet = await axios.get( `${BACK_URL}chart/Stock/get?name=삼성전자` ); setSamsung(samsungGet.data); const kakaoGet = await axios.get( `${BACK_URL}chart/Stock/get?name=카카오뱅크` ); setKakao(kakaoGet.data); } catch (e) { setError(e); } setLoading(false); }; if (0 < kospi.avg && kospi.avg < 1) { kospi.avg = (kospi.avg * 10) / 10; } if (0 > kospi.avg && kospi.avg > -1) { kospi.avg = (kospi.avg * 10) / 10; } if (0 < kosdaq.avg && kosdaq.avg < 1) { kosdaq.avg = (kosdaq.avg * 10) / 10; } if (0 > kosdaq.avg && kosdaq.avg > -1) { kosdaq.avg = (kosdaq.avg * 10) / 10; } if (0 < samsung.avg && samsung.avg < 1) { samsung.avg = (samsung.avg * 10) / 10; } if (0 > samsung.avg && samsung.avg > -1) { samsung.avg = (samsung.avg * 10) / 10; } if (0 < kakao.avg && kakao.avg < 1) { kakao.avg = (kakao.avg * 10) / 10; } if (0 > kakao.avg && kakao.avg > -1) { kakao.avg = (kakao.avg * 10) / 10; } ``` - Markup(HTML) ```jsx

코스피

{kospi.value} 0 ? { color: "red" } : { color: "blue" } } > {kospi.avg.toFixed(2)} %

{kospi.high} {kospi.low}

코스닥

{kosdaq.value} 0 ? { color: "red" } : { color: "blue" } } > {kosdaq.avg.toFixed(2)} %

{kosdaq.high} {kosdaq.low}

삼성증권

{samsung.value .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 원 0 ? { color: "red" } : { color: "blue" } } > {samsung.avg} %

{samsung.high .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "} 원 {samsung.low .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "} 원

카카오

{kakao.value .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "} 원 0 ? { color: "red" } : { color: "blue" } } > {kakao.avg} %

{kakao.high .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "} 원 {kakao.low .toString() .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{" "} 원

```

게시글 상세