todo4 [TODO] todo 추가하기 // src/components/Todo/index.ts // ... export default class Todo extends Vue { // Style styleTable: object = { borderCollapse: 'collapse', padding: '10px', border: '2px solid #ddd', borderTop: '3px solid #fb7399', } styleThead: object = { color: '#fb7399', background: '#f7e6ec', textAlign: 'center', } styleTbody: object = { color: '#0094D7' } styleTh: object = { padding: '5px', } } // src/compon.. 2019. 4. 8. [TODO] google sheet API 연동 API 연동(Axios) npm install --save axioscs위 명령어로 axios 설치 // src/api/apiConfig.tsexport const config = { baseUrl: 'https://sheets.googleapis.com/v4/spreadsheets/', sheetId: '{sheetId}', sheetName: '{sheetName}', apiKey: '{apiKey}'} Colored by Color ScriptercsAPI에 사용할 정보를 따로 파일로 만들었다. {} 안에 적은 정보는 mock 데이터이다. // src/api/googleSheetApi.ts import axios, { AxiosPromise } from 'axios'import { TodoRespo.. 2019. 3. 17. [TODO] Google spread sheet 살펴보기 지금은 TODO 내용을 컴포넌트에 박아두고 사용하고 있다. 따라서 내용을 바꾸려면 소스코드를 수정해야 한다. 이렇게 안하려면 파일로 서버내에 저장을 하거나 DB를 써야하는데 최근에 구글 스프레드 시트를 이용해서 간단한 일정 관리 프로그램(?)을 만든 포스팅을 봐서 이번에는 스프레드 시트를 이용해보기로 했다. 먼저 간단하게 위와 같이 내용을 채웠다. 이 정보를 Google Spread Sheet를 API로 가져와서 사용하고자 한다. 구글 스프레드 시트 API를 한 번도 쓴적이 없으므로 일단 API 테스트부터 했다. https://console.cloud.google.com/apis로 접속 프로젝트 생성 라이브러리 클릭 google sheet 검색 > 활성화 사용자 인증 정보 > 사용자 인증 정보 만들기 >.. 2019. 3. 15. [TODO] vue-router, todo 컴포넌트 추가 vue-router 추가하는 상세한 설명은 [Vue.js/Typescript] 4. Vue-router 포스팅으로. // src/routes/index.ts import Vue from 'vue'import VueRouter from 'vue-router' // modulesimport Product from '../components/Product';import Todo from '../components/Todo';import NotFound from '../components/NotFound'; Vue.use(VueRouter) export const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: Product.. 2019. 3. 14. 이전 1 다음
