The document discusses strategies for building scalable applications through micro-frontends, utilizing AngularJS and Vue components. It outlines how to dynamically register components, handle state management with Vuex, and integrate various frontend approaches. Various code snippets are provided to demonstrate implementation details and functionalities of the discussed concepts.

9. 주소록 드라이브 메일 캘린더 위키 프로젝트

11. 출처: https://medium.com/@ravindermahajan/micro-frontend-front-end-approach-for-building-scalable-applications-13c930834732

12. 출처: https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16

20. 출처: https://www.flaticon.com/free-icon/success_1642322?term=success&page=1&position=31

32. $stateProvider.state({
body:{
/* @ngInject */
templateProvider: function($location) {
const url = $locatioin.url();
return `<iframe-component src="'${url}'">
</iframe-component>`;
}
}
});
/* ngInject */
function IframeComponent($window, $element) {
this.$onInit = () => {
const url = `/service/${this.src}`;
const iframe = $element.find('iframe');
iframe.attr('src', url);
};
}

35. <div class="contact-vue-component" ng-non-bindable>
<div class="vue-wrapper"><div>
</div>

36. import ServiceMain from '@/components/ServiceMain.vue';
this.$onInit = () => {
this.component = new Vue({
el: $element.find(".vue-wrapper")[0],
store,
router,
components: {ServiceMain},
data() {
return {state: 'FE개발랩 상담소 운영'}
},
template: '<service-main :state="state" component-name="ContactBodyContainer"></service-main>'
});
};

37. <template>
<component :is="componentName" :state="state" />
</template>
<script lang="ts">
export default Vue.extend({
name: 'ServiceMain',
props: {
componentName, state
},
components: {
ContactBodyContainer,
DriveBodyContainer,
...
}
});
</script>

38. // 컴포넌트 전역 등록
Vue.component(
'async-webpack-example',
() => import('./my-async-component')
);
// 컴포넌트 지역 등록
new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
});
출처: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

39. const ServiceMain = () => {
return import(/* webpackChunkName: "serviceMain" */"@/components/ServiceMain.vue");
};
this.$onInit = () => {
this.component = new Vue({
el: $element.find(".vue-wrapper")[0],
store,
router,
components: {ServiceMain},
data() {
return {state: 'FE개발랩 상담소 운영'}
},
template: '<service-main :state="state" component-name="ContactBodyContainer"></service-main>'
});
};

44. const app = new Vue({
data() {
return {message: 'Hello FORWARD'};
},
template: '<child :title="message"></child>'
});
app.message = '2019 NHN FORWARD';

45. $scope.$on('$stateChangeSuccess', (event, toState) => {
if (ContactStateHelperUtil.includes()) {
this.vm.state = _.assign(
{name: toState.name},
makeParamsAndQuery()
);
}
});
function makeParamsAndQuery() {
const query = $location.search();
const params = _.omit(
$state.params,
_.keys(query)
);
return { params, query };
}

46. watch: {
state(newState) {
this.updateState(newState);
}
},
methods: {
updateState(newState) {
return this.$store.dispatch(
'contacts/updateState',
newState
);
}
}
const state = {
state: {
name: '',
params: {},
query: {}
}
};
const actions = {
updateState({commit, dispatch}, newState) {
commit('updateState', newState);
dispatch('fetchItemsByState', newState);
}
};
const mutations = {
updateState(state, newState) {
s.state = newState;
}
};

47. import store from './store';
const app = new Vue({
store,
...
});
store.dispatch('contact/fetch', id);
store.commit('contact/toggle', true);

49. store.subscribe((mutation, state) => {
console.log(mutation.type);
console.log(mutation.payload);
});
store.subscribeAction((action, state) => {
console.log(action.type);
console.log(action.payload);
});
출처: https://vuex.vuejs.org/api/#subscribe

50. // Vue 컴포넌트 생성
const app = new Vue({store, ...});
// AngularJS에서 액션 리스너 등록
store.subscribeAction(
onActionDispatchListener
);
function onActionDispatchListener({type, payload}) {
if (type === 'contact/viewPost') {
viewPost(payload);
} else if (type === 'contact/changePath') {
changePath(payload);
}
}
function viewPost(postId) {
TaskViewModalFactory.openByPostId(postId);
}
function changePath(path) {
$location.url(path);
}
// Vue에서 데이터와 액션 전달
methods: {
go(path) {
this.$store.dispatch(
'contact/changePath',
path);
}
}

53. 출처: https://medium.com/storybookjs/storybook-5-0-db1d0f9c83b8