본문 바로가기
반응형

Vue15

[Vue.js/Typescript] 8. Axios, Mutation, Action 이번에는 Api 통신으로 Vuex의 State 값을 갱신하는 것까지 해보자. Api 통신은 https://reqres.in 요 사이트를 이용한다. Axios $ npm install --save-dev axios Axios 설치 & 의존성 추가. reqres 사이트에서 제공하는 api중 위 API를 사용해보자. // src/types/user.ts export interface UserResponse { data: User; } export interface User { id: number; email: string; first_name: string; last_name: string; avatar: string; } 응답값을 보고 응답값에 맞는 인터페이스를 만든다. // src/api/reqres.ts.. 2019. 8. 15.
[Vue.js/Typescript] 7. Props, Emit 이전까지는 Vue component 하나를 html, ts 파일 2개로 나누어서 관리했다. 컴포넌트 하나를 추가하려면 폴더 하나에 2개의 파일을 넣으려니 관리가 어렵다는 생각이 든다. (vue는 컴포넌트 단위 프레임워크인데 컴포넌트 하나 당 너무 많은 파일이 생성됨.) 그래서 이번부터는 vue 파일 하나(SFC)로 관리하기로 했다. // src/vueShilms.d.ts declare module '*.vue' { import Vue from 'vue'; export default Vue; } typescript 컴파일러가 vue파일을 인식할 수 있게 위 파일을 추가한다. 참고 깃허브 - add vue SFC setting 컴포넌트들은 각자 데이터를 가지고 있다. 컴포넌트만의 데이터이기 때문에 다른 컴포.. 2019. 8. 14.
[Webpack] case sensitive paths plugin $ webpack --mode=development Mac에서 위와 같이 build 하는 스크립트를 실행하면 문제 없이 잘 돌아가는데 docker에서 실행하면 에러가 발생하는 경우가 있다. > ts-vue@1.0.0 build /homepage > webpack --mode=development Hash: 70e9fe19d88415050f7f Version: webpack 4.38.0 Time: 3973ms Built at: 08/14/2019 10:05:57 AM Asset Size Chunks Chunk Names build.js 1.22 MiB main [emitted] [big] main index.html 202 bytes [emitted] Entrypoint main [big] = build... 2019. 8. 14.
[Vue.js/Typescript] 6. ES Lint [Github - tslint issues] Roadmap: TSLint -> ESLint Typescript 용 Lint인 TSLint가 deprecated 되고 ESLint 로의 마이그레이션을 진행 중이다. TSLint 대신 ESLint 를 프로젝트에 적용해보자. 이미 TSLint 를 사용하고 있다면 TSLint to ESLint RoadMap (rules, Functionality ...) 이 글에 TSLint rules와 ESLint rules 매칭을 잘 해두었기 때문에 참고하면 좋을 듯 하다. $ npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint, @typescript-esl.. 2019. 8. 10.
[Vue.js/Typescript] 5. Popup 모달(Modal)이 아닌 window.open으로 새 창을 띄우는 팝업 예제이다. 데이터 전달 방법 앱(부모) -> 팝업 : Url path, query param 팝업 -> 앱(부모) : vuex mutation 팝업에서 앱으로 데이터를 전송할 때 데이터 버스를 쓸까 하다가 그냥 기존에 세팅되어 있는 vuex를 쓰기로 했다. Vuex 데이터 추가 // src/store/modules/popup.ts export const namespaced = true; interface State { name: string; } export const state: State = { name: "default name" }; export const mutations = { SET_NAME(state: State, na.. 2019. 8. 8.
[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.
반응형