Front-End (web)/Vue.js Typescript8 [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. [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. [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.js/Typescript] 3. Vuex - State, Getter 데이터가 특정 컴포넌트에 종속되지 않고 다른 컴포넌트에서도 사용되는 데이터라면 vuex를 사용하여 공통 저장소에 저장하는게 좋다.(부모, 자식 컴포넌트간 데이터 교환이라면 props, events로 해도 되긴한다.) Vuex 사용하기 npm i --save vuexcsvuex를 사용하려면 먼저 의존성에 vuex를 추가한다. // src/store/index.ts import Vue from "vue";import Vuex from "vuex"; Vue.use(Vuex); export const store = new Vuex.Store({ state:{ // data }});Colored by Color Scriptercs그 후 src/store 폴더를 만들고 index.ts 파일을 만듭니다.그리고 위와 .. 2019. 1. 26. 이전 1 2 다음
