{"theme":"green2","mindData":[[{"id":"579fab0b-e8ca-ff3e","text":"Vue.js","isRoot":true,"main":true,"x":4000,"y":4000,"isExpand":true,"layout":{"layoutName":"mindmap2","direct":""},"stroke":"rgb(83,175,128)","style":{"background-color":"#43A047","color":"#fff","border-color":"transparent","border-width":0,"padding":[18,14,18,14],"font-size":"18","stroke":"rgb(83,175,128)"}},{"id":"2abff43d-22c0-a9c8","text":"Vue.js란?","stroke":"rgb(83,175,128)","style":{"background-color":"#F0F4C3","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[9,14,8,14],"font-size":"14"},"x":4127,"y":2899,"layout":null,"isExpand":true,"pid":"579fab0b-e8ca-ff3e"},{"id":"4ed4c854-2d98-18e7","text":"NPM","stroke":"rgb(83,175,128)","style":{"background-color":"#F0F4C3","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[9,14,8,14],"font-size":"14"},"x":4127,"y":3288.5,"layout":null,"isExpand":true,"pid":"579fab0b-e8ca-ff3e"},{"id":"03a70fe4-dcb8-9fdf","text":"Vue Router","stroke":"rgb(83,175,128)","style":{"background-color":"#F0F4C3","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[9,14,8,14],"font-size":"14"},"x":4127,"y":3779,"layout":null,"isExpand":true,"pid":"579fab0b-e8ca-ff3e"},{"id":"0fddf5ef-8a8b-db38","text":"Component","stroke":"rgb(83,175,128)","style":{"background-color":"#F0F4C3","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[9,14,8,14],"font-size":"14"},"x":4127,"y":5118,"layout":null,"isExpand":true,"pid":"579fab0b-e8ca-ff3e"},{"id":"90b73a42-9bc0-1443","text":"Reusability & Composition","stroke":"rgb(83,175,128)","style":{"background-color":"#F0F4C3","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[9,14,8,14],"font-size":"14"},"x":3771,"y":3401.5,"layout":null,"isExpand":true,"pid":"579fab0b-e8ca-ff3e"},{"id":"9bef8334-4f45-8370","text":"프록시 서버","stroke":"rgb(83,175,128)","style":{"background-color":"#F0F4C3","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[9,14,8,14],"font-size":"14"},"x":3865,"y":3852,"layout":null,"isExpand":true,"pid":"579fab0b-e8ca-ff3e"},{"id":"36aa99d6-a96c-48da","text":"Vuex(v4.x)","stroke":"rgb(83,175,128)","style":{"background-color":"#F0F4C3","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[9,14,8,14],"font-size":"14"},"x":3877,"y":4313.5,"layout":null,"isExpand":true,"pid":"579fab0b-e8ca-ff3e"},{"id":"9eb7fd8e-0498-4429","text":"배포","stroke":"rgb(83,175,128)","style":{"background-color":"#F0F4C3","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[9,14,8,14],"font-size":"14"},"x":3912,"y":4616.5,"layout":null,"isExpand":true,"pid":"579fab0b-e8ca-ff3e"},{"id":"1d349e92-299a-f669","text":"사용자 인터페이스 개발을 위한 Progressive Framework","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4234,"y":2609.5,"layout":null,"isExpand":true,"pid":"2abff43d-22c0-a9c8"},{"id":"793bbc05-8858-3908","text":"SPA(Single Page Application) 개발을 위한 프\n론트엔드 프레임워크","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4234,"y":2643.5,"layout":null,"isExpand":true,"pid":"2abff43d-22c0-a9c8"},{"id":"12425ea7-3c44-1125","text":"MVVM 패턴 사용","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4234,"y":2739.5,"layout":null,"isExpand":true,"pid":"2abff43d-22c0-a9c8"},{"id":"88ea40d7-58c9-1820","text":"컴포넌트(Component)를 사용한 높은 재사용성","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4234,"y":2824.5,"layout":null,"isExpand":true,"pid":"2abff43d-22c0-a9c8"},{"id":"c5709d1c-b016-c13f","text":"Node.js 기반","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4234,"y":2858.5,"layout":null,"isExpand":true,"pid":"2abff43d-22c0-a9c8"},{"id":"39e14777-63f0-d733","text":"프로젝트 옵션","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4234,"y":3045.5,"layout":null,"isExpand":true,"pid":"2abff43d-22c0-a9c8"},{"id":"b4956b02-6298-d972","text":"Node Package Manager","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4209,"y":3242.5,"layout":null,"isExpand":true,"pid":"4ed4c854-2d98-18e7"},{"id":"0d2cbe7d-2f7d-d646","text":"옵션","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4209,"y":3310.5,"layout":null,"isExpand":true,"pid":"4ed4c854-2d98-18e7"},{"id":"a28a6bbc-3a64-7853","text":"라우팅","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4248,"y":3388.5,"layout":null,"isExpand":true,"pid":"03a70fe4-dcb8-9fdf"},{"id":"b7ace75d-1789-926d","text":"vue-router","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4248,"y":3569.5,"layout":null,"isExpand":true,"pid":"03a70fe4-dcb8-9fdf"},{"id":"3d5f362c-9faa-39d8","text":"Lazy Load","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4248,"y":3965,"layout":null,"isExpand":true,"pid":"03a70fe4-dcb8-9fdf"},{"id":"9cecca55-4e5d-530e","text":"View, Data, Code의 세트","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4252,"y":4223.5,"layout":null,"isExpand":true,"pid":"0fddf5ef-8a8b-db38"},{"id":"26f9b559-4fa9-d13f","text":"폴더 구조","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4252,"y":4274.5,"layout":null,"isExpand":true,"pid":"0fddf5ef-8a8b-db38"},{"id":"ff04e878-3d4c-fd99","text":"데이터 바인딩","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4252,"y":4801,"layout":null,"isExpand":true,"pid":"0fddf5ef-8a8b-db38"},{"id":"c8ecf3cd-f010-196d","text":"컴포넌트 간의 데이터 및 이벤트 전달 방법","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4252,"y":5531,"layout":null,"isExpand":true,"pid":"0fddf5ef-8a8b-db38"},{"id":"63fe2f10-b808-4803","text":"Provide/Inject","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4252,"y":5847.5,"layout":null,"isExpand":true,"pid":"0fddf5ef-8a8b-db38"},{"id":"9db5087e-f5b3-83d8","text":"Template refs","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4252,"y":5983,"layout":null,"isExpand":true,"pid":"0fddf5ef-8a8b-db38"},{"id":"ad62c215-af77-c5be","text":"Composition API","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3642,"y":3220,"layout":null,"isExpand":true,"pid":"90b73a42-9bc0-1443"},{"id":"73106056-586a-5f7b","text":"mixins","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3699,"y":3367,"layout":null,"isExpand":true,"pid":"90b73a42-9bc0-1443"},{"id":"ef40cb39-0acd-fffc","text":"Custom Directives","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3635,"y":3480,"layout":null,"isExpand":true,"pid":"90b73a42-9bc0-1443"},{"id":"707097b6-82bb-070c","text":"Plugins","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3694,"y":3593,"layout":null,"isExpand":true,"pid":"90b73a42-9bc0-1443"},{"id":"92f5efa5-c027-d15c","text":"클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 응용 프로그램","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3377,"y":3693.5,"layout":null,"isExpand":true,"pid":"9bef8334-4f45-8370"},{"id":"3fdc25a5-a6a6-6531","text":"서버와 클라이언트 사이에 중계기로써 대리로 통신을 수행하는 것을 프록시 (proxy) , 그 중계 기능을 하는 것을 프록시 (proxy) 서버","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3377,"y":3738.5,"layout":null,"isExpand":true,"pid":"9bef8334-4f45-8370"},{"id":"4d84bdd2-ba0e-074a","text":"CORS","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3796,"y":3902,"layout":null,"isExpand":true,"pid":"9bef8334-4f45-8370"},{"id":"8a4ffabe-9b61-49a8","text":"Vuex는 Vue.js 애플리케이션을 위한 상태관리 패턴+라이브러리","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3500,"y":4064.5,"layout":null,"isExpand":true,"pid":"36aa99d6-a96c-48da"},{"id":"49a82fec-6b2b-bad4","text":"모든 컴포넌트에 대한 중앙집중식 저장소 역할을 하며 예측 가능한 방식으로\n상태를 변경","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3429,"y":4098.5,"layout":null,"isExpand":true,"pid":"36aa99d6-a96c-48da"},{"id":"073e312a-2ae2-3186","text":"데이터를 store 에 저장하고, 프로젝트 전체에서 사용할 수 있도록 해줌","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3459,"y":4143.5,"layout":null,"isExpand":true,"pid":"36aa99d6-a96c-48da"},{"id":"0c1640ea-b02b-8f2e","text":"일반 전역 개체와의 차이점","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3694,"y":4205.5,"layout":null,"isExpand":true,"pid":"36aa99d6-a96c-48da"},{"id":"f9692908-f279-efd0","text":"state","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3813,"y":4267.5,"layout":null,"isExpand":true,"pid":"36aa99d6-a96c-48da"},{"id":"bc43b8ae-e727-2407","text":"getters","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3801,"y":4307,"layout":null,"isExpand":true,"pid":"36aa99d6-a96c-48da"},{"id":"c4893002-c9f2-b136","text":"mutations","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3785,"y":4391.5,"layout":null,"isExpand":true,"pid":"36aa99d6-a96c-48da"},{"id":"68134c3b-e2f7-f8bf","text":"actions","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3801,"y":4504.5,"layout":null,"isExpand":true,"pid":"36aa99d6-a96c-48da"},{"id":"08bd6c2e-449a-86fb","text":"로그인 후 로그인 여부와 사용자 정보 유지에서 사용되는 편","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3517,"y":4572.5,"layout":null,"isExpand":true,"pid":"36aa99d6-a96c-48da"},{"id":"930e49ac-df14-ef66","text":"빌드","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3850,"y":4621.5,"layout":null,"isExpand":true,"pid":"9eb7fd8e-0498-4429"},{"id":"5383f18f-3418-0739","text":"Model-View-ViewModel: 로직과 화면 UI View를 분리해서 개발하기 위해 설계","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":2688.5,"layout":null,"isExpand":true,"pid":"12425ea7-3c44-1125"},{"id":"ce18b425-bd3f-6ee7","text":"View - HTML DOM","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":2722.5,"layout":null,"isExpand":true,"pid":"12425ea7-3c44-1125"},{"id":"77264f6e-7a72-d5f0","text":"Model - JavaScript","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":2756.5,"layout":null,"isExpand":true,"pid":"12425ea7-3c44-1125"},{"id":"e318fab8-a513-1082","text":"ViewModel - Vue(DOM Listeners, Directives)","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":2790.5,"layout":null,"isExpand":true,"pid":"12425ea7-3c44-1125"},{"id":"e17e6756-1166-83be","text":"Babel","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4348,"y":2892.5,"layout":null,"isExpand":true,"pid":"39e14777-63f0-d733"},{"id":"21998a8c-6fc2-d774","text":"TypeScript","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4348,"y":2926.5,"layout":null,"isExpand":true,"pid":"39e14777-63f0-d733"},{"id":"8bde5877-2986-3c05","text":"Progressive Web App(PWA) Support","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4348,"y":2960.5,"layout":null,"isExpand":true,"pid":"39e14777-63f0-d733"},{"id":"6642ba34-fb3e-a317","text":"Router","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4348,"y":2994.5,"layout":null,"isExpand":true,"pid":"39e14777-63f0-d733"},{"id":"73d26df0-f47f-701e","text":"Vuex","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4348,"y":3028.5,"layout":null,"isExpand":true,"pid":"39e14777-63f0-d733"},{"id":"18259045-1305-c714","text":"CSS Pre-processors","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4348,"y":3062.5,"layout":null,"isExpand":true,"pid":"39e14777-63f0-d733"},{"id":"06db3916-93c7-527b","text":"Linter/Formatter","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4348,"y":3113.5,"layout":null,"isExpand":true,"pid":"39e14777-63f0-d733"},{"id":"2a59f16f-9a28-0d1d","text":"Unit Testing","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4348,"y":3164.5,"layout":null,"isExpand":true,"pid":"39e14777-63f0-d733"},{"id":"7bef5579-fa2a-26df","text":"E2E Testing","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4348,"y":3198.5,"layout":null,"isExpand":true,"pid":"39e14777-63f0-d733"},{"id":"c78f55b0-c93c-a8b4","text":"-g(global)","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4271,"y":3276.5,"layout":null,"isExpand":true,"pid":"0d2cbe7d-2f7d-d646"},{"id":"d264fed5-13e2-0b78","text":"--save","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4271,"y":3327.5,"layout":null,"isExpand":true,"pid":"0d2cbe7d-2f7d-d646"},{"id":"484458f3-1bbc-7e8d","text":"사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4322,"y":3388.5,"layout":null,"isExpand":true,"pid":"a28a6bbc-3a64-7853"},{"id":"63247474-9d8a-52c7","text":"vue add router","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4343,"y":3422.5,"layout":null,"isExpand":true,"pid":"b7ace75d-1789-926d"},{"id":"23fc0215-0cf0-c691","text":"App.vue 파일에 자동으로 라우팅 설정됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4343,"y":3456.5,"layout":null,"isExpand":true,"pid":"b7ace75d-1789-926d"},{"id":"9009bea9-dff8-aae2","text":"index.js에서 추가 설정","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4343,"y":3524.5,"layout":null,"isExpand":true,"pid":"b7ace75d-1789-926d"},{"id":"62eddaf4-ec7a-a72c","text":"routes/index.js에서 import 한 vue-router 정의는 main.js에 등록을 해줘야 실제 적용됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4343,"y":3626.5,"layout":null,"isExpand":true,"pid":"b7ace75d-1789-926d"},{"id":"df849873-1064-cd81","text":"router/index.js에 routes에 path, name, component 정보 추가 후 App.vue에서 링크 추가해야함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"orange","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12","font-weight":"bold"},"x":4343,"y":3705.5,"layout":null,"isExpand":true,"pid":"b7ace75d-1789-926d"},{"id":"62a79ce9-edbf-9c59","text":"라우터에서 Lazy Load로 컴포넌트를 import 한 것 = 내부적으로 Vue CLI의 prefetch 기능을 사용 한 것","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4340,"y":3750.5,"layout":null,"isExpand":true,"pid":"3d5f362c-9faa-39d8"},{"id":"57e9fdc4-e20f-d5de","text":"Vue CLI3 부터 prefetch 기능이 추가됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4340,"y":3886,"layout":null,"isExpand":true,"pid":"3d5f362c-9faa-39d8"},{"id":"7849f7cc-ccef-8057","text":"Vue.config.js","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4340,"y":4033,"layout":null,"isExpand":true,"pid":"3d5f362c-9faa-39d8"},{"id":"bb291bc4-fce0-f2ab","text":"실무 팁","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4340,"y":4134.5,"layout":null,"isExpand":true,"pid":"3d5f362c-9faa-39d8"},{"id":"cd58e9a5-5982-e4aa","text":"src/components - 공통 컴포넌트 파일","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4342,"y":4257.5,"layout":null,"isExpand":true,"pid":"26f9b559-4fa9-d13f"},{"id":"0b49b4ef-6e27-8902","text":"src/views - 페이지라고 부르는 화면 하나하나에 해당하는 vuew 컴포넌트 파일","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4342,"y":4291.5,"layout":null,"isExpand":true,"pid":"26f9b559-4fa9-d13f"},{"id":"362d4729-a491-cda2","text":"양방향 데이터 바인딩(Tow-way data binding) 지원","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":4325.5,"layout":null,"isExpand":true,"pid":"ff04e878-3d4c-fd99"},{"id":"fb5cda7a-3baa-302d","text":"바인딩 문법","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":4580.5,"layout":null,"isExpand":true,"pid":"ff04e878-3d4c-fd99"},{"id":"25a6e757-1a09-c45c","text":"리스트 랜더링(v-for)","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":4835.5,"layout":null,"isExpand":true,"pid":"ff04e878-3d4c-fd99"},{"id":"2224fb66-a003-42e5","text":"랜더링 문법","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":4892,"layout":null,"isExpand":true,"pid":"ff04e878-3d4c-fd99"},{"id":"b618bec1-6fd2-3977","text":"이벤트 처리","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":4999.5,"layout":null,"isExpand":true,"pid":"ff04e878-3d4c-fd99"},{"id":"20c52277-8758-cebe","text":"변경 감시","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":5141,"layout":null,"isExpand":true,"pid":"ff04e878-3d4c-fd99"},{"id":"5c5aff0e-600a-7c6d","text":"Mock 서버를 Postman으로 세팅하고, Axios를 통해 통신해서 데이터를 바인딩 할 수 있음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":5231.5,"layout":null,"isExpand":true,"pid":"ff04e878-3d4c-fd99"},{"id":"cb055635-26cc-050f","text":"공통 함수 구현","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4366,"y":5276.5,"layout":null,"isExpand":true,"pid":"ff04e878-3d4c-fd99"},{"id":"3bc3c1d8-d1c4-30a2","text":"Props","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4519,"y":5378.5,"layout":null,"isExpand":true,"pid":"c8ecf3cd-f010-196d"},{"id":"0ff00dc5-b80e-cb60","text":"ref","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4519,"y":5576.5,"layout":null,"isExpand":true,"pid":"c8ecf3cd-f010-196d"},{"id":"a99c7e43-59e7-fe12","text":"Slot","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4519,"y":5729,"layout":null,"isExpand":true,"pid":"c8ecf3cd-f010-196d"},{"id":"7352751a-6151-e4fc","text":"Props를 통해 계층 트리 전체에 데이터를 전달하는 것은 지저분함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4365,"y":5785.5,"layout":null,"isExpand":true,"pid":"63fe2f10-b808-4803"},{"id":"212696a0-dea8-6929","text":"부모 컴포넌트에서는 provide 옵션을, 자식 컴포넌트에서는 inject 옵션을 통해 데이터를 쉽게 전달할 수 있음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"orange","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4365,"y":5819.5,"layout":null,"isExpand":true,"pid":"63fe2f10-b808-4803"},{"id":"3fb3788a-5162-e0a8","text":"컴포넌트 계층 구조가 복잡하더라도 원하는 자식 컴포넌트로 데이터를 한 번에 전달 가능","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4365,"y":5864.5,"layout":null,"isExpand":true,"pid":"63fe2f10-b808-4803"},{"id":"1bb6ea10-3baa-df55","text":"그러나 자식 입장에서는 전달받은 데이터가 어느 부모로부터 왔는지 확인이 안됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4365,"y":5909.5,"layout":null,"isExpand":true,"pid":"63fe2f10-b808-4803"},{"id":"75facbaf-b8b5-481e","text":"Vue 개발 시 특별한 경우가 아니면 HTML 객체에 바로 접근해서 구현할 일이 없으나, 필요한 경우에는 HTML 태그에 id 대신 ref 사용하면 됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4363,"y":5943.5,"layout":null,"isExpand":true,"pid":"9db5087e-f5b3-83d8"},{"id":"611d77ff-9de0-caff","text":"\\<input type=\"text\" ref=\"title\" />","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4363,"y":5988.5,"layout":null,"isExpand":true,"pid":"9db5087e-f5b3-83d8"},{"id":"0d25335c-c9c5-0df2","text":"this.$refs.title.focus();","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4363,"y":6022.5,"layout":null,"isExpand":true,"pid":"9db5087e-f5b3-83d8"},{"id":"088819fb-0de9-b8f5","text":"특정 기능을 갖는 함수를 정의하고 API 처럼 사용할 수 있게 해주는 것","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3228,"y":3163.5,"layout":null,"isExpand":true,"pid":"ad62c215-af77-c5be"},{"id":"0973ac77-00ea-1249","text":"공통 함수 분리 후 toRefs(객체) 반환을 해야 반응형 동작이 가능함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3249,"y":3197.5,"layout":null,"isExpand":true,"pid":"ad62c215-af77-c5be"},{"id":"2160d4d8-9756-31fa","text":"컴포지션 API 에서 setup(）은 컴포넌트 라이프사이클의 beforeCreate 와 created 훅 사이에서 실행되므로 그냥 setup()에서 실행하면 됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3154,"y":3231.5,"layout":null,"isExpand":true,"pid":"ad62c215-af77-c5be"},{"id":"d57374bb-5cad-6d37","text":"Provide/ Inject 사용하려면 provide 와 inject를 별도로 import 해야 사용할 수 있다","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3160,"y":3276.5,"layout":null,"isExpand":true,"pid":"ad62c215-af77-c5be"},{"id":"dc63112d-741b-e27b","text":"공통 모듈, 공통 로직 분리 시 유용","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3477,"y":3310.5,"layout":null,"isExpand":true,"pid":"73106056-586a-5f7b"},{"id":"fa25fb68-194e-988d","text":"메서드명 중복 방지를 위해 주로 함수 이름에 $라는 prefix 를 사용함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3294,"y":3344.5,"layout":null,"isExpand":true,"pid":"73106056-586a-5f7b"},{"id":"8e326ad0-5082-49a8","text":"믹스인의 라이프사이클 훅이 믹스인을 사용하는 컴포넌트의 라이프사이클 훅 보다 먼저 실행됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3211,"y":3378.5,"layout":null,"isExpand":true,"pid":"73106056-586a-5f7b"},{"id":"c652e4d2-b302-7055","text":"main.js에서 import 해두면 전역으로 사용 가능함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3398,"y":3423.5,"layout":null,"isExpand":true,"pid":"73106056-586a-5f7b"},{"id":"84f6bdf5-c682-0ebb","text":"main.js에 전역 커스텀 디렉티브를 등록할 수 있고, 컴포넌트 내에서도 directives 옵션에 등록해서 사용할 수 있음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3147,"y":3457.5,"layout":null,"isExpand":true,"pid":"ef40cb39-0acd-fffc"},{"id":"0692584e-2a51-68c3","text":"focus 설정 가능, position 고정 등 데이터 바인딩도 가능","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3296,"y":3502.5,"layout":null,"isExpand":true,"pid":"ef40cb39-0acd-fffc"},{"id":"92ab3eda-835c-a286","text":"src/plugins 폴더 하위에 배치","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3500,"y":3536.5,"layout":null,"isExpand":true,"pid":"707097b6-82bb-070c"},{"id":"178bf7b9-3900-247d","text":"플러그인은 install 옵션에서 정의해서 사용","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3428,"y":3570.5,"layout":null,"isExpand":true,"pid":"707097b6-82bb-070c"},{"id":"775ef73f-f4ba-d60b","text":"app.config.globalProperties를 선언해서 플러그인 함수 바로 호출 가능","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3278,"y":3604.5,"layout":null,"isExpand":true,"pid":"707097b6-82bb-070c"},{"id":"e138dacc-a527-6cfe","text":"provide 로 다국어 데이터를 전달해서 컴포넌트에서는 inject 를 이용해서도\n사용 가능","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3252,"y":3638.5,"layout":null,"isExpand":true,"pid":"707097b6-82bb-070c"},{"id":"e08ce4ab-4ba0-28b2","text":"해결방법: 서버에서 접근을 허용","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3587,"y":3783.5,"layout":null,"isExpand":true,"pid":"4d84bdd2-ba0e-074a"},{"id":"e6755093-71e0-fb50","text":"프록시 서버 이용하는 방법 있음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3585,"y":3817.5,"layout":null,"isExpand":true,"pid":"4d84bdd2-ba0e-074a"},{"id":"09dceb1e-cc5f-ee8c","text":"개발환경 테스트 방법","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3642,"y":3874,"layout":null,"isExpand":true,"pid":"4d84bdd2-ba0e-074a"},{"id":"5bfdde1d-4003-03ec","text":"근본적인 서버 해결 방법","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3625,"y":3975.5,"layout":null,"isExpand":true,"pid":"4d84bdd2-ba0e-074a"},{"id":"9acf6b7b-473d-1613","text":"Vuex store 는 반응형","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3542,"y":4183,"layout":null,"isExpand":true,"pid":"0c1640ea-b02b-8f2e"},{"id":"dd3efccb-caff-6840","text":"저장소의 상태를 직접 변경할 수 없음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3455,"y":4228,"layout":null,"isExpand":true,"pid":"0c1640ea-b02b-8f2e"},{"id":"24baeb85-3247-61c8","text":"프로젝트 전체에서 사용할 전역 변수","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3578,"y":4267.5,"layout":null,"isExpand":true,"pid":"f9692908-f279-efd0"},{"id":"81b469be-aa76-a1d4","text":"state에서 관리하는 변수 getter 생성하면 컴포넌트에서 저장소 getter를 통해 가져올 수 있음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3313,"y":4301.5,"layout":null,"isExpand":true,"pid":"bc43b8ae-e727-2407"},{"id":"84126278-40f9-1551","text":"Vuex 는 state 에 정의된 변수를 직접 변경하는 것을 허용하지 않음.\n반드시 mutation을 통해 변경해야함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3386,"y":4346.5,"layout":null,"isExpand":true,"pid":"c4893002-c9f2-b136"},{"id":"66b9560a-5c15-ec9a","text":"mutations 은 비동기 (Async) 처리가 아니라 동기 (Sync) 처리를 통해 state 에 정의된 변수의 변경사항을 추적할 수 있게 해준다","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3297,"y":4391.5,"layout":null,"isExpand":true,"pid":"c4893002-c9f2-b136"},{"id":"ea075a63-adcf-61d5","text":"commit를 통해서 호출하여 변경","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3573,"y":4436.5,"layout":null,"isExpand":true,"pid":"c4893002-c9f2-b136"},{"id":"02a4f76e-b6d4-92fe","text":"mutation과 유사","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3674,"y":4470.5,"layout":null,"isExpand":true,"pid":"68134c3b-e2f7-f8bf"},{"id":"1c828b80-603a-f5ab","text":"actions 에 정의된 함수 안에서는 여러 개의 mutations을 실행시킬 수 있음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3364,"y":4504.5,"layout":null,"isExpand":true,"pid":"68134c3b-e2f7-f8bf"},{"id":"868aaf38-a7ed-2937","text":"mutations과 달리 비동기 작업 가능","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3572,"y":4538.5,"layout":null,"isExpand":true,"pid":"68134c3b-e2f7-f8bf"},{"id":"19bad94e-ab81-ee31","text":"npm run build","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3733,"y":4621.5,"layout":null,"isExpand":true,"pid":"930e49ac-df14-ef66"},{"id":"80a0741f-bbae-98bf","text":"ES6 버전 or TypeScript를 ES5 버전으로 자동 전환 지원","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4416,"y":2892.5,"layout":null,"isExpand":true,"pid":"e17e6756-1166-83be"},{"id":"acd2b28a-8352-81ec","text":"웹앱 개발 지원","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4584,"y":2960.5,"layout":null,"isExpand":true,"pid":"8bde5877-2986-3c05"},{"id":"e6e4d1df-b8ae-ba42","text":"Vue-Router","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4422,"y":2994.5,"layout":null,"isExpand":true,"pid":"6642ba34-fb3e-a317"},{"id":"d473d04b-f054-80a8","text":"Vue의 상태관리 패키지","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4412,"y":3028.5,"layout":null,"isExpand":true,"pid":"73d26df0-f47f-701e"},{"id":"911320df-ce50-679f","text":"Sass, Less, Stylus 등 CSS 작성을 위한 CSS 전처리기","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4491,"y":3062.5,"layout":null,"isExpand":true,"pid":"18259045-1305-c714"},{"id":"c75f22c5-fa65-a71c","text":"코딩 컨벤션(표준 가이드)","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4474,"y":3096.5,"layout":null,"isExpand":true,"pid":"06db3916-93c7-527b"},{"id":"ba0efe9e-7857-2e96","text":"Lint on save: Lint 적용 시점 선택(저장 시점에 체크)","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4474,"y":3130.5,"layout":null,"isExpand":true,"pid":"06db3916-93c7-527b"},{"id":"fe9a03c5-71b3-72f6","text":"모카(Mocha) 등 단위테스트를 위한 플러그인","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4451,"y":3164.5,"layout":null,"isExpand":true,"pid":"2a59f16f-9a28-0d1d"},{"id":"83a11319-f2fe-cfd6","text":"End-to-End 테스트로 통합 테스트를 위한 플러그인","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4447,"y":3198.5,"layout":null,"isExpand":true,"pid":"7bef5579-fa2a-26df"},{"id":"5056e344-4c0c-fde7","text":"현재 디렉토리 내의 node_modules 에 설치","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4342,"y":3310.5,"layout":null,"isExpand":true,"pid":"d264fed5-13e2-0b78"},{"id":"eaa95195-d51a-0dd6","text":"package.json 파일에 설치한 패키지 정보 추가됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4342,"y":3344.5,"layout":null,"isExpand":true,"pid":"d264fed5-13e2-0b78"},{"id":"5fc70089-f343-b8f0","text":"라우트 레벨에서 코드 분리","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4501,"y":3490.5,"layout":null,"isExpand":true,"pid":"9009bea9-dff8-aae2"},{"id":"4e8afda4-e550-9096","text":"라우트에 대한 chunk 파일 분리","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4501,"y":3524.5,"layout":null,"isExpand":true,"pid":"9009bea9-dff8-aae2"},{"id":"3c2cadfa-e640-3cf8","text":"라우트 방문 시 lazy-load 설정","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4501,"y":3558.5,"layout":null,"isExpand":true,"pid":"9009bea9-dff8-aae2"},{"id":"95984a26-f2f7-11a7","text":"createApp(App).use(router).mount('#app')","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4831,"y":3632,"layout":null,"isExpand":true,"pid":"62eddaf4-ec7a-a72c"},{"id":"72db235f-008a-0f20","text":"Prefetch: 미래에 사용될 수 있는 리소스(about과 같은 비동기 컴포넌트)를 캐시에 저장함으로써 리소스 다운로드 속도 향상","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4583,"y":3795.5,"layout":null,"isExpand":true,"pid":"57e9fdc4-e20f-d5de"},{"id":"6c4f8783-28a7-c3ea","text":"다만 잘못 과용할 경우 랜더링 시간이 늘어남","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4583,"y":3840.5,"layout":null,"isExpand":true,"pid":"57e9fdc4-e20f-d5de"},{"id":"72b6081b-de49-7214","text":"기본값이 prefetch 기능이 true이기 때문에 주의할 것","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4583,"y":3874.5,"layout":null,"isExpand":true,"pid":"57e9fdc4-e20f-d5de"},{"id":"fb224b0c-9e03-7cec","text":"Prefetch 기능을 사용하면 request 요청 수가 증가함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4583,"y":3908.5,"layout":null,"isExpand":true,"pid":"57e9fdc4-e20f-d5de"},{"id":"8dead47e-18e1-783d","text":"prefetch 기능 사용 시 첫 화면에서 사용되는 리소스가 가장 나중에 다운받아짐","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4583,"y":3942.5,"layout":null,"isExpand":true,"pid":"57e9fdc4-e20f-d5de"},{"id":"8a3522f2-a5eb-114f","text":"prefetch가 남용되면 첫 화면의 랜더링 속도가 느려질 것임","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4583,"y":3976.5,"layout":null,"isExpand":true,"pid":"57e9fdc4-e20f-d5de"},{"id":"a8b63d42-4703-17ab","text":"config 파일에서 prefetch 기능을 삭제할 수 있음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4446,"y":4010.5,"layout":null,"isExpand":true,"pid":"7849f7cc-ccef-8057"},{"id":"1537d7b6-d7ea-a84d","text":"prefetch 기능을 삭제해도 비동기 컴포넌트인 Lazy Load는 import 시에 처리해서 컴포넌트 사용 가능","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4446,"y":4044.5,"layout":null,"isExpand":true,"pid":"7849f7cc-ccef-8057"},{"id":"205ae2c9-f504-e45a","text":"어떤 컴포넌트를 prefetch를 적용해서 캐시에 넣어서 사용할지, 그리고 어떤 컴포넌트를 prefetch 없이 사용자의 접속 시점에 내려줄지를 설계하는 것은 중요하다.","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4418,"y":4089.5,"layout":null,"isExpand":true,"pid":"bb291bc4-fce0-f2ab"},{"id":"eed4906c-16b1-a005","text":"사용자가 접속할 가능성이 높은 컴포넌트는 한 번에 다운로드 할 수 있게 설정하고","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4418,"y":4134.5,"layout":null,"isExpand":true,"pid":"bb291bc4-fce0-f2ab"},{"id":"d4b035e3-b465-5a1f","text":"사용자의 접속 빈도가 낮은 컴포넌트는 prefetch를 적용하거나, 사용자 접속 시점에 리소스를 다운받게 해서 리소스 다운 시점을 분리함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4418,"y":4168.5,"layout":null,"isExpand":true,"pid":"bb291bc4-fce0-f2ab"},{"id":"d0405055-b13c-be3a","text":"문자열","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":4359.5,"layout":null,"isExpand":true,"pid":"fb5cda7a-3baa-302d"},{"id":"5d7a076c-3d76-9e9b","text":"raw HTML 데이터 바인딩","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":4393.5,"layout":null,"isExpand":true,"pid":"fb5cda7a-3baa-302d"},{"id":"937b8c25-1e3f-938c","text":"Form 입력","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":4580.5,"layout":null,"isExpand":true,"pid":"fb5cda7a-3baa-302d"},{"id":"e287cafe-f4b7-3528","text":"클래스 바인딩","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":4767.5,"layout":null,"isExpand":true,"pid":"fb5cda7a-3baa-302d"},{"id":"0cfb7d29-b84d-e621","text":"인라인 스타일 바인딩","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":4801.5,"layout":null,"isExpand":true,"pid":"fb5cda7a-3baa-302d"},{"id":"f6a624da-d827-481f","text":"v-if","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":4869.5,"layout":null,"isExpand":true,"pid":"2224fb66-a003-42e5"},{"id":"bad830da-2c53-eeed","text":"v-show","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":4909,"layout":null,"isExpand":true,"pid":"2224fb66-a003-42e5"},{"id":"790e8a68-d341-7484","text":"v-on 디렉티브 = 심볼 @","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":4948.5,"layout":null,"isExpand":true,"pid":"b618bec1-6fd2-3977"},{"id":"009f3743-4d0c-f6a6","text":"클릭 이벤트","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":4982.5,"layout":null,"isExpand":true,"pid":"b618bec1-6fd2-3977"},{"id":"36140078-8ad0-34e0","text":"Change 이벤트","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":5016.5,"layout":null,"isExpand":true,"pid":"b618bec1-6fd2-3977"},{"id":"14f009d9-c2da-567b","text":"key 이벤트","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4468,"y":5050.5,"layout":null,"isExpand":true,"pid":"b618bec1-6fd2-3977"},{"id":"ccf5206e-04a9-7622","text":"Computed","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4456,"y":5107,"layout":null,"isExpand":true,"pid":"20c52277-8758-cebe"},{"id":"1a14cdbf-af0f-a55b","text":"Watch","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4456,"y":5180.5,"layout":null,"isExpand":true,"pid":"20c52277-8758-cebe"},{"id":"344f53f4-55ca-37fb","text":"Axios","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4854,"y":5237,"layout":null,"isExpand":true,"pid":"5c5aff0e-600a-7c6d"},{"id":"79b069b2-ec5b-de3f","text":"mixins.js","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4484,"y":5276.5,"layout":null,"isExpand":true,"pid":"cb055635-26cc-050f"},{"id":"0164c9ed-77f0-f081","text":"부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4588,"y":5310.5,"layout":null,"isExpand":true,"pid":"3bc3c1d8-d1c4-30a2"},{"id":"98e63350-b3cd-b637","text":"type","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4588,"y":5344.5,"layout":null,"isExpand":true,"pid":"3bc3c1d8-d1c4-30a2"},{"id":"db057b6a-1c45-8c14","text":"default","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4588,"y":5378.5,"layout":null,"isExpand":true,"pid":"3bc3c1d8-d1c4-30a2"},{"id":"6f66f279-e67c-973f","text":"required","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4588,"y":5412.5,"layout":null,"isExpand":true,"pid":"3bc3c1d8-d1c4-30a2"},{"id":"b934e067-07e1-8a8e","text":"validator(유효성 검사 함수)","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4588,"y":5446.5,"layout":null,"isExpand":true,"pid":"3bc3c1d8-d1c4-30a2"},{"id":"88443b94-2c35-de3f","text":"부모 컴포넌트에서 자식 컴포넌트의 이벤트 직접 발생시키기","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4577,"y":5486,"layout":null,"isExpand":true,"pid":"0ff00dc5-b80e-cb60"},{"id":"d6029320-ddda-6721","text":"부모 컴포넌트에서 자식 컴포넌트의 함수 직접 호출하기","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4577,"y":5525.5,"layout":null,"isExpand":true,"pid":"0ff00dc5-b80e-cb60"},{"id":"986724b7-90eb-6c18","text":"부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 직접 변경하기","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4577,"y":5559.5,"layout":null,"isExpand":true,"pid":"0ff00dc5-b80e-cb60"},{"id":"76f3814b-6bf4-0674","text":"자식 컴포넌트에서 부모 컴포넌트로 이벤트/데이터 전달하기(커스텀 이벤트)","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4577,"y":5593.5,"layout":null,"isExpand":true,"pid":"0ff00dc5-b80e-cb60"},{"id":"9089c422-934c-e88d","text":"부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 동기화하기","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4577,"y":5650,"layout":null,"isExpand":true,"pid":"0ff00dc5-b80e-cb60"},{"id":"823589a7-b978-e546","text":"slot으로 비어있는 템플릿 레이아웃을 만들어둔 다음에, 사용 시에 template 태그를 사용해서 html 코드를 레이아웃안에 넣은 완성본을 만들 수 있다.","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"orange","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4578,"y":5706.5,"layout":null,"isExpand":true,"pid":"a99c7e43-59e7-fe12"},{"id":"72f5a3dc-590d-5581","text":"단축어 #","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4578,"y":5751.5,"layout":null,"isExpand":true,"pid":"a99c7e43-59e7-fe12"},{"id":"81509da1-b957-fed3","text":"근데 이 경우에는 다국어 플러그인은 전역에서 사용해야하므로 main.js에 추가해야함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":2764,"y":3638.5,"layout":null,"isExpand":true,"pid":"e138dacc-a527-6cfe"},{"id":"67253fd0-77d4-e4b2","text":"루트 디렉토리 (package.json 파일과 같은 위치) 에 vue.config.js 파일을 생성","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3195,"y":3851.5,"layout":null,"isExpand":true,"pid":"09dceb1e-cc5f-ee8c"},{"id":"dba746fd-e028-9d69","text":"Vue 에서 proxy를 설정하고 클라이언트 에서 HTTP 요청을 하면 proxy 서버가 웹 서버로 HTTP 요청 을 대신 함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3154,"y":3885.5,"layout":null,"isExpand":true,"pid":"09dceb1e-cc5f-ee8c"},{"id":"b42da2bb-017d-1ae2","text":"API 를 요청받는 서버에서 서버 헤더 중 Access-Control-Allow-Origin 이라는 프로퍼티에 CORS 를 허용해줄, 즉 클라이언트 도메인 주소를 등록해서 해결","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3137,"y":3930.5,"layout":null,"isExpand":true,"pid":"5bfdde1d-4003-03ec"},{"id":"d78092e0-40b6-5fce","text":"Node.js 의 경우 cors 라는 모듈을 활용하여 해결할 수 있음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3270,"y":3998,"layout":null,"isExpand":true,"pid":"5bfdde1d-4003-03ec"},{"id":"46ecb004-719b-1ff5","text":"Vue 컴포넌트는 저장소의 상태 (state) 를 검색할 때 저장소의 상태에 정의된 변수 값의 변경 여부를 바로 알 수 있다","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3054,"y":4177.5,"layout":null,"isExpand":true,"pid":"9acf6b7b-473d-1613"},{"id":"64c4149c-1002-4f98","text":"저장소의 state 에 바로 접근해서 변경하는 것이 아니라, commit를 통해서만 변경을 할 수 있음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":2967,"y":4222.5,"layout":null,"isExpand":true,"pid":"dd3efccb-caff-6840"},{"id":"64388adf-8b52-c718","text":"Vue 컴포넌트에서는 computed 속성을 이용해서 그 변경사항을 항상 추적 가능","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3114,"y":4267.5,"layout":null,"isExpand":true,"pid":"24baeb85-3247-61c8"},{"id":"7ede66dd-dd23-4da1","text":"dist 하위로 빌드됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":3595,"y":4621.5,"layout":null,"isExpand":true,"pid":"19bad94e-ab81-ee31"},{"id":"2ab9d661-1e2e-60d4","text":"history 모드","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4521,"y":2994.5,"layout":null,"isExpand":true,"pid":"e6e4d1df-b8ae-ba42"},{"id":"a5b359f0-9147-3ff1","text":"createApp(App): 최상위 컴포넌트인 App.vue로 app을 생성하고","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":5094,"y":3592.5,"layout":null,"isExpand":true,"pid":"95984a26-f2f7-11a7"},{"id":"fbc13ead-f794-80ce","text":"use(router) 코드를 추가하여 App.vue에서 router가 사용될 수 있도록 추가","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":5094,"y":3626.5,"layout":null,"isExpand":true,"pid":"95984a26-f2f7-11a7"},{"id":"127c774f-87b9-c3d1","text":"mount('#app'): public 폴더의 index.html에 정의되어있는 id=\"app\"인 html element에 App.vue을 마운트 시킴","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":5094,"y":3660.5,"layout":null,"isExpand":true,"pid":"95984a26-f2f7-11a7"},{"id":"5f099e77-3929-dec2","text":"config.plugins.delete('prefetch');","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4744,"y":4010.5,"layout":null,"isExpand":true,"pid":"a8b63d42-4703-17ab"},{"id":"dc6a2480-f29c-5930","text":"import(/\\* webpackPrefetch: true \\*/ './views/About.vue');","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4934,"y":4050,"layout":null,"isExpand":true,"pid":"1537d7b6-d7ea-a84d"},{"id":"e373739c-a75c-1497","text":"이중 중괄호 {{}}","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4542,"y":4359.5,"layout":null,"isExpand":true,"pid":"d0405055-b13c-be3a"},{"id":"4a0a19fc-eee3-469f","text":"v-html 디렉티브","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4642,"y":4393.5,"layout":null,"isExpand":true,"pid":"5d7a076c-3d76-9e9b"},{"id":"c76e10b9-ca5f-5462","text":"input type=text","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4562,"y":4427.5,"layout":null,"isExpand":true,"pid":"937b8c25-1e3f-938c"},{"id":"cf66e311-673b-d978","text":"input type=number","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4562,"y":4461.5,"layout":null,"isExpand":true,"pid":"937b8c25-1e3f-938c"},{"id":"bd3153ac-46d7-1b02","text":"textarea","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4562,"y":4495.5,"layout":null,"isExpand":true,"pid":"937b8c25-1e3f-938c"},{"id":"d43fc454-cf7f-12e4","text":"select","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4562,"y":4529.5,"layout":null,"isExpand":true,"pid":"937b8c25-1e3f-938c"},{"id":"3d08050d-37c9-41e0","text":"input type=checkbox","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4562,"y":4563.5,"layout":null,"isExpand":true,"pid":"937b8c25-1e3f-938c"},{"id":"2d1b5e54-861c-d79f","text":"input type=radio","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4562,"y":4597.5,"layout":null,"isExpand":true,"pid":"937b8c25-1e3f-938c"},{"id":"ee2975ac-abda-577f","text":"attribute","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4562,"y":4648.5,"layout":null,"isExpand":true,"pid":"937b8c25-1e3f-938c"},{"id":"997e80c7-002e-b6d5","text":"img","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4562,"y":4699.5,"layout":null,"isExpand":true,"pid":"937b8c25-1e3f-938c"},{"id":"5cc96d12-d52f-ec32","text":"button disabled","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4562,"y":4733.5,"layout":null,"isExpand":true,"pid":"937b8c25-1e3f-938c"},{"id":"3098c923-7648-19f3","text":"v-bind:class","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4582,"y":4767.5,"layout":null,"isExpand":true,"pid":"e287cafe-f4b7-3528"},{"id":"05444e4f-e50e-cae8","text":"v-bind:style","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4622,"y":4801.5,"layout":null,"isExpand":true,"pid":"0cfb7d29-b84d-e621"},{"id":"c6661e8b-6232-c4f6","text":"조건을 만족하면 그 순간에 html 블록이 생김","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4526,"y":4869.5,"layout":null,"isExpand":true,"pid":"f6a624da-d827-481f"},{"id":"50ecd663-4f17-701d","text":"조건 만족 여부 상관없이 무조건 html 블록이 생성되며, 조건을 만족하면 css display를 통해 보여짐","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4545,"y":4903.5,"layout":null,"isExpand":true,"pid":"bad830da-2c53-eeed"},{"id":"027cde74-51cd-0f6e","text":"v-on:click","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4570,"y":4982.5,"layout":null,"isExpand":true,"pid":"009f3743-4d0c-f6a6"},{"id":"94ee8ba3-8405-ffd7","text":"Select 에서 사용됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4588,"y":5016.5,"layout":null,"isExpand":true,"pid":"36140078-8ad0-34e0"},{"id":"0ee4bca5-fea5-81e6","text":"창 입력 후 엔터","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4564,"y":5050.5,"layout":null,"isExpand":true,"pid":"14f009d9-c2da-567b"},{"id":"8c27c4f1-9063-7146","text":"Vue 인스턴스 내에 정의된 데이터 값과 연관된 다른 데이터를 정의해서 사용할 수 있도록 해줌","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4551,"y":5084.5,"layout":null,"isExpand":true,"pid":"ccf5206e-04a9-7622"},{"id":"905f4d38-a1dd-6525","text":"사용한 데이터 변경시에 자동으로 정의가 갱신됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4551,"y":5129.5,"layout":null,"isExpand":true,"pid":"ccf5206e-04a9-7622"},{"id":"adfe6dda-5a31-42bc","text":"watch에 정의된 데이터 값 하나만을 감시하기 위한 용도로 사용","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4528,"y":5163.5,"layout":null,"isExpand":true,"pid":"1a14cdbf-af0f-a55b"},{"id":"6d31b83d-7e5c-6fd3","text":"데이터 변경이 있기 전까지는 실행되지 않음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4528,"y":5197.5,"layout":null,"isExpand":true,"pid":"1a14cdbf-af0f-a55b"},{"id":"9ac11095-7d73-449f","text":"서버와 데이터를 송수신 할 수 있는 HTTP 비동기 통신 라이브러리","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4921,"y":5237,"layout":null,"isExpand":true,"pid":"344f53f4-55ca-37fb"},{"id":"983f3160-fa09-cf56","text":"main.js에 등록해야함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4567,"y":5276.5,"layout":null,"isExpand":true,"pid":"79b069b2-ec5b-de3f"},{"id":"84649c86-c08e-ffde","text":"html 태그에 ref=\"id\"를 지정하면 Vue 컴포넌트 함수에서 this.$refs를 통해 접근 가능하게 됨","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4940,"y":5480.5,"layout":null,"isExpand":true,"pid":"88443b94-2c35-de3f"},{"id":"b1583ccf-a9f2-7b38","text":"this.$refs.child_component.callFromParent();","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4916,"y":5525.5,"layout":null,"isExpand":true,"pid":"d6029320-ddda-6721"},{"id":"d60df69a-87ca-6eee","text":"this.$refs.child_component.msg = \"변경함\";","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4973,"y":5559.5,"layout":null,"isExpand":true,"pid":"986724b7-90eb-6c18"},{"id":"42177a54-52cf-156f","text":"this.$emit('send-message', this.msg);","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":5024,"y":5593.5,"layout":null,"isExpand":true,"pid":"76f3814b-6bf4-0674"},{"id":"fb63dccb-6aff-ec01","text":"computed에 값 감지 함수 넣기","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4957,"y":5627.5,"layout":null,"isExpand":true,"pid":"9089c422-934c-e88d"},{"id":"9e4092d6-cad8-3cb5","text":"computed 옵션을 이용하면 자식 컴포넌트의 데이터가 변경될 때마다 $emit을 통해 변경된 데이터를 전송하지 않아도 변경된 데이터 값을 항상 확인 가능","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4957,"y":5661.5,"layout":null,"isExpand":true,"pid":"9089c422-934c-e88d"},{"id":"78063ebc-a1cc-5113","text":"Node 에서는 웹서버 역할을 하는 app.js 파일에 corsOption을 추가하고","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":2849,"y":3975.5,"layout":null,"isExpand":true,"pid":"d78092e0-40b6-5fce"},{"id":"16e8c82b-89ff-8dbf","text":"Vue 에서는 axios를 import 한 소스에서 헤더에 [ 'Access-Control-Allow-Origin'] = '*' 옵션을 추가해서 해결 가능","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":2782,"y":4009.5,"layout":null,"isExpand":true,"pid":"d78092e0-40b6-5fce"},{"id":"5c1b6f08-84bd-cce1","text":"\\<div v-html=\"htmlString\">\\</div>","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4768,"y":4393.5,"layout":null,"isExpand":true,"pid":"4a0a19fc-eee3-469f"},{"id":"187c7eed-7fdb-5eaf","text":"v-html 디렉티브","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4685,"y":4427.5,"layout":null,"isExpand":true,"pid":"c76e10b9-ca5f-5462"},{"id":"e5b677fc-898b-ee30","text":"v-model.number 디렉티브(값이 숫자로 관리됨)","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4707,"y":4461.5,"layout":null,"isExpand":true,"pid":"cf66e311-673b-d978"},{"id":"50415f62-6928-35ef","text":"v-model 디렉티브","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4643,"y":4495.5,"layout":null,"isExpand":true,"pid":"bd3153ac-46d7-1b02"},{"id":"7b0dcdd5-7278-82d7","text":"v-model 디렉티브","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4631,"y":4529.5,"layout":null,"isExpand":true,"pid":"d43fc454-cf7f-12e4"},{"id":"47a48fe7-a1d9-f4a7","text":"v-model 디렉티브","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4715,"y":4563.5,"layout":null,"isExpand":true,"pid":"3d08050d-37c9-41e0"},{"id":"7e75d409-e77e-6a1d","text":"v-bind:value","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4692,"y":4597.5,"layout":null,"isExpand":true,"pid":"2d1b5e54-861c-d79f"},{"id":"9c7766c1-d893-b868","text":"v-bind","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4646,"y":4631.5,"layout":null,"isExpand":true,"pid":"ee2975ac-abda-577f"},{"id":"35c14d82-b172-50c9","text":"v-bind 생략하고 : 콜론으로 사용할 수도 있음","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4646,"y":4665.5,"layout":null,"isExpand":true,"pid":"ee2975ac-abda-577f"},{"id":"dcfa141c-040e-1408","text":"v-bind:src","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4621,"y":4699.5,"layout":null,"isExpand":true,"pid":"997e80c7-002e-b6d5"},{"id":"25770b7f-1111-7111","text":"v-bind:disabled","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4686,"y":4733.5,"layout":null,"isExpand":true,"pid":"5cc96d12-d52f-ec32"},{"id":"da0c2b73-a250-d5d1","text":"토글 시에 v-show 보다 자원을 많이 사용함","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4806,"y":4869.5,"layout":null,"isExpand":true,"pid":"c6661e8b-6232-c4f6"},{"id":"7e3bcb10-b5fa-99ba","text":"@keyup.enter=\"submit\"","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4687,"y":5050.5,"layout":null,"isExpand":true,"pid":"0ee4bca5-fea5-81e6"},{"id":"44664fab-7895-a0c8","text":"초기값 + 변경 후","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4850,"y":5129.5,"layout":null,"isExpand":true,"pid":"905f4d38-a1dd-6525"},{"id":"8c587d3c-acf8-a7c5","text":"변경 후만","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4803,"y":5197.5,"layout":null,"isExpand":true,"pid":"6d31b83d-7e5c-6fd3"},{"id":"b5360600-0a09-7a79","text":"내부적으로 select의 value 속성과 바인딩","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4766,"y":4529.5,"layout":null,"isExpand":true,"pid":"7b0dcdd5-7278-82d7"},{"id":"36ec861f-6733-192e","text":"내부적으로 체크박스의 checked 속성 사용(true, false)","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4850,"y":4563.5,"layout":null,"isExpand":true,"pid":"47a48fe7-a1d9-f4a7"},{"id":"c9be155f-b6cf-cbe3","text":"비활성화에 조건을 걸 수 있다","stroke":"rgb(83,175,128)","style":{"background-color":"transparent","color":"rgb(83,175,128)","border-color":"transparent","border-width":0,"padding":[5,8,4,8],"font-size":"12"},"x":4807,"y":4733.5,"layout":null,"isExpand":true,"pid":"25770b7f-1111-7111"}]],"induceData":[],"wireFrameData":[],"relateLinkData":[],"calloutData":[],"opt":{"background":"#263238","fontFamily":"","fontSize":16},"scrollLeft":2550,"scrollTop":4141,"transformOrigin":[3797,4643]}