Project43 [TODO] Docker 배포환경 설정 이번에는 개발을 잠깐 멈추고 배포 환경세팅을 했다. Dockerize Vue.js App 글을 참고하여 진행했다. Dockerfile 추가 # install NODE FROM node:lts-alpine as build-stage WORKDIR /homepage COPY package*.json ./ ARG script RUN npm install COPY . . RUN npm run $script FROM nginx:stable-alpine as production-stage RUN rm /etc/nginx/conf.d/default.conf COPY ./nginx/homepage.conf /etc/nginx/conf.d/homepage.conf COPY --from=build-stage ./homep.. 2019. 3. 25. [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. [게시판] 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. 이전 1 ··· 4 5 6 7 8 다음
