다국어 처리 이해 ※ i18n(internationalization): 다국어 처리 plugins/i18n.js plugins 폴더를 생성하고 i18n.js를 작성한다. eslint가 에러가 아닌 것을 에러로 표시하기 때문에 /* eslint-disable */을 넣어 해제한다. // src/plugins/i18n.js /* eslint-disable */ export default { install: (app, options) => { // 파라미터에 i18nPlugin, i18nStrings이 각각 들어간다. // globalProperties에 특정 키 $translate를 잡아두면 모든 컴포넌트에서 바로 접근이 가능해진다. app.config.globalProperties.$translate = ..

excel 다운로드 exceljs, file-saver 모듈을 이용해 "excel 다운로드" 기능을 구현한다. exceljs 설치 https://github.com/exceljs/exceljs npm install exceljs file-saver 설치 npm install file-saver index.js exceljs, file-saver를 import 한다. $ExcelFromTable() 함수를 작성한다. // src/mixins/index.js ... import ExcelJS from 'exceljs' import { saveAs } from 'file-saver' export default { ... methods: { ... async $ExcelFromTable( header = [],..

mixin mixin을 import 한 컴포넌트는 mixin 자바스크립트 파일의 export default를 모두 사용할 수 있다. mixin과 컴포넌트의 동일 시점에서의 실행 순서는 mixin이 우선이다. 아래 코드를 작성하여 서버를 실행하면 콘솔 창에 [그림 1]과 같은 결과가 출력된다. mixin src 폴더에서 mixins 폴더를 생성하고 mixin 파일로서 axios.js를 생성한다. // src/mixins/axios.js export default { created() {}, mounted() { console.log('mixin에서 출력') }, unmounted() {}, methods: {} } 컴포넌트 MixinView.vue 파일에 axios.js를 import 한다. // src/..

전역 컴포넌트 main.js에 자식 컴포넌트를 import 하고 app.component를 추가하면 전역 컴포넌트로 사용할 수 있다. 여기에서는 app.component의 첫 번째 파라미터명을 'page-title'로 작성하였는데, 원하는 이름을 쓰면 된다. // src/main.js ... import PageTitle from './components/fragments/PageTitle.vue' // createApp(App).use(store).use(router).mount('#app') // 기존 // 위 코드에 app을 붙여 아래 코드와 같이 분리한다. 이때 import한 컴포넌트를 추가한다. const app = createApp(App) app.use(store) app.use(router..

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 자식 컴포넌트 부모 컴포넌트로부터 데이터를 받기 위해 태그 내에 import한 자식 컴포넌트의 키인 태그와 속성을 작성한다. 속성은 data와 바인딩한다. // src/views/4_reuse/ParentView.vue 부모 컴포넌트에서 부모 컴포넌트의 데이터 값 변경 부모 컴포넌트 자식 컴포넌트에서는 props 받는 값을 직접 수정할 수 없다. 부모 컴포넌트에서만 변경할 수 있다. 버튼 "변경"을 추가한다. // src/views/4_reuse/ParentView.vue 변경 ... 변경 버튼을 클릭했을 때 태그의 속성 값 num1을 변경하고자 한다. // src/views/4_reuse/ParentView.vue ...

Lifecycle Hooks 순서에 따라 뷰가 자동으로 함수들을 호출한다. 어느 시점에 어떤 데이터를 조회할 것인지 설계하느냐에 따라 체감 성능이 달라질 수 있다. setup(composition api) composition api는 Vue.js 3.0에서 밀고 있지만 아직까지는 실무에서 쓰지 않는 기능이다. data와 method를 각각 선언하는 option api 방식을 Vue.js 2.0까지 사용해 왔다. composition api는 새로운 방법으로 option api와 같은 기능을 구현한다. composition api는 각각 따로 존재하는 data와 method를 setup 안에서 관리하여 코드의 가독성을 높이고자 한다. 하지만 실무에서는 data와 method를 명확하기 구분하는 것이 익숙..

checkbox, radio button 적용 19차시 #6에서 작성한 코드에 checkbox(또는 radio button)를 추가하였다. 아래의 코드는 자식 component의 checkbox에 체크된 정보를 부모 component에서는 알지 못하는 상태이다. 부모 component에서 체크된 내용을 알 수 있어야 삭제, 수정 등의 기능을 적용할 수 있다. 부모 component 조회 자식 component {{ th.title }} {{ item[th.key] }} custom event 적용 부모 component 부모 component인 listView.vue의 simple-grid에 커스텀 이벤트 @change-item를 작성한다. 이 이벤트는 changeCheckedValue 함수를 호출하도록..

부트스트랩 설치 터미널에서 프로젝트 폴더로 이동후 2, 3번 설치 npm install bootstrap npm install @popperjs/core main.js 파일에 5, 6번 import import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.js' ※ 외부 라이브러리는 main.js에 import 해야 사용할 수 있다. 부모 component 조회 자식 component {{ th.title }} {{ item[th.key] }} 프로젝트를 거듭 진행하면서 component가 자산으로 축적된다. component를 많이 가지고 있으면 신규 프로젝트 시 개발 생산성을 극대화할 수 있다.