728x90
Web 검색 결과
33 개의 검색 결과가 있습니다.
Web/vue.js

[vue.js] xml to json - 네이버뉴스 가상화폐 관련 글 보여주기

0. 목적 -. 코인뷰 페이지에 추가할 최근 뉴스 데이터 만들기 -. 네이버뉴스에서 제공하는 xml (이전 rss 잔재)을 이용해본다. 1. xml 데이터 가져오기 -. 시작 전에, 네이버뉴스의 xml은 당연하게도 cors 제한이 걸려있으므로.. 프록시 서버를 통해 xml을 받아오게 되었음. -. 우선 내 프록시 서버의 단말로 쿼리를 날려서 xml을 가져오도록 해야한다. vue async getCrawledNews () { const response = await getAPI.get('crawled/naverrss?query=' + encodeURIComponent("암호화폐")); const crawledArticles = response.data; return crawledArticles; } pyt..

2022. 2. 4. 19:46
Web/vue.js

[vue.js] 코인시세 테이블 만들기 (2) 접히는(folding) 테이블 만들기

0. 목적 -. div 배열로 만들어진 테이블에 폴딩 부분을 만들어보자. -. 동일한 기능을 수행하는 jQuery를 쓰는 예제가 많고, 사실 그게 더 편하긴 한데... 이왕 vue 공부중이니 vue를 만져서 folding table을 만들어보자. 1. 현 상황 -. 이전 포스팅 이후 이래저래 하다보니, 현재 이러한 테이블을 만들어 둔 상태다. -. 각 코인을 거래소별로 쫙 나열하다보니 가시성도 좋지 않고.. 원래 목적인 최고가 / 최저가 거래소를 한 눈에 픽해서 보기에 잘 들어오질 않는다. 이걸 조금 더 보기 편하게, 아래와 같이 폴딩 테이블을 만들어야 할 필요가 있다. 2. 그럼 어떻게 할까... 1) 예제찾기 -. 관련된 예제를 찾으니 javascript를 쓰거나 bootstrap을 쓴 예제가 있고,..

2022. 1. 29. 03:10
Web/vue.js

[vue.js] 코인시세 테이블 그리기 (1) external javascript 사용하기

0. 목적 -. vue-cli 사용하면서, 지금까지 공부한 것을 복습해본다. -. 프론트에서 데이터를 받아와 테이블로 그리는 연습 -. 외부 javascript 패키지 이용해보기 1. 프로젝트 시작 1) vue-cli로 프로젝트 생성 -. 간단하게, bable, router, vuex, eslint의 기본 설정만 넣고 vue 프로젝트를 만든다. 2) 의존성 (dependencies), 플러그인 (plugin) 설치 -. 파이썬의 패키지와 같은 의존성 / 플러그인들을 설치한다. -. 데이터 수신을 위한 axos, 편한 라우팅을 위한 lodash -. 표 그리는 툴을 포함한 이것저것 갖고있는 vuetify 3) 프로젝트 실행 -. 코드 수정 시 실시간으로 갱신되는 (디버깅도 해주는) serve 모드로 페이지..

2022. 1. 24. 00:25
Web/vue.js

[vue.js] 중첩 라우팅 (nested routing)

0. 목적 -. 하나의 uri에 대해 각기 모듈화된 컴포넌트 여러개를 중첩해서 라우팅 해본다. -. 지수 상세 정보에 news, interest 페이지를 추가해보자. 1. 컴포넌트 세분화 하기 -. 컴포넌트를 세분화 하는건 간단하게 이루어진다. -. 기존에 StockDetail.vue 라는 컴포넌트를 사용했다면, 이걸 stock 폴더 내의 Detail.vue로 이동한다. -. 그리고 router/index.js 파일의 import 부분을 수정해주면 끝난다. 기존: import StockDetail from '../views/StockDetail.vue' 변경: import StockDetail from '../views/stock/Detail.vue' -. 결과를 보자. 2. 반복되는 코드 재사용하기 (..

2022. 1. 21. 23:55
Web/vue.js

[vue.js] 페이지처리 (pagination) - 공공데이터 주가지수 페이지단위 호출

0. 목적 -. vue를 이용해 데이터를 일정 단위로 끊어 받아 표현해본다. -. 주가지수들을 일정 개수 씩 전달받아 표현하는 페이지 처리 기능을 연습한다. 1. 페이지처리 -. 자세히 보면, 이전 포스트에서 불러온 주가지수 목록이, 코스피/코스닥으로 시작하는 것이 아니라 "IT H/W"라는 뜬금없는 지수로 시작하는 것을 알 수 있다. 대체 지수 종류가 몇개나 되길래 저런 뜬금없는것이 있나 싶어서 보니까, 공공데이터에서 76,388 개의 지수 (업종별, 벤처 등 포함)를 제공한다. 그래서, 페이지처리가 필요하다. 1) 페이지 단위로 데이터 호출 -. 한 페이지에 원하는 갯수만큼, 그리고 원하는 페이지를 호출하는 것은 어렵지 않다. 아래 코드처럼 get header에 추가해주거나, 쿼리스트링으로 넣어주면 ..

2022. 1. 21. 22:31
Web/vue.js

[vue.js] 동적 라우팅 - 공공데이터 지수 상세정보

0. 목적 -. vue의 동적 라우팅 (dynamic routing) 기능을 이용해, 개별 주식의 상세 페이지를 만들어본다. -. 앞 포스팅에서 만든 주가지수 카드 목록에 각각 링크를 삽입하여 개별 지수의 상세 정보를 출력하는 페이지를 만든다. 1. 동적 라우팅 (Dynamic routing) -. 동적 라우팅은 다양한 데이터 (여기서는 서버에서 보내주는 지수 목록)에 대해 능동적으로 상세 uri를 만들어 줄 수 있게 한다. 구글 검색하면 아래와 같이 개념도를 볼 수 있다. 2. 실습 -. vue 에서도 당연히 동적 라우팅을 구현할 수 있는데, 우선은 개별 지수에 대한 정보 페이지를 꾸려보자. 1) 우선은 정적 라우팅 연습 -. 개별 지수 페이지는 'StockDetail.vue'파일에 만들었다. {{ s..

2022. 1. 20. 15:18