728x90
front-end 검색 결과
10 개의 검색 결과가 있습니다.
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] axios 사용 및 data 처리 - 공공데이터 주가지수 가져오기

0. 목적 -. SPA의 기본이 되는 비동기 데이터 처리를 axios모듈을 이용해 구현한다. 1. axios 의존성(dependency) 설치 -. vue ui에서 axios를 선택해 설치한다. -. '의존성' 탭에 axios 추가된 것을 확인할 수 있다. 2. axios 사용해보기 1) 준비 -. 우선 베이스가, 임의로 주식 값을 입력한 페이지를 준비했다. 링크 -. StockCard라는 각 오브젝트가 정의되어 있다. -. 각 카드들의 데이터는 아래와 같이 정의된다. {id: 1, basDt: "20220118", idxNm: "KRX 100", idxCsf: "KRX시리즈", epyItmsCnt: "101", clpr: "5959.5", vs: "-38.9", fltRt: "-0.65", mkp: "..

2022. 1. 19. 21:43
Web/vue.js

[vue.js] Router

0. 목적 -. vue3의 router 기능 습득 1. Routing -. Routing은 uri 엔드포인트에 대해 각기 다른 결과물(페이지)를 보여주는 것인데, vue.js에서는 그 routing을 i) server-side routing과 ii) front-side routing으로 나눠서 다룬다. i) server-side routing -. 간단히 말해서 각 endpoint에 대해 서버에서 매번 페이지를 보내주는 것. 내가 이전에 flask로 게시판 만든다고 삽질할 때 사용하던 routing이 바로 server-side routing. ii) front-side routing -. 이것땜에 갑자기 vue를 공부하겠다고 재삽질을 하는건데, vue는 한번 로딩을 하고 나면 그 뒤로는 서버에 최소한의 ..

2022. 1. 19. 16:01