반응형 Toy Project(토이 프로젝트)6 [toy project]업비트 open api 실시간 데이터 가져오기 (feat. websocket) 1. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 스크립트 2. 출력화면 2023. 1. 19. [toy project]업비트 open api 현재가 가져오기 (feat. axios) 1. 받아올 데이터는 현재가입니다. 2. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 탬플릿 캔 들 {{coin.korean_name}} {{coin.market}} {{coin.trade_price}} {{coin.acc_trade_price_24h}} {{coin.signed_change_price}} {{coin.signed_change_rate}} 3. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 스크립트 4. 출력화면 2023. 1. 15. [toy project]업비트 open api 데이터 받아오기 (feat. axios) 1. 받아올 데이터는 마켓명과 코인명입니다. 2. axios 설치 ( npm install axios) 3. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 탬플릿 캔 들 {{coin.korean_name}} {{coin.market}} 코인가격 코인거래대금 가격변동 가격변동률 4. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 스크립트 5. 출력화면 2023. 1. 14. [toy project]마켓 게시물 만들기(vuejs component, router-veiw) ※ 마켓과 랭킹은 같은 헤더를 사용한다. ( 나중에 컴포넌트 순서가 바뀔 수 있음) ※ router-view로 보여 줄 화면은 router에서 지정해 둔 /pacct/Rangking과 /pacct(마켓) 화면이다. ※ 마켓은 krw, btc, usdt 3개의 마켓으로 이루어져 있다. 각각 버튼을 만든다. ※ 몇 개의 자료를 받아올지 모르기 때문에 화면을 꽉 채울 정도의 같은 형식의 게시물을 반복문으로 작성 1. 마켓과 랭킹 목록의 헤더는 같기 때문에 전역으로 컴포넌트를 설정한다. (마켓 리스트 버튼도 전역설정) import { createApp } from 'vue' import App from './App.vue' import router from './router.js' import './regist.. 2023. 1. 10. [toy project]움직이지 않는 풋터 만들기 (feat. vuejs router) ※ 밑 쪽에 움직이지 않는 풋터를 만들기 ※ router를 사용해 버튼을 누를 경우 다른 페이지가 보이 도록 ※ 포커스 된 버튼 스타일 변경 ※ npm install vue-router (라우터 설치) 1. App.vue의 html(router-veiw, router-link 사용) 랭킹 마켓 내정보 2. App.vue의 3. App.vue의 css 4. router.js 생성 및 작성 import { createWebHistory, createRouter } from "vue-router"; import Ranking from './components/Ranking.vue' import KRWMarket from './components/KRWMarket.vue' const routes = [ .. 2023. 1. 9. [toy project]UI 확인, 움직이지 않는 헤더, 검색창 만들기 ※ 작업환경은 brackets에서 html, css를 작업하고 vuejs로 조정 ※ transition 은 vue 문법을 따라 했다. ※ index.html 에 폰트 어썸, 부트스트랩 추가 ※ 모바일환경에서 보기 위해서 가로 320px에서 확인을 하면서 만듦 ※ max-width는 767px이다 #app { box-sizing: border-box; max-width: 767px; font-family: "Spoqa Han Sans Neo", "Arial"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin: auto; width: 100%; } 1.. 2023. 1. 7. 이전 1 다음 반응형
