DEVLOG DEVLOG

Vue 컴포넌트에 재사용 가능한 기능을 사용할 수 있게 해주는 유연한 방법 mixin 객체는 모든 컴포넌트 옵션을 포함할 수 있음 컴포넌트에서 mixin을 사용하면 mixin의 모든 옵셜들은 컴포넌트 고유 옵션에 혼합됨 @Component class TestMixin extends Vue { private name: string = 'Test Mixin' private mounted(): void { console.log(`${this.name}`); } } @Component({ mixins: [TestMixin] }) export default class TestComponent extends Vue { private mounted(): void { console.log('Test Component'..

전역 API Vue.extends(options) 전달인자 {Object} options 사용방법 Vue 생성자의 하위 클래스를 만듦 전달인자는 옵션을 포함하는 객체 Vue.nextTick([callback, context]) 전달인자 {Function} [callback] {Object} [context] 사용방법 다음 DOM 업데이트 사이클 이후 실행하는 콜백을 지연시킴 DOM 업데이트를 기다리기 위해 일부 데이터를 변경한 직후 사용해야함 this.$nextTick(() => { console.log('next tick'); }) this.$nextTick().then(() => { console.log('usage as a promise'); }) Vue.set(targ..

beforeCreate Vue 인스턴스가 초기화 된 직후에 실행 컴포넌트가 DOM에 추가되기 전이어서 this.$el에 접근할 수 없음 데이터와 메소드도 접근할 수 없음 created 컴포넌트가 DOM에 추가되기 전이어서 this.$el에 접근할 수 없음 데이터와 메소드에 접근 가능 이벤트 리스너 선언을 하기에 적합 beforeMount 템플릿의 여부를 확인한 후 렌더링하여 가상 DOM이 생성됨 가상 DOM이 실제 DOM에 부착되진 않음 mounted 가상 DOM이 실제 DOM에 부착되고 난 후에 실행됨 this.$el에 접근할 수 있음 자식 컴포넌트가 mount된 이후에 부모 컴포넌트가 mount됨 beforeUpdate 컴포넌트에서 사용되는 데이터의 값이 변해서 DOM에 변경사항을 적용시키기 전에 실..

// .vscode/sttings.json { "eslint.validate": [ "vue", "javascript", "javascriptreact", "typescript", "typescriptreact", ], "eslint.alwaysShowStatus": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, }

query에 사용될 필드들을 재사용 할 수 있도록 해줌 // user-info.fragment.gql fragment UserInfo on User { firstName lastName age gender } // get-user.query.gql #import './user-info.fragmet.gql' query getUser($userId: Int!) { getUser(userId: $userId) { ...UserInfo friends { ...UserInfo } } }

Data를 가져오는 주체와 cache에 저장 여부를 설정하는 옵션 chche-first fetch-policy 옵션의 default 기본적으로 cache data를 가져옴 cache data가 없을 경우에 network에서 데이터를 받아오고 cache에 저장 cache-and-network 기본적으로 cache data 가 있을경우 가져옴 그 후에 network로 부터 data를 받아오고 cache에 저장 cache-only cache data를 가져옴 cache data가 없을 경우에는 fail network-only nework에서 data를 가져옴 그후에 cache에 저장 no-cache nework에서 data를 가져옴 network 호출에 실패해도 cache에 저장하지 않음

Vue의 상태 관리 패턴 + 라이브러리 Vuex 사용 이유 MVC 패턴에서 발생하는 구조적 문제 해결 가능 컴포넌트 간 데이터 전달 문제 해결 가능 여러 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제 해결 가능 Vuex 구조 State 컴포넌트 간에 공유하는 데이터 View 데이터를 출력하는 뷰 Action 사용자의 입력에 따라 데이터를 변경하는 메소드 단방향 데이터 흐름 View에서 이벤트가 발생했을 때 Action이 실행됨 Action을 통해 State가 변경됨

public class Exaplme extends Vue { private signupInfo: ISignupInfo = { email: "", password: "", name: "" }; @Validations() validations = { signupInfo: { email: { required, email }, password: { required, minLength: minLength(4) }, name: { required } }, passwordCheck: { required, minLength: minLength(4) } }; }