728x90
Web 검색 결과
14 개의 검색 결과가 있습니다.
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
Web/vue.js

[vue.js] vue 연습 (3) - components, properties

0. 들어가기 -. 오브젝트들의 구성 (컴포넌트)가 반복되는 경우 쉽게 사용할 수 있는 방법. C#에서 컴퓨넌트 모델이라고 부르던 그것인거같다. 1. 컴포넌트 작성 -. 컴포넌트마다 app.component('컴포넌트 이름', ~로 시작하는 별개의 vue.js 코드를 작성해야 한다. -. Template: html 코드에 작성되어 있던 해당 컴포넌트 구성 ~ 를 전부 복사해서 넣으면 된다. Javascript 특유의 ` ~ ` 표기를 써야한다. template: /*html*/ ` button clicks = ( {{clicks}} ) remain: {{ remained }} color: {{ bgColor }} ` -. 이후 기존 코드에 있던 data, methods, computed 코드를 전부 그대..

2022. 1. 16. 11:24
Web/vue.js

[vue.js] vue 연습 (2) - 동적 style/class, vue 계산식

0. 들어가기 -. vue를 이용한 style 속성 지정. -. 슬슬 복잡해진다..? 1. css style 지정방법 -. vue로 style 지정할 땐 style 구문이 조금 달라진다. 왜이런진 모르겠네... 복잡하게; /* html */ {{ item.name }} /* main.js */ items: [ {id: 1, name: 'name#1', color: "red"}, {id: 1, name: 'name#2', color: "blue"}, ], -. 위 예시와 같이, vue 구문으로 style 지정 시엔 v-bind:style="{ style 속성}" 이렇게 지정해야 한다. 이름도 css에선 background-color인데, backgroundColor 형태로 (camel 표기로) 변경된다. ..

2022. 1. 15. 23:26