Project/홈페이지11 [TODO] Google Login (OAuth) 이제 등록한 todo를 실제로 구글 시트에 추가해보자. 참고 : Google sheet API 안내 POST https://sheets.googleapis.com/v4/spreadsheets//values:batchUpdate?key= 등록하는 API는 위와 같다. key는 이전과 같이 파라미터에 추가해서 인증에 사용했다. 일단 잘되는지 postman으로 테스트해봤다. { "valueInputOption": "USER_ENTERED", "data": [ { "range": "!A5:C5", "majorDimension": "ROWS", "values": [ ["Test_Id", "Test_name", "Test_Todo"] ] } ] } request body는 위와 같이 세팅했다. A5:C5 위치에 T.. 2019. 4. 10. [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] table, Style object 기존 이미지 오늘은 스타일을 조금 수정했다. name todo {{item.name}} {{item.todo}} 기존에 쓰고 있던 태그 대신 태그를 사용했다. 그리고 태그도 추가했다. 아직 어떻게 쓸지 정확하게 생각하진 않았는데 필요할거 같아서 일단 넣음. //src/components/Todo/Todo.html // Style styleThead: object = { color: 'red' } styleTbody: object = { color: 'blue' } css에 대한 욕심이 있어서 bootstrap을 쓸까 하다가 일단 직접 해보기로 했다. css 적용 어떻게 하는지 몰라서 적용되는지 테스트만 해보려고 color 값만 줬다. vue에서는 style을 위처럼 객체로 사용해서 바인딩해서 쓸 수 있다.. 2019. 3. 28. [TODO] favicon 이미지 추가 favicon을 찾을 수 없다는 에러 발생.파비콘 생성기 웹사이트에 들어가서 파비콘 이미지를 만든다. 만든 파비콘 이미지 이름을 favicon.png로 바꾸고 프로젝트의 루트 위치에 놓는다. 12345678// webpack.config.js plugins: [ new HtmlWebpackPlugin({ vue: true, favicon: 'favicon.png'//add )}}),cswebpack 설정 파일의 HtmlWebpackPlugin에 favicon을 추가한다. 빌드 후 결과를 보면 파비콘 이미지가 잘 동작하는 것을 확인할 수 있다. 참고 깃허브 : add favoicon.png 2019. 3. 25. [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. 이전 1 2 다음
