Vue.js8 [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. [게시판] 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. 이전 1 2 다음
