TypeScript15 [Typescript] openAPI 문서 모델을 typescript interface로 전환하기 1. openAPI Generator Install brew install openapi-generator Generate 변환 가능한 리스트 이 중 typescript-axios로 해보자. openapi-generator generate -i -g typescript-axios -o 변환 명령어는 위와 같다. openapi-generator generate -i swaggerPetstore.yml -g typescript-axios -o ./openApi-Generator 위 명령어로 현재 폴더에 있는 swaggerPetstore.yml(swagger editor에서 예시로 주는 yml을 따로 파일로 저장한 것) 이라는 이름을 가진 openAPI yml 파일을 openApi-Generator 폴더에 t.. 2019. 7. 20. [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. [Vue.js/Typescript] 4. Vue-router 말머리에 typescript를 적긴 했지만 이번에는 거의 vue와 관련 있는 내용이다. Vue-router 사용하기 npm install --save vue-routercs먼저 위 명령어로 vue-router 의존성을 추가함과 동시에 다운한다. /* src/components/Index/Index.html */ Colored by Color Scriptercs인덱스 컴포넌트 템플릿을 위와 같이 바꾼다.router-view는 경로에 따라 컴포넌트가 변경되는 곳이다. /* src/routes/index.ts */ import Vue from 'vue'import VueRouter from 'vue-router' // modulesimport Test1 from '../components/Test1';impo.. 2019. 3. 11. [게시판] vue-markdown-loader 추가 npm i --save-dev vue-markdown-loadercsvue-markdown-loader 의존성 추가. // webpack.config.js module.exports = { //... module: { rules: [ // .md 로더 추가. { test: /\.md$/, use: [ { loader: 'vue-loader' }, { loader: 'vue-markdown-loader/lib/markdown-compiler', options: { raw: true } } } ] }, resolve: { extensions: ['.ts', '.js', '.vue', '.json', '.md'], // .md 추가cs 공식 깃헙에서 알려주는대로 웹팩 설정 추가한다.vue-loader 버전을 .. 2019. 2. 12. [게시판] List 컴포넌트 생성 List 컴포넌트 추가.123456789101112131415// src/components/List.vue List import { Vue, Component } from "vue-property-decorator"; @Componentexport default class List extends Vue {}Colored by Color ScriptercsList 컴포넌트를 .vue 파일로 SFC(Single File Component)로 만들었다.기존 ts-vue에는 .ts와 .html 파일로 나눠서 만들었지만 파일하나가 관리가 쉬워서 걍 이렇게 하려고 한다. 12345678910111213141516171819// src/index.ts // ... // @ts-ignoreimport List fro.. 2019. 2. 11. [게시판] 기획 Vue로 게시판 만들기 시작.홈페이지 중 한 페이지를 장식할 기능이 될 예정. 먼저 디자인 제외하고 Ver 1. 기획 개발환경은 Vue.js + typescript + webpack. (only FrontEnd)만들 화면은 총 2개 (리스트, 게시글 상세보기)리스트의 하나의 아이템은 게시글 번호, 이름, 등록일로 이루어진다.게시글 상세보기는 게시글 번호, 이름, 등록일, 그림, 내용으로 이루어진다.지킬처럼 포스팅 폴더가 하나 있고 이를 읽어와서 출력하는 형태로 구현한다.ver1이 모두 개발되는 경우 (예정일 2019.3.16) 호스팅 사이트에 웹팩 번들링 결과를 /homepage 서브 도메인으로 배포(?) 한다. 깃헙에 프로젝트랑 마일스톤 있길래 이참에 사용해보고자 한다.첨 사용해봐서 일케 하는거 맞는지.. 2019. 2. 10. 이전 1 2 3 다음
